コピペでOK!長文内の各パラグラフや文章を目立たせるタグ一覧

更新
2012年10月14日(日)

CSSやjQueryで customtemplate に定義済みの文章装飾用タグ一覧です。クラスを加えるだけで装飾できるので、テンプレート変更時も文章構造に影響がありません。IE8以下などでは一部機能しないものもあります。

パラグラフ全体を装飾

長文作成時、アクセントとなるように要所要所で色をつけたりピクトグラムを挿入すると、どこがポイントであるかが明確に分かり文章が読みやすくなります。

色や角丸で装飾

CSS2.1で色を付け、CSS3で角丸にします。

  1. このパラグラフのように背景色をスカイブルー、枠を青色に装飾する場合は、クラスに「point」と入れます。下のサンプルコードにあるとおり、このパラグラフにはクラスが1つだけ使われています。

    <p class="point">ここに本文を入れる</p>
    

  2. 角丸にする場合は、「round」もしくは「maru」をクラスに入れます(IE8以下では機能しません)。背景をピンクにする場合は、「hint」とクラスに入れます。このパラグラフにはクラスが2つ使われています。

    <p class="hint maru">ここに本文を入れる</p>
    

  3. 角が少し欠けた感じにする場合は、「blunt」もしくは「kake」をクラスに入れます(IE8以下では機能しません)。このパラグラフにはクラスが2つ使われています。スタイルシートを直接書いて、枠線と文章の間にスペースを設定しています。

    
    <p class="rei kake" style="padding:10px;">ここに本文を入れる</p>
    

  4. 背景を黒にして目立たせる場合は、クラスに「ginga」と入れます。このパラグラフにはクラスが1つ使われています。スタイルシートを直接書いて、枠線と文章の間にスペースを設定しています。

    <p class="ginga" style="padding:20px;">ここに本文を入れる</p>
    

ピクトグラムを挿入して装飾

ピクトグラム用のスペースをjQueryで設け、そこにCSSで特殊文字を挿入します。(IE7以下では機能しません)

  1. パラグラフ内の左側にピクトグラム(特殊文字)としてビックリマークを入れました。クラス「picto」で大きさ分のスペースを作り、クラス「bikkuri」でビックリマークを入れています。クラス「chui」で背景を黄色にするように定義しています。このパラグラフにはクラスが3つ使われています。

    <p class="picto bikkuri chui">ここに本文を入れる</p>
    

  2. 小さいピクトグラムとしてバツマークを挿入しました。警告などをするには赤系の背景に黒い太字にするように定義しています。このパラグラフにはクラスが3つ使われています。

    <p class="picto-s batsu keikoku">ここに本文を入れる</p>
    

  3. 大きなピクトグラムとして骨を挿入しました。危険がある場合には背景を真っ赤にし、文字を黄色にするよう定義しています。このパラグラフにはクラスが4つ使われています。

    <p class="picto-l hone kiken maru">ここに本文を入れる</p>
    

  4. 他から文章を引用する場合に引用符をピクトグラムとして挿入しました。引用文専用のタグ<blockquote>を使いました。色は特に指定していません。このパラグラフにはクラスが2つ使われています。
    <blockquote class="picto inyo">ここに引用文を入れる</blockquote>
    

  5. ピクトグラムを挿入する場合、少なくとも「大きさ(pictoなど)」と「種類(memoなど)」の2つを設定する必要があります。

    <p class="picto check point maru bold">ここに本文を入れる</p>
  1. <p class="picto yubi rei blink-picto">ここに本文を入れる</p>

  2. <p class="border round blink" style="padding:10px;">ここに本文を入れる</p>

  3. ピクトグラムをフェイドイン・フェイドアウトさせるにはクラス「fade-picto」を追加します。(IE8以下では機能しません)

    低スペックPCですとCPUへの負荷が尋常ではないです。使用の推奨はしていません。このようにデフォルトで非表示であれば、負荷が幾分ましのようです。

    <p class="picto batsu keikoku fade-picto">ここに本文を入れる</p>

  4. パラグラフ全体をフェイドイン・フェイドアウトさせるにはクラス「fade」を追加します。(IE8以下では機能しません)

    低スペックPCのCPUへの負荷を考えると使用は推奨しません。

    <p class="picto-s kaku kiken fade large bold">ここに本文を入れる</p>

表示・非表示の簡単切替

  1. 任意のパラグラフを簡単に非表示にするには、クラス「skip-ok」を追加します。このパラグラフをクリックすると、下のパラグラフが非表示になります。非表示の時はこのパラグラフの文字色がグレイアウトします。再度クリックすると表示されます。クラス名の由来は、「スキップOKだよ~♪(スキップできるけどまだしてないよ)」です。

    クラス「skip-ok」を追加したパラグラフが非表示になるのではなく、skip-ok の次の要素(弟要素)が非表示になります。上のパラグラフをクリックすると、このパラグラフが非表示になります。

    <p class="skip-ok">ここに本文を入れる</p>
    <p>このパラグラフの表示・非表示が切り替わる</p>

  2. クラス「skip-on」を追加すると、弟要素がデフォルトで非表示になります。このパラグラフをクリックすると、非表示の弟要素が表示されます。また、このパラグラフのグレイアウトが解除されます。再度クリックすると非表示になります。クラス名の由来は、「スキップしてるよ~☆(スキップ機能がON状態だよ)」です。

    skip-onは弟要素がデフォルトで非表示、skip-okは弟要素がデフォルトで表示されています。どちらも、クリックすれば弟要素の表示・非表示が切り替わる点は同じです。

    <p class="skip-on">ここに本文を入れる</p>
    <p>このパラグラフの表示・非表示が切り替わる</p>

回り込み

CSSをある程度使える方が「回り込み」を手軽に利用するために用意しました。段階的に説明します。レイアウト崩れの原因にもなりますので、不慣れな間は手出し無用がよいかと思います。

  1. 以下のように、3つのパラグラフ(画像・画像の説明・画像と関連が薄い文)があるとします。画像は小さいので右側にスペースが空いてます。

    ネコ

    愛猫チェリッシュそこらへんにいるネコを撮りまくるぞ~♪あいびょう、あいねこ、あいきゃっと、チェリシュシュシュ(^_-)~☆ (回りこまされるパラグラフ)

    ネコが好きですが、カピパラも好きです。(回りこまされたくないパラグラフ)

    <p><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/entry-9s.jpg" /></p>
    <p>愛猫チェリッシュ そこらへんにいるネコを撮りまくるぞ~♪あいびょう、あいねこ、あいきゃっと、チェリシュシュシュ(^_-)~☆ (回りこまされるパラグラフ)</p>
    <p>ネコが好きですが、カピパラも好きです。(回りこまされたくないパラグラフ)</p>

  2. 画像の横に画像の説明が回り込むようにします。回り込ませるパラグラフにクラス「floatl」を追加しました。画像の横に説明文が回り込まされました。しかし、回り込まされたくないパラグラフも回り込まされています。

    ネコ

    愛猫チェリッシュそこらへんにいるネコを撮りまくるぞ~♪あいびょう、あいねこ、あいきゃっと、チェリシュシュシュ(^_-)~☆ (回りこまされるパラグラフ)

    ネコが好きですが、カピパラも好きです。(回りこまされたくないパラグラフ)

    <p class="floatl"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/entry-9s.jpg" /></p>
    <p>愛猫チェリッシュ そこらへんにいるネコを撮りまくるぞ~♪あいびょう、あいねこ、あいきゃっと、チェリシュシュシュ(^_-)~☆ (回りこまされるパラグラフ)</p>
    <p>ネコが好きですが、カピパラも好きです。(回りこまされたくないパラグラフ)</p>

  3. 回り込まされたくないパラグラフにクラス「clear」を追加します。これでそのパラグラフ以降は回りこまされません。

    ネコ

    愛猫チェリッシュそこらへんにいるネコを撮りまくるぞ~♪あいびょう、あいねこ、あいきゃっと、チェリシュシュシュ(^_-)~☆ (回りこまされるパラグラフ)

    ネコが好きですが、カピパラも好きです。(回りこまされたくないパラグラフ)

    <p class="floatl><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/entry-9s.jpg" /></p>
    <p>愛猫チェリッシュ そこらへんにいるネコを撮りまくるぞ~♪あいびょう、あいねこ、あいきゃっと、チェリシュシュシュ(^_-)~☆ (回りこまされるパラグラフ)</p>
    <p class="clear">ネコが好きですが、カピパラも好きです。(回りこまされたくないパラグラフ)</p>

  4. 回り込まされるパラグラフに背景色などがあると、以下のようにはみ出ているのが分かります。はみ出ているのが分かりやすいように、画像を少しずらしています。

    ネコ

    愛猫チェリッシュそこらへんにいるネコを撮りまくるぞ~♪あいびょう、あいねこ、あいきゃっと、チェリシュシュシュ(^_-)~☆ (回りこまされるパラグラフ)

    ネコが好きですが、カピパラも好きです。(回りこまされたくないパラグラフ)

    <p class="floatl><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/entry-9s.jpg" /></p>
    <p class="rei">愛猫チェリッシュ そこらへんにいるネコを撮りまくるぞ~♪あいびょう、あいねこ、あいきゃっと、チェリシュシュシュ(^_-)~☆ (回りこまされるパラグラフ)</p>
    <p class="clear">ネコが好きですが、カピパラも好きです。(回りこまされたくないパラグラフ)</p>

  5. 背景色などがはみ出ているパラグラフにクラス「ofh」を追加します。ofh の由来は、overflow:hidden; (はみ出ているのは隠す)です。

    ネコ

    愛猫チェリッシュそこらへんにいるネコを撮りまくるぞ~♪あいびょう、あいねこ、あいきゃっと、チェリシュシュシュ(^_-)~☆ (回りこまされるパラグラフ)

    ネコが好きですが、カピパラも好きです。(回りこまされたくないパラグラフ)

    <p class="floatl><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/entry-9s.jpg" /></p>
    <p class="rei ofh">愛猫チェリッシュ そこらへんにいるネコを撮りまくるぞ~♪あいびょう、あいねこ、あいきゃっと、チェリシュシュシュ(^_-)~☆ (回りこまされるパラグラフ)</p>
    <p class="clear">ネコが好きですが、カピパラも好きです。(回りこまされたくないパラグラフ)</p>

  6. ネコ

    長文を書く時に使える構造化文章用サンプル利用者向けです。このパラグラフのように画像の前に序数が入っている場合、序数を非表示にする方法です。

    <p class="floatl><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/entry-9s.jpg" /></p>
    <p>このように画像の前に序数が入っている場合、序数を非表示にする方法があります。</p>

  7. ネコ

    クラス「no-before」を追加すると序数は非表示になります。

    <p class="floatl no-before><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/entry-9s.jpg" /></p>
    <p>クラス「no-before」を追加すると序数は非表示になります。</p>

  8. ネコ

    クラス「clear」を使わずに回り込みを解除する方法です。このパラグラフの親要素liにofhを追加しているので、下のh3が回り込まされていません。  liのクラスofh付け外しボタン  さらに別の方法として、このパラグラフの下にhrなどを設置すれば、liにofhを追加しなくても回りこみされません。

アスキーアート

  1. アスキーアート用のパラグラフです。行ごとに改行しなくてもいいように、<pre>タグを使います。

                     _,,..  -―――-  、、
                   ,. ‐'"´             `丶 、
                   /                    `丶、
                 /      ノ    '⌒i               丶  _     __,,...._
              /             ‐く               \   ̄ ̄     ゙i
             j           、__,ノ                         _,,.. -''′
               l       ノ
                |                          ,r''"´ ̄``丶 、  __,. -- .、
                |                ̄ ̄`ヽ                          i
               |                 ___,ノ                       ノ
             !                                        ,/
               ゙ 、                                   ,. - '
                \                             ,..  -‐'"
                 丶、                   _,,,. -‐ '"
                    `` ''''ー‐-------―‐ ''''""´
    
    <pre class="aa">ここにアスキーアートを入れる</pre>
    

まとめ

  1. 主なクラス一覧は次のとおりです。実際にクラスを設定してみて、どのようになるのかを試してみてください。

    ピクトグラムパラグラフ
    大きさ種類点滅など点滅など表示切替
    • picto
    • picto-l
    • picto-s
    • memo
    • check
    • ! bikkuri
    • inyo
    • yubi
    • vsign
    • batsu
    • hone
    • kaku
    • blink-picto
    • fade-picto
    • point
    • hint
    • rei
    • ginga
    • chui
    • keikoku
    • kiken
    • valid
    • invalid
    • reverse
    • border
    • maru
      round
    • kake
      blunt
    • fade
    • skip-ok
    • skip-on

文章の一部を装飾

あくまでも当カスタムテンプレート内で定義しているものなので、他の方法で装飾できるのならばその方法で装飾する方がいいかと思います。

  1. 文字列の一部に目を引かせたりしたり、控えめにしたりできます。

    <span class="notice">目を引かせたい文字列を入れる</span>
    <span class="pale">控えめにしたい文字列を入れる</span>

  2. 文字にアウトラインを作成できます。文字色と背景色が同じような色の場合、明確に分けられます。背景に画像を用い、文字の視認性がいまいちの時に便利です(IE9以下では機能しません)。アウトラインのデフォルト色は #222; (黒系)ですが、任意に変更できます。アウトラインをグレーにした具体例を、愛猫チェリッシュの花付近にあるブログ名で確認できます。

    <span class="text-outline">アウトラインを作成したい文字列を入れる</span>

  3. 虹色に点滅させることもできます。

    FF7の リミットブレイク の表示みたいですかね。(IE7以下では機能しません)

    <span class="niji">虹色に点滅させたい文字列を入れる</span>

  4. 太さを調整できます。IE8以下では「tiny」は文字が潰れて解読不能です。

    <span class="huge">大きさ500%</span>
    <span class="big">大きさ200%</span>
    <span class="large">大きさ140%</span>
    <span class="small">小ささ70%</span>
    <span class="tiny">小ささ50%</span>
    <span class="bold">太字</span>
    

  5. 打ち消し線下線shataiです。日本語では斜体にならないようです。

    <span class="del">打ち消し</span>
    <span class="uline">下線</span>
    <span class="italic">斜体</span>
    

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)