Cocoonトップページのスマホ版のカスタマイズにはどんな種類があるの？PCの設定するだけではダメなの？
今やブログやサイトはほとんどの人がスマホで見る時代です。
PCでブログやサイトのカスタマイズで綺麗に表示されていても、スマホでは見にくくなっているとせっかくあなたのサイトを訪れてくれた人たちがページを閉じてしまう可能性があります。
超優良ワードプレス無料テーマCocoonではスマホ等の画面の小さいモバイル端末でのトップページの見え方もカスタマイズ設定することが出来ます。
そんな悩みを抱えているあなたにピッタリの記事です。
今回紹介するCocoonのトップページカスタマイズ方法【モバイル編】でしっかりとCocoonでカスタマイズして整えていきましょう。
自分のブログやサイトに最適な使い勝手にすることは、PVをあげたり再訪して貰うきっかけになるよ！
ブログを収益化したい人にオススメのASPはこちらです↓
Cocoonトップページカスタマイズ【モバイル編】：メニューの表示方法5種類
Cocoonでモバイルのトップページに表示されるメニューの表示方法4種類の設定方法と実際の見た目を画像付きで表示します。
「Cocoonのダッシュボード＞Cocoon設定＞モバイル」に移動します。
この中の設定でCocoonのモバイル向けのメニュー等の表示の設定が出来ますのでそれぞれ細かく紹介します。
このモバイル設定で設定できるのは以下の2点です。
- ・モバイルメニュー
- ・モバイルボタン
その2つの詳細設定を画像と共に順番に紹介していきたいと思います。
Cocoonトップページカスタマイズ：モバイルメニュー5つの変更項目
Cocoonのトップページのカスタマイズであるモバイルメニューには5つの変更できる項目があります。
- １：ボタンを表示しない（ミドルメニューのみ）
- ２：トップメニュー
- ３：ヘッダーモバイルボタン
- ４：フッターモバイルボタン
- ５：ヘッダー・フッターモバイルボタン
それぞれ設定するとどのような表示になるのか確認していきましょう。
それぞれを選んだ場合にどんな表示になるかを画像付きで確認していこう！
Cocoonモバイルメニュー設定No.1：ボタンを表示しない
Cocoonモバイルメニュー設定の1つ目は「ボタンを表示しない」です。
こちらはかなりシンプルで特に何もモバイルではサイドメニューやトップメニュー等表示させないという設定です。
PCの設定と比べると、サイドバーがない状態と同じになります。
実際こちらの「ボタンを表示しない」に設定した場合の私のブログのモバイルでの表示はこのようになります（設定ページで確認できます）
Cocoonモバイルメニュー設定No.2：トップメニュー
こちらはCocoonのブログ一番上の部分にメニューが追加されます。
実際にCocoonモバイルメニューを「トップメニュー」に設定するとこのような表示になります。
メニューをクリック（スマホの場合タッチ）すると、このようにメニューに登録されているものが表示されます。
私のブログのように既にメニューをブログのミドル位置に表示している場合は、ユーザーはページ訪問後に簡単にメニューにたどり着けるので、そこまで利便性は高くならないかなと感じました。
Cocoonモバイルメニュー設定No.3：ヘッダーモバイルボタン
Cocoonモバイルメニュー設定の3つ目は、「ヘッダーモバイルボタン」のみを表示させます。
ヘッダーモバイルボタンはメニューの表示と、ブログ内記事がヘッダーで簡単に出来るようになります。
Cocoonモバイルメニューを「ヘッダーモバイルボタン」に設定したときの実際の表示はこちらです。
こちらのトップモバイルボタンには以下の2つの機能が盛り込まれています
- メニュー一覧表示
- ブログ内記事検索
ブログ内記事検索がブログのトップ部分から簡単に出来るのは、お目当ての記事がある場合のブログ訪問者にとってかなりアクセスタイムの縮小になりますよね。
こちらのトップモバイルボタンは、常に固定表示するか否かを選べます。
以下の赤線部分を有効にするかしないかで変更できます。
固定表示にしていない場合は記事をスライドしているときには自動で滑らかに上側に収納されて、スライドを停止すると自動で画面上部に出てきます。
ヘッダーモバイルボタンにもサイトヘッダーロゴが表示されているので、モバイルでサイトヘッダーロゴを表示しない設定もできるので色々と上記3つの設定を変えながら様子をみましょう。
よりブログを訪れてきてくれた人が快適に文章を読んでもらえるような設定にしようね！
Cocoonモバイルメニュー設定No.4：フッターモバイルボタン
Cocoonモバイルメニュー設定の4つ目は、「フッターモバイルボタン」のみを表示させます。
フッターモバイルボタンはトップページの画面下部に表示されるボタンのことで、こちらのカスタマイズを選択するとこのような表示になります。
Cocoonのフッターモバイルメニューの項目は以下の5つです
- メニュー
- ホーム
- ブログ内記事検索
- トップ
- サイドバー
Cocoonトップモバイルメニューに比べると、「ホーム」「トップ」「サイドバー」のボタンが追加されていてより多機能になっています。
Cocoonモバイルメニュー設定No.5：ヘッダー・フッターモバイルボタン
Cocoonモバイルメニューの設定5つ目は、ヘッダー・フッターモバイルボタン両方を表示する設定です。
この設定を選ぶとCocoonモバイルメニュー設定のNo.3であるヘッダーモバイルボタンとNo4であるフッターモバイルボタンの両方が表示されます。
実際にCocoonモバイルメニュー「ヘッダー・フッターモバイルボタン」を選んでいる場合は以下のような表示になりますね。
フッターモバイルボタンの機能が以下の4つです。
- ホーム
- シェア
- トップ
- サイドバー
こちらの項目が一番ブログ表示で多機能のボタンが追加された表示になりますね。
いろいろ表示させすぎるとゴチャゴチャするかな～？
と悩みましたが、実際に表示例を見てみるとサイドバーがページの下に長く表示されているより、ヘッダーフッターで表示させられる方がアクセスが速いなという結論に至りました。
本ブログでは読んでいただけるブログの読者様にとってより使いやすいようにこちらのヘッダー・フッターのモバイルボタン両方表示の設定にしています。
色々試してみることをおすすめします！
ブログで稼ぐためには、デザインだけでなくグーグルやYahooで検索して訪れてきてもらう必要があります。
グーグルやYahooの検索にかかりやすくなるにはある程度の技術が必要です。
独学だけではわからないことがたくさんあるので最低でも2冊は本を読むことをおすすめします。
そんな技術が沢山詰まったこちらの本がおすすめです↓
もちろん私も持っています！
Cocoonトップページカスタマイズ【モバイル編】：記事インデックス表示設定
Cocoonで記事のインデックス表示がPCで見ると縦型カードやタイルカードの設定で2列・3列の表示になっているのに、スマホで見ると1記事1列になってしまってる…。
そんな時はこちらのCocoon設定を確認してみてください。
まずは「Cocoonダッシュボード＞Cocoon設定＞インデックス」に移動します。
インデックスの項目の中に「カードタイプ」という記事インデックスをどのように表示させるかの設定があります。
その中で、以下の赤で囲んである部分のチェックがついていると自動でスマホ等のモバイル端末でCocoonトップページの記事インデックスが1カラムで表示されるようになります。
「スマホ端末で縦型＆タイル型のエントリーカードを1カラムにする」
なので、PCと同じように表示したい場合はこちらのチェックを外しましょう
CocoonはPC表示とスマホ等のモバイル表示の設定が分かれてる部分があるので要注意だよ！
Cocoonトップページカスタマイズ【モバイル編】まとめ
Cocoonトップページカスタマイズのモバイル編では以下をご紹介しました
- Cocoonトップページメニューモバイル版の5つの設定
- Cocoonトップページの記事インデックス表示設定
設定する内容によって、スマホ等のモバイル端末からCocoonトップページの表示がかわりますので、自分のページにぴったりの表示に設定してくださいね。
あまり多機能にしすぎたり、トップページを派手にしすぎてもサイトを訪問してくれた人が戸惑う原因になりますのでバランスを見ながら一番読みやすく、そして見やすい設定にして下さい。
こちらではCocoonのサイドバーカスタマイズもまとめていますので合わせてどうぞ
より検索で来てもらえるサイトにするためには、ライティング技も必要です。
そんなライティングのいろはを吹き出し漫画形式で読みやすくまとめてあるこちらの本はかなりおすすめです。
筆者は最初独学でやっていたせいで、全くブログが資産家しておらずリライトばかりすることになったので、ブログで稼ぐことを始めたあなたには早めに読むことをおすすめします↓
Twitterではブログの最新情報をお届け中！(@Yumefab_2016)是非フォローして仲良くなりましょう～！
