WordPressテーマ用の装飾コード

Tweet

WordPressテーマ『FlashWork-s』は、初心者の方にも無理なくご利用いただけるように、あらかじめ装飾用のcssを設定してあります。

テーブルやフローチャート、強調、テキストカラーなど使う機会が多い装飾で、しかもレスポンシブデザインに対応しているので、大変役立つと思います。

もちろん、ウェブサイト制作に精通している方にもおすすめで、新たなクラスを作って表示確認するといった煩わしさから解放され、cssを少し変更すれば思い通りの装飾にできるので便利です。

ぜひご利用ください。

なお、これらのコードを利用する場合は、本文の入力モードを『テキスト』にしてください。

『ビジュアル』で入力してもソースコードではなく文字として表示されて、cssは反映されません。

装飾のカスタマイズ

装飾用のcssは、『FlashWork-sテーマ » cssフォルダ » decoration.css』で設定しているので、カラー変更等の際はこのスタイルシートをご使用ください。

なお、変更の際はメモ帳ではなく、PHPやCSSに最適のテキストエディタを利用しましょう。

レスポンシブのテーブル

<table class="normal-table">
<tbody>
<tr>
<th>ヘッダー1</th>
<td>内容1</td>
</tr>
<tr>
<th>ヘッダー2</th>
<td>内容2</td>
</tr>
<tr>
<th>ヘッダー3</th>
<td>内容3</td>
</tr>
</tbody>
</table>

『タブレット・スマホ・携帯画面』になると、ヘッダーと内容が縦に並ぶテーブルです。

実際にウィンドウ幅を狭めて、次のノーマルのテーブルと比べていただければ、その違いが分かりやすいと思います。

ご使用の際は、上のソースコードをコピペするか、自分で用意した『tableタグ』にclass=”responsive-table”を入れるかですが、このテーブルは2列限定なのでご了承ください。

ノーマルのテーブル

<table class="normal-table">
<tbody>
<tr>
<th>ヘッダー1</th>
<td>内容1</td>
</tr>
<tr>
<th>ヘッダー2</th>
<td>内容2</td>
</tr>
<tr>
<th>ヘッダー3</th>
<td>内容3</td>
</tr>
</tbody>
</table>

ノーマルのテーブルは、ウィンドウ幅が狭くなってもヘッダーと内容が横並びで表示されます。

このテーブルも上のソースコードをコピペして使うか、『tableタグ』にclass=”normal-table”を入れてください。

ただし、こちらも2列に限ります。

フォント

太字

<strong>太字</strong>

注釈

<span class="notes">注釈</span>

赤色フォントカラー
青色フォントカラー
緑色のフォントカラー
オレンジ色のフォントカラー
茶色のフォントカラー
紫色のフォントカラー
ピンク色のフォントカラー
黄土色のフォントカラー

<span class="color-red">赤色フォントカラー</span>
<span class="color-blue">青色フォントカラー</span>
<span class="color-green">緑色のフォントカラー</span>
<span class="color-orange">オレンジ色のフォントカラー</span>
<span class="color-brown">茶色のフォントカラー</span>
<span class="color-purple">紫色のフォントカラー</span>
<span class="color-pink">ピンク色のフォントカラー</span>
<span class="color-ocher">黄土色のフォントカラー</span>

strong以外は、『spanタグ』などの中にclassを加えるだけです。

なお、サイト内で使用する基本的なフォントサイズは、『style.cssのbody』で14pxに指定してあります。

注意・警告

<div class="caution">
<div class="caution-title">Caution</div>
ここにテキストを入れましょう。

</div>

注意を促す文章を入力します。

また、見出しを『Check』に変えて重要ポイントをお知らせすることにも利用可能です。

下線付きのテキストボックス

<div class="line-box">
	<a href="#">タイトル1</a>
タイトルの内容を簡潔に2、3行で入力してください。</div>
<div class="line-box">
	<a href="#">タイトル2</a>
タイトルの内容を簡潔に2、3行で入力してください。</div>

ドットの下線付きテキストボックスで、中でリンクを使うと前にアイコンが付きます。

したがって、先頭以外でリンクを使うと表示がおかしくなりますので、使用しないか、『decoration.css』の中の『line-box a:before』というクラスを削除してください。

フローチャート

<div class="arrow-box">
<div class="arrow-box-title"><strong>1. ヘッダー</strong></div>
内容を入力してください。

</div>
<div class="arrow">&nbsp;</div>
<div class="arrow-box">
<div class="arrow-box-title"><strong>2. ヘッダー</strong></div>
内容を入力してください。

</div>

見出しの色は『strongタグ』で設定し、下矢印の色は『decoration.cssのarrow』というクラスを変更してください。

olタグ

1. Ordered List1
2. Ordered List2
3. Ordered List3

<ol>
 	<li>Ordered List1</li>
 	<li>Ordered List2</li>
 	<li>Ordered List3</li>
</ol>

コンテンツ部分にolタグを使うと、上記のように数字・下線付きのデザインで表示されます。

ulタグ

• Unordered List1
• Unordered List2
• Unordered List3

<ol>
 	<li>Unordered List1</li>
 	<li>Unordered List2</li>
 	<li>Unordered List3</li>
</ol>

コンテンツ部分にulタグを使うと、上記のようにアイコン・下線付きのデザインで表示されます。

Tweet

関連記事

WordPressのアイキャッチ画像

2016年01月10日ワードプレス無料テーマ FlashWork-s

ワードプレスには『アイキャッチ画像』という機能が付いており、テキストだけのリンクと比べ、閲覧者の興味を引き付けてクリックされやすいという特長...

WordPressカスタムカラーの停止

2016年01月10日ワードプレス無料テーマ FlashWork-s

カスタムカラーはcssファイルに手を加えることなく各部の色を変更できるので、ウェブサイト制作初心者の方にはとても便利な機能ですが、次のような...

WordPressのウィジェット追加

2016年01月10日ワードプレス無料テーマ FlashWork-s

ワードプレスにはウィジェット（Widget）という便利な機能があり、『最近の投稿』や『カテゴリーのリンク』、『カレンダー』などをドラッグアン...

All in One SEO Packの設定方法

2016年01月10日ワードプレス無料テーマ FlashWork-s

ワードプレスにはSEO対策のために、『All in One SEO Pack』というプラグインが用意されています。 基本的に英語のプラグイ...

WordPressの設定

2016年01月10日ワードプレス無料テーマ FlashWork-s

ワードプレスをインストールしたら行うべき設定方法について説明いたします。 あくまでも一般的な設定の仕方であって、必ずこうしなければならない...