WordPress子テーマ『Zoom up（ズームアップ）』の紹介

オススメ1

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

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

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

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

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

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

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

オススメ2

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

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

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

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

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

オススメ3

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

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

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

子テーマ『Zoom up（ズームアップ）』の説明

『Zoom up（ズームアップ）』は、WordPressテーマ『Flash Works』の子テーマです。

『Move（ムーブ）』や『Alpha（アルファ）』と構成は同じですが、リンクボックスにマウスオーバーした際に画像がズームアップするようになっているので、画像を注目させたい場合にオススメします。

趣味サイト、個人事業主サイト、士業サイト、企業サイトなど、さまざまな分野のサイトに活用できるでしょう。

ただし、扱うには画像の埋め込みやリンクの設定、カラー変更など、ウェブサイト制作に関する初歩的な知識が必要なので注意してください。

なお、『Zoom up（ズームアップ）』にも要素を動かすことができるJavaScriptライブラリ『AOS（aos.js）』を組み込んであるので、躍動感あるホームページを制作できます。

子テーマ『Zoom up（ズームアップ）』についての注意事項

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

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

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

子テーマ『Zoom up（ズームアップ）』のカスタマイズについて

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

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

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

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

子テーマ『Zoom up（ズームアップ）』の画像変更について

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

画像を変更する場合は、画像を用意して『Zoom up』の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をアップロードし、ブラウザで表示確認しましょう。

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

子テーマ『Zoom up（ズームアップ）』のリンク先変更について

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

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

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

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

子テーマ『Zoom up（ズームアップ）』のカラー変更について

子テーマ『Zoom up』のベースカラーは茶色（633）です。

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

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

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

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

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

子テーマ『Zoom up（ズームアップ）』の画像の増減について

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

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

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

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

子テーマ『Zoom up（ズームアップ）』の動作変更について

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

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

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

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

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

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

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

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

子テーマ『Zoom up（ズームアップ）』の独自CSSについて

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

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

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

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

関連記事