【はてなブログ】おすすめ記事・関連記事リンクの見出し・アイコンを変更するカスタマイズ

　コラムや囲み記事風にいろいろ書いてみるのもいいんじゃないでしょうか。そもそもコラムとはcolumnのカタカナ発音で、プラグラマなどの間でコラムではなく「カラム」などと呼ばれる「列」を表す単語です。
　コラムなのかカラムなのか。これはコンマとカンマと同じ関係。コなのか。カなのか。入れ替えが可能ならコカ・コーラはカコ・カーラになる。

記事のまとめにもいかがでしょうか。

この記事にポイントなどありません。
ポイント還元セール実施中！
ポイントがないのがポイントです。

CSS

！！すでにシロマティさんの記事を参考にカスタマイズしているひとは後述の注意点をよくご確認ください。！！！

シロマティさんの記事より見出し部分のCSSを引用させていただきます。

/* 元のCSS by シロマティさん
    これをこの後すこし書き換えます */
.entry-content .emphasize-link::before {
  position: absolute;
  top: -12px;
  left: 10px;
  padding: 0 10px 0 26px;
  content: "あわせて読みたい";
  background-color: #df8182;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
}

リンクの見出しの文言は下記の部分です。

  content: "あわせて読みたい";

これを次のように書き換えます。

  content: attr(data-name);

同様に、アイコン部分。

/* 元のCSS by シロマティさん
    これをこの後すこし書き換えます */
.entry-content .emphasize-link::after {
  position: absolute;
  top: -16px;
  left: 4px;
  width: 28px;
  height: 28px;
  background-color: #df8182;
  border-radius: 14px;
  line-height: 25px;
  text-align: center;
  content: "\f010";
  font-size: 18px;
  font-family: "blogicon";
  color: #fff;
}

アイコンは下記の箇所で指定しています。

  content: "\f010";

これを次のように書き換えます。

  content: attr(data-icon);

ここまで大丈夫でしょうか。

上記のCSSを「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」に追加しましょう。

では、つづいて記事中で見出しとアイコンを指定する方法です。

記事中で見出しとアイコンを指定する

<div class="emphasize-link" data-name="ここが見出し"  data-icon="&#xf029;">
ここは枠の中の文章です。リンクでも、地の文でもOK。
</div>

　↓ 表示例

ここは枠の中の文章です。リンクでも、地の文でもOK。

data-name のところが見出しの文言です。
ここに書いた内容が見出しに使われるのです。

data-icon="" はなんだか文字化けみたいですね。
この部分がアイコンの指定です。

暗号みたいだけど、大丈夫。
２文字変えるだけです。

&#x は固定です。
そのうしろ f029; の部分を変更することでアイコンを選べます。

f029; をどう変更するかは下記の記事を参考にします。

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

上記記事の表の「コード」の部分の文字に書き換えましょう。

プラスマークなら  です。
末尾の ；（セミコロン） を忘れずに！！

注意点

すでにシロマティさんの記事を参考にカスタマイズしているひとは、この記事で紹介したCSSをそのまま使うと過去記事でリンクを囲った枠の見出しとアイコンが消えてしまいます。

その場合すべての過去記事で、data-name と data-icon を指定すれば表示されます。

それが大変な場合は、CSSの emphasize-link の部分を emphasize-link2 とか column とか好きな名前に変えて、「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」に追加してください。

既存のCSS設定を残して新しい設定を追加するということです。

そして記事中で class="emphasize-link2" や class="column" などと指定しましょう。
こうすると、過去記事の見出し・アイコンはこれまでのまま生かされ、新規作成記事だけ見出し・アイコンが指定出来ます。

おわりに

説明が分かりづらいところもあると思います。

不明点があればコメントなどでご連絡くださいー。

おわり

*1:実際のサンプルってちょっと変な表現だな。