0当ブログ「アフィリ課」のスマホ訪問者は全体の約30%ですが、Googleアナリティクスが解析したスマホからのアフィリエイト制約率はアクセスに比例するほどの数字ではありません。当ブログはレスポンシブWebデザインなので、グローバルメニューやサイドメニューなどのUIが端末の閲覧幅により可変します。スマホ閲覧ではサイドバーが本文の下部に回り込み、フッターと連続したメニュー構成になります。大概のレスポンシブサイトの左右カラムは当ブログと同様に反応するか、サイドメニュー自体をCSSで非表示にしています。そのため、スマホユーザーは表示領域の狭さと相まって、ページ下段に場所を移したサイドバー掲載のおすすめ商材メニューを目にする機会が極端に減ってしまいます。それはアナリティクス解析の直帰率の高さからも容易に想像することができます。スマホ環境には、こうした内部リンクからの成約を妨げる要因があり、スマホユーザーの行動を制限してしまいます。管理者の私かコアなファンでない限り、フッター付近のおすすめ商材リンクバナーまで辿り付くアクションはそう簡単に取って貰えません。本来であればおすすめ商材は、さりげなくではありますがスマホのファーストビュー(アクセス時の初期表示領域)に表示したいものです。ヘッダーに推奨商材をはめ込んだ、アフィリエイト報酬欲しさ丸出しの露骨な掲載スタイルは採りたくないので、なかなか良い案が浮かばず、しばらく放置していました。何か良いアイデアはないものかと漠然と思っていたところ、Googleのスマホ検索結果にヒントがありました。あるアーティストを検索した際、アルバムCDのサムネイル画像とキャプションがカルーセルパネルで表示されていたのです。カルーセルとは、メリーゴーランドがクルクルと同じ場所で回転するように、Webページの定位置で複数の画像が横にスクロールする機能を指します。ギャラリー風スライドショーといえば簡単にイメージできるでしょうか。自動で動くスライドショーと違うのは、スマホユーザーが指でスワイプして画像が横にスクロールする点です。スマホの狭い画面で勝手に動く、スクロール機能や画面下部に貼りついたオーバーレイ広告などは、ユーザーがページに集中する妨げとなり、敬遠されがちです。ユーザビリティ上も、好ましくないというアンケート結果が出ているため、スクロールはユーザーに任せることにしました。カルーセルパネルは狭いエリアに複数のコンテンツを表示させることができるため、スマホにとってベストな選択であると判断し、早速作業に取り掛かりました。WordPressのプラグインを探しましたが、私の希望を満たすものはありませんでした。用途がないのでしょうか、そもそもカルーセル機能を持つプラグイン自体見つかりません。今回のスマホ用カルーセルパネルの要点は次の通りです。2」というjQueryスクリプトを利用することにしました。slider.」というサブタイトルが付いた無償jQueryプラグインです。2今回は上記のスマホ用カルーセルパネルの要点を満たした「stagePadding」タイプを採用しました。このサイトからソースをダウンロードします。2.0.0-beta.2.4」が最新です。トップページのDownloadボタンよりダウンロードファイルがリンクされています。ダウンロードファイルを解凍し、次の3ファイルを抜き出します。dist/owl.carousel.min.jsdist/assets/owl.carousel.min.cssdist/assets/owl.theme.default.min.cssWordPressへの書き出しCSSファイルWordPressテーマのheader.phpに次のCSSを追加します。CSSファイルの格納ディレクトリは適時変更してください。?>/owlcarousel/owl.theme.default.min.css">カルーセル表示ファイルカルーセルを表示したい場所に次のコードを追記します。トップの場合は、トップ用ファイル(home.phpなど)。カテゴリ一覧はcategory.phpかarchive.phpなど。詳細ページはsingle.phpになります。?></div></article>クラス名は適時変更してください。ハイライトしている3行目の「owl-carousel」は下記のjsファイルの「$('.owl-carousel')」と連動しますので、同じクラス名にしてください。5行目の配列のパラメーターは次の通りです。'showposts'=>10(表示数。)'orderby'=>rand(ソート対象。そのほか、date、title、modified、ID、comment_countなどあり。array(投稿ID)を指定します。10行目で記事に設定したアイキャッチ画像を呼び出しています。?>は、スマホ用の短めのタイトルを設定したカスタムフィールド項目を表示させています。?>などに変更してください。jsファイルJavaScriptファイルを読み込みます。header.phpに記入した際、当アフィリ課ではjQueryが競合したため、footer.phpの</body>直前に記入しました。WordPressのテーマによってはjQueryを既に読み込んでいる場合がありますので、1行目から4行目までは不要な場合もあります。});</script>JSファイルの格納ディレクトリは適時変更してください。ここで使用したカルーセル表示をコントロールするオプションは次の通りです。20,(両端画像のはみ出し幅)loop:true,(無限ループ)margin:10,(画像間の幅)responsive(レスポンシブ対応。公式サイトの「Options」から確認することができます。CSSファイル上記で使用したcss例です。none;}functions.php(スマホのみ表示の場合)カルーセル表示はスマホ向けとしてパソコンでは非表示としました。当ブログはレスポンシブWebデザインのため、CSSで対応することも可能ですが、functions.phpに下記コードを追加して、プログラムでスマホのみの表示としました。$_SERVER['HTTP_USER_AGENT']);}上記で設定した各ファイルをis_mobile関数で囲みます。//PC・タブレットで表示したい内容。