【Twenty Sixteenカスタマイズ】トップページにスライドショーを挿入する方法

今回は、2015年末に公開されたWordpressの最新デフォルトテーマの「Twenty Sixteen」のカスタマイズTIPSです。

企業サイトや、ちょっと見た目の良いサイトではトップページ上部にスライドショーや大きなアイキャッチ画像が配置されています。

これによってページが目を引いたり、伝えたいことが一目で伝わったりします。

「Twenty Sixteen」ではデフォルトでヘッダーに画像を挿入する方法が最初に実装されています。

今回はこの方法と、プラグインを使用したスライドショー挿入方法の両者をお伝えします。

ご自身のサイトに合った方法でカスタマイズしてみてください。

 

「Twenty Sixteen」の関連記事はこちらをどうぞ

WordPressデフォルトテーマ「Twenty Sixteen」が公開。その特徴とカスタマイズ性は？
【Twenty Sixteenカスタマイズ】フォントを変更する方法
【Twenty Sixteenカスタマイズ】ロゴを配置する・メニューを作成する方法
【Twenty Sixteenカスタマイズ】トップページのタイトルを削除・見出しタグ（段落）を装飾する方法

 

「Twenty Sixteen」デフォルト機能を利用したトップ画像配置

デフォルト機能で追加するトップ画像は、管理や差し替えが非常に簡単というメリットがありますが、一方で画像にリンクが張れず、またスライドショーにはならないというデメリットがあります。

慣れないうちはとりあえずこれでやってみるのもよいでしょう。

「外観」＞「ヘッダー」を開きます。

そこで出てくるメニューより、「ヘッダー画像」を選択してください。「新規画像を追加」よりヘッダー画像をアップロードします。

おすすめサイズとして1200px×280pxが勧められますが、縦幅は280px以上でも問題ありません。横幅は1200px以下のものにすると荒くなってしまうので1200pxにしたほうが良いでしょう。

ここでは例として1200px×350pxの画像を入れてみます。

とりあえず適当に自然っぽい画像を入れてみたところ、こんな感じになりました。

なお、デフォルト機能を利用し、画像を設置する場合は複数設定することで、ページを開くたびにランダムな画像を表示させることが可能です。

また、この機能を利用した場合は、すべてのページにこの画像が表示されます。画像をクリックした場合のリンク先はトップページに固定されます。

ヒジョーに使いづらいですね。実際の企業サイトなどではあまり導入しないほうが良いと思います。

 

プラグインを利用してスライドショーを挿入する

続いてはプラグインを利用してトップページだけにスライドショーを挿入してみます。

この場合には、まずトップページを作成しなければなりません。

固定ページでトップページを作成してみましょう。

メニューの「固定ページ」より「新規追加」を選択し、ページを作成します。

とりあえずはタイトルに「HOME」と入力し、内容は適当でよいでしょう。

入力が終わったら「公開」をクリックしてください。

次に、この「HOME」をトップページに設定します。

「設定」＞「表示設定」より「フロントページの表示」の項目を「固定ページ（以下を選択）」にチェックボックスを切り替えてください。

さらに、「フロントページ」をプルダウンメニューより「HOME（先ほど作成したページ）」に設定。

以上で、トップページが先ほど作成したページへと変更されました。

いまのところこんな感じです。非常にあっさりしてますね。

 

続いて、スライドショーのプラグインを入手します。

スライドショーのプラグインは本当にたくさんあるのですが、今回は高機能な物より使いやすい「meta slider」をご紹介します。

プラグインに追加、有効化すると、管理画面が出てきます。

その後、スライドショーに画像を追加して、右カラムの設定画面より細かな設定をしていきます。

大事なのは「高度な設定」ボックス内で、「100％幅で表示」ボックスにチェックを入れることでスマホ表示にも対応します。

またスライドショーのスライドエフェクト（画像を切り替える時の遷移）をいじるときは設定内の「効果」を選択します。
デフォルトの「フェード」はもやーっと変わる感じで、こだわりがない場合はこれでよいと思います。

簡単な使用方法は、英語になってしまいますが下記のYoutube動画を見て頂ければわかると思います。ご参考ください。

スライドの作成が完了したら、右カラム「使い方」＞テンプレートに含めるにあるコードをコピペします。

こんなやつです。

続いて、固定ページにこのコードを挿入します。

「外観」＞「テーマの編集」より、「固定ページテンプレート（page.php)」を開きます。

上部、get_header(); ?>

の次の行に、先ほどコピペしたコードを張り付けます。

上記画像のようになればOKです。

これで、各固定ページに先ほど作成したスライドショーが挿入されました。

しかし、なんかやたら広く余白がとられているのが気になります。。。

 

ヘッダーの余白を調節する

しかし、ヘッダーのメニューと、画像間の余白が広くなっておりなんとなく気持ち悪いですね。

ヘッダーを少し狭くしましょう。

「外観」＞「テーマの編集」より「スタイルシート（style.css）」を開きます。

開いたら、このボックスの中にある文章を適当なエディタへコピペしましょう。

直接編集してもいいのですが、バックアップの意味もありますので、できればエディタで編集したほうが良いです。

エディタなんかないよ！という方は、フリーソフトでダウンロードできます。シンプルなエディタでは以下のサクラエディタがおすすめです。

【フリーソフト】サクラエディタ 公式サイト（Windows）

 

3344行目

@media screen and (min-width: 61.5625em) {
 .site-main {
 margin-bottom: 7.0em;
 }

.site-header {
 padding: 5.25em 4.5455%;
 }

赤字の部分を修正します。

ここを0.8em位に修正します。数字が多ければ多いほど幅が広がります。

いい感じで幅が縮まりましたね。

スライドショー挿入のTIPSは以上です。

たくさんのスライドショーを挿入して、よりユーザーの目を引くようなコンテンツを作成してくださいね！

 

「Twenty Sixteen」の関連記事はこちらをどうぞ

WordPressデフォルトテーマ「Twenty Sixteen」が公開。その特徴とカスタマイズ性は？
【Twenty Sixteenカスタマイズ】フォントを変更する方法
【Twenty Sixteenカスタマイズ】ロゴを配置する・メニューを作成する方法
【Twenty Sixteenカスタマイズ】トップページのタイトルを削除・見出しタグ（段落）を装飾する方法