WordPress子テーマ『Alpha（アルファ）』の紹介

オススメ1

オススメ1は、次のとおりです。

リンク先タイトル1
リンク先ページの内容を入力してください。その際、各ボックスの行数を揃えてください。

リンク先タイトル2
リンク先ページの内容を入力してください。その際、各ボックスの行数を揃えてください。

リンク先タイトル3
リンク先ページの内容を入力してください。その際、各ボックスの行数を揃えてください。

リンク先タイトル4
リンク先ページの内容を入力してください。その際、各ボックスの行数を揃えてください。

リンク先タイトル5
リンク先ページの内容を入力してください。その際、各ボックスの行数を揃えてください。

リンク先タイトル6
リンク先ページの内容を入力してください。その際、各ボックスの行数を揃えてください。

オススメ2

オススメ2は、次のとおりです。

リンク先タイトル1
リンク先ページの内容を入力してください。その際、各ボックスの行数を揃えてください。

リンク先タイトル2
リンク先ページの内容を入力してください。その際、各ボックスの行数を揃えてください。

リンク先タイトル3
リンク先ページの内容を入力してください。その際、各ボックスの行数を揃えてください。

リンク先タイトル4
リンク先ページの内容を入力してください。その際、各ボックスの行数を揃えてください。

オススメ3

オススメ3は、次のとおりです。

リンク先タイトル1
リンク先のページの内容を入力してください。その際、各ボックスの行数を揃えてください。

リンク先タイトル2
リンク先のページの内容を入力してください。その際、各ボックスの行数を揃えてください。

子テーマ『Alpha（アルファ）』の説明

『Alpha（アルファ）』は、WordPressテーマ『Flash Works』の子テーマです。

『Move（ムーブ）』と構成は同じですが、リンクボックスにマウスオーバーした際に、Moveが背景色が変わるのに対し、Alphaは画像の透明度が薄くなるようになっています。

シンプルな動きとなったことで趣味サイトやアフィリエイトサイトから企業サイトまで幅広い分野のサイトに利用できるようになり、また、背景色の設定が必要なくなったので初期設定もその分楽になりました。

それでも、扱うにはウェブサイト制作に関する初歩的な知識が必要なので注意してください。

なお、『Alpha（アルファ）』にも要素を動かすことができるJavaScriptライブラリ『AOS（aos.js）』を組み込んであるので、躍動感あるウェブサイトを制作できます。

子テーマ『Alpha（アルファ）』についての注意事項

WordPressテーマ『Flash Works』の子テーマである「Alpha（アルファ）」の購入前に、次の注意事項についてしっかり理解し、納得してからお買い求めください。

ダウンロード商品のため、ダウンロード後の返金はできません

• 上記サンプルは、下層ページで『Alpha』を再現したものであり、実際の表示と多少異なります
• 子テーマ『Alpha』を利用するには、親テーマである『Flash Works』が必要です
• 『Alpha』を利用するには、画像制作や簡単なHTML・CSS（画像やリンク、カラー）の知識が必要です

子テーマ『Alpha（アルファ）』のカスタマイズについて

子テーマ『Alpha』をカスタマイズする際は、DreamweaverなどのHTML等を扱うソフトかテキストエディタをご利用ください。

Windows付属のメモ帳を利用すると文字化けの原因となるので、メモ帳で開いて保存してはいけません。

テキストエディタを利用する場合は、無料で利用できるTeraPadがオススメです。

HTMLファイルやCSSファイルのアイコンをTeraPadのウィンドウにドラッグアンドドロップすると、ソースコードを開くことができます。

子テーマ『Alpha（アルファ）』の画像変更について

子テーマ『Alpha』のトップページに利用している画像は、子テーマのimagesフォルダ内にある画像を読み込むように設定してあります。

画像を変更する場合は、画像を用意して『Alpha』のimagesフォルダ内に入れ、さらに、front-page.phpのimgタグの最後の部分の「画像名.jpg」と「altの画像説明」を変更してください。

画像サイズは「小 150px X 90px」「中 250px X 155px」「大 600px X 370px」で、黄金比に近い数値になっています。

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/image-250x155.jpg" width="250" height="155" alt="画像説明" border="0">

例えば、上記は中サイズの画像ですが、横250px・縦155pxの画像を用意して『Alpha』のimagesフォルダ内に入れ、front-page.phpの画像を表示しているimgタグの「image-250×155.jpg」「画像説明」部分を変更すればいいだけです。

最後に、FFFTPなどのFTPソフトを使って画像とfront-page.phpをアップロードし、ブラウザで表示確認しましょう。

自分が用意した画像が表示されていれば成功です。

子テーマ『Alpha（アルファ）』のリンク先変更について

子テーマ『Alpha』のトップページに利用しているボックスには、リンクを設定できます。

<a href="#">
	<div class="topimg-sbox" data-aos="flip-left">
		<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/image-150x90.jpg" width="150" height="90" alt="画像説明" border="0"><br />
		<strong>リンク先タイトル</strong><br />
		リンク先ページの内容を入力してください。その際、各ボックスの行数を揃えてください。
	</div>
</a>

上記のようにdivタグに対してaタグでリンクを設定してあるので、hrefの#（シャープ）部分にリンク先のURLを入力してください。

その際、https（http）から始まる絶対パスで入力すると簡単です。

子テーマ『Alpha（アルファ）』のカラー変更について

子テーマ『Alpha』のベースカラーは緑色（366）です。

カラー変更する際は、子テーマ内にあるstyle.cssをTeraPadなどのテキストエディタで開いてお好みの色に変更し、FFFTPなどのFTPソフトでアップロードしてください。

緑色が使われているクラスは、次のとおりです。

• .newinfo-box-center a（トップページで表示されるNewsのカテゴリーリンクの背景色）

ベースカラーの緑色を変更する場合は、style.cssを開いて「366」で検索して変更すると良いでしょう。

なお、その他の部分のカラーについては、WordPressの左メニューから「外観」「カスタマイズ」「カスタムカラー」の順に進み、お好みの色に変更してください。

子テーマ『Alpha（アルファ）』の画像の増減について

子テーマ『Alpha』のトップページに使用している画像のリンクボックス「topimg-sbox（smallボックス）」「topimg-mbox（middleボックス）」「topimg-lbox（largeボックス）」は、お好みに合わせて増減してください。

減らす場合はaタグを目安に削除し、増やす場合はaタグを目安にコピーして中身を書き換えると良いでしょう。

その際、最後のボックスは、「topimg-sbox-last」のように-lastを付けることをお勧めします。

付けなくても問題なく表示されますが、スマホ表示の場合に次の見出しとの行間が狭くなるので、-lastを付けた方が良いです。

子テーマ『Alpha（アルファ）』の動作変更について

子テーマ『Alpha』は、著作権表示を条件に無料で使用・改造・再配布等ができるMITライセンスの『AOS（aos.js）』を利用しています。

この『AOS（aos.js）』は、スクロールすると要素をアニメーションさせることができるJavaScriptのライブラリです。

動かしたいタグにdata-aos=””を入力し、さらに、動きを指定するだけで簡単に動かせます。

<div class="topimg-sbox" data-aos="flip-left"></div>

上記は、『Alpha』のトップページに使用しているsmallボックスですが、flip-leftを指定しているので、左回転で表示されます。

動きの指定ですが、主な動きとして「fade（フェード）」「flip（回転）」「slide（スライド）」「zoom（ズーム）」があり、さらに、flip-leftのように「-left」「-right」「-up」などが続くので種類が豊富です。

ここでは説明しきれないので、動きを変えたい場合は「aos 使い方」で検索してください。

なお、発火のタイミングや動きの速度など、AOSの総合的な動きはfunctions.phpの中で設定しています。

子テーマ『Alpha（アルファ）』の独自CSSについて

子テーマ『Alpha』を利用するにあたり、独自CSSを設定することもあるでしょう。

子テーマには更新機能を付けていないので直接style.cssに書き込んでも問題ありませんが、子テーマ『Alpha』用のCSSと混在して分かりにくくなる可能性があります。

そこで、cssフォルダ内にoriginal.cssというスタイルシートを用意しました。

独自CSSを設定する際は、original.cssをご利用ください。

関連記事