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

WordPressテーマ用の装飾コード


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

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

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

ぜひご利用ください。

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

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

装飾のカスタマイズ

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

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

レスポンシブのテーブル

ヘッダー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=”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>
ここにテキストを入れましょう。

</div>

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

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

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

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

フローチャート

1. 説明

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

 
2. 利用方法

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

<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タグを使うと、上記のようにアイコン・下線付きのデザインで表示されます。


関連記事

多くのホームページは、ヘッダー画像やキービジュアルと呼ばれる大きな画像がページ上部に配置されたデザインになっています。 そして、ワードプレ...


ワードプレスのコンテンツ部分は、基本的に『見出しと本文』で組み立てます。 そして、htmlで用意されているhタグ(見出し)は6種類、本文(...


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


レンタルサーバーを借りる時にドメインも取得しましょう。 ドメインとはhttp://www~で表示されるインターネット上の住所みたいなもので...


ドメインの設定とサーバーの設定が終わったら、ワードプレス(WordPress)をインストールしましょう。 手動インストールもできますが...



コメントする

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

最新記事

PCクーラー

ノートパソコンは、暑い中で長時間使用すると、熱がこもって故障することがあります...

マウス

キーボードやマウスは、便器の5倍汚くて細菌まみれであることが分かっています。そ...

テレワーク

WiMAX2+を短期間利用する方法を紹介します。できるだけ安く、そして、違約金...

WiMAX乗り換え

WiMAX2+は、乗り換えた方がお得な場合があります。乗り換えを検討している方...

おすすめのWiMAX会社TOP3

初めてWiMAX2+を利用する方におすすめの会社とその理由を教えます。ぜひ、W...

WiMAXの違約金

WiMAX2+は、多くの会社が2年または3年契約としており、その契約期間以外に...

WiMAX

WiMAX2+は、通常2.4GHzの周波数帯を利用していますが、5GHzに切り...

WiFiルーター

WiMAXとWiFiは、どちらも無線通信ですが、全くの別物です。WiMAXとW...

SoftBankAir

テレビでも大々的にCMが放送されているので、SoftBankAirをご存知の方...

ZEUS WiFi

ZEUS WiFiは、通信量無制限に加え、クラウドSIMで最適な回線を利用する...

素材ラインナップ

How to ホームページ

その他

インフォメーション

検索