Kanamii

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

kanamii-2227-1

スポンサーリンク

STINGERカスタマイズ

STINGER PLUS 見出し(h2、h3)のCSSカスタマイズ~背景色指定・背景画像使用・ステッチ風~

2016/10/05

7月に1度区切りをつけた、カテゴリー「STINGERカスタマイズ」の記事更新。

区切りをつけたはずなのになかなか終わりません。
やりたいことが次々と・・。

もしかしたら?

永遠に終わらないかもしれませんね。(笑)

いつも温かくお付き合い下さりありがとうございます。

さてさて。

前回のフッター追加のカスタマイズに続いて、今回はSTINGER PLUSの見出し(h2、h3)の以下、3種のカスタマイズ方法をご紹介したいと思います。

カスタマイズ【1】

見出し(h2)は、背景にフッターとお揃いのパターン背景画像を使って、ステッチ風のラインで囲んでいます。

kanamii-2227-2-2

カスタマイズ【2】

さらに、もう少しシンプルに。画像を使わず、お好みの背景色を指定する方法もご一緒に。

kanamii-2227-3

カスタマイズ【3】

見出し(h3)は、背景(左端)にワンポイントの画像を使って、ステッチ風のアンダーラインを入れました。

kanamii-2227-4

フッター同様、パターン背景画像は下記サイトよりお借りしています。
▶フリー素材*ヒバナ *  *

ありがとうございます。

スポンサーリンク

事前準備

STINGERの設定確認

見出し(h2、h3)のカスタマイズを行う場合は、WordPressダッシュボード→外観→カスタマイズ→「テキスト及び見出し色」→下記2項目のチェックを外しておきます。

  • H2タグ:「吹き出しデザインに変更」
  • H3タグ:「下線を左ボーダーに変える」

kanamii-2227-6

次に、見出し(h3)のカスタマイズを行う場合は、STINGER管理→投稿・固定記事設定→「H3タグにチェックマークを適応する」のチェックも外します。

kanamii-2227-7

背景画像をアップロード

見出しの背景に画像を使用する場合は、事前準備として背景画像をFTPで子テーマ内の「images」フォルダへアップロード→画像のパスをメモ帳に準備しておきます。(当ブログでは、h2→パターン背景画像、h3→小花のワンポイント画像を使用)

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

FTPクライアントソフト「FFFTP」の導入方法と使い方は、下記ページで説明しています。

WordPressのバックアップ① ~FFFTP(FTPS対応版)のインストールと接続設定・基本操作方法~ - ゼロからのWordPress入門【16】

カラーピッカーを用意

見出しの背景に画像を使用してステッチ風のCSSカスタマイズをする場合には、ブラウザ上のカラーコードを取得するためのカラーピッカーが必要になります。(背景色を指定する場合は不要)

下記ページ内で、Google Chromeの拡張機能「Eye Dropper」(無料)の使い方をご紹介しています。

WordPressカスタマイズに役立つ2大アイテム!「ピクセル定規」と「Eye Dropper」

見出し(h2)のカスタマイズ方法

全てのテーマファイルの編集は「子テーマ」で行うことをおすすめします。
親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。
▶子テーマについて
また、子テーマのstyle.cssに追加したコードが反映されない場合は、追加場所を先に入力しているコードの前に変更して再度お試しください。

背景画像使用+ステッチ風ラインのCSSカスタマイズ

kanamii-2227-2-2

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に下記コードを追加します。
1行ごとに順番に解説を入れておきますので、ご自由に数値を変更してくださいね。

  • 背景画像を指定:【背景パターン画像のパスまたはURL】の部分は、あらかじめコピーしておいた画像のパスまたはURLに変更してください。
  • 背景画像を要素内で繰り返し表示
  • 文字サイズを20pxで指定
  • 行の高さを27pxで指定
  • 要素外側の余白を、上(40px)右(0)下(40px)左(0)で指定
  • 要素内側の余白を、上(10px)右(20px)下(10px)左(20px)で指定
  • ステッチ風ライン:太さ2pxの破線を指定、#ff6893の部分は、お好きなカラーコードに変更してください。
  • 4つのコーナーを5pxの角丸に指定

ここまでで、下記のような状態になっていることを確認してください。

kanamii-2227-5

ステッチ風ラインの外側に「box-shadow」プロパティを使って影をつけるために、画像上のカラーコードをあらかじめ準備しておいたカラーピッカーを使って取得します。

続いて、下記コード内の #**** の部分を取得したカラーコードに書き換えてから、先ほどのコードに追加して完了となります。

追加後のCSSコードはこのようになります。

※さらに見出しのフォントカラーを変更したい場合は、下記コードを最後の「}」の上に追加してくださいね。
#****の部分は、お好きなカラーコードに書き換えてください。

背景色の指定+ステッチ風ラインのCSSカスタマイズ

kanamii-2227-3

こちらは、背景画像ではなく、お好みの背景色(カラーコード)を指定する方法です。
WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に下記コードを追加します。

  • 背景色を指定:#eeeの部分は、お好きなカラーコードに変更してください。
  • 文字サイズを20pxで指定
  • 行の高さを27pxで指定
  • 要素外側の余白を、上(40px)右(0)下(40px)左(0)で指定
  • 要素内側の余白を、上(10px)右(20px)下(10px)左(20px)で指定
  • ステッチ風ライン:太さ2pxの破線を指定、#ff6893の部分は、お好きなカラーコードに変更してください。
  • 4つのコーナーを5pxの角丸に指定
  • ラインの周りの影のカラーを指定:#eeeの部分は、指定した背景色と同じカラーコードに変更してください。

見出し(h3)ワンポイント画像+ステッチ風ラインのCSSカスタマイズ

kanamii-2227-4

左端(スマホ表示では左上)にワンポイントの背景画像を使用、ステッチ風のアンダーラインを入れるカスタマイズ方法です。

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

  • 背景画像を指定:【背景画像のパスまたは画像URL】の部分は、あらかじめコピーしておいた画像のパスまたはURLに変更してください。
  • 背景画像の繰り返しなし
  • 画像位置の指定:左から0px、上から10pxで指定。こちらの数値はお使いの画像サイズによって調整してください。
    left center(左中央)、left top(左上)のような指定も可能です。
  • 文字サイズを20pxで指定
  • 行の高さを27pxで指定
  • 文字のカラーを指定:#000の部分はお好みのカラーコードに変更可能です。
  • 要素外側の余白を、上(10px)右(0)下(25px)左(0)で指定
  • 要素内側の余白を、上(10px)右(10px)下(10px)左(30px)で指定、左の余白は画像サイズに合わせて変更してください。
  • ステッチ風ライン:太さ2pxの破線を要素の下に指定、#ff6893の部分は、お好きなカラーコードに変更してください。

以上、追加の追加の追加の追加の追加。5つめの追加カスタマイズ。(笑)
STINGER PLUS の見出し(h2、h3)の3種のカスタマイズ方法をご紹介しました。

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

▶STINGER PLUS+ カスタマイズ全記事一覧へ

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

Twitter で

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

-STINGERカスタマイズ