- 1 無料ブログは初期状態では見た目が平坦ってことで
- 2 注意事項
- 3 サンプル集
- 3.1 タイプ1(オレンジ枠)
- 3.2 タイプ2(グレー枠)
- 3.3 タイプ3(オレンジ枠・オレンジ背景)
- 3.4 タイプ4(オレンジ枠・オレンジ背景・市松模様)
- 3.5 タイプ5(グレー枠・グレー背景)
- 3.6 タイプ6(グレー枠・グレー背景・市松模様)
- 3.7 タイプ7(オレンジ中タイトル)
- 3.8 タイプ8(グレー中タイトル)
- 3.9 タイプ9(オレンジ大タイトル)
- 3.10 タイプ10(グレー大タイトル)
- 3.11 タイプ11(オレンジ枠・オレンジ背景・オレンジ大タイトル)
- 3.12 タイプ12(オレンジ枠・オレンジ背景・グレー中タイトル・市松模様)
- 3.13 タイプ13(オレンジ枠・オレンジ背景・市松模様・画像)
- 3.14 タイプ14(グレー枠・グレー背景・グレー大タイトル・市松模様)
- 3.15 タイプ15(グレー枠・グレー背景・オレンジ中タイトル・市松模様)
- 3.16 タイプ16(グレー枠・グレー背景・グレー中タイトル・市松模様・画像)
- 3.17 タイプ17(グレー枠・グレー背景・グレー大タイトル・市松模様・画像)
- 3.18 タイプ18(グレー枠・グレー背景・市松模様・画像)
- 3.19 タイプ19(複数画像横並び)
- 3.20 タイプ20(文頭アイコンi・小文字)
- 3.21 タイプ21(文頭アイコン?・小文字)
- 3.22 タイプ22(文頭アイコン!・小文字)
- 3.23 タイプ23(文頭アイコンi・大文字)
- 3.24 タイプ24(文頭アイコン?・大文字)
- 3.25 タイプ25(文頭アイコン!・大文字)
- 3.26 タイプ26(青枠・iタイトル・まとめ)
- 3.27 タイプ27(黄枠・?タイトル・まとめ)
- 3.28 タイプ28(赤枠・!タイトル・まとめ)
- 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>
無料ブログでの設定方法
はてなブログの場合
画像の配置場所はこちらを参考にして下さい。
はてなブログで画像を保存する方法 始めに「はてなブログ」にログインします。画像を保存するページに進む方法は2つあります。 1つ目は、最上部の四角いアイコンをクリックして、その中の「はてなフ[…]
スタイルシートの設定方法はこちらを参考にして下さい。
はてなブログでスタイルシートを設定する方法 始めに「はてなブログ」にログインします。 ダッシュボードの左メニュー欄の「デザイン」を選びます。 真ん中の[…]
FC2ブログの場合
画像の配置場所はこちらを参考にして下さい。
FC2ブログで画像を保存する方法 始めに「FC2ブログ」にログインします。画面左上部の「管理画面へ」をクリックします。 左メニューの「ファイルアップロード」を選びます。真ん中に大きく「ドラッグ&ドロッ[…]
スタイルシートの設定方法はこちらを参考にして下さい。
アメブロの場合
画像の配置場所はこちらを参考にして下さい。
アメブロで画像を保存する方法 アメブロにログインします。 上部メニューの「ブログ管理」を選びます。 左メニューの「設定・管理」を選びます。 中側の「画像フォルダ」を選びます[…]
スタイルシートの設定方法はこちらを参考にして下さい。
アメブロでCSSを設定する方法 ログイン後、左上の「ブログ管理」を選びます。 左メニューの「デザインの設定」を選ぶと、「デザインの変更」画面になります。 その[…]
その他の無料ブログの設定方法についても、順次更新します。