ブログ/HP作成

AFFINGER5 サイドバー見出しに余白をつける

投稿日:

 

今回は私が使っているWordpressテーマ「AFFINGER5・WING」のカスタマイズについて。

 

色選びから、配置から簡単にデザインできるのがAFFINGERの良いところなのですが、微妙なんだけど気になる部分を直しました。

 

なおテーマを編集する際は必ずバックアップを取ってから行ってくださいね!

 

今回のカスタマイズBefore After

通常だとこのように表示されます。

 

ちょっと狭いなと思いまして、今回このようにカスタマイズしました。

 

微妙です(笑)微妙ですが「タグ」の部分を比べると上下に隙間ができました。

前ほどのパツンパツン感は消えた。

 

サイドバー見出しの上下に余白を作る。

今回のコードは親テーマのスタイルシートから「/* サイドバーの見出し */」の部分を子テーマにコピペして修正しました。

 

変更したのはmargin:15px 0 15px;の部分です。

 

親テーマでは「margin-bottom:15px;」となっています。

margin-bottomとは下のマージンを指定するプロパティ。カスタマイズ前の画像を見ると見出しの下には余白があります。

 

今回は下だけでなく上下で余白を作りたかったので「margin」で以下のコードにしました。

margin:15px 0 15px;

意味としては

見出し外の余白:上15px 左右0 下15px

 

15pxだと微妙でしたので私はあとで20pxに変更しました。ゆとりが欲しい分数字を上げてください。

 

ファイルを更新しても変化がない場合はキャッシュをクリアしてからもう一度サイトを開いて見てください。

 

ちょいとmarginのお勉強

 

上下しかいじらないんだから「左右0」なんていらないんでないのかい?

margin:15px 15px;という2つの値で表示すると、上下、左右という認識をされます。

 

つまり

  • 値1つ [上下左右]
  • 値2つ [上下][左右]
  • 値3つ [上][左右][下]
  • 値4つ [上][右][下][左] 上から時計周り

という設定ができます。

 

今回は上下に余白を作りたいので値を3つにして、左右はいじらないから「0」にしました。

数字の間にはスペースキーを打って空けます。

 

見出しの中にも余白が欲しい。

見出しの外ではなく内側、文字の周りにも余白が欲しい場合は、テーマの編集の必要はありません。AFFINGER5のカスタマイズから行えます。

WordPress「外観」→「カスタマイズ」→「各テキストとhタグ」のを開きます。

 

ウィジェットタイトル(サイドバー)の項目を見ると「左」と「上下」の余白を設定することができます。

 

Before

細すぎる見出しも文字の上下に余白を取ることで

 

After

あまり大きすぎると他のボタンと似てしまうので上下の余白は5pxにしました。

見出し周りも余白を入れたのでだいぶ窮屈な感じが取れたと思います。

 

まとめ

サイドバーの見出しのカスタマイズをするとしたら見出しの内側と外側でやることが変わりますので今回まとめておきました。

 

通常のカスタマイズだと色や見出しのデザインに頭を悩ませることが多いので、余白があるとこんなにも変わるのかって変化を後回しにしてしまうのですが、

ちょっとサイトが窮屈だなと思ったら、余白調整試してみてくださいね。

 

ma-you(マユ)(@aromusica)でした。

アディオス!

 

関連記事



  • この記事を書いた人
  • 最新記事
マユ

マユ

元バンドマンが10年のブランクを経て音楽活動をネットで再開し、DTMで楽曲制作したり、音楽ブログ運営してます。

-ブログ/HP作成
-

Copyright© るしるし , 2018 All Rights Reserved Powered by AFFINGER5.