ブログのヘッダーをカスタマイズ。初心者編。

f:id:nissyfu-fu:20190703094521j:plain

 

ブログ開設から1ヶ月。

やりたいやりたい!と思って言いたことを

やっと出来ました。

 

それは、、、

ブログのカスタマイズです!!

(途中段階)

 

説明されている記事などを

拝見していましたが、

なかなか素人の自分には難しそう、、

というのが印象的で

手をつけずにいましたが、

やってみたところ。。。

めちゃめちゃ簡単でした。

 

まだやりたくてやってないという方は

ぜひチャレンジしてみてください。

 

 

何をカスタマイズした??

f:id:nissyfu-fu:20190703090835p:plain

ホームのヘッダーにこんなものを追加しました!!

記事を読んでくれた読者さんが

すぐに気になるページへ飛べます!!

 

少しやり方を紹介させていただきます!!

 

 

やり方 第1段階

自分のブログの、設定→詳細設定→headに要素を追加に

以下のコードをコピペします!!

 

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

 

 

やり方 第2段階

fontawesome.com

 

 

このリンクから、好きなアイコンを探し出して

そのコードを自分のブログに貼り付けます。

 

イメージ的には、アイコンをとるアプリ!!

登録など軽くありますが、難しいものではありません。

 

登録が出来たら、以下のように好きなアイコンを選び放題です。

 

f:id:nissyfu-fu:20190703092456p:plain

 

好きなアイコンを選択したら、

以下のようにそのコードをコピーします!!

f:id:nissyfu-fu:20190703092701p:plain

 

 

これで第2段階の準備完了です!!

 

 

やり方 第3段階

以下をコピーして、自分のブログのホーム→デザイン

→カスタマイズ→タイトル下へ

タイトル下にペーストします。

<nav id="gnav">

 

 

<div class="gnav-inner" id="menu-scroll">

 

<div class="menu"><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>

 

<div class="menu"><a href="URL"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</a></div>

 

<div class="menu"><a href="URL"><i class="fa fa-bolt" aria-hidden="true"></i> TIPS</a></div>

 

<div class="menu"><a href="URL"><i class="fa fa-graduation-cap" aria-hidden="true"></i> STUDY</a></div>

 

<div class="menu"><a href="URL"><i class="fa fa-wrench" aria-hidden="true"></i> DESIGN</a></div>

 

<div class="menu"><a href="URL"><i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div>

 

</div>

 

</nav>

 

 

 これをコピペするだけである程度整いますが

アレンジが必要です。

 

’’fa fa 〜 〜’’のコードはアイコンのコードになります。

そこを取得した、自分が使用したいアイコンのコードに変更します。

 

次にURLと記載されているところを編集します。

そのアイコンをタップした時に、自分が飛ばしたいページの

URLを貼り付けます。

 

あとは、入れたい文字に変えるだけ!!

 

参考になるかわかりませんが

私のコードを貼っておきます!!

 

f:id:nissyfu-fu:20190703093955p:plain

 

 

以上で完了となります!!

 

まだまだ途中段階ですが、他の方’’見やすいブログ’’を参考に

少しずつアレンジしていきます。

 

ご購読ありがとうございました!!