ブログで記事を書いていて補足説明を入れたいときがあります。
そんな時はこれまで、以下のようなスタイルを用いて補足説明を入れていました。
背景色を変更して補足説明を入れていた。
これでも、本文と隔離した形で書けるので、特に問題もないのですが、よりわかりやすく以下のような補足説明欄を作成してみました。
多少わかりやすくなったかな、ということで、メモがてらこの入力欄の設定方法の紹介です。
目次
補足説明入力欄スタイルの設定方法
このスタイルを、利用するには以下の手順が必要です。
- Font Awesomeを読み込む
- スタイルシートを記述する
基本的に、設定はCSSをコピペするだけです。
Font Awesomeを読み込む
まず今回の設定には、Font Awesomeのフォントを利用するので利用するための準備が必要です。
サイトヘッダー部分の<head></head>内に以下のようにしてCDNでFont Awesomeを読み込みます。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-3dkvEK0WLHRJ7/Csr0BZjAWxERc5WH7bdeUya2aXxdU= sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg==" crossorigin="anonymous">
スタイルシートを記述する
あとはスタイルシートに以下のように記述するだけです。
/*補足情報*/
.information,
.question{
background-color: #F4F3EB;
padding: 20px 20px 20px 72px;
border-radius: 4px;
position: relative;
display: block;
margin-top: 1em;
margin-bottom: 1em;
}
.information::before,
.question::before{
font-family: "FontAwesome";
font-size: 50px;
position: absolute;
top: 20px;
left: 13px;
color: #EAE3B4;
}
.information::before{
content: '\f05a';
}
.question::before{
content: '\f059';
}
WordPressの場合は、子テーマのstyle.cssに追記します。
レスポンシブで、横幅の狭いモバイル端末などでアイコンやpaddingを再設定する場合は、以下のように追記してください。
@media screen and (max-width:440px){
.information,
.question{
padding: 10px;
}
.information::before,
.question::before{
display: none;
}
}
補足説明入力欄の利用方法
あとは、ブログで記事を書くときなどに以下のように書いて利用します。
補足説明（インフォメーション）
<div class="information">補足説明を入力する。</div>
補足説明（クエスチョン）
<div class="question">疑問を持たれそうな内容に関する補足説明を入力する。</div>
AddQuicktagで入力する場合
AddQuicktagで入力するには、以下のようにします。
補足説明（インフォメーション）
開始タグ
<div class="information">
終了タグ
</div>
補足説明（クエスチョン）
開始タグ
<div class="question">
終了タグ
</div>
おまけ
作ってはみたものの、イマイチだったので、ボツにした枠丸つきのものも一応掲載。
.information,
.question{
background-color: #F4F3EB;
padding: 20px 20px 20px 96px;
border-radius: 4px;
position: relative;
display: block;
min-height: 46px;
margin-top: 1em;
margin-bottom: 1em;
}
.information::before,
.question::before{
font-family: "FontAwesome";
font-size: 50px;
position: absolute;
top: 10px;
left: 15px;
color: #EAE3B4;
border: 5px solid #EAE3B4;
padding: 10px;
border-radius: 50%;
line-height: 35px;
width: 35px;
height: 35px;
text-align: center;
}
.information::before{
content: '\f129';
}
.question::before{
content: '\f128';
}
もう少し調節すれば使えるかも。
まとめ
以前の、単に背景色を変更するだけの補足情報よりは、微妙ーにわかりやすくなった程度だと思います。
けれど微妙だとしても、少しでも読み手にわかりやすく伝われば良いかなと。
というわけで、今回紹介したスタイルは「本文と切り分けて補足説明を項目末などに入れたい」なんて場合には、いいかもしれません。
こんばんはー。検索してたどり着きました。
この補足情報ってかなり使えそうですね。
ちょっと試してみますねー。