ブログ記事に補足情報を入力するためのスタイルシート

ブログで記事を書いていて補足説明を入れたいときがあります。

そんな時はこれまで、以下のようなスタイルを用いて補足説明を入れていました。

背景色を変更して補足説明を入れていた。

これでも、本文と隔離した形で書けるので、特に問題もないのですが、よりわかりやすく以下のような補足説明欄を作成してみました。

情報アイコンがついた補足説明入力欄。
疑問符アイコンがついた補足説明入力欄。記事を読んで、疑問に思われるようなことに対する答えを書く形で利用することを想定。

多少わかりやすくなったかな、ということで、メモがてらこの入力欄の設定方法の紹介です。

スポンサーリンク
レクタングル(大)広告

補足説明入力欄スタイルの設定方法

このスタイルを、利用するには以下の手順が必要です。

  1. Font Awesomeを読み込む
  2. スタイルシートを記述する

基本的に、設定はCSSをコピペするだけです。

Font Awesomeを読み込む

まず今回の設定には、Font Awesomeのフォントを利用するので利用するための準備が必要です。

サイトヘッダー部分の<head></head>内に以下のようにしてCDNでFont Awesomeを読み込みます。

既にFont Awesomeが読み込まれている場合、もしくは使用しているWordpressテーマの場合は記述する必要はありません。

スタイルシートを記述する

あとはスタイルシートに以下のように記述するだけです。

WordPressの場合は、子テーマのstyle.cssに追記します。

レスポンシブで、横幅の狭いモバイル端末などでアイコンやpaddingを再設定する場合は、以下のように追記してください。

一応、いくつかのブラウザで動作テストしましたが、全てのブラウザで正常動作するかはわかりません。細かなところは調節してください。

補足説明入力欄の利用方法

あとは、ブログで記事を書くときなどに以下のように書いて利用します。

補足説明(インフォメーション)

補足説明を入力する。

補足説明(クエスチョン)

疑問を持たれそうな内容に関する補足説明を入力する。

AddQuicktagで入力する場合

AddQuicktagで入力するには、以下のようにします。

補足説明(インフォメーション)

補足説明(インフォメーション)の入力

開始タグ

終了タグ

補足説明(クエスチョン)

補足説明(?)の入力

開始タグ

終了タグ

おまけ

作ってはみたものの、イマイチだったので、ボツにした枠丸つきのものも一応掲載。

補足説明ボツ案

もう少し調節すれば使えるかも。

まとめ

以前の、単に背景色を変更するだけの補足情報よりは、微妙ーにわかりやすくなった程度だと思います。

けれど微妙とて、少しでも読み手にわかりやすく伝われば良いかなと。

というわけで、今回紹介したスタイルは「本文と切り分けて補足説明を項目末などに入れたい」なんて場合には、いいかもしれません。

『ブログ記事に補足情報を入力するためのスタイルシート』へのコメント

  1. 名前:おっくん 投稿日:2016/02/26(金) 00:27:44 ID:901a18344

    こんばんはー。検索してたどり着きました。
    この補足情報ってかなり使えそうですね。
    ちょっと試してみますねー。

  2. わいひら 名前:わいひら 投稿日:2016/02/27(土) 12:26:46 ID:b49faa0e1

    こんにちは。
    よかったら使ってみてください。
    本文の内容から少しそれた文を自然に挿入するのに結構便利だったりします。