WordPressテーマ「AFFINGER4」の記事タイトル上のカテゴリとフリーボックスウィジェットの背景を画像にする方法をご紹介します。
-----投稿ページ-----
背景と押しピンの2つの画像を入れています。
-----トップページ・アーカイブページ----
AFFINGER4 専用子テーマ「JET」使用時のキャプチャですが、通常の一覧ページにも表示されます。
当ブログでは、背景画像を見出しやフッターに合わせていますが....
記事タイトル上のカテゴリは、なんだか「もや~ん」として微妙な印象。
フリーボックスウィジェットは、記事エリアにも反映されますので、サイドバー以外だとやたら賑やかになります(笑)
ということで、お役に立てる内容ではないかもしれませんが、自身の備忘録の意味も含めてカスタマイズ方法を記録していきます。
下記は、当ブログでお世話になっている素材サイト様です。
素材サイトフリー素材*ヒバナ * *
また、記事タイトル上のカテゴリの背景色を各カテゴリ別にカラー指定する方法は、AFFINGER4公式サイトのこちらのページ内で紹介されています。
スポンサーリンク
Contents
事前準備
背景に使用する画像をFTPで子テーマ内の「images」フォルダにアップロード。
画像のパスをメモ帳に準備しておいてください。※推奨
1 |
/wp-content/themes/affinger4-child/images/【画像ファイル名】 |
【AFFINGER4 専用子テーマ「JET」をお使いの場合】
1 |
/wp-content/themes/affinger4-jet-child/images/【画像ファイル名】 |
もしも、FTPでのアップロード方法がわからない場合は、メディアの追加で画像をアップロードしてもOKです。
その場合は、http://(またはhttps://)で始まる画像URLをメモ帳にコピーしておいてくださいね。
投稿ページの記事タイトル上のカテゴリ
WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」(子テーマ)を開き、下記コードのどちらかを追加します。
背景画像のみ
1 2 3 4 5 |
/*投稿記事タイトル上カテゴリ背景画像 ここから*/ .st-catgroup .catname { background-image:url("【画像のパスまたはURL】"); background-repeat:repeat; } |
※【画像のパスまたはURL】の部分は、あらかじめ準備しておいた画像のパスまたは画像URLに書き換えてください。
背景画像+追加画像(押しピン)
1 2 3 4 5 6 7 8 9 10 11 12 |
/*投稿記事タイトル上カテゴリ背景画像 ここから*/ .st-catgroup .catname { background-image: url("【画像のパスまたはURL(押しピン)】"), url("【画像のパスまたはURL(背景)】"); background-repeat: no-repeat, repeat; background-position: left 5px center; padding-left:25px; } |
※【画像のパスまたはURL】の部分は、あらかじめ準備しておいた画像のパスまたは画像URLに書き換えてください。
left 5px center→押しピン画像の位置
padding-left:25px→左の余白
いずれも画像サイズに合わせて変更可能です。
文字色と背景色は、WordPressダッシュボード→外観→カスタマイズ→各テキストとhタグ(見出し)→「記事タイトル上のカテゴリ」で変更できます。
トップページ・サイドバー・アーカイブページのカテゴリ
AFFINGER管理→「記事一覧・関連記事一覧などにカテゴリを表示する」にチェックを入れている場合に、記事タイトルの上に表示されるカテゴリの背景を画像にするカスタマイズです。
WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」(子テーマ)に下記コードを追加します。
1 2 3 4 5 |
/*一覧表示-タイトル上カテゴリ背景画像 ここから*/ .st-catgroup.itiran-category .catname { background-image:url("【画像のパスまたはURL】"); background-repeat:repeat; } |
※【画像のパスまたはURL】の部分は、あらかじめ準備しておいた画像のパスまたは画像URLに書き換えてください。
フリーボックスウィジェットのカスタマイズ
WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」(子テーマ)に下記コードを追加します。
1 2 3 4 5 |
/*フリーボックスウィジェット背景画像 ここから*/ .freebox { background-image:url("【画像のパスまたはURL】") !important; background-repeat:repeat; } |
※【画像のパスまたはURL】の部分は、あらかじめ準備しておいた画像のパスまたは画像URLに書き換えてください。
文字色と背景色は、WordPressダッシュボード→外観→カスタマイズ→オプションカラー→「フリーボックスウィジェット」で変更できます。
以上、AFFINGER4の記事タイトル上のカテゴリとフリーボックスウィジェットの背景を画像にする方法をご紹介しました。
最後までお付き合いくださりありがとうございます。