ぱぱらいく~ディズニー大好きパパの育児記録~

ディズニーが大好きな年子・双子のパパがディズニーと子育ての情報を発信するブログ

リンク先が目立つように改良してみたら色々と面倒だった

f:id:itoht12:20170724204312j:plain

本日は久しぶりにブログカスタマイズの話

いつも閲覧ありがとうございます

ブログ管理人のあっくんです

今日は久々にブログのカスタマイズです

はてなブロガーさんのブログを見ると、結構カスタマイズでリンク先を強調している人が多くいますね

リンク先の強調ってこんな感じ↓

今回は自分のブログにこのカスタマイズを取り入れていきたいと思います

 

 

参考にしたサイト

シロマさんのブログ「NO TITLE」

参考にさせていただいたのはシロマさん(id:shiromatakumi)さんのブログ「NO TITLE」

このブログのカスタマイズ記事を参考にさせていただきました

実装までの2ステップ

1.CSSコードを追加する

まず最初のステップはCSSを追加すること

上記記事にあるデザインの中から気に入ったもののCSSを「デザイン」→「カスタマイズ」→「デザインCSS」にコピペします

あっくんは自分のサイトのカラーコードに似ているシンプルなタイプを使わさせていただきました

2.HTML編集をする

次に、記事内のHTMLを編集します

このカスタマイズはリンク先がすべて強調されるわけではなく、HTML編集したもの限定になるようですね

これまで書いてきたもののメンテナンスをしようとすると大変だな・・・汗

ただ、HTML編集とはいってもそんな大変なものではありません

通常通りはてなブログにリンクを張って、HTML編集からリンク先の前に表記される<p>を<p class="emphasize-link">に変更するだけです

これだけでリンク先が強調されたデザインになるというわけです

ちなみに、複数行をまとめて強調したい場合には、

  1. 最初のリンク先の前についている<p>の前に<div class="emphasize-link">を入れる
  2. 最後のリンク先の後ろについている</p>の後ろに</div>を記載する

でまとめることができます

この辺の詳しいやり方はシロマさんのブログを参考にしてください

実際にやってみた

デザインCSSの後ろの方だと反映されない?

実際にあっくんもやってみましたが、なぜだか最初はうまく反映されません

CSSも入っているしHTML表記を何度確認しても普通のリンク先のままになってしまいます

正直何度か心折れそうになりましたが、色々試行錯誤を重ねたところ、デザインCSSの前の方にCSSを記載することで、問題が解決されました!

私みたいにむやみやたらとCSSをコピペしまくっていると後半のCSSは反映されなくなるようです(;^_^A

もし、同じようにCSSが反映されなくてお困りの方がいたら、ぜひCSSの前の方に記述してみてください

リンク先強調のメリット

回遊率がUPするらしい

リンク先を強調すると、そこからリンク先へ飛んでくれる確率が高くなるため、結果的にブログの帰直率が下がって回遊率が上がる効果が見込めるらしいです

ホントかどうかは実証してないのでわかりませんが・・・

帰直率はどうやらGoogle先生の評価にも関わってくるようなので、結果的にブログの評価を上げる効果があるという声もあります

まぁそんなことを気にするほどこのブログの評価高くないですけどね(笑)

興味ある方はカスタマイズしてみてはいかがでしょうか?

まとめ

またブログのデザインが進歩したよ!

ブログデザインの前に記事の質向上させろよって話ですけどね(笑)

まぁこんな自己満記事で楽しんでもらえましたら、次回の記事もよろしくお願いいたします!