見出し、引用、文字装飾、リスト、動画像等のCSS初期設定とサンプル
WordPress Theme Gush2 で設定してある、記事用のCSSサンプルをご紹介します。
この記事の目次
大見出し h2
記事タイトルには<h1>を割り当てているため、記事内の見出しには<h2>～<h6>を使用してください。
中見出しh3
小見出し h4
基本的にこの3種類があれば事足りると思います。<h5>と<h6>はとくに装飾を指定していないため、使用する場合は下記のような感じで指定してください。
|
1 2 3 |
#article_body h5 { } #article_body h6 { } |
なお、このテーマはレスポンシブデザインになっているため、スマホ用・タブレット用・PC用でスタイルを変えることができます。ウィンドウの幅を変えたり、実際に各端末で確認しながら作業を進めてくださいね。
引用 blockquote
「引用」を表す<blockquote>の表示サンプルはこちら。
WordPress（ワードプレス）は、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している(後述のプラグインよりSQLiteでの使用も可能)。単なるブログではなくCMSとしてもしばしば利用されている。
左上の記号はCSSで背景画像を指定して表示しています。より軽量化を図るのであれば、アイコンフォントを活用すると良いかもしれません。
背景色グレーのボックス
引用ではないけれど、記事内でちょっとしたアクセントをつけたり強調したいときに使える、背景色がグレーのボックス。
|
1 2 3 4 5 6 |
<div class="gray_box"><p>このような感じで表示されます。</p> <ul> <li>もちろんリストも使えます</li> <li>画像も枠内に収まります</li> </ul> <img src="http://placehold.jp/1000x150.png" alt="横幅1000pxのダミー画像" /></div> |
このような感じで表示されます。
- もちろんリストも使えます
- 画像も枠内に収まります
背景色はCSSで変更できます。
文字装飾
強調 strong
<strong>は、記事内で強調したいテキストに対して指定します。HTML4.01 と HTML5 の定義はほぼ同じですが、入れ子にすることでより強調することができます（CSSで入れ子の指定はしていません）。
この指定は、見た目だけではなく検索エンジンにもその重要度を伝えることができます。
|
1 |
<strong><strong>入れ子にすることで</strong>より強調することができます</strong> |
<b>や<em>を使うこともできますが、このテーマでは太字で表示するように設定しておりません。検索エンジンにはとくに重要性を伝える必要がない場合、下記のように指定することで見た目だけ太字にすることができます。
|
1 2 |
<span class="b">太字</span> <span class="futo">太字</span> |
太字
太字
赤文字 .futoaka
クラス名に「futoaka」を指定すると赤い太字になります。
|
1 |
<span class="futoaka">赤い文字</span> |
赤い文字
緑文字 .futomido
クラス名に「futomido」を指定すると緑の太字になります。
|
1 |
<span class="futomido">緑の文字</span> |
緑の文字
大文字 .l .ll
クラス名に「l」を指定すると大文字に、「ll」を指定するとより大文字になります。
|
1 2 |
<span class="l">大文字</span> <span class="ll">より大文字</span> |
大文字
より大文字
クラス名の間に半角スペースを入れることで、赤文字や緑文字と複合して使うこともできます。
|
1 |
<span class="futoaka l">赤い大文字</span> |
赤い大文字
小文字 .s .ss
クラス名に「s」を指定すると小文字に、「ss」を指定するとより小文字になります。
|
1 2 |
<span class="s">小文字</span> <span class="ss">より小文字</span> |
小文字
より小文字
大文字のときと同じく、複合させて使うこともできます。
上付き文字 sup 下付き文字 sub
あまり使う機会はないかもしれませんが、上付き文字と下付き文字は行間に影響がないように指定しています。
|
1 2 |
x<sup>2</sup> H<sub>2</sub>O |
x2
H2O
リスト
番号つきリスト ol
- リストのスタイルはCSSの「記事内指定」に記述してあります
- このように複数行にわたるようなテキストの場合、文字列の左端が縦にそろうように「padding」「text-indent」「margin」で調整しています
番号なしリスト ul
- リストのスタイルはCSSの「記事内指定」に記述してあります
- このように複数行にわたるようなテキストの場合、文字列の左端が縦にそろうように「padding」「text-indent」「margin」で調整しています
定義リスト dl
- 定義リストとは
- <dt> ～ </dt> に定義する用語を記述し、<dd> ～ </dd> に用語の説明を記述します
テーブル table
テーブルはシンプルな装飾になっています。CSS3ではさまざまなスタイルを指定することができますので、ぜひオリジナリティあふれる表を作成してみてください。
| ここはthです | ここもthです |
|---|---|
| ここはtdです | ここはtdです |
| ここもtdです | ここもtdです |
画像配置
管理画面から画像をアップロードし、「添付ファイルの表示設定」で左・中央・右を選択して記事内に挿入したときの配置サンプルです。
画像左寄せ
画像左寄せサンプル
この設定をすることで、画像に「alignleft」というクラス名が付与されます。キャプションを使用する場合は、captionというショートコードに同クラス名が付与されます。
初代Gushでは単に画像が左側に配置され、テキストの回り込みはできませんでしたが、今バージョンより回り込みするようCSSの指定を変更しました。
テーマを初代GushからGush2へ変更した場合は、画像配置の確認をお願いします。
画像右寄せ
画像右寄せサンプル
この設定をすることで、画像に「alignright」というクラス名が付与されます。キャプションを使用する場合は、captionというショートコードに同クラス名が付与されます。
初代Gushでは単に画像が右側に配置され、テキストの回り込みはできませんでしたが、今バージョンより回り込みするようCSSの指定を変更しました。
テーマを初代GushからGush2へ変更した場合は、画像配置の確認をお願いします。
画像センタリング
画像センタリングサンプル
今度はセンタリングです。
横幅 300px の画像を使用しているため、いずれの配置もスマホ表示では違いが見られないかもしれません。
動画をレスポンシブにさせる方法
YouTubeなどの動画を記事に貼り付けると、スマホでは横にはみ出してしまいます。
レスポンシブデザインで動画を枠内に収める方法はいくつかありますが、当テーマでは「.video-container」というクラス名のDIV要素で動画を囲むことで対応できます。
|
1 |
<div class="video-container">動画コード</div> |
ウィンドウの幅を変えて、動画が枠からはみ出ていないかチェックしてみてください。
さいごに
主に記事内で使用するタグのCSS初期設定をご紹介しました。正常に反映されない！という場合はご連絡ください。
自由にカスタマイズしてあなた色に染めてくださいね！（ぽっ
2013年10月より、おもにWordPress初心者を対象とした指南書がメインのNaifixを開設。2014年3月にカスタマイズ前提のWPテーマ「Gush」を公開。
raopi 
[…] Gush2説明書「見出し、引用、文字装飾、リスト、動画像等のCSS初期設定とサンプル」に合わせて、プラグインAddQuicktagの設定をしてみました。 […]