- 見出し１「シンプルですぐ使える装飾の見出し」
- 見出し２「画像を背景にする見出し」
- 画像の回り込み1「画像が右側」
- 画像の回り込み２「画像が左側」
- 囲い「ページのまとめに便利なグレーの囲い」
- 囲い２「点線」
- 囲い３「角が丸まるい」
目次
見出し１「シンプルですぐ使える装飾の見出し」
なにかと使い勝手がいい見出しのスタイルシートです。 色や大きさを変えて、様々なページによくフィットします。プレビュー
左が太く下線付きのスタイルシート
左が太いシンプル見出しのスタイルシート
スタイルシート・HTMLソース
<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>
見出し２「画像を背景にする見出し」
プレビュー画像を背景にする見出し
スタイルシート・HTMLソース
<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「画像が右側」
プレビュー
雑誌や新聞のように、画像にテキストを回りこませたいときには、このスタイルシートがオススメです。簡単便利に、回り込みをすることができます。とても頻繁に良く使うテンプレートで使い勝手も良いです。「画像にテキストを回りこませたいんだけどどうしたらいいですか？」とよく質問されます。
スタイルシート・HTMLソース
<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>
画像の回り込み２「画像が左側」
プレビュー
回り込みテキスト左側に画像が来るパターンです。右への回り込みと左への回り込みをバランスよく配置させたいものです。テンプレートとして活用していただくことで、作業を効率的に進めることができます。テキストの画像の回り込みですが、今さらなかなか人に聞けないという方はご参考にしてください。
スタイルシート・HTMLソース
<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>
囲い「ページのまとめに便利なグレーの囲い」
見出しと段落の文章だけでは、なんとなくしまらないページも、最後にまとめとしてグレーの枠で囲うことで、ページがきりっとまとまります。プレビュー
こちらにまとめの文章がきます。ページの最後に配置するのがオススメです。読み手に変化を与えることで、まとめの文章がより強調されます。
スタイルシート・HTMLソース
<p style="margin: 10px; padding: 10px; text-align: left; background-color: #808080; ">
こちらにまとめの文章がきます。ページの最後に配置するのがオススメです。読み手に変化を与えることで、まとめの文章がより強調されます。
</p>
囲い２「点線」
単純な線よりも、目立ち、雰囲気に変化を持たせることができる点線の枠もまとめ記事や囲い記事におすすめです。プレビュー
ページの最後だけでなく、囲み記事としてページの中盤に配置するのもオススメです。
スタイルシート・HTMLソース
<p style="margin: 30px;padding:10px; text-align: left; border-style: dotted;">
ページの最後だけでなく、囲み記事としてページの中盤に配置するのもオススメです。
</p>
囲い３「角が丸まるい」
これを実現するために、四隅を画像にしたり、背景に角が丸い画像をしている方もいらっしゃるのではないでしょうか。このスタイルシートを追加すれば、簡単に一発で枠組みの角が丸くなります。 プレビュー角が丸い枠組みにすることで、やわらかな印象を与えながら、囲みの中の文章を目立たせる事ができます。
スタイルシート・HTMLソース
<p style="margin: 10px; padding: 10px; text-align: left; background-color: #f5deb3; border-radius: 10px;">
角が丸い枠組みにすることで、やわらかな印象を与えながら、囲みの中の文章を目立たせる事ができます。
</p>