注目キーワード
  1. 体験談
  2. ブログ開設
  3. 仕事
WordPress アイキャッチ画像-囲み枠

<--WordPress--> 3分でブログ記事に【囲み枠】を付ける方法

・この記事を読むと

ブログ記事内で、文章を枠で囲むことが出来るようになります。ぜひお試しください!!

この記事についてすべて実際に作業し、簡単に出来た内容を紹介しています!

★ブログ記事に【囲み枠】を付ける方法

ブログ記事内の文章に、囲み枠を付けて見やすくする方法をご紹介します。囲み枠はいろいろな形を作成することができますが、ここの記事では、自分が良く使う枠を解説します。

 

下記のような【囲み枠】が自分の記事内に作れます!
ここにタイトル文字が入れられますここに文字が表示されます!

 

さぁ、すぐに始めましょう!!

手順の概要
手順1:「style.css」ファイルに、指定のCSSコードを記述
手順2:WordPress投稿画面で、指定のHTMLコードを記述
手順3:自分の表示させたい文字を記述

 

手順1:「style.css」ファイルに、指定のCSSコードを記述

 

①WordPressテーマファイルの「style.css」ファイルを開きます。

 >>「style.css」ファイルの開き方はコチラから!

 

「style.css」ファイルに下記のコードをコピペします。

 

.box01 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box01 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box01 p {
    margin: 0; 
    padding: 0;
}

 

「style.css」ファイルを保存します。

 

手順2:WordPress投稿画面で、指定のHTMLコードを記述

 

①WordPress投稿画面のテキストモードにて、下記「HTMLコード」を記述します。

 

<div class="box01">
<span class="box-title">囲み枠</span>
テスト1
テスト2
</div>

プレビュー画面で確認で確認すると、

囲み枠
テスト1
テスト2

と表示されます。

 

手順3:自分の表示させたい文字を記述

 

囲み枠のタイトル文字は、「HTMLコード」内の”囲み枠”という部分を、表示したい文字に変更します。
ここでは、例として「初めて、囲み枠つくった!タイトル」と、しています。

 

囲み枠の中の文字は、”テスト1、テスト2”の部分を、表示したい文字に変更します。
ここでは、「初めて、囲み枠つくった!文字もじもじ!」と、しています。

 

③プレビュー画面で確認してみましょう!

初めて、囲み枠つくった!タイトル
初めて、囲み枠つくった!文字もじもじ!
初めて、囲み枠つくった!文字もじもじ!

 

 

どうでしたか?

うまく表示できたでしょうか?

うまくいかない時は、次の「※注意点と微調整の方法」を確認してくださいね!

 

※注意点と微調整の方法

悩み1:うまくプレビュー出来ない場合は、どうしたらいいの?

 

上記の手順2の①で「HTMLコード」をコピペしたコードに、『”』(ダブルコーテーション)がダブっていないかを、確認します。
下記の赤字部分ように、『』(ダブルコーテーション)がダブっていたり、「全角文字」になっていたりします。

 

/_/【ダメな時】_/_/_/_/_/
<div class=”box01“>
<span class=”box-title”>囲み枠</span>
テスト1
テスト2
</div>
/_/_/_/_/_/_/_/_/_/_/_/_/

 

 

下記のように、「半角”を前後1つずつで挟みましょう!

/_/【修正後】_/_/_/_/_/_/
<div class=box01>
<span class=”box-title”>囲み枠</span>
テスト1
テスト2
</div>
/_/_/_/_/_/_/_/_/_/_/_/_/

 

 

悩み2:囲み枠タイトル文字の直下に空白行はいらないんだけど。

 

その場合は、下記の【修正後】ようにしてみてください。

/_/【修正前】_/_/_/_/_/_/
<div class=”box01″>
<span class=”box-title”>囲み枠</span>
テスト1
テスト2
</div>
/_/_/_/_/_/_/_/_/_/_/_/_/

 

「テスト1」の前に”カーソル”置いて、バックスペースキーで改行を削除します。

/_/【修正後】_/_/_/_/_/_/
<div class=”box01″>
<span class=”box-title”>囲み枠</span>テスト1
テスト2
</div>
/_/_/_/_/_/_/_/_/_/_/_/_/

 

 

表示の変化

囲み枠
テスト1
テスト2
囲み枠テスト1
テスト2

 

★まとめ

囲み枠を使用して記事を書くと、格段に見やすさが向上しますね!

囲み枠の種類もたくさんありますので、また紹介したいと思います。

 

目次へ戻る

WordPress アイキャッチ画像-囲み枠
最新情報をチェックしよう!