いろいろブログカスタマイズメモ

はてなブログのカスタマイズ、書き方などのメモ、チートシートです。/※本サイトはアフィリエイトプログラムによる収益を得ています。ページ内のリンクがアフィリエイトリンクの場合があります。

ブログでのチェックポイントや関連記事を枠で囲いわかりやすくする


※本サイトはアフィリエイトプログラムによる収益を得ています。
 ページ内のリンクがアフィリエイトリンクの場合があります。

 所謂、よく見るこういうものです。

CSSの修正

 ベースとなるCSSは、こちらのサイトのものを使用させていただきました。ありがとうございます!

 一種類であれば上記URLのCSSをそのまま使用してもよいですが、私の場合は複数の種類を用意したかったのと、フッタ (「記事下」に入れる部分) にも適用したかったため、少し改造しました。

適用範囲を広げる

 元のCSSでは、適用範囲が

.entry-content .emphasize-link {

のように「.entry-content」以下のものに固定されています。

 これはブログ本文内のみが対象となっており、フッタに用意した記事に適用できなかったので、「.entry-content」を削って全体に適用しました。

.emphasize-link {

 適用範囲は各々の都合なので、本文内だけでよければ元のままで良いと思います。

Markdownを使用できるようにブロック要素にする

 pタグの中ではMarkdownが使用できません。

Markdown記法はdivなどのブロック要素内では動作しない - はてなブログカスタマイズメモ

 かといって、spanに適用するとレイアウトが崩れてしまいます。

 そこでこのクラスを適用された要素はブロック要素となるように、「display: block;」を追加しました。

 これによって「<span class="emphasize-link">」と適用しても使用することができますし、pタグなどもともとブロック要素のタグにも使用できます。

 また同時に

.emphasize-link p:last-child {
  margin-bottom: 0;
}

の指定を削除しました。もともと効いていない(pタグの子要素にpタグは指定できない)CSSみたいだったし、pタグ以外でも使っていくので紛らわしくないように。

種類を増やす

 私は最終的に以下の3種類を用意しました。デザインについては元のままですが、3種類を同時に使うことが出来ます。

<p class="emphasize-link">
・チェック
</p>
<p class="relation-link">
・関連記事
</p>
<p class="recommended-link">
・おすすめ記事
</p>

 元のCSSにある「.emphasize-link 」の部分を「.relation-link」「.recommended-link」に変更して追加していきました。

最終的なCSS

 最終的に、CSSは以下のようにしました。

 「.emphasize-link」 の部分を「.relation-link」などに変更して、それぞれに背景色などを合わせたものを用意しています。

/** 関連記事 */
.emphasize-link {
  display: block;
  position: relative;
  margin: 36px 0 16px;
  padding: 16px 10px;
  border: 2px solid #df8182;
  background-color: #fffbf5;
}
.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;
}
.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;
}

設置

「デザイン > カスタマイズ > デザインCSS」に追加します。

記事で使用する

<p class="emphasize-link">
・チェック
</p>

のように記述すると、

と表示されます。

リンクを貼る場合は

<p class="emphasize-link">
[http://hatebu-memo.scriptlife.jp/entry/2017/10/24/markdown-code:title]
</p>

としますと、

こうなります。

pタグの中で適用されるため、複数行もOK。

はてブの埋め込みはこうなります。

Markdownでリンクを貼る場合はspanを使用します。

<p class="emphasize-link">
[Markdownリンク](http://hatebu-memo.scriptlife.jp/entry/2017/10/24/markdown-code)
</p>

では

となってしまい上手くいきません。

<span class="emphasize-link">
[Markdownリンク](http://hatebu-memo.scriptlife.jp/entry/2017/10/24/markdown-code)
</span>

とすると、 Markdownリンク こうなります。

こういったカスタマイズははてな記法やMarkdownが便利

 記事内で使用するときにはpタグにクラスを追加することになるので、見たままモードだとそこだけHTMLに切り替えて入力することになります。

 あまり煩わしいようでしたら、HTMLを直接記述できる「はてな記法」や「Markdown」を試してみるのも良いかもしれません。

スポンサーリンク