伝えたい想いを自分らしく・・・

Kanamii

スポンサーリンク

STINGER・AFFINGERカスタマイズ

【AFFINGER4】サイドバーの見出しの背景を画像にする方法

投稿日:2017年7月18日 更新日:

ver20170905へのアップデート後に、サイドバーの背景画像の内側下の余白(padding-bottom)を追加しました。

WordPressテーマ「AFFINGER4」のサイドバーの見出しを背景画像で装飾するカスタマイズ方法をご紹介します。

現在の当ブログのサイドバーです。

そして、自分で追加したフッターです。
エリアの幅に合わせて見出しの背景画像の長さが変わるようにカスタマイズしていますが、ちょいと問題が...。

使用する画像選びのポイントも含めて、できるだけ簡単にカスタマイズができるよう順番に説明していきますね。

スポンサーリンク

背景画像選びとアップロード

私の場合、右端にひらひらがあるマスキングテープの画像を右寄せの可変式でどうしても使用したかったので、タブレットとスマホ表示で表示崩れがあります。
対処法は後述しますが、サイドバーやフッターに使用する背景画像は、エリアの幅に合わせた画像(デフォルトは300px)または左寄せで使える画像を選ぶことをお勧めします。

当ブログでお世話になっている素材サイト様です。
▶フリー素材*ヒバナ *  *

画像の用意ができたら、背景画像をFTPで子テーマ内の「images」フォルダへアップロード→画像のパスをメモ帳に準備しておきます。

もしも、FTPでのアップロードの方法がわからない場合は、WordPressダッシュボード→メディア→「新規追加」でアップロードしてもOKです。
その場合は、http://(またはhttps://)で始まる画像URLをコピーしておいてくださいね。

サイドバーの見出しに背景画像を入れる方法

子テーマのstyle.cssに追加したコードが反映されない場合は、キャッシュをクリア及び、追加場所を先に入力しているコードの前に変更して再度お試しください。

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」(子テーマ)を開きます。

ノーカスタマイズの場合

はじめてサイドバーの見出しのカスタマイズをする場合は、下記コードを最下部に追加します。

【画像のパスまたはURL】の部分は、あらかじめメモ帳に準備しておいた画像のパスまたはURLに書き換えます。

  • padding-top→内側の上の余白
  • padding-bottom→内側の下の余白
  • padding-left→内側の左の余白
  • magin-bottom→外側の下の余白

それぞれの数値は画像に合わせて変更可能です。

見出しの文字サイズ変更のカスタマイズを行っている場合

【AFFINGER4】サイドバーの見出しの文字サイズを変更する方法

WordPressテーマ「AFFINGER4」のサイドバーの見出し。 日本語の場合はそうでもないけど、アルファベットにするとちょっと小さいかな?...。 ということで、今回は見出しの文字サイズを変更す ...

続きを見る

上記のカスタマイズを参考にしてくださった方は、style.cssに追加しているコードの編集を行ってください。

【元コード】

【変更後】

【画像のパスまたはURL】の部分は、あらかじめメモ帳に準備しておいた画像のパスまたはURLに書き換えます。

  • font-size→見出しの文字サイズ
  • line-height→見出しの行の高さ
  • padding-top→内側の上の余白
  • padding-bottom→内側の下の余白
  • padding-left→内側の左の余白
  • magin-bottom→外側の下の余白

それぞれの数値は画像に合わせて変更可能です。

追加したフッターの見出しに背景画像を入れる方法

【STINGER PLUS】3カラムのフッターを追加する方法(背景色指定or背景画像使用)

AFFINGER4でのカスタマイズ方法を追加しました。 コードの追加場所を「子テーマ」のfunctions.phpに変更しました。(テーマのアップデートの際の再編集は必要なくなりました) 新たにリリー ...

続きを見る

上記のカスタマイズを参考にしてくださった方は、style.cssに追加しているコードの編集を行ってください。

【元コード】

【変更後】

【画像のパスまたはURL】の部分は、あらかじめメモ帳に準備しておいた画像のパスまたはURLに書き換えます。
color:#ff6893;の部分も、お好きなカラーコードに変更してください。

  • font-size→見出しの文字サイズ
  • line-height→見出しの行の高さ
  • padding-top→内側の上の余白
  • padding-left→内側の左の余白
  • padding-bottom→内側の下の余白

それぞれの数値は画像に合わせて変更可能です。

フッターのリンク文字の左余白調整

こちらのカスタマイズは必要に応じて参考になさってください。

変更前は、リンク文字が左側にずれたように見えます。

変更後は、見出しの文字と左側の余白を合わせています。

【元コード】

【変更後】

どうしても右寄せで背景画像を使いたいとき

追加するコードの中にある、

上記の「left」「right」に変更します。

こうすると、タブレットとスマホの横表示のときに背景画像だけが右側に寄ってしまうんですね。
なので、タブレットのみ背景画像を非表示にするコードを追加しています。

スマホの横表示は、崩れたままです。
横にして見る方がいませんように...(笑)

一応ですね。
コードを載せておきます。

以上、AFFINGER4のサイドバーとフッターの見出しを背景画像で装飾するカスタマイズ方法をご紹介しました。
見出しが変わるとサイトの雰囲気がなんとなく華やかになりますよね。

style.cssの編集のみで手軽に挑戦できますので興味のある方はぜひお試しください♪

最後までお付き合いくださりありがとうございます。

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-STINGER・AFFINGERカスタマイズ

スポンサーリンク

Copyright© Kanamii , 2017 All Rights Reserved Powered by AFFINGER4.