ブラウザの開発者ツールを活用しよう！
先日、WordPressのプラグイン「Leaflet Map」の紹介記事を書きましたが、マーカーに表示される文字が小さいのが気になりました。こんな些細なこといいのでは?と思いがちですが、仕事でサイトのコーディングをする場合は、妥協してはいけない事項です。(私はコーディングはしませんが)
https://www.kunimiyasoft.com/wordpress-leafletmap/そこで文字を大きくしたいのですが、Leaflet Mapの管理画面には、マーカーの文字の大きさを変える方法がありません。それではどうすれば良いでしょうか。
今回のLeaflet Mapに限らず、自分で作成した部分以外のコードを変更したい場合は、ブラウザに用意されている「開発者ツール」を使うと便利です。今回はEdgeブラウザを使いますが、Chromeブラウザでも「デベロッパーツール」として用意されています。
それでは見て行きましょう。
マーカーの吹き出し文字にマウスカーソルを合わせて、右ボタンメニューを表示し、「開発者ツールで調査する」を選択します。
右ウインドウに、開いているページのHTMLソースコードが表示されます。マーカーに表示している「藻岩山」の文字が指定されていますね。
さらに下のウインドウを見てみると、スタイルシートのコードが表示されています。そして、「font-size」の項目があります。このサイズを変更すれば良いです。単位がemで分かりにくいですが、ここで値を入力することができるので、適当な値を入れてみましょう。1.75emにすると
なかなかいいサイズで表示されるようになりました。通常、HTMLコードを作成する時は、AdobeのDreamweaverなどを使ってコーディングするのですが、Webブラウザでも結構ソースを修正できるんです。これを使わない手はありません。
さて、修正の方法は分かりましたが、今はブラウザ上のソースコードを修正しただけで、大元のソースは修正されていません。修正したスタイルシートがleaflet.cssであることは分かりました。そして、URLも分かりました。そのURLを確認すると、開発元のサーバーにあることが分かります。これは修正できませんが、
Leaflet Mapの管理画面で、leaflet.cssのあるURLを指定できるようになっています。つまり、大元のleaflet.cssをダウンロードして修正し、自分のサーバーにアップロードすれば良いのです。ここのCSS URLは、自分のサーバーにアップロードしたleaflet.cssのURLを指定します。(作業は後ほど)
大元のleaflet.cssをダウンロードします。そしてダウンロードしたleaflet.cssをテキストエディタで開きます。
先ほどブラウザで修正した部分を、同様に修正します。修正が終わったら、自分のサーバーにアップロードします。WordPressのLeaflet Mapプラグインのある場所にアップロードします。
Leaflet Mapプラグインのルートフォルダにアップロードされました。これで終わりだと思いましたが、マーカーのアイコンもアップロードする必要がありました。これが分かるのが、先ほどのHTMLソースコードにおいて、「藻岩山」を指定していた部分の上に記述があります。
こういう検索は、Webの仕組みが分かっていないと難しいかもしれません。特に、スタイルシートの仕組みを少し勉強した方が良いでしょう。
マーカーのアイコンのURLが分かったら、ダウンロードします。そして、自分のサーバーにアップロードします。
Leaflet Mapプラグインのルートに「images」フォルダを作成して、その中に2つのマーカーアイコンをアップロードします。
最後に、Leaflet Map管理画面で、leaflet.cssのURLを変更します。これで修正は終わったので、サイトを再び表示してみます。無事、文字が大きくなっていれば、作業成功です。
以上、開発者ツールを使ったサイトの文字表示修正を行いましたが、開発者ツールは、それ以外にも便利な機能がいろいろ備わっています。次の投稿では、開発者ツールを使ったInstagramのアップロードを紹介したいと思います。ぜひ、開発者ツールを活用してみてください。
追記！
これで終わりではありませんでした。なんと、スマートフォンやタブレットではマーカー画像が表示されていませんでした。いや、開発者ツールで確認したつもりだったのですが、更新ボタンを押さないと反映されていなかったのです！
スマートフォンやタブレットの場合は、「marker-icon-2x.png」が使われていました。marker-icon-2x.pngをアップロードして、表示されるようになりました。
さらに追記!
迂闊にバージョンアップすると、以前のバージョン環境が消されてしまいます！。全部やり直すはめになりました。