AFFINGER4 WordPress

AFFINGER4の見出しカスタマイズ

更新日:

ワードプレスのテーマ【AFFINGER4】を使い、かわいいサイトづくりに挑戦!

今回は見出しのカスタマイズについて記載します。

カスタマイズ方法

AFFINGER4では、見出しはスタイルシート(CSS)を触らなくても《外観→カスタマイズ》から変更できます。

文字の大きさや色、背景色の有無、吹き出し風の見出しから背景画像の設置まで、CSSの書き方がわからない人でも簡単にカスタマイズできますよ。

AFFINGER4見出しカスタマイズ

記事タイトル(見出し1)のデザイン&設定

見出し1には、文字の下にラインを配置しました。

見出し1デザイン

ラインの素材は、「FREE LINE DESIGN」さんよりダウンロードさせていただきました。

カスタマイズ画面より、「記事タイトル」の場所にダウンロードした画像をアップロードします。

AFFINGER4見出しカスタマイズ

今回は背景ではなく文字の下の「ライン」の画像ですので、画像の縦位置を「下」にし、「背景画像を繰り返さない」にチェックを入れるとOKです。

その他設定

  • 文字の大きさ:32px
  • 文字色:#333333
  • 左右の余白:10px
  • 上下の余白:10px

見出し2のデザイン&設定

背景にドット柄のマスキングテープ素材を配置しました。

見出し2デザイン

素材は、MASKING TAPE x LINE さんよりダウンロードさせていただきました。

AFFINGER4見出しカスタマイズ

今回は、背景画像として文字の後ろに配置しますので、縦位置は「真ん中」を選びます。

その他設定

  • 文字の大きさ:24px
  • 文字色:#ff6893
  • 背景色:#f9f8f4
  • 吹き出しデザインに変更
  • 左右の余白:10px
  • 上下の余白:10px

見出し3のデザイン&設定

見出し3は、文字の下にドット柄のラインを設置。

ラインの素材は、「FREE LINE DESIGN」さんよりダウンロードさせていただきました。

見出し3デザイン

これも、背景ではなく文字の下の「ライン」の画像ですので、画像の縦位置を「下」にし、「背景画像を繰り返さない」にチェックを入れます。

AFFINGER4見出しカスタマイズ

その他設定

  • 文字色:#ff6893
  • 左右の余白:10px
  • 上下の余白:10px

見出し4のデザイン&設定

見出し4には背景画像は設置せず、罫線のみ表示させております。
見出し4デザイン
AFFINGER4見出しカスタマイズ

その他設定

  • 文字色:#ff6893
  • ボーダー(罫線)色:#ff6893
  • 左右の余白:10px
  • 上下の余白:10px

まとめ

以上が見出しの設定&カスタマイズ方法です。

サイト全体の色味をピンクに設定していますので、ラインや背景画像もピンク系のものをチョイスしています。

AFIINGER4なら、簡単に自分仕様にカスタマイズできますので、ぜひTryしてみてくださいね。

AFFINGER4

稼ぐサイトの設計図-AFFINGER4公式ガイド

投稿者プロフィール

七星 奈津子
七星 奈津子

ブログ集客プロデューサー/ライター/コラムニスト


読者(消費者)との関係をつくり、集客や販売につなげる発信で5年10年後もお客様に愛される会社・お店づくりのためのメディアづくりをサポートしている。


これまで発信してきたもの、持っているコンテンツをわかりやすく見やすい形に編集してコーディネイトすることを得意とする。またコミュニケーションの中で、その人の中にある光るもの・強みを引き出すことも得意。


講座や個別サポートでは、その人ならではの魅力を引き出し、わかりやすく伝わりやすい言葉にして発信するお手伝いをしている。


▶︎詳しいプロフィールはこちらから

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

Twitter で

-AFFINGER4, WordPress
-

Copyright© 7stars725.com , 2018 All Rights Reserved.