見出し、引用、文字装飾、リスト、動画像等のCSS初期設定とサンプル

  更新:2015/04/07

WordPress Theme Gush2 で設定してある、記事用のCSSサンプルをご紹介します。

大見出し h2

記事タイトルには<h1>を割り当てているため、記事内の見出しには<h2>~<h6>を使用してください。

中見出しh3

小見出し h4

基本的にこの3種類があれば事足りると思います。<h5>と<h6>はとくに装飾を指定していないため、使用する場合は下記のような感じで指定してください。

なお、このテーマはレスポンシブデザインになっているため、スマホ用・タブレット用・PC用でスタイルを変えることができます。ウィンドウの幅を変えたり、実際に各端末で確認しながら作業を進めてくださいね。

引用 blockquote

「引用」を表す<blockquote>の表示サンプルはこちら。

WordPress(ワードプレス)は、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している(後述のプラグインよりSQLiteでの使用も可能)。単なるブログではなくCMSとしてもしばしば利用されている。

WordPress – Wikipedia

左上の記号はCSSで背景画像を指定して表示しています。より軽量化を図るのであれば、アイコンフォントを活用すると良いかもしれません。

背景色グレーのボックス

引用ではないけれど、記事内でちょっとしたアクセントをつけたり強調したいときに使える、背景色がグレーのボックス。

このような感じで表示されます。

  • もちろんリストも使えます
  • 画像も枠内に収まります

横幅1000pxのダミー画像

背景色はCSSで変更できます。

文字装飾

強調 strong

<strong>は、記事内で強調したいテキストに対して指定します。HTML4.01 と HTML5 の定義はほぼ同じですが、入れ子にすることでより強調することができます(CSSで入れ子の指定はしていません)。

この指定は、見た目だけではなく検索エンジンにもその重要度を伝えることができます。

<b>や<em>を使うこともできますが、このテーマでは太字で表示するように設定しておりません。検索エンジンにはとくに重要性を伝える必要がない場合、下記のように指定することで見た目だけ太字にすることができます。

太字
太字

赤文字 .futoaka

クラス名に「futoaka」を指定すると赤い太字になります。

赤い文字

緑文字 .futomido

クラス名に「futomido」を指定すると緑の太字になります。

緑の文字

大文字 .l .ll

クラス名に「l」を指定すると大文字に、「ll」を指定するとより大文字になります。

大文字
より大文字

クラス名の間に半角スペースを入れることで、赤文字や緑文字と複合して使うこともできます。

赤い大文字

小文字 .s .ss

クラス名に「s」を指定すると小文字に、「ss」を指定するとより小文字になります。

小文字
より小文字

大文字のときと同じく、複合させて使うこともできます。

上付き文字 sup 下付き文字 sub

あまり使う機会はないかもしれませんが、上付き文字と下付き文字は行間に影響がないように指定しています。

x2
H2O

リスト

番号つきリスト ol

  1. リストのスタイルはCSSの「記事内指定」に記述してあります
  2. このように複数行にわたるようなテキストの場合、文字列の左端が縦にそろうように「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要素で動画を囲むことで対応できます。

ウィンドウの幅を変えて、動画が枠からはみ出ていないかチェックしてみてください。

さいごに

主に記事内で使用するタグのCSS初期設定をご紹介しました。正常に反映されない!という場合はご連絡ください。

自由にカスタマイズしてあなた色に染めてくださいね!(ぽっ

2013年10月より、おもにWordPress初心者を対象とした指南書がメインのNaifixを開設。2014年3月にカスタマイズ前提のWPテーマ「Gush」を公開。

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

コメント一覧

  1. […] Gush2説明書「見出し、引用、文字装飾、リスト、動画像等のCSS初期設定とサンプル」に合わせて、プラグインAddQuicktagの設定をしてみました。 […]

  2. […] 見出し、引用、文字装飾、リスト、動画像等のCSS初期設定とサンプル. […]

  3. […] 見出し、引用、文字装飾、リスト、動画像等のCSS初期設定とサンプル. […]

  4. […] Gush2説明書「見出し、引用、文字装飾、リスト、動画像等のCSS初期設定とサンプル」に合わせて、プラグインAddQuicktagの設定をしてみました。 […]

  5. […] 参考▶見出し、引用、文字装飾、リスト、動画像等のCSS初期設定とサンプル […]

  6. raopi より:

    お世話になります。縦並びのカテゴリーを横並び表示にしたく

    下記CSSを書き込みましたが反映されません。

    ご教授お願いいたします。他テーマでは反映されました。

    .widget_categories ul li {
    display: inline-block;
    vertical-align: top;
    margin: 0 4px 8px;
    background: #EFEFEF none repeat scroll 0% 0%;
    padding: 1px 2px 0px;
    line-height: 2em;
    border-radius: 3px;
    }

    .widget_categories ul li a {
    background: #f9f9f9;
    border: thin solid #f2f2f2;
    border-radius: 4px;
    padding: 1px 3px;
    }

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。