*

Stinger8のカスタマイズ 見出しタグh3とh4の装飾の変更

公開日: : 最終更新日:2018/10/04 WordPress ,

WordPressにStinger8を導入してから、前回はフォントサイズの変更をしてみました。
あまりにシンプルで、知識のない私には少し難しいのかも・・なんて思いながらも、はじめたからにはやるっきゃない!と、今度は見出しのhタグの装飾の変更をしてみました。

スポンサーリンク

h2・h3・h4など見出しタグは基本かなりシンプルなものです。

h2タグはこのままでいいかなと思ったのですが、h3とh4は変更したいと思いやってみました。

hタグの変更のしかたと、タグにアイコンをいれる方法です。

元々のhタグは図のようなものでした。

h3タグの変更

波空
h3のシンプルな下線だけのものにアイコンを追加してみました。
アイコンフォントは『Font Awesome』を使用しました

Font Awesomeとは?

波空
ウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスなんです。
猫にゃん
Webアイコンフォントってなに?
波空
ウェブページ上で文字と同じように表示できるアイコンのことだよ(^^)
猫にゃん
ふむ。webで使える絵文字ということかにゃ
波空
画像でアイコンを貼るのと違って、拡大してもぼやけないし、色もサイズも簡単に変えることができるのね。
猫にゃん
ほぉ、それは便利だにゃ

FontAwesomeを使う準備

波空
FontAwesomeを使うために少しだけ準備がいります。
猫にゃん
なんか面倒だにゃん
波空
そんなでもないよ。ちょっとStinger8のテーマに追加するだけ。
猫にゃん
またまた、CSSとかいじるんだヨネ・・・大丈夫かにゃ。
波空
1行加えるだけだから、大丈夫(^^;
やり方は次の通りね

●CDNという「専用のサーバー上にある画像やフォントなどのデータ」を読み込んで自分のWebサイトに表示させる仕組みを使います。

つまりアイコンをダウンロードして自分のサーバーにアップロードしなくても使うことができるんですね。

WordPressのダッシュボードで

「外観」⇒「テーマの編集」へいきます。

右上の編集するテーマを選択:がStinger8 child になっていると思いますので、

▼をクリックして「Stinger8」(親テーマ)にします。

「選択」をクリックすると右側にテーマファイルの一覧が表示されます。

テーマファイルの「テーマヘッダー(header.php)」をクリックします。

次のコードを<head>〜</head>の中に貼り付けます。

<link href=”https://use.fontawesome.com/releases/v5.0.6/css/all.css” rel=”stylesheet”>

よく分からなければ</head>の直前に貼ればOKです。

「ファイルを更新」をクリックします。

これでアイコンフォントの使用準備は完了です。

アイコンフォントを探す

波空
準備ができたら、まず『Font Awesome』のサイトにいきます。

波空
FontAwesome5とは、2017年末にリリースされたFontAwesomeの最新バージョンですね。
FontAwesome5には、無料プランと、有料のPROプランがあります。
ちなみに、旧バージョンのFontAwesomeはこれまで通り使い続けることができます。
画面上の「アイコン」をクリック、使いたいアイコンを探します。

猫にゃん
いっぱいあるにゃ。薄くなってるのはなんで?
波空
薄いのはproプランの物で有料なのね
猫にゃん
それでクリックできなくなっているのか・・
波空
探したアイコンをクリックすると詳細ページが開きますよ。 アイコンの上にコードが表示されています。
アイコンのコードをCSSへ記述してカスタマイズします。

猫にゃん
この四角で囲んだのがコードだにゃ。
波空
実際にh3タグを装飾してみます
猫にゃん
ここでダッシュボードの「外観」⇒「テーマの編集」にいって記述するわけだにゃ。
波空
そうそう(^^)
右上の編集するテーマを選択:がStinger8 child になっていることを確認してから、スタイルシートの最後にh3タグの装飾を追加します。
猫にゃん
ふむ。波空、間違えないように慎重ににゃ。
.post h3:before {
font-size: 22px;
line-height: 27px;
margin: 20px 0;
padding: 10px 15px;
color: #c91a57; /* 色 */
margin-right: 10px;
font-family:”Font Awesome 5 Free”;
content:”\f0c6″; /* アイコン */
font-size:25px;
}
波空
ファイルを更新」をクリックします。するとh3がこうなります(^^)。
猫にゃん
おぉ頭にアイコンがついたにゃ

波空
f0c6この部分がアイコンの種類。
ここを変更するだけでアイコンを変更出来ます。
また、色の変更は「color: #c91a57; /* 色 */」の部分を変えると好みの色にできます。

色を探すにはいろんなサイトがありますが、参考までにこちらで。

スポンサーリンク

h4タグの変更

h4タグはタイトルの左にボーダーを追加してみました。

.post h4 {
padding: 10px 15px;
margin: 20px 0;
background-color: #f3f3f3;
font-size: 20px;
border-left: 6px solid #ccc;}
/*amazonプラグインのh4は除外*/
.post .amazonjs_info h4{
background-color:transparent!important;
}

h3タグと同様に子テーマのスタイルシートに追加で記述すればOKです。

Stinger8のカスタマイズ 見出しタグ さいごに

波空
少し変えただけだけど、やり方がわかったらこれからいろいろできるから。今回はここまで(^^)
猫にゃん
変更がちゃんと反映されないこともあるにゃ。
波空
変更が反映されていないようならブラウザをリロードすると反映されます。
それぞれのブラウザによってやり方が違うので次のページでやり方を確認して試してみてください。

ブラウザ別キャッシュのクリア方法(パソコン向け)


にほんブログ村

スポンサーリンク




スポンサーリンク




Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


普通のSuicaをMySuica(記名式)にするには?変更のしかたから登録まで

2019年10月1日からSuicaが鉄道利用でもポイントがつくよう

OneDriveでWindows7から10にデータ移行を簡単に

  クラウドを利用したONEドライブというサービスを利

雨の降り方を表現する言葉にはこんな素敵なものも!雨の名前と種類

  雨と一言でいっても季節や降り方によって言葉の表現が

火災報知器の誤動作や掃除 火災報知器の気になること調べてみた

突然天井から「火事です!火事です!」と言われてびっくりしたこと

消火器の使い方 いざという時慌てないために覚えておきたいこと!

あなたは消火器を使ったことがありますか? もし、火事に気付い

→もっと見る

  • こんにちは。波空です

    好きなことを自由にやりたくて
    アフィリエイトにチャレンジ中

    好きなものは
    アニメ・漫画・ゲーム・お絵描き・
    映画を観ること・パソコンで遊ぶこと
    ・チョコレート・中島みゆきさんの歌・・

    やりたいことは・・
    いろいろあるけど、
    まずは資金と自由な時間を確保
    しないと進まない。
    日々どうしたらできるか考えながら
    リアル仕事に追われています。

PAGE TOP ↑