【カスタムブロック初心者向け】リンク用カスタムブロックを作ってみよう

saori

2021.09.17

ブロックエディタ

【カスタムブロック初心者向け】リンク用カスタムブロックを作ってみよう

こんにちは、デザイナーのsaoriです💖
突然ですが…カスタムブロック、活用していますか？

カスタムブロックはこれまで活用ブログでもいくつかご紹介してきましたが、一度ブロックを作っておけば、複雑な入力もブロックエディタからポン！っとできてしまうのが魅力でしたね。

さて今回は、どんなサイトにも使えるシンプルで汎用的なカスタムブロックのサンプルを紹介します。
今までのようなスゴ技は出てきませんが、そのかわりに設計のコツをじっくり解説。使い方の基本をマスターできます。
コピー＆ペーストでデザインを再現できるCSSも用意していますので、コーディングに自信のない方もカスタムブロックデビューできますよ。

それでは、サンプルをみながら一緒に作成してみましょう💪

リンク専用ブロックをつくってみよう

今回作成するのは、リンク専用のブロックです。

こんなブロックがあれば、一目でリンクだとわかりますね！まさにこの活用ブログでも使用しています。

テキストブロックを使ってリンクのブロックを作ることも可能ですが、カスタムブロックを作成し、このブロックだけに対応するCSSをつけることでリンク専用のブロックとして活用できます。

カスタムブロックを作成

新規カスタムブロック画面

では、このリンク専用のブロックの作成に入ります。カスタムブロックの設定から始めていきましょう。
新しいカスタムブロックをつくるには、
左メニュー　カスタムブロック＞新規　を選択し、新規作成画面に入ります。

各フィールドの細かい説明は

カスタムブロック新規作成 - マニュアル | MovableType.net

をご参照ください。

今回はこのように設定します。

名前：リンク
識別子：link01
ブロック：テキスト
コンテナ要素で包む：なし
ブロックの追加と削除：なし

ブロックの設定

さらに、ブロックには、テキストを入力しておき、リンク先も設定しておきます。
編集画面で入力をし直す前提ですので、どちらもダミーで結構です。以下のように設定しましょう。

ラベル：リンク
説明：[リンクの挿入・編集]からリンク先を書き換えてください。
クラス名：link01
既定値：ここにURL　　リンク先に「＃」を指定

今回の設定のポイントは次の部分です。

テキストブロックの内容にあらかじめリンクを設定している
テキストブロックの説明文
テキストブロックにクラス名「link01」が設定されている

保存して、カスタムブロックの設定は完了です。

CSSを追記

記事・ウェブページ用CSSを追加

次はこのブロックに対応するCSSを設定しましょう。
デザイン＞テンプレートから、スタイルシート（style.css）テンプレートを開き追記します。


a {
  color: #01A787;
  text-decoration: none;
}

.link01 a {
  text-align: center;
  display: block;
  border-radius: 4px;
  width: calc(100% - 40px);
  margin: 4em auto 2em;
  padding: 8px 20px;
  background-color: #F6F6F6;
  position: relative;
}

.link01 a:before {
  content: "リンク";
  display: block;
  font-size: 75%;
  width: fit-content;
  padding: 4px 20px;
  background: #01A787;
  color: #ffffff;
  position: absolute;
  bottom: 100%;
  left: 0;
  font-weight: bold;
  border-radius: 4px 4px 0px 0px;
  transition: all 0.3s ease-in-out 0s;
}

@media (max-width: 640px) {
  .link01  a {
    width: 100%;
    padding: 4px 0;
  }
  .link01 a:before {
    padding: 2px 16px;
  }
}

プレビュー用CSSを追加

これでカスタムブロック完成…？ではないんです！
忘れてはいけないのが、エディタCSSの存在。
編集画面上で、本番の記事・ウェブページと同じようなデザインを表示させるために必要な設定です。ここにも同様のCSSを記述します。 デザイン＞テンプレート から、システム・テンプレートにある、「エディタCSS」を開き、以下のように追記します。


.entry a, .page a {
  color: #01A787;
  text-decoration: none;
}

.entry .link01 a, .page .link01 a {
  text-align: center;
  display: block;
  border-radius: 4px;
  width: calc(100% - 40px);
  margin: 4em auto 2em;
  padding: 8px 20px;
  background-color: #F6F6F6;
  position: relative;
  text-decoration: none;
}

.entry .link01 a:before, .page .link01 a:before {
  content: "リンク";
  display: block;
  font-size: 75%;
  width: fit-content;
  padding: 4px 20px;
  background: #01A787;
  color: #ffffff;
  position: absolute;
  bottom: 100%;
  left: 0;
  font-weight: bold;
  border-radius: 4px 4px 0px 0px;
  transition: all 0.3s ease-in-out 0s;
}

@media (max-width: 640px) {
  .entry .link01 a, .page .link01 a {
    width: 100%;
    padding: 4px 0;
  }
  .entry .link01 a:before, .page .link01 a:before  {
    padding: 2px 16px;
  }
}

これでようやく、カスタムブロックの設定が完了しました。