- 見出し1「シンプルですぐ使える装飾の見出し」
- 見出し2「画像を背景にする見出し」
- 画像の回り込み1「画像が右側」
- 画像の回り込み2「画像が左側」
- 囲い「ページのまとめに便利なグレーの囲い」
- 囲い2「点線」
- 囲い3「角が丸まるい」
目次
見出し1「シンプルですぐ使える装飾の見出し」
なにかと使い勝手がいい見出しのスタイルシートです。 色や大きさを変えて、様々なページによくフィットします。 プレビュー左が太く下線付きのスタイルシート
左が太いシンプル見出しのスタイルシート
<h2 style="border-left: 0.5em solid #4D4533;" ><div style="border-bottom: 2px solid #4D4533;padding:4px;">左が太く下線付きのスタイルシート</div></h2>
<h3 style="border-left: 0.5em solid #4D4533;margin:10px;padding:4px;" > 左が太いシンプル見出しのスタイルシート</h3>
見出し2「画像を背景にする見出し」
プレビュー画像を背景にする見出し
<h2 style="background-image : url(https://xn--web-oi9du9bc8tgu2a.com/wp/wp-content/uploads/2014/08/hbg.jpg); width:901px; height: 100px;background-repeat: no-repeat;">画像を背景にする見出し</h2>
画像の回り込み1「画像が右側」
プレビュー
<h3>画像の回り込み1「画像が右側」</h3>
<img style="float: right; width:200px;border: solid 1px #ccc; padding: 6px; margin: 10px 10px 10px 10px;" alt="" src="https://xn--web-oi9du9bc8tgu2a.com/wp/wp-content/uploads/2014/08/sampleimg1.jpg"/>
<p>
こちらに文章を入力してください。 </p><br><br>
<span style="clear:both"><span>
画像の回り込み2「画像が左側」
プレビュー
<img style="float: left;width:200px; border: solid 1px #ccc; padding: 6px; margin: 10px 10px 10px 10px;" alt="" src="https://xn--web-oi9du9bc8tgu2a.com/wp/wp-content/uploads/2014/08/sampleimg2.jpg"/>
<p>
こちらに文章を入力してください。
</p><br><br>
<span style="clear:both"><span>
囲い「ページのまとめに便利なグレーの囲い」
見出しと段落の文章だけでは、なんとなくしまらないページも、最後にまとめとしてグレーの枠で囲うことで、ページがきりっとまとまります。 プレビューこちらにまとめの文章がきます。ページの最後に配置するのがオススメです。読み手に変化を与えることで、まとめの文章がより強調されます。
<p style="margin: 10px; padding: 10px; text-align: left; background-color: #808080; ">
こちらにまとめの文章がきます。ページの最後に配置するのがオススメです。読み手に変化を与えることで、まとめの文章がより強調されます。 </p>
囲い2「点線」
単純な線よりも、目立ち、雰囲気に変化を持たせることができる点線の枠もまとめ記事や囲い記事におすすめです。 プレビューページの最後だけでなく、囲み記事としてページの中盤に配置するのもオススメです。
<p style="margin: 30px;padding:10px; text-align: left; border-style: dotted;"> ページの最後だけでなく、囲み記事としてページの中盤に配置するのもオススメです。 </p>
囲い3「角が丸まるい」
これを実現するために、四隅を画像にしたり、背景に角が丸い画像をしている方もいらっしゃるのではないでしょうか。このスタイルシートを追加すれば、簡単に一発で枠組みの角が丸くなります。 プレビュー角が丸い枠組みにすることで、やわらかな印象を与えながら、囲みの中の文章を目立たせる事ができます。
<p style="margin: 10px; padding: 10px; text-align: left; background-color: #f5deb3; border-radius: 10px;"> 角が丸い枠組みにすることで、やわらかな印象を与えながら、囲みの中の文章を目立たせる事ができます。
</p>