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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTMLはこちら

<div class="header-info">
<a href="リンクしたいURL">＊ここにテキストリンクを入力します＊</a>
</div>

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

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

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

CSSはこちら

<style>
/* ヘッダーテキストリンク */
.header-info { position: relative; max-width: 100%;
}
.header-info a { font-weight: bold;	display: block;	font-size: .9em;	text-decoration: none;	text-align: center;	color: #fff;/* 文字色 */	background: #00a8d4;/* 背景色 */	padding: 0.5em 1em;	border-radius: 0px;
}
</style>

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

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

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

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

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

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

とても便利。

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

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

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

はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ – しろかい！

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

＼Amazon期間限定ビッグセール！／<br>
<i class="blogicon-amazon"></i> サイバーマンデーをシンプルに楽しむ方法

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

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

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

ヘッダーのテキストリンクは、読んでほしい記事のアピール・Amazonや楽天へのリンク・読者へのお知らせを表示するといったことに使えて便利です。

私もAmazonサイバーマンデーなどセール記事をヘッダーに表示しています。

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

2018-05-21 ブログデザインをリニューアルしました！カスタマイズまとめ。