Nodachisoft Nodachi Sword Icon
  
@あまじ✎ 2020年10月21日に更新

Gatsby のマークダウンで独自のスタイルを適用した段落を作れるようにする

当サイトは Gatsby でマークダウンを利用してブログを書いています。

今回はブログの中で独自のカスタム・レイアウトを適用する段落を作れるようにしましたので、手順を書いておきます。

イメージ、下のような "information" とか "ワンポイントアドバイス!" とか、”注意” みたいな段落ですね。

info_warn_message

すでにプラグイン「gatsby-remark-custom-blocks」という目的が達成できるプラグインが公開されてますので、プラグインを導入した流れを記録しています。

なお「gatsby-plugin-mdx」や「gatsby-remark-component」プラグイン等、別のプラグインを使っても目標は実現できると思いますけど、今回はシンプルなマークダウンで書きたいのでここでは触れません。

導入手順

前提

Gatsby にマークダウンプラグイン(gatsby-transformer-remark)を導入してページ生成していること。

gatsby-remark-custom-blocks とは

マークダウンの中に独自に作成したスタイルのクラスを適用した DIV ブロックを作ることが出来ます。 下のようなイメージです。

Markdown内でinformationを書く例
[[info | たいとるはここ ]]
| 内容はここに

できるHTML は下のようになります。

HTMLコード
<div class="custom-block info">
 <div class="custom-block-heading">
  たいとるはここ
 </div>
 <div class="custom-block-body">
  <p>内容はここに</p>
 </div>
</div>

あとはスタイルを書いてあげれば、タイトル付きの枠がつくれそう。

インストール

公式に書いてある手順に従っていきます。 正確な情報は下記を見てくださいね。このページでは公式を参照しながら私が実施した手順などなどを書いてます。

参考:公式Gatsby - pakcages - gatsby-remark-custom-blocks

npm 経由で必要なパッケージをインストールしましょう。

 
インストールコマンド
npm install --save gatsby-remark-custom-blocks

無事にパッケージが追加されたら使うための設定を書いていきましょー。

gatsby-config.js への設定追記

以下のように gatsby-remark-custom-blocks への参照を 記載してあげます。

gatsby-remark-custom-blocks(抜粋)
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [  // このプラグインの一つとして記載
          :中略
          {            resolve: "gatsby-remark-custom-blocks",            options: {              blocks: {                info: { // Markdown 内のキーワード                  classes: "info", // 適用クラス                  title: "optional",                },                warn: { // Markdown 内のキーワード                  classes: "warn", // 適用クラス                  title: "optional",                }              },            },          },        {
        resolve: 'gatsby-remark-prismjs',
        options: {
          :以下略

これで設定はおしまい。Gatsby を再起動してあげれば、以下のように マークダウン内に記載した URL に属性がついてます。

HTMLのプラグイン導入前後比較
前)<a href="https://google.com/">Google検索</a>
後)<a href="https://google.com/" target="_blank" rel="nofollow">Google検索</a>

本文に下のように書きます

info(ワンポイント)の例

マークダウン本文に以下のように書くと、独自スタイルのDIVで囲んでくれます。

Markdown内でワンポイントを書く例
[[info | 素早い敵とのバトルについて ]]
| 雷属性の攻撃は回避されにくいため素早い敵に有効です!
| デバフで速度を落とすのも良いですね。

下のように表示されます。内容はまったくこの記事とは関係ないですが。

素早い敵とのバトルについて

雷属性の攻撃は回避されにくいため素早い敵に有効です! デバフで速度を落とすのも良いですね。

warn(警告)の例

警告メッセージはこんな感じで書きます。

Markdown内で警告を書く例
[[warn | ご注意 ]]
| ここから先のコンテンツは<strong>まったり</strong>要素が含まれています。
| ご注意ください!

当サイトでは下のように表示されます。

ご注意

ここから先のコンテンツはまったり要素が含まれています。 ご注意ください!

まったり要素はとくにないです。ゴメンナサイ。

CSS サンプル

ご参考までに。当サイトで書いた info と warn のCSS例を載せときます。

もし使えそうと思っていただけるのでしたら、ご自由にゴピペ改変して使ってください。

 
info(補足情報)のCSS例
.custom-block {
  position: relative;
}
.info {
  border : 1px solid rgb(93, 30, 10);
  border-radius: 5px;
  margin: 0 1rem;
  margin-bottom: 2rem;
}
.info > .custom-block-heading {
  position: absolute;
  display: inline-block;
  top: 0px;
  left: 0px;
  padding: 0 .5rem;
  border-radius: 5px 0 5px 0;
  border: 1px solid rgb(93, 30, 10);
  background: rgb(93, 30, 10);
  border-top: 0;
  border-left: 0;
  font-weight: bold;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 1rem;
  color: #fff5ee;
}
.info > .custom-block-body {
  margin: 0; 
  padding: 0px;
  padding-top: 1rem;
  padding-left: 3rem;
  min-height: 6rem;
}
.info > .custom-block-heading::before {
  position: absolute;
  content: 'i';
  font-size: 2.5rem;
  line-height: 2.9rem;
  vertical-align: middle;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  top: 1.9rem;
  left: 0.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 1.5rem;
  color: #fff5ee;
  background: #CCF;
  border: thin solid #CCF;
}

次が warn に適用したCSS例です。どうぞー。

info は使わず、warn のみ使う場合は .custom-block 定義が必要なので、 1~3行目の // のコメントを外してあげてください。

 
warn(警告)のCSS例
/* .custom-block {
  position: relative;
} */
.warn {
  border : 1px solid rgb(250, 80, 85);
  border-radius: 5px;
  margin: 0 1rem;
  margin-bottom: 2rem;
}

.warn > .custom-block-heading {
  position: absolute;
  display: inline-block;
  top: 0px;
  left: 0px;
  padding: 0 .5rem;
  border-radius: 5px 0 5px 0;
  border: 1px solid rgb(250, 80, 85);
  border-top: 0;
  border-left: 0;
  font-weight: bold;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 0.9rem;
  background: rgb(250, 80, 85);
  color: #fff5ee;
}
.warn > .custom-block-body {
  margin: 0; 
  padding: 0px;
  padding-top: 1rem;
  padding-left: 3rem;
  min-height: 6rem;
}

.warn > .custom-block-heading::before {
  position: absolute;
  content: '!!';
  font-size: 2.5rem;
  line-height: 2.9rem;
  vertical-align: middle;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  top: 1.9rem;
  left: 0.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 1.5rem;
  color: #fff5ee;
  background: #FCC;
  border: thin solid #FCC;
}

書くときの注意

プラグインのカスタムブロック名を指定するとき、は スペースを入れないようにしましょう。スペース入れると正しく認識されません

OKな書き方
[[info|タイトル]]
| 内容

スペース入りの書き方

NGな書き方
[[ info|タイトル]]
| 内容

以上、お気を付けください。

補足

今回は info と warn を定義しましたが自由にスタイル名は gatsby-config.js 内で指定して使うことが出来ます。また、適用するクラス名をスペースで区切って複数指定することもできます。

ということで、これを使えばマークダウン内で頑張って DIV タグを書く必要もなく、シンプルに記述できるようになります。とっても便利!

プラグイン作者さまに感謝です!

おしまい。

参考

変更履歴

  • 2020/10/21 専用専用カバー画像、アイキャッチ画像作成
  • 2020/07/25 初版公開
 
 
送信しました!

コメント、ありがとうございます。

なんかエラーでした

ごめんなさい。エラーでうまく送信できませんでした。ご迷惑をおかけします。しばらくおいてから再度送信を試していただくか、以下から DM などでご連絡頂ければと思います。

Twitter:@NodachiSoft_jp
お名前:
 
連絡先:
 
メッセージ:
 
戻る
内容の確認!

以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください

お名前:
 
連絡先:
 
メッセージ:
 
Roboto からの操作ではないという確認のため確認キーを入れてください。
確認キー=95
戻る
 / 
送信確認へ
コメント欄
コメント送信確認へ

関連ありそうな記事(5件)です!

Gatsby でマークダウンの文章を手軽に装飾する(下線とかマーカーを引く、太字にするなど)

#Gatsby✎ 2021-01-30
Gatsby のマークダウンで手軽に装飾する方法を記載。下線を引く、マーカーを引く、太字にする、点線を引くなどを html タグを省略して文章の一部に適用する。
広告領域
追従 広告領域
目次
Gatsby のマークダウンで独自のスタイルを適用した段落を作れるようにする
Gatsby のマークダウンで独自のスタイルを適用した段落を作れるようにする
導入手順
導入手順
前提
前提
gatsby-remark-custom-blocks とは
gatsby-remark-custom-blocks とは
インストール
インストール
gatsby-config.js への設定追記
gatsby-config.js への設定追記
本文に下のように書きます
本文に下のように書きます
info(ワンポイント)の例
info(ワンポイント)の例
warn(警告)の例
warn(警告)の例
CSS サンプル
CSS サンプル
書くときの注意
書くときの注意
補足
補足
参考
参考
変更履歴
変更履歴
Nodachisoft © 2020