Office TKJ

WordPressで集客サイト制作、SEOよりも前にするべきことがあります

*

WordPressのカスタマイズ:ワンフレーズがキワダツ!くるっと囲みテクニック

   

おまえは完全に包囲されている

要点など一言で表現出来る事、キーワードや重要な単語などピンポイントな内容だとマーカーやアンダーラインでいいんだけど、ある程度の文章を強調させたい時って困ってしまう。

↑まさにこんなケースで役に立つのが「囲み」テクニック。
今回はワードプレスで使える囲みテクニックの基本編です。

囲めば丸く収まる?便利な囲みテクニック

文章量が多いコンテンツを書いていると、どうしても画面にメリハリが無くなって来ます。
どんなに良い事が書いてあっても読みにくいコンテンツは質が低いと言われても仕方ありません。
そこで画像を入れたり、文字の大きさを変えたり、表や箇条書きを挟んでメリハリをつけようと努力するのがブロガーという物。

そんなブロガーさんの強い味方が囲みです。
文章一かたまりをクルリと囲んでみると「あら!不思議!なんだかすっきりするじゃありませんか?」

囲みは今に始まったテクニックではありません。
しかしCSSが普及する一昔前まで囲みはものすごく面倒なテクニックでした。
背景色をつけたテーブル(表)の中に白背景のテーブルを入れ子で入れる二重構造にしたり、色々と工夫して画面にメリハリをつけていたものです。
他に方法がないので仕方ありませんでしたが、かなり無理矢理な時代でした。

と文章まるごと強調したり、雰囲気を変えたりするのにとても便利です。

Wordpewssに囲みを追加する

今回は基本編ということで、シンプルな角丸+破線の囲みをご紹介します。

カスタムCSSを編集

まず、カスタムCSSにスタイルシートを書き込みます。

カスタムCSS編集画面を開きましょう。

カスタムCSSって何だ?って方は
参考記事:ちょっと待って!WordPressテーマを編集する前に理解しておきたい2つのポイント!
を参照下さい。

外観メニュー>CSS編集 と進みます。
外観メニュー

追記するCSSは下記の通りです。

 .kakomi { width: 90%; border: 2px dotted #CCCCCC; background: #fff; padding: 15px; border-radius: 10px; } 

とこんな感じです。

カスタムCSSエディター 囲み

そのままコピーいただいてもOKですが、カスタマイズしたい方は下記に注目!

width :90%;

これは囲みの横幅を指定しています。このようにパーセント指定でもOKですし、「500px」とピクセルで指定してもOKです。
ただし、時代的にスマホでブログを読まれている方も多いはずなのでパーセント指定の方が無難ですね。

border: 2px dotted #CCCCCC;

これは枠線を指定しています。

太くしたい方は「2px」を大きく、細くしたい人は小さく変えて下さい。
「dotted」は破線を意味します。実線にしたい人は「solid」と指定しましょう。
「#cccccc」は枠線の色を指定しています。HTMLカラー以外でも「red」や「blue」など色で指定出来るものもあります。
Web上の色については改めてご紹介します。

投稿画面でカスタムCSSを呼び出す方法

次に実際の使い方です。投稿画面をテキストに切り替えて下記の用に記入して下さい。

<div class="kakomi">この文章は包囲されている。破線だからと言って逃げられませんよ!</div>

ワードプレス 囲み 投稿画面

カスタムCSSは投稿画面では反映されませんので、プレビューボタンを押してプレビュー画面で確認して下さい。
↓こんな風になっているはずです。

この文章は包囲されている。破線だからと言って逃げられませんよ!

アンダーラインや蛍光マーカーでは”span”タグを利用していましたが、今回は”div”タグを使用しています。
使い分けについての詳細は改めてご紹介しますが、”span”タグは行の中でピンポイントに指定する時、”div”タグは行まるごと、又は数行をまとめて指定する場合に使うと覚えておいて下さい。

アレンジも出来ます

以前、ご紹介したテクニックと合わせて利用も出来ます。

この文章は包囲されている。無駄な抵抗はやめなさい!破線だからと言って逃げられませんよ!

囲み+破線のアンダーラインです。


<div class="kakomi">この文章は包囲されている。無駄な抵抗はやめなさい!<span class="dashedline">破線だからと言って逃げられませんよ!</span></div>

組み合わせるとさらに表現が広がりますね。

まとめ

今回はある程度大きな範囲を強調したり目立たせたりする囲みのテクニックをご紹介しました。
手順は

  • カスタムCSSにスタイルシートを追記。
  • 投稿画面で囲みたい部分にスタイルシートを適用する。
  • 合わせ技も可能

囲みが出来るとメリハリがつきますし、文字量が多いコンテンツも読みやすくなりますのでぜひマスターしたいテクニックです。
解らない方はぜひ、レッスンに来て下さい。他の文字装飾も一緒にご紹介します。

 - WordPress表現力向上委員会