WordPress子テーマ『Move（ムーブ）』の紹介

オススメ1

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

オススメ2

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

オススメ3

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

子テーマ『Move（ムーブ）』の説明

『Move（ムーブ）』は、WordPressテーマ『Flash Works』の子テーマです。

「投稿日時・カテゴリー・記事タイトル」から成る最新記事ブロックと、「画像・タイトル・説明文」から成る小ブロック・中ブロック・大ブロックが用意されており、マウスオーバーで背景色が変わります。

それぞれのブロックは、『AOS（aos.js）』というJavaScriptライブラリを使用することにより、スクロールでアニメーションして閲覧者に効果的にアピール可能です。

企業サイト、個人事業サイト、アフィリエイトサイトなど、様々な分野のウェブサイト制作に活用できるように作ってあるので、ぜひ、ご利用ください。

なお、この子テーマ『Move（ムーブ）』を使用するには、ホームページ制作に関する基礎的な知識が必要です。

子テーマ『Move（ムーブ）』についての注意事項

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

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

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

子テーマ『Move（ムーブ）』のカスタマイズについて

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

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

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

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

子テーマ『Move（ムーブ）』の画像変更について

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

画像を変更する場合は、画像を用意して『Move』の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の画像を用意して『Move』のimagesフォルダ内に入れ、front-page.phpの画像を表示しているimgタグの「image-250×155.jpg」「画像説明」部分を変更すればいいだけです。

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

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

子テーマ『Move（ムーブ）』のリンク先変更について

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

<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）から始まる絶対パスで入力すると簡単です。

子テーマ『Move（ムーブ）』のカラー変更について

子テーマ『Move』のベースカラーは青色（369）です。

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

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

• a:hover .display-box（カテゴリーページや検索ページで表示されるボックスのhover時の背景色）
• .topimg-sbox:hover,.topimg-sbox-last:hover（トップページで表示されるsmallボックスのhover時の背景色）
• .topimg-mbox:hover,.topimg-mbox-last:hover（トップページで表示されるmiddleボックスのhover時の背景色）
• .topimg-lbox:hover,.topimg-lbox-last:hover（トップページで表示されるlargeボックスのhover時の背景色）
• .newinfo-box-center a（トップページで表示されるNewsのカテゴリーリンクの背景色）

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

子テーマ『Move（ムーブ）』の画像の増減について

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

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

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

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

子テーマ『Move（ムーブ）』の動作変更について

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

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

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

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

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

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

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

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

子テーマ『Move（ムーブ）』の独自CSSについて

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

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

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

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

関連記事