css_type14

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

css css_type14

目次

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

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

スタイルシートは詳しく分からない人でもコピペで貼り付けられるようにしてあります。

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

 

注意事項

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

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

全て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>

 

無料ブログでの設定方法

はてなブログの場合

画像の配置場所はこちらを参考にして下さい。

関連記事
【簡単】はてなブログで画像を保存する方法と保存した画像のURL

はてなブログで画像を保存する方法 始めに「はてなブログ」にログインします。画像を保存するページに進む方法は2つあります。   1つ目は、最上部の四角いアイコンをクリックして、その中の「はてなフ[…]

1-1-画像を保存する場所

スタイルシートの設定方法はこちらを参考にして下さい。

関連記事
【超簡単】はてなブログでCSSを設定する方法

はてなブログでスタイルシートを設定する方法 始めに「はてなブログ」にログインします。   ダッシュボードの左メニュー欄の「デザイン」を選びます。   真ん中の[…]

1-左メニュー

 

FC2ブログの場合

画像の配置場所はこちらを参考にして下さい。

関連記事
【すぐに出来る】FC2ブログで画像を保存する方法と保存したURL

FC2ブログで画像を保存する方法 始めに「FC2ブログ」にログインします。画面左上部の「管理画面へ」をクリックします。   左メニューの「ファイルアップロード」を選びます。真ん中に大きく「ドラッグ＆ドロッ[…]

1-メイン画面

スタイルシートの設定方法はこちらを参考にして下さい。

関連記事
【超簡単】FC2ブログでCSSを設定する方法

FC2ブログでCSSを設定する方法 始めに「FC2ブログ」にログインします。   右上の「管理画面へ」を選びます。     管理画面になりました。 […]

1-メイン画面

 

アメブロの場合

画像の配置場所はこちらを参考にして下さい。

関連記事
【アメブロ】アメブロで画像を保存する方法と保存した画像のURL

アメブロで画像を保存する方法 アメブロにログインします。 上部メニューの「ブログ管理」を選びます。   左メニューの「設定・管理」を選びます。 中側の「画像フォルダ」を選びます[…]

1-トップ画面

スタイルシートの設定方法はこちらを参考にして下さい。

関連記事
【アメブロ】アメブロでCSSを設定する方法

アメブロでCSSを設定する方法 ログイン後、左上の「ブログ管理」を選びます。     左メニューの「デザインの設定」を選ぶと、「デザインの変更」画面になります。 その[…]

1-トップ画面

 

 

その他の無料ブログの設定方法についても、順次更新します。

 

 

hajizo
では、おやすみなさい～

cssの最新記事8件