たくさん撮りためた写真を整理して、フォトギャラリーを作成しててみましょう。 simpler2-69 基本色 black 教室試作サイト http://c15.seta.red 2016-8-27

..

※各画像はテーマの「images」フォルダにあります。
mark01のCSS例
「padding-left:35px;
background:url(images/add/check-t01.png) no-repeat 0 50%;」

1.マーカー付見出し(画像使用)

マーカー付見出し32-28px p class=”mark01″

マーカー付見出し24-25px p class=”mark02″

マーカー付見出し16-16px p class=”mark03″

マーカー付見出し32-28px 一番上の行と同表示だが、記事の中で画像指定

マーカー付見出し17-17px p class=”mark04″

電話マーク30-30px p class=”mark05″
03-1234-5678
お気軽にお電話ください!

FAQのCSS例
「background: transparent url(“images/faqq.gif”) no-repeat scroll left top;」

自分でサーバーを契約していますが、教室のサーバーは必要ですか? span class=”faqq”
現在お使いのサーバーがあればそれが使えます。教室のサーバーは不要です。 span class=”faqa”
ただしレンタルサーバー会社によってはwordpressが動作しない場合もあるので注意が必要です。
※Xサーバー、さくら、ロリポップ、ミニムなどは動作を確認済みです。

独自ドメインとは何ですか? span class=”faqq”
ホームページの住所に様なものです。 span class=”faqa”

2.Webアイコンフォント「Font Awesome」

simplerは「Font Awesome」が使用可能です。

いろいろなアイコンを使ってみましょう。

車のアイコン「fa-car」を選んでみました。
class に 「fa」と 各アイコンに割り当ての「fa-car」を使います。
下記の例では「i」要素が利用されていますが「p」「span」「strong」要素などでもOKです。
要素の間には何も記入する必要はありません。

<i class="fa fa-car"></i> fa-carのアイコンが表示されました。 

fa-carのアイコンが表示されました。

アイコンの色や大きさを変えてみましょう。

そのまま class=”fa fa-check-square”
 青でややおおきく style=”color: blue; font-size: 1.5em;”
 赤でややおおきく style=”color: red; font-size: 1.5em;”
 青でおおきく style=”color: blue; font-size: 2.5em;”
 赤でおおきく style=”color: red; font-size: 2.5em;”

そのまま   class=”fa fa-spinner fa-spin”
 青でややおおきく
 赤でややおおきく
 青でおおきく
 赤でおおきく

ホームアイコン class=”fa fa-home”
チェックアイコン class=”fa fa-check”
ダウンロードアイコン class=”fa fa-download”
注意アイコン class=”fa fa-warning”
カートアイコン class=”fa fa-shopping-cart”

※本家サイトのアイコンの一覧はこちらからどうぞ。

3.背景画像付見出し(画像使用)

※各画像はテーマの「images」フォルダにあります。
haikei01のCSS例
.haikei01 {/*背景画像480-38px*/
padding-left:2.0rem;
background:url(images/add/bg-h3.png) no-repeat;

背景画像付見出し480-38px p class=”haikei01″

背景画像付見出し719-66px p class=”haikei02″

背景画像付見出し778-157px p class=”haikei03″