はてなブログのヘッダーに細長いテキストリンクを挿入する方法

このブログははてなブログで書いています。

最近、ワードプレスで運営されているブログのヘッダーに細長いテキストリンクが入っているのを見かけます。

ヘッダーはサイト読者が必ず目にする場所ですよね。

そこにテキストリンクを入れることで

いろんな使い方をされていて、いいなあと思っていたので私も作ってみました。（パクリって言われたらほんとそうなんですが。。。）

この記事では、はてなブログでもヘッダーにテキストリンクを入れるためのカスタマイズを公開しています。

（＊2019年2月にワードプレスに移転しました）

ヘッダーにテキストリンクとはこんな感じ

メニューの下の青い部分がおすすめ記事へのリンクになっています。

スマホで見るとこんな感じです。

このテキストリンクはトップページ、記事ページ、カテゴリページなど、すべてのページに表示されます。

検索流入からの読者にもアピールできますね。

カスタマイズする場所はこちら

デザイン→①スパナマーク→②ヘッダ→③タイトル下の「HTMLを記述できます」の部分にHTMLとCSSをコピペしていきます。

HTMLはこちら

テキストリンクを表示させたい部分にHTMLをコピペします。

ここにはナビゲーションメニューなどを入力している場合もあるかと思いますが、当ブログの場合はナビゲーションメニューのHTMLの下にテキストリンクのHTMLを書き込んでいます。

テキストを改行したい場合は改行したい部分に<br>を入れます。

CSSはこちら

さきほどコピペしたHTMLの付近に入力します。

背景色や文字色などはここでお好きなように変更できます。

はてなブログのアイコンフォントを使う

現在当ブログで表示しているヘッダー下のテキストリンクにAmazonマークがついているのですが、これははてなブログのアイコンフォントです。

アイコンフォントといえばFont Awesomeですが、Safariでは表示されているのにChromeでは表示されないなどの不具合があったので当ブログでは基本的には使っていません。

はてなブログにも独自のアイコンフォントが120種類ほどあり、デフォルトでブログソースに組み込まれているので、Font Awesomeのような設定をすることなくアイコンフォントが使えるんですよね。

とても便利。

せっかくはてなブログを使っているのだから、ぜひ取り入れたい機能です。

はてなブログのアイコンフォントの使い方

はてなブログのアイコンフォントのクラス名についてはこちらのサイトを参考にしています。

今回のようにヘッダーのテキストリンクにアイコンフォントを使いたい場合は

という具合に、アイコンを入れたい場所に使いたいアイコンのクラス名を入れたiタグを挿入するだけなので簡単です。

Amazonや楽天のマークも使えますし、内部リンクや外部リンクのアイコンもあるので、テキストリンクで使うにははてなブログのアイコンフォントでも十分かと思います。

ヘッダーテキストリンクの使い方

ヘッダーのテキストリンクの使い方としては

• 読んでほしい記事のアピール
• Amazonや楽天へのリンク
• 読者へのお知らせを表示

というのが主流のようです。

私も今週末から開催されるAmazonサイバーマンデーへの記事をヘッダーに表示してみました。

これで収益が上がるかどうかはわかりませんが（笑）色々試してみるのは面白いですね。