こんにちは、社畜上司から社畜になるための教えを懇切丁寧に時間をかけて刷り込まれている最中のHIROです(笑)
社畜上司の言うことは無視して不労所得を得て早く社畜から解放されたいです^^
さて、今回は賢威8から新しくできた新機能として、スマートフォン向けのフッターパネルのご紹介をします。
フッターパネルと言うのは、試しにスマホでHIROのサイトを見てもらうとわかるんですが、画面の下にピコピコ出たり消えたりしてるやつです^^
HIROもなんとなくスマホのショートカットキーみたいなもんかな、くらいにしか思ってなかったんですが、よく見てみるとスマートフォン用のフッターパネルって初期状態がとても使える状態ではなかったんです。
そうとは知らず、ずっと野放しにサイト運営をしていたため、スマホユーザーにとって、とても使いにくいサイトになっていました…
そんなHIROの二の舞にならぬよう、今回はしっかりスマートフォン用のフッターパネルのことを知ってもらい、今後のサイト運営に生かしていただければ幸いです。
賢威8のフッターパネルとは？
先ほども少し話しましたが、スマホ画面の下でピコピコしてるやつです(笑)
下の方に出てる横一列に並んだパネルのことですね。
- シェア
- 電話
- お問い合わせ
- TOPへ
このフッターパネル、初期状態から四つのメニューが並んでるんですが、何やら使わなそうなメニューもありますね。
試しに『シェア』をタップしてみます。
『シェア』をタップするとフッターパネルの上にSNSのショートカットキーが出てきました。
- はてなブックマーク
- Google+
この機能はユーザビリティ的にはあってもいいのかなと思います。
やっぱり『いいね！』を押してくれると執筆にも力が入りますし、何よりモチベーションにも関わってくるので、応援ポチは積極的に取り入れたいですね。
次に『電話』をタップしてみます。
すると下画面のような架空の電話番号がデフォルトで入っていることがわかります。
『電話』機能は正直必要ありませんね。
なんでかって法人で本格的にビジネスを始めるならともかく個人でやる場合に、個人の電話番号を載せてしまうと、サイトに訪れたユーザー全員に自身の電話番号が晒されることになります。
そんなことをしたらお問い合わせどころか嫌がらせの電話がひっきりなしにかかってくるかもしれません…
なので、どうしても必要だと判断しない限り、『電話』機能は使用しない方が賢明です。
お次に『お問い合わせ』ですが、タップするとトップページのヘッダー部分にスクロールするだけです。
当然ですよね、デフォルトではお問い合わせを登録してないんですから。
この機能は少々いじる必要がありそうです。
『TOPへ』も『お問い合わせ』と同様な動きをしますね。
ここまではフッターパネルのデフォルト部分を見てきました。
このように書くと「自分がやりたい機能がない！」という声が聞こえそうですね^^
大丈夫です。
次の章でフッターパネルのカスタマイズのやり方をご紹介します。
フッターパネルのカスタマイズ方法
フッターパネルがどういったものかが先ほどの説明でご理解いただけたと思います。
ここからは実際にフッターパネルを操作してみましょう。
まずはワードプレスの『賢威の設定』をクリックします。
『賢威の設定』をクリックすると、賢威の設定ページに飛びますのでそのままスクロールします。
すると『スマートフォン向けフッターパネル』がでてきます。
先ほど見たスマホの下のピコピコしたやつはここの『スマートフォン向けフッターパネル』でカスタマイズできます。
『シェア』は残しておくとして、他の三つの項目を修正していきましょう。
まずは『スマートフォン向けフッターパネル』の右のほうにあるテキストタブをクリックします。
クリックするとHTML編集画面になるので、フッターパネルに不要な『電話』を削除します。
HTMLの三行目らへんにある以下のコードをすべて削除してください。
<li class="utility-menu_item"><a href="tel:0757X87X8"><span class="icon_tel"></span>電話</a></li>
『電話』を削除できましたか？
続いて『お問い合わせ』のカスタマイズをしていきます。
先ほどのHTML編集画面にて、
<li class="utility-menu_item"><a href="#"><span class="icon_mail"></span>お問合わせ</a></li>
の部分の、
href="#"
の♯を削除して、その中に自身のブログのお問い合わせURLを貼り付けます。
HIROの場合はこんな感じになりました。
<li class="utility-menu_item"><a href="https://affili-hiro.com/contact/"><span class="icon_mail"></span>お問合わせ</a></li>
ここまでできたらスマホ画面に戻って実際に『お問い合わせ』をタップしてください。
無事にお問合せにアクセスできたら成功です。
『TOPへ』に関しては初期状態でタップするとトップへ戻るので変更はありません。
また、フッターパネルの項目数ですが、現状18項目まで確認済みです。
それ以降はあなた自身でどこまで入るか試してください。
まあ、フッターパネルにそこまで項目をいれてもタップしにくいだけなのでおすすめはしませんが、それでも項目を増やしたいという方は自己責任のもとで行ってください。
フッターパネルの適切な項目数は、グローバルメニューにも言えることですが、なるべく奇数の数を意識してください。
例えば3,5,7,9などの項目数です。
ビジネス用語でマジカルナンバー7と言って、認知心理学の実験によると人間が瞬間的に記憶できる最大数は5～9、つまり7を中心とした±2の数値と言われています。
なので、グローバルメニューやフッターパネルの項目数にはぜひマジカルナンバー7の心理学を用いて奇数になるように配置することをおすすめします。
フッターパネルのアイコン素材の探し方
お次はフッターパネルの左横にあるアイコンについて説明します。
アイコンに関しては賢威8でも標準機能でついています。
ある程度はカバーできるので、特にこだわりのない人は賢威8の標準アイコンで十分だと思います。
因みにアイコンがどこにあるのかというと、スマートフォン向けフッターパネルの編集画面にある『アイコン』をクリックするとアイコン一覧がでてきます。
賢威8のアイコンの種類も21種類と豊富にあり、だいたいのフッターパネルの用途には当てはまるよう設計されていますね。
ただ、それでも「自分の思ったアイコンがない！！」とお嘆きの方もいると思います。
そんな時に便利なのが無料フリー素材です。
無料フリー素材も様々な用途に応じたアイコンがあります。
賢威8のアイコンでは物足りないという方は無料フリー素材も検討してみてはいかがでしょうか？
参考までにいくつかHIROが厳選したサイトを載せておきます。
iconmonstrは全編英語なので英語は苦手という方はとっつきづらいかとは思いますが、アイコンの種類は他サイトに引けをとらないので、見てみる価値はおおいにあるのではないでしょうか？
アイコンを自作する
これまでに賢威8のアイコン、無料フリー素材のアイコンをご紹介してきましたが、それでもどうしても自分に合ったアイコンが探しきれない方は思い切って自作アイコンを作ってみてはどうでしょうか？
自作アイコンといっても、高価なPhotoshopやillustratorなどを購入する必要はありません。
HIROが特に重宝しているのはInkscape（インクスケープ）という無料で画像編集ができる高機能ソフトです。
無料画像編集ソフトPixlr Editor(ピクセルエディタ)がPhotoshopの代わりとするなら、Inkscape(インクスケープ)はまさしくillustratorの代わりとも言える高機能イラスト作成ソフトです。
Inkscapeも英語表記なので少し戸惑うかもしれませんが、インストールしてしまえば、日本語表記にもできますので、そこまで嫌悪しなくても大丈夫です。
自作アイコンは作成するのに時間も根気も必要ですが、世界で一つだけのアイコンを作成することができるので、ライバルサイトに差をつけたいのならおすすめしたいやりかたです。
また、Pixlr Editorにも関連記事を書いてますので、ご一読ください。
こんにちは、HIROです。 先ほど別記事で、賢威8を使ってロゴ画像のアップするやり方を書いたんですが、その中でロゴ画像の作成方法を知りたいって方のために、ロゴ画像の作成方法を記事にしたいと思います。 &nb …
まとめ
いかがでしたでしょうか？
今回は賢威8におけるフッターパネルの使い方とアイコン素材の見つけ方などをご紹介しました。
終始パソコンの画面でしかサイトをみないという方には必要のない機能かも知れませんが、昨今スマホでサイトを閲覧する方も増えてきていることから、賢威8のフッターパネルは是非利用したい機能の一つですね。
