注意書きを表示するHTML/CSSコードをテンプレ化する方法。

「隣の芝が真っ青に見える」でおなじみのカスタマイズの時間です。今回は注意書きを表示するコードをご紹介します。

やっぱり目立ちますよね。ついつい見てしまいますよね。というわけで、自分のサイトでも使えるようにしてみました。

CSSコード

まずは、スタイルシート（.cssで終わるファイル）にこちらのコードをコピペします。

/*--------------------
 オリジナルのフレーム
--------------------*/
.frame {
 width: 80%;
 margin: 30px auto 20px;
 padding: 30px 20px 0;
 border: 3px solid #aaa;
 position: relative;
 border-radius: 3px;
 background-color: #fff;
}
.frame-title {
 position: absolute;
 top: -13px;
 left: 20px;
 padding: 0 5px;
 background-color: #fff;
}
.frame-title .fa {
 margin-right: 5px;
}
.caution {
 background-color: #ff4500;
 border: 2px solid #ff4500;
 color: #fff;
 border-radius: 3px;
}
.frame-red {
 border-color: #ff4500;
}

HTMLコード

次に、注意書きを使いたい箇所に、こちらのHTMLコードをコピペします。

<div class="frame frame-red">
  <div class="frame-title caution">
    CAUTION
  </div>
  <p>
    ここにテキストが入ります
  </p>
</div>

すると、こんな感じの注意書きが表示されます。

あとは、この中の文字を任意の文字に変更するだけです。「CAUTION」の部分も変えるができます。

Font Awesome（アイコンフォント）を使っている方限定ですが、こちらのコードをコピペすると、「CAUTION」の前にアイコンが表示されます。

<div class="frame frame-red">
  <div class="frame-title caution">
    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>CAUTION
  </div>
  <p>
    ここにテキストが入ります
  </p>
</div>

ワードプレスで注意書きをテンプレートに登録して使う

静的なサイト（ワードプレスやはてな以外の動的なサイト以外のサイト）であれば、先述のHTML/CSSコードをコピペするだけで、注意書きを使えるようになります。

ここからは、この注意書きを自分の好きなタイミングで簡単に使えるようにする方法です。

前回の会話風テキストを簡単に表示させる方法と同じなのですが、このHTMLコードをテンプレート化します。

詳しい方法はこちらのページでご紹介しています！ぜひチェックしてみてください！

ざっくりと説明すると、「TinyMCE Templatesというプラグインを使い、HTMLコードを登録する」というものです。

テンプレートへの登録方法

管理画面上部の「新規」タブ→「テンプレート」と進み、下の画像のように、先ほどのHTMLコードを登録します。

これでテンプレ化できたので、あとは自分の好きなタイミングでこのコードを呼び出すだけ。

投稿画面の「メディアを追加」の横に「テンプレートを挿入」というボタンがあるはずなので、そのボタンをクリック。

注意書きのテンプレートを挿入します。

自分の好きなテキストをテンプレートに登録する

もちろん、自分の好きなテキストをテンプレートに登録することもできます。

先ほどのテンプレートに登録する段階で、「ここにテキストが入ります」を自分の好きなテキストにするだけでOKです。

↑のようなテキストを登録しておけば、いちいち注意書きを書く必要がなくなるので便利ですよ。

「ポイント」を表示させる

この HTML/CSSコード自体はそこまで難しくないコードなので、簡単にカスタマイズすることもできます。

例えば、注意書きの他に「ポイント」を表示させる場合。先ほどのコードに下記のコードを追加します。

.one-point {
 background-color: #0000ff;
 border: 2px solid #0000ff;
 color: #fff;
 border-radius: 3px;
}
.frame-blue {
 border-color: #0000ff;
}

HTMLコードはこちら。

<div class="frame frame-blue">
  <div class="frame-title one-point">
    POINT
  </div>
  <p>
    ここにテキストが入ります
  </p>
</div>

Font Awesome（アイコンフォント）を使っている方は、こちらのコードをコピペすると、「POINT」の前にアイコンが表示されます。

<div class="frame frame-blue">
  <div class="frame-title one-point">
    <i class="fa fa-check-circle-o" aria-hidden="true"></i>POINT
  </div>
  <p>
    ここにテキストが入ります
  </p>
</div>

これだけで、こんな感じの「ポイント」が表示されます。

もちろん、文字を変えて、「おすすめポイント」みたいな表示にすることもできます。

注意書きをテンプレ化したようにこれもテンプレ化するとすぐに使えて便利ですよ！

まとめ

会話風テキストに続いて挑戦したカスタマイズでしたが、無事に終わって良かったです。

喜びのあまり、今回の記事でうざいくらい使ってみましたが、これは会話風テキストよりも使用頻度が高そうですね。