現在のSEO対策は、有益なコンテンツを豊富に作成することが最も重要な要素となっています。
しかしサイトの更新作業は、大変手間と時間がかかってしまうものです。 そこで今回皆様にご紹介するのは、使い勝手がよくアレンジもしやすい便利なスタイルシート・htmlのテンプレートを7つご紹介します。
見出し１「シンプルですぐ使える装飾の見出し」
なにかと使い勝手がいい見出しのデザインです。色や大きさを変えて、様々なページに使用可能です。
プレビュー
スタイルシート・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 h2 style=”background-image : url(挿入画像のURL); width:901px; height: 100px;background-repeat: no-repeat;” >画像を背景にする見出し</h2>
画像の回り込み1「画像が右側」
プレビュー
スタイルシート・HTMLソース
<img style=”float: right; width:200px;border: solid 1px #ccc; padding: 6px; margin: 10px 10px 10px 10px;” alt=”src=”挿入画像のURL”>
<p>こちらに文章を入力してください。</p>
<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://find-a.jp/seotimes/wp-content/uploads/2014/08/sampleimg2.jpg”/>
<p>こちらに文章を入力してください。</p>
<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>
まとめ
色や太さを変えるだけでどんなサイトにもピッタリな、スタイルシート・HTMLテンプレートをご紹介しました。ウェブページの部品となるスタイルシートのテンプレートをどれだけ、持っているかで更新作業の効率化が進みます。
さらに、効率化だけでなく、デザイン性の向上により視認性や動線が改善し申込や、購入、問い合せなどの最終的なコンバージョンを向上させることができるかと思います。
コンテンツ制作の引き出しの１つにしていただき、ウェブ改善を加速させて頂ければと思います。
