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

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

CAUTION

こんな感じのやつだよ！


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

CAUTION

バックアップを取ってからお試しくださいね！

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;
}
POINTレスポンシブに対応しているので、スタイルシートへのコピペ（前半部分がいいかも）は一回で大丈夫です！また、このCSSは背景色が白と想定しているので、それ以外の色を背景色に指定している場合は、「.frame」と「.frame-title」の「background-color」を背景色と同じにしてください！

HTMLコード次に、注意書きを使いたい箇所に、こちらのHTMLコードをコピペします。
<div class="frame frame-red">
<div class="frame-title caution">
CAUTION
</div>
<p>
ここにテキストが入ります
</p>
</div>すると、こんな感じの注意書きが表示されます。
CAUTIONここにテキストが入ります

あとは、この中の文字を任意の文字に変更するだけです。「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>CAUTIONここにテキストが入ります

POINT「iタグで囲まれている部分」を変えることで、自分の好きなアイコンに変えることができますよ！

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

ここからは、この注意書きを自分の好きなタイミングで簡単に使えるようにする方法です。
CAUTIONワードプレスでサイトを運営している方限定です！

前回の会話風テキストを簡単に表示させる方法と同じなのですが、このHTMLコードをテンプレート化します。
詳しい方法は こちらのページ でご紹介しています！ぜひチェックしてみてください！

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

POINT

プラグインを入れてもサイトが重くならないので、プラグイン嫌いの方にもおすすめの方法ですよ！

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

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

 

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

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

 

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

CAUTION

表示がおかしい場合は、キャッシュクリアをして、サイトを再読み込み（リロード）してみてください！

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

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

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

CAUTION

カスタマイズの前に必ずバックアップを取ってからお試しください！


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

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

この 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>これだけで、こんな感じの「ポイント」が表示されます。
POINTここにテキストが入ります

もちろん、文字を変えて、「おすすめポイント」みたいな表示にすることもできます。
おすすめポイントビジュアルモードで実際の表示を確認しながら文字を変えることができるので、かなり直感的ですよ！

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

まとめ

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

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

POINT

少しの手間で記事にメリハリをつけることができますよ！参考にしていただければ嬉しいです！