2019-02-23このブログははてなブログで書いています。最近、ワードプレスで運営されているブログのヘッダーに細長いテキストリンクが入っているのを見かけます。ヘッダーはサイト読者が必ず目にする場所ですよね。そこにテキストリンクを入れることで読んでほしい記事のアピールAmazonや楽天へのリンク読者へのお知らせを表示いろんな使い方をされていて、いいなあと思っていたので私も作ってみました。(パクリって言われたらほんとそうなんですが。)この記事では、はてなブログでもヘッダーにテキストリンクを入れるためのカスタマイズを公開しています。(*2019年2月にワードプレスに移転しました)目次ヘッダーにテキストリンクとはこんな感じカスタマイズする場所はこちらHTMLはこちらCSSはこちらはてなブログのアイコンフォントを使うはてなブログのアイコンフォントの使い方ヘッダーテキストリンクの使い方ヘッダーにテキストリンクとはこんな感じメニューの下の青い部分がおすすめ記事へのリンクになっています。スマホで見るとこんな感じです。このテキストリンクはトップページ、記事ページ、カテゴリページなど、すべてのページに表示されます。検索流入からの読者にもアピールできますね。カスタマイズする場所はこちらデザイン→1スパナマーク→2ヘッダ→3タイトル下の「HTMLを記述できます」の部分にHTMLとCSSをコピペしていきます。HTMLはこちらテキストリンクを表示させたい部分にHTMLをコピペします。ここにはナビゲーションメニューなどを入力している場合もあるかと思いますが、当ブログの場合はナビゲーションメニューのHTMLの下にテキストリンクのHTMLを書き込んでいます。テキストを改行したい場合は改行したい部分に<br>を入れます。CSSはこちらさきほどコピペしたHTMLの付近に入力します。背景色や文字色などはここでお好きなように変更できます。はてなブログのアイコンフォントを使う現在当ブログで表示しているヘッダー下のテキストリンクにAmazonマークがついているのですが、これははてなブログのアイコンフォントです。Awesomeですが、Safariでは表示されているのにChromeでは表示されないなどの不具合があったので当ブログでは基本的には使っていません。Awesomeのような設定をすることなくアイコンフォントが使えるんですよね。はてなブログを使っているのだから、ぜひ取り入れたい機能です。はてなブログのアイコンフォントの使い方はてなブログのアイコンフォントのクラス名についてはこちらのサイトを参考にしています。しろかい!今回のようにヘッダーのテキストリンクにアイコンフォントを使いたい場合はという具合に、アイコンを入れたい場所に使いたいアイコンのクラス名を入れたiタグを挿入するだけなので簡単です。Amazonや楽天のマークも使えますし、内部リンクや外部リンクのアイコンもあるので、テキストリンクで使うにははてなブログのアイコンフォントでも十分かと思います。ヘッダーテキストリンクの使い方ヘッダーのテキストリンクの使い方としては読んでほしい記事のアピールAmazonや楽天へのリンク読者へのお知らせを表示というのが主流のようです。私も今週末から開催されるAmazonサイバーマンデーへの記事をヘッダーに表示してみました。これで収益が上がるかどうかはわかりませんが(笑)色々試してみるのは面白いですね。このような記事もありますブログデザインをリニューアルしました!カスタマイズまとめ。www.oheya-migaru.com当ブログのカスタマイズのまとめです。コメントをキャンセルメールアドレスが公開されることはありません。雑記Aboutマリ身軽に暮らす日々のことを書いています。育児中だからこそシンプルな暮らしで楽するヒントを綴ります。長所を知って好きな自分を知ろう!私の長所100個一覧にしてみた。