こんにちは、とし（@tyobory）です。
ブログ更新63日目となります。
今回は、「ブログの文章を囲う線の書き方」についてです。
ブログを書き始めたとき、最初に悩むことは文章の装飾です。
よくブロガーさんがこの囲い線を使ってるよね！
他のブロガーさんは普通に使ってるけど、「どうやって書くの」って感じですよね。
以下、この「囲い線を使って文章を装飾できるようになる」ためのコードをお伝えします。
※ただし、囲い線には色んなデザインがありますが、
【ブログ初心者】ブログの文章を囲う線の書き方【6色】
文章を彩る。
ブログの文章を囲うための前知識【CSSとHTML】
ブログの文章を装飾するには、2通りあります
HTMLで直接ソースコードを書くやり方は、ソースコードも長くなり、わりと面倒です。
なので、ほとんどの人は、CSSに装飾したいものを定義しといて、<div class=”〇〇”>で呼び出すのが一般的かと思います。
ここでは、CSSで定義する方法から、簡単に囲い線を呼び出しをしていきます！
- WordPress
[ダッシュボード] ▶ [外観] ▶ [テーマエディター] ▶ 右側バーの[style.css] - はてなブログ
[デザイン] ▶ [デザインCSS] - Livedoorブログ
[ブログ設定] ▶ [PC] ▶ [カスタマイズ] ▶ [CSS] - Blogger
[テーマ] ▶ [カスタマイズ] ▶ [上級者向け] ▶ [CSSを追加]
文章を囲うための手順【CSSの定義とHTMLの挿入】
今回は一番よくみるドットの囲い線、6色ご用意いたしました。
使い方は、次の手順となります。
1．下記コード内にあるCSSをコピーして、ブログのCSSに貼り付ける
2．CSSにはそれぞれclassが定義されているため、HTMLコードを挿入
3．HTML挿入で<div class=”dot-○”>と入れれば、点線の枠が現れます
4．○の部分は、色の頭文字にしているため、赤ならredのr、青ならblueのbと簡素にしました
一番最後に、全部使えるCSSを載せてあるよ！
シンプルな点線の囲い枠（6色）
１．赤の囲い線
<div class=”dot-r“>
<p></p>
</div>
CSS
.dot-r {
padding: 0.5em 1em;
margin: 2em 0;
background: #fff5f5;/*背景*/
border: dashed 2px #ff7070;/*点線の色*/
}
.dot-r p {
margin: 0;
padding: 0;
}
<div class=”dot-b“>
<p></p>
</div>
CSS
.dot-b {
padding: 0.5em 1em;
margin: 2em 0;
background: #f0f7ff;/*背景*/
border: dashed 2px #5b8bd0;/*点線*/
}
.dot-b p {
margin: 0;
padding: 0;
}
3．水色の囲い線
<div class=”dot-lb“>
<p></p>
</div>
CSS
.dot-lb {
padding: 0.5em 1em;
margin: 2em 0;
background: #f0fbff;
border: dashed 2px #32ccff;/*点線*/
}
.dot-lb p {
margin: 0;
padding: 0;
}
4．緑の囲い線
<div class=”dot-g“>
<p></p>
</div>
CSS
.dot-g {
padding: 0.5em 1em;
margin: 2em 0;
background: #f2fbf7;/*背景*/
border: dashed 2px #57cb97;/*点線*/
}
.dot-g p {
margin: 0;
padding: 0;
}
5．オレンジの囲い線
<div class=”dot-o“>
<p></p>
</div>
CSS
.dot-o {
padding: 0.5em 1em;
margin: 2em 0;
background: #fff8f6;/*背景*/
border: dashed 2px #ff6a33;/*点線*/
}
.dot-o p {
margin: 0;
padding: 0;
}
6．ピンクの囲い線
<div class=”dot-p“>
<p></p>
</div>
CSS
.dot-p {
padding: 0.5em 1em;
margin: 2em 0;
background: #fff5fd;/*背景*/
border: dashed 2px #ff99e6;/*点線*/
}
.dot-p p {
margin: 0;
padding: 0;
}
7．すべてのコード
.dot-r {
padding: 0.5em 1em;
margin: 2em 0;
background: #fff5f5;/*背景*/
border: dashed 2px #ff7070;/*点線の色*/
}
.dot-r p {
margin: 0;
padding: 0;
}
/*青*/
.dot-b {
padding: 0.5em 1em;
margin: 2em 0;
background: #f0f7ff;/*背景*/
border: dashed 2px #5b8bd0;/*点線*/
}
.dot-b p {
margin: 0;
padding: 0;
}
/*水色*/
.dot-lb {
padding: 0.5em 1em;
margin: 2em 0;
background: #f0fbff;
border: dashed 2px #32ccff;/*点線*/
}
.dot-lb p {
margin: 0;
padding: 0;
}
/*緑*/
.dot-g {
padding: 0.5em 1em;
margin: 2em 0;
background: #f2fbf7;/*背景*/
border: dashed 2px #57cb97;/*点線*/
}
.dot-g p {
margin: 0;
padding: 0;
}
/*オレンジ*/
.dot-o {
padding: 0.5em 1em;
margin: 2em 0;
background: #fff8f6;/*背景*/
border: dashed 2px #ff6a33;/*点線*/
}
/*ピンク*/
.dot-o p {
margin: 0;
padding: 0;
}
.dot-p {
padding: 0.5em 1em;
margin: 2em 0;
background: #fff5fd;/*背景*/
border: dashed 2px #ff99e6;/*点線*/
}
.dot-p p {
margin: 0;
padding: 0;
}
次に、ワードプレスでのやり方を載せます！
【ブログ初心者】WordPressでの文章の囲み線を設定
WordPressで囲み線を使う。
WordPressでの手順【画像で解説】
手順１：上記のCSSにコードをコピーし、「①外観→②テーマエディター」に進みます。
手順２：右側のスタイルシート(style.css)を選択。「Cocoon」の子テーマでも、子テーマのCSSで大丈夫。
手順３：上記のコピーしたCSSコードを、CSSファイルに挿入し、「ファイルを更新」。
これで、CSSの設定が完了しました！
CSSで設定した囲い線の使い方【WordPress編】
CSSで設定が完了したので、エディタのところで「HTML挿入」します。
はい、このように出てきます！
終わりに：「Addquicktag」を使用すれば、なお便利
今回は一番シンプルな点線の囲い線のみ記事でまとめました。
また、WordPressのプラグインに「Addquicktag」というものがあり、これを使えばさらに短縮してコードを挿入できます。
またこれは別の機会にして説明したいと思いますので、ご参考にして頂ければ幸いです。
ではでは、またよろしくお願いします！