どうもこんにちは。ましゅーです。
文章中に補足を入れるときは「これは補足ですよー」ってひと目で分かるように、メインの文章スペースとは異なる背景色を使ったり、枠線で囲うスタイルを採用するかと思います。
当ブログが現在採用しているWordPressテーマ「Simplicity」にも補足文を入れたくなった時に使えるスタイルがあり、わざわざ自作する手間が省けます。
…が、今回はSimplicityに入ってる補足用のスタイルをベースに、スタイルシートを追加してみたのでご紹介します。
[スポンサードリンク]
Simplicityでは「補足」を挿入するためのスタイルが入っている
先述の通り、記事本文とは別に、補足的なことをチョロッと挿入したいときに、本文と混同しないように補足の部分は背景色を変えたり枠線で囲ったりすると思います。
その「補足」のためのスタイルがSimplicityには付属しており、以下のように記述する（あるいは記事編集画面のテキストエディタで「補足説明」ボタンをクリックする）だけで補足文が挿入できます。
<div class="information">ここに補足説明を入れましょう</div>
<div class="question">また？マークバージョンもあります。疑問に思った時はこちらを使ってみよう</div>
当ブログでも補足説明はよく挿入するので、こういった本文と区別するためのスタイルはよく使っています。
WordPressならばAddQuicktagプラグインを使用して、素早く挿入できるようにすると記事作成が捗ります。
補足
ちなみにSimplicityテーマを導入する以前は、このような枠線で囲ったものをスタイルシートで作成して使用していました。
でも、あえてもう1種類追加してみました
Simplicityの補足用のスタイルは上記の2種類で、補足や疑問点についてはこの2種類を使えば良いですが、例えば注意・警告といった内容の補足を挿入したい場合は、もう少し危機感を煽るようなモノにしたいのです。
そこで、Simplicity標準の補足の枠をベースに以下のような補足枠を自作してみました。
早い話、左側にあるウェブフォントを「！」マークにして、色を赤系にして危機感を煽る感じにしてみただけです。標準の黄色っぽい色調と比べると「あ、こりゃやべーな気をつけよう」ってなるかと思います。
なお、Simplicityを使っていない人でも、この手の補足説明の枠が作りたいという人のために、わいひらさん（Simplicityの製作者）がブログにて作り方を解説しています。
…というよりこの記事を参考にして作りました。
参考 ブログ記事に補足情報を入力するためのスタイルシート – 寝ログ
PC用のスタイルシート
で、まずPCで表示するためにスタイルシートは以下のように設定してみました。
補足説明の枠の横に「！」マークとかを挿入する場合、FontAwesomeを読み込むための設定が必要です。設定についての詳細も上記の寝ログさんの記事に記載されています。
.alert {
background-color: #fdeff2;
padding: 20px 20px 20px 72px;
border-radius: 4px;
position: relative;
display: block;
}
.alert::before{
font-family: "FontAwesome";
font-size: 50px;
position: absolute;
top: 20px;
left: 13px;
color: #ee827c;
}
.alert::before{
content: '\f06a';
}
背景色とかはお好きなものを入れてみてください。
スマホ向けのスタイルシート（レスポンシブ）
PCで表示するためのスタイルシートは上のやつで良いのですが、これをスマホで閲覧すると表示が崩れてしまいます。
なので、こちらも寝ログさんを参考に少し改変したスタイルシートを追加しました（Simplicityの場合、responsive.cssに記述します）。
@media screen and (max-width:740px){
.alert {
padding: 20px 20px 20px 55px;
}
.alert:before{
font-size: 35px;
display: inline;
}
}
寝ログさんのところではFontAwesomeのサイズが記載されていなかったので、スマホで何度か確認しながら調整したところ、35pxがちょうどいい感じでした。
また、それに合わせて枠内の余白も調整して、既存の枠となるべく形がシンクロするように調整しました。
これで思う存分読者に警告を発信することができます（危ないブログ）。
まとめ
基本はSimplicityあるいは寝ログさんで紹介されていたコードを改変したものですが、あちらで紹介されていたモノを当ブログに適応させるために軽くいじってみました。
特に模型制作日記とかでは注意点などを解説する機会が多いので、読者により印象に残りやすいデザインにしてみたかった次第です。
