最新記事を久々に書きました
最新記事を久々に書きました
副業アフィリエイトで給料以上稼げるようになった4つのコツを暴露します(2017年最新版)
副業アフィリエイターがアフィリエイトでサラリーマン収入以上を稼ぐ秘密を、全て暴露します。 副業アフィリエイトで...

2.3 プラグインを用いてグローバルナビを変更する方法とスタイルシート(style.css)の編集方法

本記事では,グローバルナビのデザインを変更する方法を説明します.上記のアイキャッチ画像の上の状態から下の状態へ変更します.今回グローバルナビのデザインの設定を実現するために,プラグインを導入します.さらに,より詳細なデザイン設定を実現するためにスタイルシート(style.css)を編集する方法について説明します.

今回のページがもっとも難しい内容になります.ですが,これが出来ればあとは何でもできるようになります.慣れない要素が盛りだくさんですので,より一層丁寧に説明します.ひとつずつ変更してみましょう.

元のグローバルナビの問題点

Simplicity2の元のグローバルナビの状態は下の画像の上側の状態です.悪くはないのですが,3つ問題点があります.

161025_global1

1つ目は見た目が小さいという点です.好みによりますが,私には小さく感じます.もっと上下の幅を大きくして,文字も大きくしたいです.

2つ目はみんながそのまま使用していて被るという点です.被るのはべつに悪くはないですが,せっかくなら少しはデザインを変えておきたいです.

3つ目がかなり重要ですが,スマホの状態で使いにくいという点です.昨今ではスマホからのアクセスがかなり多いのでスマホで使いやすいことは非常に大切です

下の画像がスマホで見たときですが,最初は左側のように,画面右上にメニューボタンが小さく表示されています.このボタンを押すと右側の画像のようにメニューが開きます.

この標準設定ですと,右上にボタンがあることも分かりにくいですし,メニューを開くのにこのボタンを押すということも非常に分かりにくいです.

161025_gobal2

ということで,このグローバルナビのデザインを変更していきます.

プラグインの導入の仕方

今回はグローバルナビのデザインを変更するのに,プラグインというものを使用します.

Simplicity2は非常によくできていてWordPressの管理画面から簡単にいろいろな設定を変更することができます.しかしながら丸々全てを簡単に変更できるようには作られていません.

そこでグローバルナビ部分だけを簡単に変更できるような変更パーツを導入したいと思います.

このようにWordPressで,とある部分を簡単に変更できるよう設定できるパーツをプラグインと呼びます

今回はMax Mega Menu というプラグインを使用します.導入方法を説明します.

①WordPressの管理画面から「プラグイン→新規追加」を選びます.

161025_global3

②右上の検索窓に「Max Mega Menu」と入力します.すると画面にプラグイン候補で「Max Mega Menu」が出てきます.パネルの右上にある「今すぐインストール」をクリックし,その後「有効化」をクリックします.

161025_global4

以上でプラグインの導入は完了です.次に設定をしていきます.

Max Mega Menuの設定方法

①第一に管理画面から「外観→メニュー」を選択します.

161025_global5

②メニュー画面の左部にMax Mega Menu Settingsというパネルができているので,一番上のEnableにチェックを入れます.そして保存ボタンを押します.enableとは可能にするという意味です.これを入れるとMax Mega Menuのグローバルナビ設定が反映されるようになります.

161025_global6

③つぎにグローバルナビの細かいデザインを設定していきます.管理画面にMega Menuという項ができているので「Mega Menu→Menu Themes」を選択します.下画像を参考にしてください.

161025_global7

④本サイトでは次のように設定しています.

  • メニューの上下の幅を大きくするために「Menu Height」を55pxに変更
  • メニューの色を変えるために「Menu Background」のFromとToに#2b2b2bを設定.#2b2b2bとは色の設定で,黒っぽい色を示します.FromとToを別の色に設定するとグラディエーションになります.

161025_global8

  • メニューの各項目間の幅を設定するため「Menu Item Spacing」を 5pxにします.
  • メニューの各項目の上にマウスが乗ったとき(Hoverと呼びます)に,項目の色を変更するために,「Menu Item Background (Hover)」のFromとToに#8B0000を入力します.
  • 文字を大きくするために「Font」の「SIZE」を18pxに設定します.

161025_global9

最後にスマホでのメニュー設定をします.さらに画面下にさがっていくと「Mobile Menu」という部分があります.この「Toggle Bar Designer」でまず一番右端にあるメニューアイコンをクリックします.すると設定が展開されるので,Closed TextとOpen Textに「Menuはこちらです」と入力します.最後に画面一番下の「変更を保存」をクリックして反映させます.

161025_global10

以上でグローバルナビのデザインの設定は完了です.PC画面で見るとナビが大きくなっていると思います.

ただし,サーバーの環境によってはここで「変更を保存」を押すと,サーバーのエラー画面に行く場合があります.その場合の対処法を以下に説明します.

変更を保存を押したら変が画面になった場合

初心者が陥りやすい罠ポイントです.WordPressの編集のなかにはときおり,サーバーのセキュリティの問題から許可されていない操作があったりします.

このような事態はサーバーのWAF(ウェブ・アプリケーション・ファイヤーウォール)が原因の場合が多いです.

対処方法としてはロリポップの場合はロリポップにログインし「Webツール→WAF」を開いて設定を無効にします.

wwwがついてるドメインとついていないドメインの両方があれば両方とも無効にしてください.

5分から10分ほど設定反映に時間がかかるので,10分後くらいに,WordPressの管理画面からログアウトしてから再度ログインし,プラグインの編集にトライします

セキュリティの関係から,編集が終わったら,WAFは再度有効にしておきましょう.

もし,ここまでの操作をきちんとしたのにグローバルナビが変更されない場合は,ブラウザにキャッシュが残っていることが原因だと思われます.解決方法としてはブラウザの履歴消去などからキャッシュを消去してから再度サイトにアクセスしてください.キャッシュを消すと自動でログインできるようにしていた他のサイトの設定も消えてしまって面倒なので,普段使っていないブラウザを使用して,変更状態を確認することをお勧めします.

以上で設定が完了したのですが,実はスマホサイトに問題点が残っています

スマホで確認しますと,確かに新たなメニューが本文の前に追加されていて「MENUはこちらです」とも表示され,非常にわかりやすくなっています.

しかしながら,以前のメニューが残っているため正常に動作しないという問題と,背景色を設定している場合に変に一部分が塗られてしまうという問題点が残っています.

最後にこれらを解決していきます.

161025_global11

今回スマホの画面を見ていますが,PC上でスマホの画面をチェックする方法を説明します.
①Google Chromeでサイトを開きます.
②F12キーを押します.
③画面右上のスマホボタンを押すと,PC画面からスマホ画面に切り替わります
④左画面上の端末名を押すと,端末の種類が選択できます161025_global12

以上の操作でPC上からスマホ画面の様子を確認することができます.

スタイルシート(style.css)とは

最後に残ったスマホサイトの問題点を解決します.そのためにはスタイルシート(style.css)というものを編集します.

ここまでサイトのデザインを変更するのにまずWordPressの管理画面の「外観→カスタマイズ」から変更を行なってきました.

つぎにそれでも変更できないグローバルナビ等の設定に関して,プラグインを導入して変更する方法を説明しました.

今回はそれでも変更できないデザインについて最終手段としてスタイルシートを書き換えて更新する方法について説明します.

そもそもスタイルシートとはサイトのデザインを決めている大本のプログラムファイルです.WordPressの管理画面もプラグインも間接的にこのスタイルシートを編集してくれていました.

そして今回はこのスタイルシートを直接編集します.

プログラムを編集するというと難しそうですが,自分で1からプログラムを打つ必要はありません.ネット上で検索すれば,○○を変更したいときは,スタイルシートにこんなコードを追記すると良いですよという情報がたくさんあります.

そのためほとんどコピペで終了です.

スタイルシートの編集方法

それではスタイルシートを編集して,スマホサイトの背景色を白くし,さらに元々のグローバルメニューを消す設定を行ないます.

① WordPress管理画面から左部メニューの「外観→テーマの編集」を選択します.

161026_global1

②Simplicity2 child: スタイルシート (style.css)と表示されていると思います.この下の部分にこれからコードを書いていきます.

161026_global2

③ “/* Simplicity子テーマ用のスタイルを書く */”と書かれている部分の2行ほど下に,次の文字を入力してください.文字の色は関係ないです.

この/*と*/で囲まれた部分はコメントといってプログラムには直接作用しません.人が見たときにこの先のコードが何をやっているのか分かりやすくするために書くものです.

③ 次に今書いたコメント文の下に

をコピペして貼り付けてください.各コードの意味が現段階で分かる必要はないですが,説明しますと,

@media screen and (max-width: 500px){ 画面幅が500pxより小さい場合に

body {      background-color: #FFFFFF !important; 背景の色を#FFFFFF=白色にする.!impotantはこの設定を最優先してくださいという意味です.

 

④次にその下に

を貼り付けてください.

このコードはモバイルのメニューアイコンの表示をなしにしてくださいという意味です.

最後に,画面下部の「ファイルを更新」をクリックしてください.これで完了です.

スタイルシートは以下のような状態になっています.

注意点ですが,全角スペースは使わないようにしてください.半角スペースを使用してください

161105_1

⑥ 再度サイトにアクセスして望みどおりの編集結果になっているか確認してください.以下のように背景が白くなり,右上のメニューアイコンが消えています.

161026_global4

スタイルシートを変更したのに,変更が反映されない

もしスタイルシートを変更したのに,変更が反映されないってことになっていたら以下の操作をしてください.初心者はこの状態に陥りやすく,私も困りました.

このように変更が反映されないのは,キャッシュと呼ばれる前回にアクセスした情報がブラウザに残っているためです.

WordPressではスタイルシートの変更はすぐに更新されず,キャッシュに残っている過去のスタイルシート情報が読み込まれるようです.

10分程度経てば解消されるようですが,すぐに変更結果を確認したいのに困ります.

そこで,普段例えばFirefoxを使用しているのであれば,Google Chromeを使用し,まずChromeのキャッシュを消す操作をしてください.

そしてホームページにアクセスし,変更を確認してください.

ここで普段と違うブラウザを使用するのは,編集したいホームページ以外のキャッシュも消えて不便だからです.

これで変更が確認できたと思います.

以上でスタイルシートの編集によるグローバルナビの設定は終了です.

ここまでお疲れ様でした.グローバルナビのデザインを変更することができました.今回はプラグインを使用したり,スタイルシートを変更したりしました.なかなか慣れず,難しかったと思います.

ですが,安心してください.WordPressでデザインを変更する方法は

  1. WordPress管理画面から設定
  2. プラグインを利用
  3. スタイルシートを編集

の3つであり,今回で全てをできるようになりました.ここまでできた人は,この先も全てこの応用なので,なんでもできると思います.

次回は,コメント欄とSNS設定およびその他設定を行ないます.

2.4 コメント欄とSNS設定およびその他設定の方法
本記事では,コメント欄とSNS設定およびその他設定について説明します. コメント欄の設定 サイトにおいて,コメント欄を解...
スポンサーリンク