ブログサイトを見ていると、文字が枠によって囲まれているのを目にすることがあるでしょう。
こんな感じのヤツです
伝えたいポイントをおシャレに強調できるので、ぜひ使ってみたいですよね。
今回の記事では枠で囲んで強調する方法を紹介していきます。
プラグインを使うのではなく、コードで書き込むため、理解するまでややこしいと感じるかもしれませんが、一つ一つ説明していきますので、すぐに分かると思います。
また、プラグインの「Addquicktag」を使うことで、ワンクリックで囲みたい文字や文章が枠で装飾されるようにする技も紹介します。
プラグイン「Addquicktag」をまだインストールされていないのでしたら、こちらの記事を参考にしてください。
文字を枠で囲むための基本コード
枠で囲みたい場合、テキストエディタにしてこのコードを挿入してください。
<div style=”border: 1px solid #000000; padding: 10px; background: #ffffff;”>囲みの中の文章</div>
サイト上にはこのように表示されます。
枠の大きさを文章の長さと同じにしたい場合は、こちらのコードを使います。
<span style=”border: 1px solid #000000; padding: 10px; background: #ffffff;”>囲みの中の文章</span>
サイト上にはこのように表示されます。
囲みの中の文章
短い文章に同じ長さの枠を使って囲み、「中央寄せ」にすると、
このように、見出しのように使うことが可能です。
ただし、一点だけ、注意が必要です。
枠を文章と同じ長さにするコードの場合、複数行にまたがると上手く表示ができません。
例えば、
<div style=”border: 1px solid #000000; padding: 10px; background: #ffffff”;>囲みの中の文章 1行目
囲みの中の文章 2行目
囲みの中の文章 3行目</div>
は、
囲みの中の文章 2行目
囲みの中の文章 3行目
と、言う表示になりますが、
<span style=”border: 1px solid #000000; padding: 10px; background: #ffffff;”>囲みの中の文章 1行目
囲みの中の文章 2行目
囲みの中の文章 3行目</span>
は
囲みの中の文章 1行目
囲みの中の文章 2行目
囲みの中の文章 3行目
という表示になってしまいます。
せっかく見た目を良くしようと思っていたのに、実は全くうまく表示されていません。
それどころか、見るに堪えないものになってしまっています。
典型的なテキスト入力をしたときの落とし穴ですね、これは。
きちんと表示されているかどうかの確認が絶対に必要です。
面倒くさがらずにきちんと目視で確認するようにしましょう！
コードの説明
少し専門的な話になりますが、コードの説明をしていきます。
コードの構造を理解すると、それに変化を加えることで、いろいろなデザインが利用可能です。
基本のコードである、
<div style=“border: 1px solid #000000; padding: 10px; background: #ffffff;”>
の「＝」の後ろにある「””」で囲われた部分に注目してください。
「；」マークで区切って英単語がありますね。
その一つ一つの英単語が、それぞれの構造を指示してサイト上で表示を行わさせています。
それでは、ひとつずつ説明していきますね。
「border」以下で指定しているもの
「border」で枠で囲む線の種類を指定しています。
そして、その線の太さと線の色を「：」以下で指定しています。
枠の線の太さ
「1px」とあるのが枠の線の太さを示しています。
この数字を変更すると、線の太さも変わります。
3px
5px
10px
枠の線の色
「solid」の後ろにある「＃マーク＋6桁」で線の色を指定しています。
例えば、
赤は「#ff0000」
青は「#0000ff」
黄色は「#ffff00」
「padding」以下で指定しているもの
「padding」で枠内の文字と枠線との間の、上下左右の空白部分を指定しています。
今は「padding：10px」と一つの数字しか入っていません。
この場合だとこの一つの数字で上下左右すべてを「10px」と指定しているのです。
これを「上下と左右」、「上と下と左右」、そして「4方向すべて」で指定できます。
「上下と左右」
「padding: 10px 20px」
「上と下と左右」
「padding: 10px 20px 15px」
「4方向すべて(上と右と下と左)」
「padding: 10px 20px 15px 5px」
「background」以下で指定しているもの
「background」で枠内の背景の色を指定できます。
これまでの設定は「#ffffff」で、背景色は「白」でした。
例えばこちらをライトイエローの「#ffffe0」をすると、
となります。
枠の角に丸みを持たせるには
今のデザインだと枠の角が直角で、なんとなく堅いイメージを感じませんか。
この角に丸みをもたせると、もっと柔らかくフレンドリーな感じになります。
枠の過度に丸みをもたせるコードを追加することで、その変更も可能なのです。
「background: #000000;」の後ろに半角スペースを開けて
-
「border-radius: 10px;」
を加えてください。
コードの書き方はこんな感じです。
<span style=”border: 5px solid #ff0000; padding: 10px; background: #ffffe0; border-radius: 10px;”>囲みの中の文章</span>
「border-radius: 10px」の「10px」で角の丸みを指定しています。
例えばこれを「border-radius: 5px」とした場合
「border-radius: 10px」とした場合
「border-radius: 20px」とした場合
となります。
枠線の種類を変更しよう
枠の角に丸みをもたせるだけでなく、枠線を変えることも出来ます。
「Border」の中の「Solid」を変えると、枠線が変更されます。
例えば二重線に変更させる場合のコードの書き方は、
<span style=”border: 5px double #ff0000; padding: 10px; background: #ffffe0; border-radius: 10px;”>囲みの中の文章</span>
となります。
それでは線の種類とそれぞれのコード、そして表示がどの様になるかを見ていきましょう。
「二重線」
【double】
「破線」
【dashed】
「点線」
【dotted】
「立体沈み」
【groove】
「立体浮き」
【ridge】
「左上濃線」
【inset】
「右下濃線」
【outset】
コードを「Addquicktag」に追加する方法
枠線で囲むために毎回コードを打ち込むのは大変です。
ですので「Addquicktag」に登録してワンクリックで入力できるようにしておくと便利です。
が…、
枠線の種類だけで8つ、そこに線の太さ、色、文字と枠線の距離、背景色、枠の角に丸み。
これらをどの太さ、色などどのレベルで加えるか。
それこそ組み合わせは無限大になるでしょう。
それを全部「Addquicktag」に登録して、というのは現実的ではありません。
実際に使わない登録もあるでしょうし。
ですので、ボクが採用している方法を紹介しておきます。
これを参考に、自分にとってベストな方法を探してみてください。
01. 基本のコードだけを「Addquicktag」に登録しています。
基本のコード
02. 利用するかもしれないコードをメモ帳にセーブしておきます。
-
全体【span⇒div】
枠線の種類
・二重線【solid⇒double】
・破線【solid⇒dashed】
・点線【solid⇒dotted】
・立体沈み【solid⇒groove】
・立体浮き【solid⇒ridge】
・左上濃線【solid⇒inset】
・右下濃線【solid⇒outset】
03. ついでに、同じメモ帳のページにどこのコードが何を変更できるかもメモしておきます。
<span style=”border: 5px (線の太さ) solid (線の種類) #ff0000 (線の色); padding: 10px(空白); background: #ffffe0(背景色); border-radius: 10px(角の丸み);”>囲みの中の文章</span>
04. 必要に応じて基本コードを貼り付けた後、変更したいデザインに変えていきます。
ちなみに「Addquicktag」の使用方法はこちらの記事を参照にしてください。
まとめ
・文章を枠で囲む方法はコードを使いましょう。
・コードを使うことによって何通りもある枠の種類の組み合わせを使うことができます。
・プラグインの「Addquicktag」を使ってワンクリックで使えるようにしておきましょう。
枠を表示させるにはコードを使う必要があります。
ですので、少し難しくてややこしいかもしれません。
それでも使い慣れてくると、サイトの見た目を整えてきれいにしてくれます。
Addquicktagを使うことで、かなり使いやすくなりますので、合わせてマスターしましょう。
この記事があなたの手助けになったのであれば、嬉しいです！
ご質問や感想などありましたら、お気軽にご連絡くださいね。
