【Hexo】Icarusテーマで強調メッセージブロックを使う方法

当ページのリンクには広告が含まれています。

Hexo(Icarus)+Github pagesで無料ブログを作成した際、記事の中でページの一部を強調するために色付きのメッセージブロックを使いたくなる時があります。IcarusはBULMAというCSSフレームワークが適用されているので簡単に導入できます。

本記事の対象者

・　Hexo + Github pagesでテーマはIcarusの人

・　Icarusのv3.0.0以上の人

以下のコードをコピペすればOKです。

hexo new "hogehoge"(hogehogeはファイル名)でジェネレートしたマークダウンファイル内部に、以下のコードをコピペして、<div class="message-body">と</div>の間に文章などを記述すればOKです。

<article class="message is-info">
  <div class="message-header">
    <p>Info</p>
  </div>
  <div class="message-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
  </div>
</article>

上記のコードを使うと以下のような形になります。

Info

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

文章だけでなく、はてなブログカードを埋め込んだり、アフィリエイトリンクを埋め込むことも可能です。

例えば、以下のようなコードでマークダウンファイルに記述した場合、、、

<article class="message is-info">
  <div class="message-header">
    <p>Icarusテーマでh2, h3タグのデザインを変更したい方はこちら↓</p>
  </div>
  <div class="message-body">

{% hatenablogcard https://omathin.com/2020/05/05/Icarus-h2h3title-change/ %}


 </div>
</article>

以下のようになります。

Icarusテーマでh2, h3タグのデザインを変更したい方はこちら↓

いくらか見栄えがいい感じになりますね。

ちなみに、はてなブログカードのプラグインは、以下のnpmコマンドで導入が可能です。

npm install shundroid/hexo-embed-hatena-blog-card --save

他の色を使いたい場合はBULMAのドキュメントを参照してください

メッセージブロックについては、以下のページに記述されているコードを参照しコピペしながら使いましょう。

こちらも参考になるかもしれません。

積極的にBULMAを活用して、視認性の高い記事を作っていきましょう！

おしまい