【超簡単】無料ブログですぐ使えるCSS

目次Outline

1. 無料ブログは初期状態では見た目が平坦ってことで
2. 注意事項
- 2-1. このサンプルは一部画像を使っています
- 2-2. 全てPタグとDIVタグで作ってあります
3. サンプル集
4. 無料ブログでの設定方法

無料ブログは初期状態では見た目が平坦ってことで

コピペで使えるスタイルシートを解説しているページはたくさんあるのですが、それらのスタイルシートを組み合わせてすぐに自分の記事に応用できるような段組みされたサンプルがあまり無い様に思えたので作ってみました。
スタイルシートは詳しく分からない人でもコピペで貼り付けられるようにしてあります。

なおヘッダー部分・ナビゲーション部分・フッター部分は、無料ブログに最初から用意されている、スキン・テーマ・テーンプレートと呼ばれているものを使えばカスタマイズできるので省きます。
記事部分を見易くするためのスタイルシートです。

注意事項

このサンプルは一部画像を使っています

サンプルのURLのままでも使えますが、いつ画像が無くなるかわからないのでご自分のブログスペースにコピペしてURLを指定し直して下さい。コピペ方法はそれぞれのブログ設定の所に記載します。

https://tool.takaibiki.com/blog_img/seishonagon.jpg
https://tool.takaibiki.com/blog_img/icon_information_s.png
https://tool.takaibiki.com/blog_img/icon_question_s.png
https://tool.takaibiki.com/blog_img/icon_caution_s.png
https://tool.takaibiki.com/blog_img/icon_information.png
https://tool.takaibiki.com/blog_img/icon_question.png
https://tool.takaibiki.com/blog_img/icon_caution.png
　背景用市松模様（白と透明の正方形の組み合わせなので見えにくいです）
https://tool.takaibiki.com/blog_img/ichimatsu-bg.png

全てPタグとDIVタグで作ってあります

pやdivを見出しタグ（h1～h6）やリストタグ（ul li）などに置き換えても表示されますが、ブログによっては既に別のスタイルが適用されている場合があるので、その場合は元のタグに戻して下さい。

サンプル集

タイプ1（オレンジ枠）

CSS

.rounded_corners_or_w { background-color: #FFFFFF; border-radius: 10px; border: 3px solid #FF6E00; padding-right: 40px; padding-left: 40px; margin-bottom: 20px; padding-top: 30px; padding-bottom: 10px;}.sentence01 { margin-bottom: 20px; margin-top: 0px; margin-right: 0px; margin-left: 0px;}

HTML

<div class="rounded_corners_or_w"> <p class="sentence01">春はあけぼの。<br> やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p></div>

タイプ2（グレー枠）

CSS

.rounded_corners_gr_w { background-color: #FFFFFF; border-radius: 10px; border: 3px solid #828282; padding-right: 40px; padding-left: 40px; margin-bottom: 20px; padding-top: 30px; padding-bottom: 10px;}.sentence01 { margin-bottom: 20px; margin-top: 0px; margin-right: 0px; margin-left: 0px;}

HTML

<div class="rounded_corners_gr_w"> <p class="sentence01">春はあけぼの。<br> やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p></div>

タイプ3（オレンジ枠・オレンジ背景）

CSS

.rounded_corners_or { background-color: #FFF4ED; border-radius: 10px; border: 3px solid #FF6E00; padding-right: 40px; padding-left: 40px; margin-bottom: 20px; padding-top: 30px; padding-bottom: 10px;}.sentence01 { margin-bottom: 20px; margin-top: 0px; margin-right: 0px; margin-left: 0px;}

HTML

<div class="rounded_corners_or"> <p class="sentence01">春はあけぼの。<br> やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。<br> 夏は夜。<br> 月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。</p></div>

タイプ4（オレンジ枠・オレンジ背景・市松模様）

CSS

.rounded_corners_or2 { background-color: #FFF4ED; border-radius: 10px; border: 3px solid #FF6E00; padding-right: 40px; padding-left: 40px; background-repeat: repeat; background-image: url(https://tool.takaibiki.com/blog_img/ichimatsu-bg.png); margin-bottom: 20px; padding-top: 30px; padding-bottom: 10px;}.sentence01 { margin-bottom: 20px; margin-top: 0px; margin-right: 0px; margin-left: 0px;}

HTML

<div class="rounded_corners_or2"> <p class="sentence01">春はあけぼの。<br> やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p></div>

タイプ5（グレー枠・グレー背景）

CSS

.rounded_corners_gr { background-color: #F3F3F3; border-radius: 10px; border: 3px solid #828282; padding-right: 40px; padding-left: 40px; margin-bottom: 20px; padding-top: 30px; padding-bottom: 10px;}.sentence01 { margin-bottom: 20px; margin-top: 0px; margin-right: 0px; margin-left: 0px;}

HTML

<div class="rounded_corners_gr"> <p class="sentence01">春はあけぼの。<br> やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p></div>

タイプ6（グレー枠・グレー背景・市松模様）

CSS

.rounded_corners_gr2 { background-color: #F5F5F5; border-radius: 10px; border: 3px solid #828282; padding-right: 40px; padding-left: 40px; background-image: url(https://tool.takaibiki.com/blog_img/ichimatsu-bg.png); background-repeat: repeat; margin-bottom: 20px; padding-top: 30px; padding-bottom: 10px;}.sentence01 { margin-bottom: 20px; margin-top: 0px; margin-right: 0px; margin-left: 0px;}

HTML

<div class="rounded_corners_gr2"> <p class="sentence01">春はあけぼの。<br> やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p></div>

タイプ7（オレンジ中タイトル）

CSS

.title_type_or2 { color: #FF6E00; border-bottom: 1px dotted #FF6E00; font-weight: bold; font-size: x-large; border-left: 5px solid #FF6E00; padding-left: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}

HTML

<p class="title_type_or2">「枕草子」清少納言</p>

タイプ8（グレー中タイトル）

CSS

.title_type_gr2 { color: #828282; border-bottom: 1px dotted #828282; font-weight: bold; font-size: x-large; border-left: 5px solid #828282; padding-left: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}

HTML

<p class="title_type_gr2">「枕草子」清少納言</p>

タイプ9（オレンジ大タイトル）

CSS

.title_type_or1 { color: #FF6E00; font-size: x-large; border-left: 10px solid #FF6E00; font-weight: bold; border-top: 1px dotted #FF6E00; border-right: 1px dotted #FF6E00; border-bottom: 1px dotted #FF6E00; background-color: #FFFFFF; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}

HTML

<p class="title_type_or1">「枕草子」清少納言</p>

タイプ10（グレー大タイトル）

CSS

.title_type_gr1 { color: #828282; font-size: x-large; border-left: 10px solid #828282; font-weight: bold; border-top: 1px dotted #828282; border-right: 1px dotted #828282; border-bottom: 1px dotted #828282; background-color: #FFFFFF; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}

HTML

<p class="title_type_gr1">「枕草子」清少納言</p>

タイプ11（オレンジ枠・オレンジ背景・オレンジ大タイトル）

CSS

.rounded_corners_or { background-color: #FFF4ED; border-radius: 10px; border: 3px solid #FF6E00; padding-right: 40px; padding-left: 40px; margin-bottom: 20px; padding-top: 30px; padding-bottom: 10px;}.title_type_or1 { color: #FF6E00; font-size: x-large; border-left: 10px solid #FF6E00; font-weight: bold; border-top: 1px dotted #FF6E00; border-right: 1px dotted #FF6E00; border-bottom: 1px dotted #FF6E00; background-color: #FFFFFF; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}.sentence01 { margin-bottom: 20px; margin-top: 0px; margin-right: 0px; margin-left: 0px;}

HTML

<div class="rounded_corners_or"> <p class="title_type_or1">「枕草子」清少納言</p> <p class="sentence01">春はあけぼの。<br> やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。<br> 夏は夜。<br> 月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。</p></div>

タイプ12（オレンジ枠・オレンジ背景・グレー中タイトル・市松模様）

CSS

.rounded_corners_or2 { background-color: #FFF4ED; border-radius: 10px; border: 3px solid #FF6E00; padding-right: 40px; padding-left: 40px; background-repeat: repeat; background-image: url(https://tool.takaibiki.com/blog_img/ichimatsu-bg.png); margin-bottom: 20px; padding-top: 30px; padding-bottom: 10px;}.title_type_gr2 { color: #828282; border-bottom: 1px dotted #828282; font-weight: bold; font-size: x-large; border-left: 5px solid #828282; padding-left: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}.sentence01 { margin-bottom: 20px; margin-top: 0px; margin-right: 0px; margin-left: 0px;}

HTML

<div class="rounded_corners_or2"> <p class="title_type_gr2">「枕草子」清少納言</p> <p class="sentence01">春はあけぼの。<br> やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。<br> 夏は夜。<br> 月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。 また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。</p></div>

タイプ13（オレンジ枠・オレンジ背景・市松模様・画像）

CSS

.cf:before, .cf:after { content: ""; display: table;}.cf:after { clear: both;}.rounded_corners_or2 { background-color: #FFF4ED; border-radius: 10px; border: 3px solid #FF6E00; padding-right: 40px; padding-left: 40px; background-repeat: repeat; background-image: url(https://tool.takaibiki.com/blog_img/ichimatsu-bg.png); margin-bottom: 20px; padding-top: 30px; padding-bottom: 10px;}.rounded_corners_img01 { float: left; padding-right: 30px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}.rounded_corners_img01 img { border: 1px solid #828282;}.rounded_corners_sentence01 { margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}

HTML

<div class="rounded_corners_or2 cf"> <div class="rounded_corners_img01"><img src="https://tool.takaibiki.com/blog_img/seishonagon.jpg" width="300" alt="「枕草子」清少納言"/></div> <p class="rounded_corners_sentence01">＜この画像は<a href="https://ja.wikipedia.org/wiki/%E6%B8%85%E5%B0%91%E7%B4%8D%E8%A8%80" target="_blank">Wikipedia</a>のものです＞<br> <br> 春はあけぼの。<br> やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。<br> 夏は夜。<br> 月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。</p></div>

タイプ14（グレー枠・グレー背景・グレー大タイトル・市松模様）

CSS

.rounded_corners_gr2 { background-color: #F5F5F5; border-radius: 10px; border: 3px solid #828282; padding-right: 40px; padding-left: 40px; background-image: url(https://tool.takaibiki.com/blog_img/ichimatsu-bg.png); background-repeat: repeat; margin-bottom: 20px; padding-top: 30px; padding-bottom: 10px;}.title_type_gr1 { color: #828282; font-size: x-large; border-left: 10px solid #828282; font-weight: bold; border-top: 1px dotted #828282; border-right: 1px dotted #828282; border-bottom: 1px dotted #828282; background-color: #FFFFFF; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}.sentence01 { margin-bottom: 20px; margin-top: 0px; margin-right: 0px; margin-left: 0px;}

HTML

<div class="rounded_corners_gr2"> <p class="title_type_gr1">「枕草子」清少納言</p> <p class="sentence01">春はあけぼの。<br> やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。<br> 夏は夜。<br> 月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。</p></div>

タイプ15（グレー枠・グレー背景・オレンジ中タイトル・市松模様）

CSS

.rounded_corners_gr2 { background-color: #F5F5F5; border-radius: 10px; border: 3px solid #828282; padding-right: 40px; padding-left: 40px; background-image: url(https://tool.takaibiki.com/blog_img/ichimatsu-bg.png); background-repeat: repeat; margin-bottom: 20px; padding-top: 30px; padding-bottom: 10px;}.title_type_or2 { color: #FF6E00; border-bottom: 1px dotted #FF6E00; font-weight: bold; font-size: x-large; border-left: 5px solid #FF6E00; padding-left: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}.sentence01 { margin-bottom: 20px; margin-top: 0px; margin-right: 0px; margin-left: 0px;}

HTML

<div class="rounded_corners_gr2"> <p class="title_type_or2">「枕草子」清少納言</p> <p class="sentence01">春はあけぼの。<br> やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。<br> 夏は夜。<br> 月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。</p></div>

タイプ16（グレー枠・グレー背景・グレー中タイトル・市松模様・画像）

CSS

.cf:before, .cf:after { content: ""; display: table;}.cf:after { clear: both;}.rounded_corners_gr2 { background-color: #F5F5F5; border-radius: 10px; border: 3px solid #828282; padding-right: 40px; padding-left: 40px; background-image: url(https://tool.takaibiki.com/blog_img/ichimatsu-bg.png); background-repeat: repeat; margin-bottom: 20px; padding-top: 30px; padding-bottom: 10px;}.title_type_gr2 { color: #828282; border-bottom: 1px dotted #828282; font-weight: bold; font-size: x-large; border-left: 5px solid #828282; padding-left: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}.rounded_corners_img02 { float: right; line-height: 0em; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 30px;}.rounded_corners_img02 img { border: 1px solid #828282;}.rounded_corners_sentence01 { margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}

HTML

<div class="rounded_corners_gr2 cf"> <p class="title_type_gr2">「枕草子」清少納言</p> <div class="rounded_corners_img02"><img src="https://tool.takaibiki.com/blog_img/seishonagon.jpg" width="300" alt="「枕草子」清少納言"/></div> <p class="rounded_corners_sentence01">＜この画像は<a href="https://ja.wikipedia.org/wiki/%E6%B8%85%E5%B0%91%E7%B4%8D%E8%A8%80" target="_blank">Wikipedia</a>のものです＞<br> <br> 春はあけぼの。<br> やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。<br> 夏は夜。<br> 月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。<br> 秋は夕暮れ。<br> 夕日の差して山の端いと近うなりたるに、烏の寝所へ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などの連ねたるが、いと小さく見ゆるは、いとをかし。日入り果てて、風の音、虫の音など、はた言ふべきにあらず。<br> 冬はつとめて。<br> 雪の降りたるは言ふべきにもあらず、霜のいと白きも、またさらでもいと寒きに、火など急ぎおこして、炭持て渡るも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、火桶の火も、白き灰がちになりてわろし。</p></div>

タイプ17（グレー枠・グレー背景・グレー大タイトル・市松模様・画像）

CSS

.cf:before, .cf:after { content: ""; display: table;}.cf:after { clear: both;}.rounded_corners_gr2 { background-color: #F5F5F5; border-radius: 10px; border: 3px solid #828282; padding-right: 40px; padding-left: 40px; background-image: url(https://tool.takaibiki.com/blog_img/ichimatsu-bg.png); background-repeat: repeat; margin-bottom: 20px; padding-top: 30px; padding-bottom: 10px;}.title_type_gr1 { color: #828282; font-size: x-large; border-left: 10px solid #828282; font-weight: bold; border-top: 1px dotted #828282; border-right: 1px dotted #828282; border-bottom: 1px dotted #828282; background-color: #FFFFFF; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}.rounded_corners_img01 { float: left; padding-right: 30px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}.rounded_corners_img01 img { border: 1px solid #828282;}.rounded_corners_sentence01 { margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}

HTML

<div class="rounded_corners_gr2 cf"> <p class="title_type_gr1">「枕草子」清少納言</p> <div class="rounded_corners_img01"><img src="https://tool.takaibiki.com/blog_img/seishonagon.jpg" width="300" alt="「枕草子」清少納言"/></div> <p class="rounded_corners_sentence01">＜この画像は<a href="https://ja.wikipedia.org/wiki/%E6%B8%85%E5%B0%91%E7%B4%8D%E8%A8%80" target="_blank">Wikipedia</a>のものです＞<br> <br> 春はあけぼの。<br> やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。<br> 夏は夜。<br> 月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。<br> 秋は夕暮れ。<br> 夕日の差して山の端いと近うなりたるに、烏の寝所へ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などの連ねたるが、いと小さく見ゆるは、いとをかし。日入り果てて、風の音、虫の音など、はた言ふべきにあらず。<br> 冬はつとめて。<br> 雪の降りたるは言ふべきにもあらず、霜のいと白きも、またさらでもいと寒きに、火など急ぎおこして、炭持て渡るも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、火桶の火も、白き灰がちになりてわろし。</p></div>

タイプ18（グレー枠・グレー背景・市松模様・画像）

CSS

.cf:before, .cf:after { content: ""; display: table;}.cf:after { clear: both;}.rounded_corners_gr2 { background-color: #F5F5F5; border-radius: 10px; border: 3px solid #828282; padding-right: 40px; padding-left: 40px; background-image: url(https://tool.takaibiki.com/blog_img/ichimatsu-bg.png); background-repeat: repeat; margin-bottom: 20px; padding-top: 30px; padding-bottom: 10px;}.rounded_corners_img01 { float: left; padding-right: 30px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}.rounded_corners_img01 img { border: 1px solid #828282;}.rounded_corners_sentence01 { margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}

HTML

<div class="rounded_corners_gr2 cf"> <div class="rounded_corners_img01"><img src="https://tool.takaibiki.com/blog_img/seishonagon.jpg" width="300" alt="「枕草子」清少納言"/></div> <p class="rounded_corners_sentence01">＜この画像は<a href="https://ja.wikipedia.org/wiki/%E6%B8%85%E5%B0%91%E7%B4%8D%E8%A8%80" target="_blank">Wikipedia</a>のものです＞<br> <br> 春はあけぼの。<br> やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。<br> 夏は夜。<br> 月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。</p></div>

タイプ19（複数画像横並び）

CSS

.wrap { margin-bottom: 10px; display: flex; flex-wrap: wrap;}.parts_1, .parts_2, .parts_3, .parts_4, .parts_5, .parts_6 { margin-right: 10px; margin-bottom: 10px;}

HTML

<div class="wrap"> <div class="parts_1"><img src="https://tool.takaibiki.com/blog_img/seishonagon.jpg" width="150" alt="「枕草子」清少納言"/></div> <div class="parts_2"><img src="https://tool.takaibiki.com/blog_img/seishonagon.jpg" width="150" alt="「枕草子」清少納言"/></div> <div class="parts_3"><img src="https://tool.takaibiki.com/blog_img/seishonagon.jpg" width="150" alt="「枕草子」清少納言"/></div> <div class="parts_4"><img src="https://tool.takaibiki.com/blog_img/seishonagon.jpg" width="150" alt="「枕草子」清少納言"/></div> <div class="parts_5"><img src="https://tool.takaibiki.com/blog_img/seishonagon.jpg" width="150" alt="「枕草子」清少納言"/></div> <div class="parts_6"><img src="https://tool.takaibiki.com/blog_img/seishonagon.jpg" width="150" alt="「枕草子」清少納言"/></div></div>

タイプ20（文頭アイコンi・小文字）

CSS

.s_icon_information { background-image: url(https://tool.takaibiki.com/blog_img/icon_information_s.png); background-repeat: no-repeat; background-position: 0% center; padding-left: 20px; font-size: small;}

HTML

<span class="s_icon_information">「枕草子」清少納言が作者だとわかりました。春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。</span>

タイプ21（文頭アイコン?・小文字）

CSS

.s_icon_question { background-image: url(https://tool.takaibiki.com/blog_img/icon_question_s.png); background-repeat: no-repeat; background-position: 0% center; padding-left: 20px; font-size: small;}

HTML

<span class="s_icon_question">「枕草子」清少納言とは？</span>

タイプ22（文頭アイコン!・小文字）

CSS

.s_icon_caution { background-image: url(https://tool.takaibiki.com/blog_img/icon_caution_s.png); background-repeat: no-repeat; background-position: 0% center; padding-left: 20px; font-size: small;}

HTML

<span class="s_icon_caution">「枕草子」清少納言もお忘れなく！</span>

タイプ23（文頭アイコンi・大文字）

CSS

.vertical_line_bl { border-left: 5px solid #385CB0; color: #385CB0; padding-left: 60px; background-image: url(https://tool.takaibiki.com/blog_img/icon_information.png); background-repeat: no-repeat; background-position: 15px center; font-weight: bold;}

HTML

<p class="vertical_line_bl">春はあけぼの。<br> やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p>

タイプ24（文頭アイコン?・大文字）

CSS

.vertical_line_ye { border-left: 5px solid #D8A800; color: #D8A800; padding-left: 60px; background-image: url(https://tool.takaibiki.com/blog_img/icon_question.png); background-repeat: no-repeat; background-position: 15px center; font-weight: bold;}

HTML

<p class="vertical_line_ye">春はあけぼの。</p>

タイプ25（文頭アイコン!・大文字）

CSS

.vertical_line_re { border-left: 5px solid #FF4F00; color: #FF4F00; padding-left: 60px; background-image: url(https://tool.takaibiki.com/blog_img/icon_caution.png); background-repeat: no-repeat; background-position: 15px center; font-weight: bold;}

HTML

<p class="vertical_line_re">春はあけぼの。<br> やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。<br> 夏は夜。<br> 月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。<br> また、ただ一つ二つなど、ほのかにうち光て行くもをかし。<br> 雨など降るもをかし。</p>

タイプ26（青枠・iタイトル・まとめ）

CSS

.rectangle01 { border: 1px solid #385CB0; padding-top: 30px; padding-right: 40px; padding-left: 40px; background-color: #EAF0FC; background-image: url(https://tool.takaibiki.com/blog_img/ichimatsu-bg.png); background-repeat: repeat; margin-bottom: 20px; padding-bottom: 10px;}.rec01_title { color: #385CB0; font-weight: bold; font-size: x-large; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; border-bottom: 1px dotted #385CB0; background-image: url(https://tool.takaibiki.com/blog_img/icon_information.png); background-repeat: no-repeat; background-position: 0% center; padding-left: 35px;}.rec01_details { border: 1px dotted #385CB0; background-color: #FFFFFF; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}.s_icon_information { background-image: url(https://tool.takaibiki.com/blog_img/icon_information_s.png); background-repeat: no-repeat; background-position: 0% center; padding-left: 20px; font-size: small;}

HTML

<div class="rectangle01"> <p class="rec01_title">「枕草子」清少納言が作者だとわかりました。</p> <p class="rec01_details">春はあけぼの。<br> やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。<br> <span class="s_icon_information">夏は夜。</span><br> 月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。<br> 秋は夕暮れ。<br> 夕日の差して山の端いと近うなりたるに、烏の寝所へ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などの連ねたるが、いと小さく見ゆるは、いとをかし。日入り果てて、風の音、虫の音など、はた言ふべきにあらず。<br> 冬はつとめて。<br> 雪の降りたるは言ふべきにもあらず、霜のいと白きも、またさらでもいと寒きに、火など急ぎおこして、炭持て渡るも、</p> <p class="rec01_details">いとつきづきし。昼になりて、ぬるくゆるびもていけば、火桶の火も、白き灰がちになりてわろし。</p></div>

タイプ27（黄枠・?タイトル・まとめ）

CSS

.rectangle02 { border: 1px solid #D8A800; padding-top: 30px; padding-right: 40px; padding-left: 40px; background-color: #FCF6E3; background-image: url(https://tool.takaibiki.com/blog_img/ichimatsu-bg.png); background-repeat: repeat; margin-bottom: 20px; padding-bottom: 10px;}.rec02_title { color: #D8A800; font-weight: bold; font-size: x-large; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; border-bottom: 1px dotted #D8A800; background-image: url(https://tool.takaibiki.com/blog_img/icon_question.png); background-repeat: no-repeat; background-position: 0% center; padding-left: 35px;}.rec02_details { border: 1px dotted #D8A800; background-color: #FFFFFF; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}.s_icon_question { background-image: url(https://tool.takaibiki.com/blog_img/icon_question_s.png); background-repeat: no-repeat; background-position: 0% center; padding-left: 20px; font-size: small;}

HTML

<div class="rectangle02"> <p class="rec02_title">「枕草子」清少納言とは？</p> <p class="rec02_details"><span class="s_icon_question">春はあけぼの。</span><br> やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p></div>

タイプ28（赤枠・!タイトル・まとめ）

CSS

.rectangle03 { border: 1px solid #FF4F00; padding-top: 30px; padding-right: 40px; padding-left: 40px; background-color: #FBECE5; background-image: url(https://tool.takaibiki.com/blog_img/ichimatsu-bg.png); background-repeat: repeat; margin-bottom: 20px; padding-bottom: 10px;}.rec03_title { color: #FF4F00; font-weight: bold; font-size: x-large; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; border-bottom: 1px dotted #FF4F00; background-image: url(https://tool.takaibiki.com/blog_img/icon_caution.png); background-repeat: no-repeat; background-position: 0% center; padding-left: 35px;}.rec03_details { border: 1px dotted #FF4F00; background-color: #FFFFFF; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px;}.s_icon_caution { background-image: url(https://tool.takaibiki.com/blog_img/icon_caution_s.png); background-repeat: no-repeat; background-position: 0% center; padding-left: 20px; font-size: small;}

HTML

<div class="rectangle03"> <p class="rec03_title">「枕草子」清少納言もお忘れなく！</p> <p class="rec03_details"><span class="s_icon_caution">「枕草子」清少納言もお忘れなく！</span>春はあけぼの。 やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p> <p class="rec03_details">夏は夜。<br> 月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。</p></div>