WordPress子テーマ『Move Black（ムーブ・ブラック）』の紹介

オススメ1

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

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

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

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

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

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

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

オススメ2

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

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

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

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

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

オススメ3

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

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

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

子テーマ『Move Black（ムーブ・ブラック）』の説明

『Move Black（ムーブ・ブラック）』は、WordPressテーマ『Flash Works』の子テーマで、子テーマ『Move』のブラック版です。

親テーマである『Flash Works』も、その子テーマである『Move』も、カスタマイザーで主要部分のカラーを簡単に変更できるのですが、パーツ全てのカラーを変更できるようにすると設定項目が多くなり分かりづらくなってしまうという問題があります。

その問題を考慮した結果、ウェブサイト全体の背景色を変更できても、コンテンツ部分の背景色をカスタマイザーで変更できない仕様になりました。

しかし、中にはコンテンツ部分が黒色のデザインを望む人もいます。

そこで、子テーマ『Move』のブラック版をご用意しました。

カラー変更だけだから簡単作業ですぐ終わると思っていましたが、思った以上に時間を要したのでビックリした次第です。

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

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

飲食店サイト、ホテルサイト、旅館サイトなどに使うと、重厚なイメージのホームページを簡単に作れるでしょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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 Black（ムーブ・ブラック）』のカラー変更について

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

主要部分についてはカスタマイザーで変更できますが、それ以外の部分についてはCSSを直接変更しなければなりません。

カラー変更する際は、子テーマ内にある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のカテゴリーリンクの背景色）

テキストリンクに濃い色を使うと背景の黒色に溶け込んで見えづらいので、カスタマイザーで明るい色に設定すると良いでしょう。

黒色が使われているクラス

• body（ページ全体の背景色。カスタマイザーで変更可能）
• #wrapper,#main（コンテンツ部分の背景色）
• #footer-navi（フッター部分の背景色）
• #copyright（コピーライト部分の背景色）
• h1～h4（見出しの背景色。グラデーションで設定）
• #side-navi ul a（サイドバーにあるulタグの中のaタグのボーダーカラー）
• #side-navi ul a:hover（サイドバーにあるulタグの中のaタグにマウスオーバーした時の背景色）
• #side-navi ul ul a（サイドバーの2階層目のテキストリンクのボーダーカラー）
• #side-navi ul ul a:hover（サイドバーの2階層目のテキストリンクにマウスオーバーした時の背景色）
• #footer-navi ul a（フッターにあるulタグの中のaタグのボーダーカラー）
• #footer-navi ul a:hover（フッターにあるulタグの中のaタグにマウスオーバーした時の背景色）
• #footer-navi ul ul a（フッターの2階層目のテキストリンクのボーダーカラー）
• #footer-navi ul ul a:hover（フッターの2階層目のテキストリンクにマウスオーバーした時の背景色）
• #comment-area（投稿ページ下部にあるコメント欄の背景色。設定時のみ）
• #comment-area ol li.depth-1（コメントエリアの枠線の色）
• #comment-area ol li ul.children li（コメントを区切るボーダーカラー）
• #respond（コメント入力部分の背景色）
• .normal-table th,.responsive-table th（オリジナルテーブルのヘッダーセルの背景色）
• .normal-table td,.responsive-table td（オリジナルテーブルのセルの背景色）

背景色は黒色ですが、濃さの違う黒色を複数使っているのが特徴です。

上記のクラス名・ID名を参考にstyle.cssを変更すれば、黒色以外の背景色にすることもできます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

子テーマ『Move Black（ムーブ・ブラック）』の独自CSSについて

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

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

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

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

関連記事