【初心者向け過去記事カスタム】回遊率を上げよう。はてなブログで”あわせて読みたい”の作り方。【リンクカスタム】

当ページのリンクには広告が含まれています。

f:id:cb125250zzr250:20190721235218p:image

今回は回遊率アップのリンク作成や過去記事貼り付けの応用編です。

ブログを始めたばかりの人向け記事です。僕も初心者です。一緒に振り返っていきましょう。

 

f:id:cb125250zzr250:20190721180901p:plain

リンク作成や過去記事を張るだけなら記事製作中にこちらのボタンを押すだけでいいのですが、リンクとしては味気ない…

そこで

こんな吹き出しをデザインCSSに組み込みましょう。

やり方

  1. /*あわせて読みたい*/

  2. .entry-content .emphasize-link {

  3. position: relative;

  4. margin: 36px 0 16px;

  5. padding: 16px 10px;

  6. border: 2px solid #df8182;

  7. background-color: #fffbf5;

  8. }

  9. .entry-content .emphasize-link p:last-child {

  10. margin-bottom: 0;

  11. }

  12. .entry-content .emphasize-link::before {

  13. position: absolute;

  14. bottom: 100%;

  15. left: -2px;

  16. padding: 2px 6px;

  17. content: “あわせて読みたい”;

  18. background-color: #df8182;

  19. color: #fff;

  20. font-weight: bold;

  21. }

 上記をコピーします。

1番は何のプログラムかをコメントで入れていますね。

6番7番の#以降の変更で色を変えることができます。

18番19番の#以降の変更で色を変えることができます。

グリーンにしたければ#006400なのでそれを

background-color: #006400;

のように置き換えます。セミコロンを忘れずに!!;←これ

17番は任意で変更可能です。

content: “一押し記事!”;

とかでもいいかもしれませんね。

色見本はこちらへ

デザインCSSに貼り付ける

貼り付け方は過去記事参照

いざ実践

デザインCSSに入れ込み、リンクや過去記事をやっても、実はここまでだとうまく行きません。

 ①過去記事を貼ってみる

www.kanzaki3.com

②HTML編集を開く

f:id:cb125250zzr250:20190721185225p:plain

 ③<p>の中にコマンドを入れよう!

f:id:cb125250zzr250:20190721185421p:plain

HTML編集で見るとこのようになっていますね。

 <p><iframe class=”embed-card embed-blogcard” style=”display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;” title=”シーズン無視でハワイアンズに行った話ウンタラカンタラ

 

この文字列の一番先頭の<p>の後ろに

class="emphasize-link"

 この要素を追加します。毎回手打ちは面倒なので、単語登録しておくことをお勧めします。

私は【あわせて】と打つと【class=”emphasize-link”】と出るようにしています。

 <p class="emphasize-link"><iframe class="embed-card embed-blogcard" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;" title="シーズン無視でハワイアンズに行った話ウンタラカンタラ

こうなります。このとき半角スペースを入れることを忘れずに!!

f:id:cb125250zzr250:20190721190355p:plain

ここにね。

④プレビューで見てみよう。

 こんな感じに仕上がります。

これでおしまいです。お疲れさまでした。

⑤最後にこのときのCSSを見てみよう。

f:id:cb125250zzr250:20190721190839p:plain

 こうなりますね。反映されてなければ、どこか違うはずです。

間違い探ししてみましょうね。

 

今回参考にさせてもらってブログには、 様々なデザインが用意されてとてもわかりやすいです。

 

おわり



目次