サイトアイコン Wanablog

【ブログ初心者】ブログの文章を囲う線の書き方【点線6色】

こんにちは、とし(@tyobory)です。

ブログ更新63日目となります。

今回は、「ブログの文章を囲う線の書き方」についてです。

ブログを書き始めたとき、最初に悩むことは文章の装飾です。

とし

よくブロガーさんがこの囲い線を使ってるよね!


他のブロガーさんは普通に使ってるけど、「どうやって書くの」って感じですよね。

以下、この「囲い線を使って文章を装飾できるようになるためのコードをお伝えします。
※ただし、囲い線には色んなデザインがありますが、

スポンサードリンク

【ブログ初心者】ブログの文章を囲う線の書き方【6色】

文章を彩る。

ブログの文章を囲うための前知識【CSSとHTML】


ブログの文章を装飾するには、2通りあります

1.HTMLで直接ソースコードを書く
2.CSSで定義し、<div class=”〇〇”>で呼び出す形で、文章を装飾する


HTMLで直接ソースコードを書くやり方は、ソースコードも長くなり、わりと面倒です。

なので、ほとんどの人は、CSSに装飾したいものを定義しといて、<div class=”〇〇”>で呼び出すのが一般的かと思います。

ここでは、CSSで定義する方法から、簡単に囲い線を呼び出しをしていきます!

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色)

 

1.の囲い線



HTML
<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;
}
 
2.の囲い線


HTML
<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.水色の囲い線



HTML
<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.の囲い線



HTML
<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.オレンジの囲い線



HTML
<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.ピンクの囲い線

 
HTML
<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での手順【画像で解説】

手順1:上記のCSSにコードをコピーし、「①外観→②テーマエディター」に進みます。

手順2:右側のスタイルシート(style.css)を選択。「Cocoon」の子テーマでも、子テーマのCSSで大丈夫。




手順3
:上記のコピーしたCSSコードを、CSSファイルに挿入し、「ファイルを更新」。


これで、CSSの設定が完了しました!

CSSで設定した囲い線の使い方【WordPress編】


CSSで設定が完了したので、エディタのところで「HTML挿入」します。

 


はい、このように出てきます!

終わりに:「Addquicktag」を使用すれば、なお便利


今回は一番シンプルな点線の囲い線のみ記事でまとめました。


また、WordPressのプラグインに「Addquicktag」というものがあり、これを使えばさらに短縮してコードを挿入できます。

またこれは別の機会にして説明したいと思いますので、ご参考にして頂ければ幸いです。

とし

ではでは、またよろしくお願いします!

モバイルバージョンを終了