プロのウェブデザイナーが作った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タグを使うと、上記のようにアイコン・下線付きのデザインで表示されます。


関連記事

ワードプレス(WordPress)は、オープンソースのブログソフトウェアのため無料で利用することができます。 しかも、無料・有料のテーマが...


エックスサーバーとドメインを用意しただけでは利用できず、これらを結び付ける作業が必要となります。 この作業はエックスサーバー側とドメイ...


ワードプレスは『投稿』と『固定ページ』、2種類のページを生成できますが、その内『投稿』とは、アメーバブログやヤフーブログのようにブログのペー...


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


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



コメントする

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

最新記事

ノートパソコン

いらなくなった使用済みパソコンや故障パソコンを無料で手軽に回収・廃棄してもらう...

ソフトバンク光

ソフトバンク光は、SoftBankが提供する光ファイバー回線を利用したインター...

フレッツ光

フレッツ光は、NTT東日本・NTT西日本が提供する光回線です。お得なサービスが...

マウス

一度気にしたら、その後ずっと気になるPCマウスのクリック音。「カチカチ」うるさ...

マウス

パソコンを使っていると、ある日突然、マウスの左クリックの反応が悪くなります。そ...

素材ラインナップ

How to ホームページ

その他

インフォメーション

検索