フラッシュ素材(Flash Works)

プロのウェブデザイナーが作ったカスタマイズ可能なホームページ素材Flash(フラッシュ)とWordPressテーマを無料配布しています。
フラッシュ素材(Flash Works)
» » WordPressテーマ用の装飾コード

WordPressテーマ用の装飾コード


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

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

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

ぜひご利用ください。

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

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

装飾のカスタマイズ

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

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

レスポンシブのテーブル

ヘッダー1 内容1
ヘッダー2 内容2
ヘッダー3 内容3

<table class="responsive-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列限定なのでご了承ください。

ノーマルのテーブル

ヘッダー1 内容1
ヘッダー2 内容2
ヘッダー3 内容3

<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に指定してあります。

注意・警告

Caution

ここにテキストを入れましょう。レスポンシブ対応なので、使いやすいと思います。ご使用の際は、下のソースコードをコピペしてください。

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

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

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

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

タイトル1
タイトルの内容を簡潔に2、3行で入力してください。短すぎると見栄えが悪くなり、長すぎるとゴチャゴチャした印象になってしまうので注意しましょう。
タイトル2
このテキストボックスは、カテゴリーページを『固定ページ』で作る場合に役立ちます。『投稿』をまとめたページを作ることにより、サイト訪問者がお目当てのページを見つけやすくなるメリットがあります。

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

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

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

フローチャート

1. 説明

手順や工程などを説明したいときに役立つのがこのフローチャートです。レスポンシブ対応なので、閲覧環境を気にせず使用できます。

 
2. 利用方法

下のソースコードをコピペしてご使用ください。矢印とボックスを増やす場合は、<div class=”arrow”></div>とその下のarrow-boxを必要な分だけコピペして中を書き換えると簡単です。

<div class="arrow-box">
	<div class="arrow-box-title"><strong>1. ヘッダー</strong></div>
	<p>内容を入力してください。</p>
</div>
<div class="arrow">&nbsp;</div>
<div class="arrow-box">
	<div class="arrow-box-title"><strong>2. ヘッダー</strong></div>
	<p>内容を入力してください。</p>
</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タグを使うと、上記のようにアイコン・下線付きのデザインで表示されます。


関連記事

エックスサーバーの最安値プランは月額1,000円なので、個人向けとしては少し高いですが、『高速・多機能・高安定性』を追求した評判の良いレ...


ホームページを作って、その後はページを増やしていけば良いというものではありません。 アクセス解析で訪問者数や滞在時間、直帰率などの様々なデ...


ワードプレスのテーマを制作するにあたり、ウェブサイトを作ったことがある方から初めて作る方まで、どなたにもご利用いただける仕様にすることを決め...


ワードプレスは自分の好みの『テーマ』をインストールして有効化するだけで思い通りのサイトを制作できますが、カスタマイズして自分だけのオリジナル...


初めてホームページを作る方にも簡単にサイドバーの位置を変えられるように、カスタマイザーで設定できるようにしました。 『style.css』...



コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最新記事

Flash Works

WordPressテーマ『FlashWork-s』で見出しタグが使われている箇...

Flash Works

WordPressテーマ『FlashWork-s』に用意されている装飾コードに...

Flash Works

ワードプレスのヘッダー画像の設定方法について説明いたします。また、簡単な変更で...

Flash Works

WordPressテーマ『FlashWork-s』に組み込まれているGoogl...

Flash Works

WordPressテーマ『FlashWork-s』に組み込まれているサイドバー...

素材ラインナップ

How to ホームページ

インフォメーション

検索