手っ取り早く使えるスタイルシート7つ

2014.8.8|ノウハウ紹介

このエントリーをはてなブックマークに追加
Check

現在のSEO対策は、有益なコンテンツを豊富に作成することが最も重要な要素となっています。

しかしながら、サイトの更新作業は、大変手間と時間がかかってしまうものです。
そこで今回皆様にご紹介するのは、使い勝手がよく、アレンジして使いまわしやすい便利なスタイルシート・htmlのテンプレートを5つご紹介します。

  • 見出し1「シンプルですぐ使える装飾の見出し」
  • 見出し2「画像を背景にする見出し」
  • 画像の回り込み1「画像が右側」
  • 画像の回り込み2「画像が左側」
  • 囲い「ページのまとめに便利なグレーの囲い」
  • 囲い2「点線」
  • 囲い3「角が丸まるい」

見出し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>

見出し2「画像を背景にする見出し」

プレビュー

画像を背景にする見出し

スタイルシート・HTMLソース

<h2 style="background-image : url(http://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="http://xn--web-oi9du9bc8tgu2a.com/wp/wp-content/uploads/2014/08/sampleimg1.jpg"/>
<p>
こちらに文章を入力してください。

</p><br><br>
<span style="clear:both"><span>

画像の回り込み2「画像が左側」

プレビュー

回り込みテキスト左側に画像が来るパターンです。右への回り込みと左への回り込みをバランスよく配置させたいものです。テンプレートとして活用していただくことで、作業を効率的に進めることができます。テキストの画像の回り込みですが、今さらなかなか人に聞けないという方はご参考にしてください。

スタイルシート・HTMLソース

<img style="float: left;width:200px; border: solid 1px #ccc; padding: 6px; margin: 10px 10px 10px 10px;" alt="" src="http://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>

囲い2「点線」

単純な線よりも、目立ち、雰囲気に変化を持たせることができる点線の枠もまとめ記事や囲い記事におすすめです。

プレビュー

ページの最後だけでなく、囲み記事としてページの中盤に配置するのもオススメです。

スタイルシート・HTMLソース

<p style="margin: 30px;padding:10px; text-align: left; border-style: dotted;">

ページの最後だけでなく、囲み記事としてページの中盤に配置するのもオススメです。

</p>

囲い3「角が丸まるい」

これを実現するために、四隅を画像にしたり、背景に角が丸い画像をしている方もいらっしゃるのではないでしょうか。このスタイルシートを追加すれば、簡単に一発で枠組みの角が丸くなります。

プレビュー

角が丸い枠組みにすることで、やわらかな印象を与えながら、囲みの中の文章を目立たせる事ができます。

スタイルシート・HTMLソース

<p style="margin: 10px; padding: 10px; text-align: left; background-color: #f5deb3; border-radius: 10px;">

角が丸い枠組みにすることで、やわらかな印象を与えながら、囲みの中の文章を目立たせる事ができます。
</p>

まとめ

色や太さを変えるだけでどんなサイトにもピッタリな、スタイルシート・HTMLテンプレートをご紹介しました。ウェブページの部品となるスタイルシートのテンプレートをどれだけ、持っているかで更新作業の効率化が進みます。

さらに、効率化だけでなく、デザイン性の向上により視認性や動線が改善し申込や、購入、問い合せなどの最終的なコンバージョンを向上させることができるかと思います。

コンテンツ製作の引き出しの1つにしていただき、ウェブ改善を加速させて頂ければと思います。

コメント一覧

コメントはありません。

この記事にコメント

*

トラックバックURL