いつもブログ作成はパソコンを使っているのですが、先日ふと、携帯で自分のブログを開いてみると・・・
ひどい・・・
こんなものを公共の場所に出しておくのは恥ずかしすぎる！
・・・ということで、慌てて対処法をリサーチしました。
ですが、初心者ブロガーのため予想以上に手こずり、かれこれ半日ほど費やしたので、「これは備忘録行き」だなと思った次第です。
同じような悩みをお持ちの方はどうぞお付き合いください。
ちなみに、私はワードプレステーマにCocoonの「Natural(グリーン）」を使っています。
完成画面はこちらになります。
どんなモバイルヘッダーにしたい？
まずはこのヘッダー部分をなんとかしないと・・・。
とりあえず、このヘッダー下にあるキャッチフレーズ部分とグローバルメニューを消してスッキリさせたい。
この2つを非表示にして、代わりにフッター部分にサイドバーを含んだメニューボタンを設け、そのサイドバーのプロフィールとカテゴリーがこの2つの役割を果たせるように表示する方向でやっていくことにしました。
あと今までずっと気になっていた一番上の余白を消してしまうことにしました。
ヘッダーを画面ぴったりサイズに作る
ヘッダーに使用したい画像がある場合はPhotoshopやCanvaを使って、画像を準備しておきましょう。
私が使っていた今までのヘッダーの画像とロゴは、Photoshopを使って写真の中にテキストを入れ、一つの画像として作ったものを、ヘッダーロゴ枠の部分に貼り付けていたのですが、なかなか好みの幅に表示出来なかったので、今回はこれを作り変えることにしました。
基本的にCocoonの場合はヘッダーの背景画像とロゴは別々に作る方が良いとされているらしく、調べてみると、Cocoonの場合は１９００ｘ２００pxで作るとピッタリフィットすることがわかりました。
ただ、読者が使用するデバイスの大きさによっても変わってくるようです。私がテストした限りでは１９００ｘ２００pxが適したサイズだったのですが、微調整が必要になる可能性はありますので、その際は少しアレンジしてみてください。
今回は背景画像をjpeg形式で、ロゴは背景を透明にさせた透過png形式で作りました。（透過スタイルはPhotoshopでもCanvaでもpngファイルでの保存を選択する時に背景を透過させるかの項目が出てくるのでチェックを入れるだけで簡単に出来ます。）
ロゴに関しては色んなサイズを試したのですが、７５０ｘ１００pxのサイズが私のサイトには合っていました。
好みのヘッダーサイズは人それぞれなので、何度もトライ＆エラーを繰り返しながら自分の中でしっくりくるものを選んでいく必要がありそうです。
画像とロゴの準備が出来たら、編集は「Cocoon設定」の「ヘッダー」タブで行います。
「ヘッダーロゴ」の「選択」をクリックし、用意しておいたロゴをアップロードします。
ヘッダー背景画像も同じ要領でおこなってください。
写真一番上の「高さ（モバイル）」を私は５０pxで調整しました。ここは個人的な好みの違いなどもあるので、数字を変えながら反映具合を確認して行くといいと思います。
プレビュー画面に移ると、一番下にレスポンシブテストのリンクが表示されるのでクリックしてテストしてみるといいでしょう。
最後に「変更をまとめて保存」を押します。
キャッチフレーズを非表示にする
キャッチフレーズを非表示にする時も「Cocoon設定」の「ヘッダー」タブから編集できます。
「変更をまとめて保存」を押して終了。
モバイルのグローバルメニューを非表示にする
パソコン上のグローバルメニューは残したまま、モバイルサイトのグローバルメニューだけを非表示にすることが出来ます。
「外観」の「メニュー」から変更できます。
下の写真にある、「編集するメニューを選択」部分にブログ立ち上げ当初に作成した「ヘッダーメニュー」（名前は各自が決めた名前になっているはずです）を選択。
下にスクロールして「ヘッダーモバイルメニュー」にチェックが入っていると思われるので、チェックを外します。
「メニューを保存」で完了です。
メニューボタンをフッター部分に設置する。
次はフッターに配置するモバイルボタンを作っていきます。
まずは外観からメニューを開きます。②の「新しいメニューを作成」をクリックして、③の部分に自分が分かりやすいメニュー名を作り（実際の画面には反映されませんのでご心配なく）、右下④の「メニューを作成」ボタンを押します。
私は「モバイルフッターメニュー」と付けました。
入れたいメニューを決めていく
Cocoonには独自のボタンコマンドがあらかじめ定義されています。
上の表を参考にボタンを作っていきます。
私は下の写真のように「Home」「Search」「Top」「Sidebar」と付けることにしました。
画面左側の「メニュー項目を追加」の部分に移ります。
「カスタムリンク」をクリックし、ここに先程のコマンド表を使って入力していきます。
「Home」ボタンを作る時はURLの部分に表の左側にある「URLコマンド」の「#home」を、「リンク文字列」には画面に表示させたい文字列を入力します。入力したらその下にある「メニューに追加」ボタンを押します。
同じ要領で表示させたいボタンを作ります。すると画面右側に下の写真のようにメニューボタンが追加されていきます。
1番上のメニューボタン（写真ではHome)から下への並びが携帯画面では1番左→右へと反映されていきます。表示位置を変えたい時は、項目ボタンをドラッグすることで移動が可能です。
下にスクロールして「メニュー設定」の「フッターモバイルボタン」にチェックを入れ、「メニューを保存」します。
作ったメニューをモバイルフッターに表示させる
次に、作ったメニューを携帯画面に表示させる作業です。
「Cocoon設定」から「モバイル」をクリックします。
「モバイルメニュー」の「フッターモバイルボタン」または「ヘッダー・フッターモバイルボタン」のどちらかにチェックを入れます。
私はフッターだけに表示させることにしたので「フッターモバイルボタン」を選択。ヘッダー部分にボタンを表示させない代わりに、その下の「モバイルボタンの固定表示」にもチェックを入れました。こうすることで、フッターに作ったメニューは画面をスクロールしても消えることなく画面に残ります。
ちなみに、一番下の「モバイルボタン時コンテンツ下のサイドバーを表示」にチェックを入れると、読者さんが読んでいるページの画面下にサイドバーが表示されるようになるので、新規の読者さんにプロフィール、または他の記事なども読んでもらいやすくなりますね。
いかがでしたでしょうか？
ブログを始めたばかりの時はセットアップすることがたくさんありすぎて大変ですよね？パソコンでブログ記事を作成しているとモバイル画面のアレンジがおろそかになってしまいがちですが、読者さんの大半はスマホからのアクセスだと言われています。なので、PCサイト同様、モバイルサイトのメンテナンスもしっかりやっていきましょう！
このページが誰かのお役に立てていたら嬉しいです。
あじさい（@ajisai_kiwidojo）
コメント