• このエントリーをはてなブックマークに追加

文字を枠線で囲む方法

どうも。葉です。

ネットサーフィンなどをしていると、
時々見かけるのがこのように文字を枠で囲っている文章です。

見出しタイトル
囲み内の文章

綺麗だし、おしゃれだし何より見やすい!
ということで早速取り入れてみました。

記事の中ではコピペ用のコード紹介もしているので
参考にしてください。

今回紹介するのは、次の3つです。

  • 見出しタイトルなしの囲み枠
  • 見出しタイトル有りの囲み枠
  • WordPressブログに枠線を入れる方法

1.『見出しタイトルなし』の囲み枠コード

まずは、基本となる見出しタイトルなしで囲み枠をつくるコードを紹介します。

<fieldset>タグを使う

<fieldset>タグの本来の目的は、
フォームの入力項目をグループ化することなのですが、
文字を囲む際にも使えます。

囲みの中の文章
上の囲み枠は、こちらのコードで作成できます。
<fieldset>囲みの中の文章</fieldset>

<div style>タグを使う

囲みの中の文章

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 1px solid #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

<span style>タグを使う

囲みの中の文章

上の囲み枠は、こちらのコードで作成できます。

<span style="border: 1px solid #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</span>

デザイン編集

ここからは、囲み枠のデザイン編集を行っていきます。

今回紹介するデザイン編集方法は、以下のとおりです。

  • 枠線の太さを変更
  • 枠線の色を変更
  • 枠線のデザインを変更
  • 囲み枠内の背景色を変更
  • 囲み枠と文章の余白、幅を変更
  • 囲み枠の角に丸みを持たせる

枠線の太さを変更

『border: 1px solid #cccccc;』の1pxと書かれている場所を
【1px⇒10px】に変更してみます。
すると次のように枠の太さを変更できます。

囲みの中の文章

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px solid #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

枠線の色を変更

『border: 10px solid #cccccc;』の#ccccccと書かれている場所を
【#cccccc⇒#0000ff】に変更してみます。
すると次のように枠の色を変更できます。

囲みの中の文章

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px solid #0000ff; padding: 10px; background: #ffffff;">囲みの中の文章</div>

色のコードに関しては、WEB色見本 原色大辞典 – HTMLカラーコードを参照してください。

枠線のデザインを変更

二重線

『border: 10px solid #cccccc;』のsolidと書かれている場所を
【solid⇒double】に変更してみます。
すると次のように囲み枠のデザインを変更できます。

囲みの中の文章

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px double #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

二重線以外にも次のようなデザインが有ります。

破線

囲みの中の文章

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px dashed #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

点線

囲みの中の文章

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px dotted #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

立体的に窪んだ線

囲みの中の文章

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px groove #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

立体的に隆起した線

囲みの中の文章

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px ridge #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

左と上が濃い

囲みの中の文章

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px inset #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

右と下が濃い

囲みの中の文章

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px outset #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

囲み枠内の背景色を変更

『background: #ffffff;』の#ffffffと書かれている場所を
【#ffffff⇒#bbe2f1】に変更してみます。
すると次のように囲み枠の背景色を変更できます。

囲みの中の文章

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px solid #0000ff; padding: 10px; background: #bbe2f1;">囲みの中の文章</div>

囲み枠と文章の余白、幅を変更

『padding: 10px;』の10pxと書かれている場所を
【10px⇒30px 60px】に変更します。
すると次のように囲み枠と文章との幅を変更できます。

囲みの中の文章

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px solid #0000ff; padding: 30px 60px; background: #bbe2f1;">囲みの中の文章</div>

なお、paddingの指定方法は、次のようになっています。

padding: 10px; 上下左右を指定
padding: 10px 20px; 上下左右を指定
padding: 10px 20px 15px; 左右を指定
padding: 10px 20px 15px 5px; を指定

囲み枠の角に丸みを持たせる

【border-radius: 10px;】をコードに追加記述します。
すると角の丸まった囲み枠が完成します。

囲みの中の文章

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px solid #0000ff; padding: 10px; background: #bbe2f1; border-radius: 10px;">囲みの中の文章</div>

2.『見出しタイトル有り』の囲みコード

次に、見出しタイトルつきの囲み枠コードを紹介していきます。

<fieldset>タグ<legend>タグを使う

<fieldset>タグ<legend>タグには、それぞれ次のような枠割があります。

  • <fieldset>タグ:フォームの入力項目をグループ化する
  • <legend>タグ:グループにタイトルを付ける

この方法で作った見出し付きの囲みがこちらです。

見出しタイトル

囲みの中の文章

上の見出しタイトル付き囲み枠は、こちらのコードで作成できます。

<fieldset><legend>見出しタイトル</legend>囲みの中の文章</fieldset>

<div style>タグを組み合わせる

見出しタイトル
囲みの中の文章

上の見出しタイトル付き囲み枠は、こちらのコードで作成できます。

<div style="padding: 5px 10px; color: #ffffff; background: #7fff00;">見出し文字</div>
<div style="padding: 10px; border: 1px solid #7fff00; background: #ffffff;">囲みの中の文章</div>

角を丸めてみる

見出しタイトル
囲みの中の文章

上の見出しタイトル付き囲み枠は、こちらのコードで作成できます。

<div style="padding: 5px 10px; color: #ffffff; background: #ffc0cb; border-radius: 10px 10px 0 0;">見出しタイトル</div>
<div style="padding: 10px; border: 1px solid #ffc0cb; background: #ffffff; border-radius: 0 0 10px 10px;">囲みの中の文章</div>

<span style>タグと<div style>タグを組み合わせる

見出しタイトル
囲みの中の文章

上の見出しタイトル付き囲み枠は、こちらのコードで作成できます。

<div><span style="padding: 6px 10px; color: #ffffff; font-weight: bold; background: #000066;">見出しタイトル</span></div>
<div style="padding: 10px; border: 1px solid #000066; font-size: 0.9em; margin-top: 2px;">囲みの中の文章</div>

角を丸めてみる

見出しタイトル
囲み内の文章

上の見出しタイトル付き囲み枠は、こちらのコードで作成できます。

<div><span style="background: #ff8c00; padding: 6px 10px; border-radius: 10px 10px 0 0; color: #ffffff; font-weight: bold; margin-left: 10px;">見出しタイトル</span></div>
<div style="padding: 10px; border-radius: 5px; border: 2px solid #ff8c00;">囲み内の文章</div>

角を丸めてみる2

見出しタイトル
囲み内の文章

上の見出しタイトル付き囲み枠は、こちらのコードで作成できます。

<div style="height: 12px;"><span style="background: #f08080; padding: 6px 10px; border-radius: 5px; color: #ffffff; font-weight: bold; margin-left: 10px;">見出しタイトル</span></div>
<div style="padding: 30px 15px 10px; border-radius: 5px; border: 2px solid #f08080;">囲み内の文章</div>

3.WordPressで枠線を作る手順

では、ここからはWordPressブログに枠線を作る手順を紹介していきます。

まず、WordPress管理画面の左メニューより、『投稿→新規追加』をクリックします。

WordPressの枠線設置手順1

『テキスト』をクリックし、枠線を作るコードを貼り付けます。
今回は、こちらのコードを使用します。

<div style="height: 12px;"><span style="background: #f08080; padding: 6px 10px; border-radius: 5px; color: #ffffff; font-weight: bold; margin-left: 10px;">見出しタイトル</span></div>
< div style="padding: 30px 15px 10px; border-radius: 5px; border: 2px solid #f08080;">囲み内の文章</div>

WordPressの枠線設置手順2

『ビジュアル』をクリックして表示を確認します。
この際に、表示が崩れている事がありますが、そのまま『公開』をクリックしてください。

WordPressの枠線設置手順3

すると、表示崩れが治っています。

WordPressの枠線設置手順4

これで、WordPressブログに枠線を表示する事ができました。

4.まとめ

WordPressブログで記事内に文章を囲んだ枠線を入れる方法を紹介しました。

枠線を付けることで重要なポイントを訪問者にしっかりと伝えることができます。
また、いろんなデザインの枠線を作ることができるので、
用途ごとに決まったデザインを作っておくと使い勝手も向上していいですね。

紹介したコードを見やすい記事の作成に役立ててくれたら嬉しいです。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

WordPress