WordPressテーマ「AFFINGER4」のサイドバーの見出しを背景画像で装飾するカスタマイズ方法をご紹介します。
現在の当ブログのサイドバーです。
そして、自分で追加したフッターです。
エリアの幅に合わせて見出しの背景画像の長さが変わるようにカスタマイズしていますが、ちょいと問題が...。
使用する画像選びのポイントも含めて、できるだけ簡単にカスタマイズができるよう順番に説明していきますね。
スポンサーリンク
Contents
背景画像選びとアップロード
私の場合、右端にひらひらがあるマスキングテープの画像を右寄せの可変式でどうしても使用したかったので、タブレットとスマホ表示で表示崩れがあります。
対処法は後述しますが、サイドバーやフッターに使用する背景画像は、エリアの幅に合わせた画像（デフォルトは300px）または左寄せで使える画像を選ぶことをお勧めします。
当ブログでお世話になっている素材サイト様です。
▶フリー素材*ヒバナ * *
画像の用意ができたら、背景画像をFTPで子テーマ内の「images」フォルダへアップロード→画像のパスをメモ帳に準備しておきます。
|
1 |
/wp-content/themes/affinger4-child/images/【画像ファイル名】 |
もしも、FTPでのアップロードの方法がわからない場合は、WordPressダッシュボード→メディア→「新規追加」でアップロードしてもOKです。
その場合は、http://（またはhttps://）で始まる画像URLをコピーしておいてくださいね。
サイドバーの見出しに背景画像を入れる方法
WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」（子テーマ）を開きます。
ノーカスタマイズの場合
はじめてサイドバーの見出しのカスタマイズをする場合は、下記コードを最下部に追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*サイドバー見出し背景画像 ここから*/ #side aside h4 { background-image: url("【画像のパスまたはURL】"); background-repeat: no-repeat; background-position: left; padding-top:20px; padding-bottom:10px; padding-left:20px; margin-bottom:15px; } |
※【画像のパスまたはURL】の部分は、あらかじめメモ帳に準備しておいた画像のパスまたはURLに書き換えます。
- padding-top→内側の上の余白
- padding-bottom→内側の下の余白
- padding-left→内側の左の余白
- magin-bottom→外側の下の余白
それぞれの数値は画像に合わせて変更可能です。
見出しの文字サイズ変更のカスタマイズを行っている場合
-
-
【AFFINGER4】サイドバーの見出しの文字サイズを変更する方法
WordPressテーマ「AFFINGER4」のサイドバーの見出し。 日本語の場合はそうでもないけど、アルファベットにするとちょっと小さいかな？...。 ということで、今回は見出しの文字サイズを変更す ...
上記のカスタマイズを参考にしてくださった方は、style.cssに追加しているコードの編集を行ってください。
【元コード】
|
1 2 3 4 5 |
/*サイドバー見出しサイズ ここから*/ #side aside h4 { font-size:17px !important; line-height:26px !impoetant; } |
【変更後】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/*サイドバー見出しサイズ+背景画像 ここから*/ #side aside h4 { font-size:17px !important; line-height:26px !important; background-image: url("【画像のパスまたはURL】"); background-repeat: no-repeat; background-position: left; padding-top:20px; padding-bottom:10px; padding-left:20px; margin-bottom:15px; } |
※【画像のパスまたはURL】の部分は、あらかじめメモ帳に準備しておいた画像のパスまたはURLに書き換えます。
- font-size→見出しの文字サイズ
- line-height→見出しの行の高さ
- padding-top→内側の上の余白
- padding-bottom→内側の下の余白
- padding-left→内側の左の余白
- magin-bottom→外側の下の余白
それぞれの数値は画像に合わせて変更可能です。
追加したフッターの見出しに背景画像を入れる方法
-
-
【STINGER PLUS】3カラムのフッターを追加する方法（背景色指定or背景画像使用）
AFFINGER4でのカスタマイズ方法を追加しました。 コードの追加場所を「子テーマ」のfunctions.phpに変更しました。（テーマのアップデートの際の再編集は必要なくなりました） 新たにリリー ...
上記のカスタマイズを参考にしてくださった方は、style.cssに追加しているコードの編集を行ってください。
【元コード】
|
1 2 3 4 5 6 7 |
#footer_w h4 { font-family:"Josefin Sans", sans-serif; margin:20px 0 20px 0; color:#ff6893; font-size:17px; line-height:26px; } |
【変更後】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#footer_w h4 { font-family:"Josefin Sans", sans-serif; margin:20px 0 20px 0; color:#ff6893; font-size:17px; line-height:26px; background-image: url("【画像のパスまたはURL】"); background-repeat: no-repeat; background-position: left; padding-top:20px; padding-left:20px; padding-bottom:10px; } |
※【画像のパスまたはURL】の部分は、あらかじめメモ帳に準備しておいた画像のパスまたはURLに書き換えます。
color:#ff6893;の部分も、お好きなカラーコードに変更してください。
- font-size→見出しの文字サイズ
- line-height→見出しの行の高さ
- padding-top→内側の上の余白
- padding-left→内側の左の余白
- padding-bottom→内側の下の余白
それぞれの数値は画像に合わせて変更可能です。
フッターのリンク文字の左余白調整
こちらのカスタマイズは必要に応じて参考になさってください。
変更前は、リンク文字が左側にずれたように見えます。
変更後は、見出しの文字と左側の余白を合わせています。
【元コード】
|
1 2 3 4 |
#footer_w li { list-style:none; margin-left:-30px; } |
【変更後】
|
1 2 3 4 |
#footer_w li { list-style:none; margin-left:-10px; } |
どうしても右寄せで背景画像を使いたいとき
追加するコードの中にある、
|
1 2 |
background-position: left; |
上記の「left」を「right」に変更します。
こうすると、タブレットとスマホの横表示のときに背景画像だけが右側に寄ってしまうんですね。
なので、タブレットのみ背景画像を非表示にするコードを追加しています。
スマホの横表示は、崩れたままです。
横にして見る方がいませんように...(笑)
一応ですね。
コードを載せておきます。
|
1 2 3 4 5 6 7 8 9 10 |
/*タブレットのみサイドバーとフッターの見出しの背景画像を非表示にする*/ @media print, screen and (min-width:600px) and (max-width:960px) { #footer_w h4 { background:none; } #side aside h4 { background:none; } } |
以上、AFFINGER4のサイドバーとフッターの見出しを背景画像で装飾するカスタマイズ方法をご紹介しました。
見出しが変わるとサイトの雰囲気がなんとなく華やかになりますよね。
style.cssの編集のみで手軽に挑戦できますので興味のある方はぜひお試しください♪
最後までお付き合いくださりありがとうございます。