うち天

子育てで日々挫折するおじさんのブログ

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


こんにちは、4歳の女の子、1歳の男の子をもつアラフォーのおじさんです。

はてなブログのカスタマイズをするとき、シロマティさんのブログ NO TITLの記事にお世話になっている人も多いのではないでしょうか。
わたしもたびたび参考にさせてもらっています。

その中でもこちらの記事を参考にしてリンクに枠を付けているブログをたくさん見かけます。

今回はこちらのカスタマイズを更にカスタマイズして、リンクの見出しやアイコンを、自由に変更しちゃいます。

リンクの見出しをカスタマイズしよう

まずは実際のサンプルをご覧ください。*1

例えばこんな風に、いろいろな見出しを付けられるようにします。
CSSを変更することなく、毎回、記事の中で記事の流れにあった見出しを付けることができます。

幼児向けの辞典を買ったら想像以上に食いつきがよかった - うち天

アイコンも変えられます。

わたしは見出し無し(アイコンのみ)がお気に入り。

幼児向けの辞典を買ったら想像以上に食いつきがよかった - うち天

リンクでなく普通の文章をコラム風にするのもいいかも。
枠の内側にもう少し余白がある方が見やすいかな。

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

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

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

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="&#xf029;" はなんだか文字化けみたいですね。
この部分がアイコンの指定です。

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


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

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

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

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

プラスマークなら &#xf001; です。
末尾の ;(セミコロン) を忘れずに!!

注意点

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

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

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

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

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

おわりに

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

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

おわり

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