A-key function 大学生が始めるべきネットビジネス起業

大学生のうちに始めるべきネットビジネス・資格などを紹介してます。

stinger5のカテゴリーをカスタマイズ出来ませんかね?段差とか間とかさ

      2016/02/27

費用:0円 時間:10分

まあ、ちょっと下の画像をご覧ください。

今の状況

このサイトのサイドバーのカテゴリー一覧なんですけどね、超絶分かりづらいですよね。

で、分かりづらい理由を書いてみると。

  1. 各カテゴリーの間に隙間がない。
  2. 親要素と子要素の区別がない、階層がない

だと思いますね。

で一つずつ解決していきましょう!

1.各カテゴリーに間に隙間がない。

方法は結構簡単です。

sponsored link

①管理画面にある「サイトをカスタマイズ」をクリックし、カスタマイズ画面に移る。

サイトをカスタマイズ

②ウィジェット→サイドバーウィジェット→カテゴリーの順にクリックする

③カテゴリーのなかに存在する、「階層を表示」にチェックを入れる

ウィジェット④「保存して公開」をクリック

これで、以下の通り親要素ごとにカテゴリーの間が生じます。

カテゴリーの間隔

 

2.親要素と子要素に区別をつける、階層を表す。

 

これも簡単です。

仕組みとしては、子要素だけ右にずらすということで。

①wordpressの管理画面の「外観」タブ→「テーマの編集」を選択します。

テーマの編集

②テンプレートの下にあるスタイルの欄から「スタイルシート」を選びましょう。

スタイルシート

 

③ul.childrenの部分を書き換える

もとネタ

これをスクロールして探してください。

そこで、

padding: 0px;の部分を

padding-left: 20px; に書き換えましょう

これはどういうことかと言うと、

padding

padding-leftとはカテゴリーの名前を書いてあるゾーンから左側の空白の長さを規定する名前です。

何もしなければ、0pxとなっているのですが、20pxだけ左に空白を作ると、カテゴリーの名前は右寄りに表示されることになります。

この規定を子要素だけに適用させると、親要素に対して子要素だけが右に20pxずれ、階層を表すというわけです。

で、書き換えて、下の「ファイルを更新」ボタンをクリックすると・・・

階層表示

となるわけです。

ついでに書き加えると、右のずれが足らないとか大きいとかっていう時は、20の数字を書き換えるとうまくいきます。

 

 

 

 - サイト作成 ,

adsen

adsen

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事