所謂、よく見るこういうものです。
・チェック例です
CSSの修正
ベースとなるCSSは、こちらのサイトのものを使用させていただきました。ありがとうございます!
おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ - NO TITLE
一種類であれば上記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>
としますと、
はてなブログのMarkdownでコードやスクリプトを表記する - はてなブログカスタマイズメモ
こうなります。
pタグの中で適用されるため、複数行もOK。
はてブの埋め込みはこうなります。
Markdownでリンクを貼る場合はspanを使用します。
<p class="emphasize-link"> [Markdownリンク](http://hatebu-memo.scriptlife.jp/entry/2017/10/24/markdown-code) </p>
では
[Markdownリンク](http://hatebu-memo.scriptlife.jp/entry/2017/10/24/markdown-code)
となってしまい上手くいきません。
<span class="emphasize-link"> [Markdownリンク](http://hatebu-memo.scriptlife.jp/entry/2017/10/24/markdown-code) </span>
とすると、 Markdownリンク こうなります。
こういったカスタマイズははてな記法やMarkdownが便利
記事内で使用するときにはpタグにクラスを追加することになるので、見たままモードだとそこだけHTMLに切り替えて入力することになります。
あまり煩わしいようでしたら、HTMLを直接記述できる「はてな記法」や「Markdown」を試してみるのも良いかもしれません。