*

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

公開日: : 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

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


クリームパン足?足のむくみには名前があった・・対処方法は

なんだか最近足のむくみ方がかわってきました。 今まではふくら

イメージマップがスマホでずれる!プラグインで簡単解決

イメージマップがスマホでは位置がずれてしまい、予期せぬところにリンクし

Stinger8トップへ戻るボタンのアイコン変更&自作画像に変更

前回はStinger8のデフォルトの「ページトップへ戻る」ボタンの背景

Stinger8カスタマイズ トップへ戻るボタンの背景色変更

Stinger8のカスタマイズをしていて、下の方にスクロールした時に「

Stinger8カスタマイズ タイトルをロゴ画像に phpのコピー

Stinger8のヘッダー画像を変えてみましたが、タイトルを画像にいれ

→もっと見る

  • こんにちは。波空です

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

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

    やりたいことは・・
    空を飛びたい・馬に乗って自由に
    走り回りたい・猫を飼いたい・・

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

PAGE TOP ↑