はてな無料版でできることリサーチ⑤ 「あわせて読みたい」記事表示

はてな無料版でできることリサーチ第５弾です。

今回は、「あわせて読みたい記事」表示についてです。

「あわせて読みたい」記事表示とは？

何も設定しなくても、記事下には関連記事が表示されるかと思いますが、

記事の最後に「あわせて読みたい記事」が紹介されていたらついつい読みたくなりませんか？

こんな感じの表示です。

はてなブログ無料版でできることリサーチ④ 文字の大きさ変更

どうでしょう？ついついポチッとしちゃいたくなりますよね。

今回は、この「あわせて読みたい記事」を表示させていきたいと思います。

こちらの記事を参考に、カスタマイズしていきます。

www.notitle-weblog.com

コードを入力するのは「デザインCSS」

今回も「デザイン」→「カスタマイズ」→「デザインCSS」に下記のコードを入力するだけ！

.entry-content .emphasize-link {
  position: relative;
  margin: 36px 0 16px;
  padding: 16px 10px;
  border: 2px solid #A37CAA;
  background-color: #f9f9f9;
}
.entry-content .emphasize-link p:last-child {
  margin-bottom: 0;
}
.entry-content .emphasize-link::before {
  position: absolute;
  top: -12px;
  left: 10px;
  padding: 0 10px 0 26px;
  content: "あわせて読みたい";
  background-color: #f9f9f9;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
}
.entry-content .emphasize-link::after {
  position: absolute;
  top: -16px;
  left: 4px;
  width: 28px;
  height: 28px;
  background-color: #f9f9f9;
  border-radius: 14px;
  line-height: 25px;
  text-align: center;
  content: "\f010";
  font-size: 18px;
  font-family: "blogicon";
  color: #fff;
}