カテゴリ・タグを探す
【2017年度版】ブログヘッダーをスライダー形式にする『MetaSlider』の使いかた【WordPressプラグイン】
この間ブログのヘッダーやランダム記事紹介に『MetaSlider』を導入しました。
ほかのサイト様でも数え切れないほど紹介されている有名プラグインですが、少々バージョンが古かったり説明不足な感じが否めませんでしたので、補足的な意味合いも兼ねて書かせていただきました。
ランダム記事紹介にも〜と書きましたけれど、やりかたはヘッダーのものと一緒なので、同じように考えてください。
追記
執筆当時は2017年で、当サイトではもうMetaSlideを使用していません。また、アップデートで管理画面の配置、やりかたが変わる可能性がありますので、あらかじめご了承ください。ヘッダー画像を制作する
当サイトはイラストがメインなので、ヘッダーも大きめにして2000px × 500pxのサイズに設定し、オブジェクトはイラストレーターで作り、配置と仕上げをフォトショップで作りました。
なぜこのサイズなのかと言えば、ツイッターやタンブラーなどのサービスではこの大きさが推奨されていることや、スマホ表示したときにヘッダーが小さくなりすぎません。
一枚絵ヘッダーならいいですが、もしオブジェクトを配置するレイアウトにする場合、個人的なコツとして、大きすぎるオブジェクトは極力使わないことです。
何度か試行錯誤（さくご）しましたが、大きめのオブジェクトだとPCで見たときに引き伸ばされてチープに感じましたので、小さいオブジェクトを散りばめるイメージにしました。
なおMetaSliderは画像ごとにリンクを設定ができるので、このヘッダーのときは感想カテゴリーに飛び、このヘッダーのときはお問い合わせ専用の記事に飛ばして……といった具合で作ってみると面白いかもですね。
プラグインをインストールする
WordPressの管理画面から「プラグイン」→「新規追加」で検索フォームに「MetaSlider」を入力してインストール。その後「有効化」を押してください。
ここまでは通常のWordPressプラグインのインストールと大差ないですよね。
そうしたら左のメニューバー下に「MetaSlider」の項目ができているはずなので、クリックしてください。
ヘッダー画像・表示方法を設定する
「スライドを追加」から「メディアライブラリ」を開き、作ったヘッダー画像を入れ込んでいきます。
まとめて入れれば自動的に選択されますので、入れ終わったら右下の「Add to slideshow」を押してください。ヘッダー画像は総じて容量が重いでしょうから、反映されるまでじっくり待ちましょう。
ここで勘違いされやすい（というか自分が大いに勘違いした）のは、画面右側の幅指定。
「幅と高さのピクセルが指定されている？ パーセントで書けない？ これじゃあリキッドレイアウトできないじゃん！」ってなるかもしれませんが、ご安心を。
幅と高さのピクセル指定はあくまでも縦横比の設定なので、MetaSliderを配置している親要素のcssに「width:100%」を指定すれば、ウインドウ幅によってヘッダー画像も自動的に縮小してくれます。
また画像のリンク指定もできるので、設定しておきましょう。
なおスライダーの表示形式などを設定できますが非常に多いので、試行錯誤しては「Preview」を押して、試行錯誤してください。
なおいじる際は、初期設定の情報をあらかじめメモしておいたほうがいいです（新しく作っても、その設定は直前に設定した同じものが複製され、反映されているため）。
このブログで使っているヘッダーの設定です。ご参考程度に。
保存、そしてサイトに反映
最後に左上の「保存」を押せば完了です（流れで管理画面右下のボタンを押しそうになりますが、押してしまうとデータが消されてしまうので、間違えないように）。
そして作ったスライダーをヘッダーとして反映させるには、
<?php echo do_shortcode('[metaslider id="スライダーのIDをここに記入"]'); ?>これを希望する場所に貼りつけるだけ。バージョンによってはこのコードが出力されない場合があるので、その場合は上のコードをコピペしてください。
スライダーのIDはバージョンによって画面上部にあったり、コードと一緒に書かれていたりとまちまちなので、とりあえず画面内の「id=〇〇〇〇」を探してください。
なお書きかたの例はこのような感じ。
「外観」→「テーマの編集」→「header.php」を開いて記入します。
最後に：動作確認用ミラーサイトがあると楽
どのプラグインでも言えることですが、できることなら運用しているサイトそっくりのミラーサイトを作って、そちらでまず動作確認をするのをオススメします。
実際に実装してから確かめないと感覚がわからなかったりすることもありますし、万が一動作不良になったら、元のサイトのソースコードをコピペしての復旧も容易です。
ただ今回のようなソースコードをいじくるタイプのプラグインは、重大なエラーで復旧できなくなるリスクを考えて、ミラーサイトで導入テストをしたほうが無難でしょう。
当サイトはみなさまのご支援で、広告なしの実現やコンテンツ維持を行っています。情報がお役に立てたり、気に入った作品がございましたら、ご支援をお願いいたします。
利用規約
個人情報保護
当サイトや赤竹ただきち（以下、当管理者）宛に送られたメールの内容や差出人、アクセス解析で得た個人情報などは、差出人・閲覧者当人の承諾がない限り、当サイト内やほかのサービスで公開することはいたしません。
絵や記事のシェア
当サイトの絵や記事をシェアされる場合、個人サイト・ブログ・サービス・SNSなどを問わず、URLなどを記載して、出典元を明記ください。明記していただければ、ご自由にシェアしていただいて構いません。
ただし、記事の場合は下記の『禁止行為』のとおり、記事を読まない、特定のワードに反応したようなシェア行為はお断りいたします。
記事の引用（転載）ルール
記事内の文章を引用（転載）される場合、URL元を明記した上で引用要素（blockquote）内に記載してください。掲示板やSNSの場合は、文頭に「>」などをつけ、オリジナルコンテンツ（コピーコンテンツ）ではないことを明確にしてください。
要約のための一部改変は、記事の意図を大幅に変えなければ可能とします。
メールの内容・取り扱い
メールはご意見・ご指摘・ご感想・依頼・営業メールのみ受けつけますので、あらかじめご了承ください（当サイトを利用した宣伝・委託行為はお断りいたします）。
下記の『禁止行為』のとおり、メール内容に当管理者や他者へのヘイト行為といった、誹謗中傷が見られた場合、返信を控えさせていただくほか、悪質と判断した場合は法的処置をとる場合があります。
禁止行為
以下の行為が見られた場合は、法的処置などといったしかるべき対応をとらせていただく場合があります。
【二次利用・加工・改変行為の禁止】
本サイト内の画像・イラスト・文章・ブログレイアウトデザインなどの悪意ある二次利用・加工・改変行為や、信用毀損・反社会的・社会通念上問題のある目的での利用。
【二次利用・加工・改変行為の例外】
シェアや引用（転載）のルール遵守など、社会通念上問題がないケースや、または要約のための文章改変・紹介や参考、プレビュー画像としてのスクリーンショット撮影・トリミング（切り取り）しただけの場合は例外として扱う。
【安易な拡散行為の禁止】
特定のキーワードや単語に反応し、記事を読まないままの安易な拡散行為の禁止（誤った解釈のみならず、〈自他問わず〉いわれなき風評被害や誹謗中傷につながる恐れがあるため）。
【誹謗中傷行為の禁止】
当サイト・他者・企業などを誹謗中傷する目的での引用行為。また、当管理者あてのメールやSNSのメッセージ・コメントなどにおいても、意見・指摘ではなく誹謗中傷目的のもの。当管理者や他者の人格・風評を著しくおとしめる行為。
著作権
当サイトは著作権の侵害を目的とするものではありません。スクリーンショットや二次創作物の知的所有権はそれぞれの著作者・団体に帰属しており、各利用規約を確認した上で掲載しています。
有料二次創作に関しては、権利元の創作ガイドラインを厳守するように努めていますが、問題があれば当サイトのお問い合わせよりご報告ください。
オリジナル作品や当サイトのレイアウトデザイン・掲載文章の著作物は当管理者が有しており、『禁止行為』のとおり、シェア・引用（転載）のルールが守られていないもの、悪意ある二次利用・改変行為を禁止します。
トラブル
当サイト記事のシェアなどが要因で発生したトラブルなどについては、一切の責任を負いかねます。あくまでも参考・一意見として扱ってください。
また、直接ご意見・ご指摘を希望される場合は、当サイトのお問い合わせからご連絡願います。
リンクについて
当サイトはリンクフリーですが、バナー画像以外の画像直リンク行為や、インラインフレーム表示は固くお断りいたします。
制定日：2017/2/24
改定日：2022/3/3
シェア・引用をされる前にご一読ください（内容に同意したものとみなします）
