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

Kanamii

スポンサーリンク

STINGER・AFFINGERカスタマイズ

【AFFINGER4】記事タイトル上のカテゴリとフリーボックスの背景を画像にする方法

投稿日:

WordPressテーマ「AFFINGER4」の記事タイトル上のカテゴリとフリーボックスウィジェットの背景を画像にする方法をご紹介します。

-----投稿ページ-----
背景と押しピンの2つの画像を入れています。

-----トップページ・アーカイブページ----
AFFINGER4 専用子テーマ「JET」使用時のキャプチャですが、通常の一覧ページにも表示されます。

-----サイドバー(新着記事)-----

-----フリーボックス(サイドバー)-----

当ブログでは、背景画像を見出しやフッターに合わせていますが....

記事タイトル上のカテゴリは、なんだか「もや~ん」として微妙な印象。
フリーボックスウィジェットは、記事エリアにも反映されますので、サイドバー以外だとやたら賑やかになります(笑)

ということで、お役に立てる内容ではないかもしれませんが、自身の備忘録の意味も含めてカスタマイズ方法を記録していきます。

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

また、記事タイトル上のカテゴリの背景色を各カテゴリ別にカラー指定する方法は、AFFINGER4公式サイトのこちらのページ内で紹介されています。

スポンサーリンク

事前準備

背景に使用する画像をFTPで子テーマ内の「images」フォルダにアップロード。
画像のパスをメモ帳に準備しておいてください。※推奨

【AFFINGER4 専用子テーマ「JET」をお使いの場合】

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

投稿ページの記事タイトル上のカテゴリ

子テーマのstyle.cssに追加したコードが反映されない場合は、ブラウザーのキャッシュをクリアをお試しください。

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」(子テーマ)を開き、下記コードのどちらかを追加します。

背景画像のみ

※【画像のパスまたはURL】の部分は、あらかじめ準備しておいた画像のパスまたは画像URLに書き換えてください。

背景画像+追加画像(押しピン)

※【画像のパスまたはURL】の部分は、あらかじめ準備しておいた画像のパスまたは画像URLに書き換えてください。
left 5px center→押しピン画像の位置
padding-left:25px→左の余白
いずれも画像サイズに合わせて変更可能です。

文字色と背景色は、WordPressダッシュボード→外観→カスタマイズ→各テキストとhタグ(見出し)→「記事タイトル上のカテゴリ」で変更できます。

kanamii-2422-2

トップページ・サイドバー・アーカイブページのカテゴリ

AFFINGER管理→「記事一覧・関連記事一覧などにカテゴリを表示する」にチェックを入れている場合に、記事タイトルの上に表示されるカテゴリの背景を画像にするカスタマイズです。

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」(子テーマ)に下記コードを追加します。

※【画像のパスまたはURL】の部分は、あらかじめ準備しておいた画像のパスまたは画像URLに書き換えてください。

フリーボックスウィジェットのカスタマイズ

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」(子テーマ)に下記コードを追加します。

※【画像のパスまたはURL】の部分は、あらかじめ準備しておいた画像のパスまたは画像URLに書き換えてください。

文字色と背景色は、WordPressダッシュボード→外観→カスタマイズ→オプションカラー→「フリーボックスウィジェット」で変更できます。

kanamii-2424-2

以上、AFFINGER4の記事タイトル上のカテゴリとフリーボックスウィジェットの背景を画像にする方法をご紹介しました。

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

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

Twitter で

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

-STINGER・AFFINGERカスタマイズ

スポンサーリンク

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