こんな感じで白黒に設定していたのですが、
サイトをHTTPS化したら、表示されなくなってしまいました。
別に個人情報を取り扱うわけでもないので、基本的にはSSL対応しなくてもよかったのですが、
SEO的にも最近ではSSL対応基準というのが設定されているので、頃合いを見て導入してみました。
設定方法は、Xサーバを使っていたので、自動的に一括で変更してくれました。
XサーバSSL対応方法はこちらを参照ください。
今ではグーグルマップをサイト内に埋め込むには、APIキーが必要になりました。
Iframeでの埋め込みの場合は、特に問題なくそのまま埋め込めるようですので、
特にカスタマイズしない場合は、iframe を使えばいいかと思います。
今回は、カラーを変更したいので、APIを利用することにします。
取得はとっても簡単です。こちらにアクセスし、キーの取得を押してください。
次に、+create new projectを選び、任意のプロジェクト名を入れて、CREATE AND ENABLE APIをクリックしてください。
するとAPIコードが発行されますので、どこかにコピーしておいてください。
こちらにサンプルコートがありますので
こちらを使うだけで簡単に設置可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
<!DOCTYPE html> <html> <head> <title>Styled Maps - Night Mode</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> function initMap() { // Styles a map in night mode. var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 40.674, lng: -73.945}, zoom: 12, styles: [ {elementType: 'geometry', stylers: [{color: '#242f3e'}]}, {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]}, {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]}, { featureType: 'administrative.locality', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'poi', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'poi.park', elementType: 'geometry', stylers: [{color: '#263c3f'}] }, { featureType: 'poi.park', elementType: 'labels.text.fill', stylers: [{color: '#6b9a76'}] }, { featureType: 'road', elementType: 'geometry', stylers: [{color: '#38414e'}] }, { featureType: 'road', elementType: 'geometry.stroke', stylers: [{color: '#212a37'}] }, { featureType: 'road', elementType: 'labels.text.fill', stylers: [{color: '#9ca5b3'}] }, { featureType: 'road.highway', elementType: 'geometry', stylers: [{color: '#746855'}] }, { featureType: 'road.highway', elementType: 'geometry.stroke', stylers: [{color: '#1f2835'}] }, { featureType: 'road.highway', elementType: 'labels.text.fill', stylers: [{color: '#f3d19c'}] }, { featureType: 'transit', elementType: 'geometry', stylers: [{color: '#2f3948'}] }, { featureType: 'transit.station', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'water', elementType: 'geometry', stylers: [{color: '#17263c'}] }, { featureType: 'water', elementType: 'labels.text.fill', stylers: [{color: '#515c6d'}] }, { featureType: 'water', elementType: 'labels.text.stroke', stylers: [{color: '#17263c'}] } ] }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> </body> </html> |
lat: 40.674, lng: -73.945をご自分のマップの座標に変更してください。
そして、最後にあるYOUR_API_KEYを先ほど取得したAPIに変更してください。
こちらのスタイルのカラーを変更すると自分好みに地図のカラーリングを変更できますよ。
ただ実際にやってみると、意外に難しい。。。センスの無さを感じます。
そんな時におすすめなのが、カスタマイズ例です。
SNAZZY MAPS
https://snazzymaps.com/
お好きなデザインを選んで、styles: 以下を差し替えるだけです。
是非お試しください。
当ホームページには、こんな感じになりました～。
アップデートやプラグインの不調によりいつ飛んでもしまっても大丈夫なように
バックアップをとるのは知ってるけど、面倒くさいですよね。
自動的に決めた時間にバックアップをとってくれるプラグインがありましたので、
ご紹介いたします。
その名は、BackWPupです。早速プラグインを検索して、
BackWPupをインストールしてください。
ちなみにバックアップは、ファイルのバックアップとデータベース＆プラグインのバックアップの２種類に分けて行います。
理由は、ファイルの方が重たいので、こちらは１週間おきにバックアップ、データベースとプラグインは軽いので、
毎日バックアップを取るようにします。
一般タブからジョブの名前を入れる。ファイルバックアップと入力する。
それ以外はそのままでOKです。
ジョブのスケジュールは、 WordPress の cronを選ぶ。
そしてスケジューラーは毎週日曜の夜中３時を選ぶ。
こちらはいつでも見れるのでわからなくなったら、こちらでバックアップ先を確認しましょう。
ジョブに戻ると保存されていることが確認できます。
一般タブからジョブの名前を入れる。次はデータベースバックアップと入力する。
バックアップファイルの保存方法はフォルダーへバックアップにチェックを付ける。
最後に変更を保存ボタンを押して完了になります。
とっても簡単ですし、これさえやっておけばいざというときとっても安心です。
是非是非。
新規制作やメンテナンスの時はよく使うので、メモしておきます。
とっても簡単なんですが、すぐ忘れてしまうのと、間違ったら大変なことになるので自信のない方は要確認。
今回は下層からTOP階層に変更したいので/wordpressを削除する。
■ 変更前
|
1 2 |
/** Loads the WordPress Environment and Template */ require( dirname( __FILE__ ) . '/wp-blog-header.php' ); |
■ 変更後（/wordpressを追加する）
|
1 2 |
/** Loads the WordPress Environment and Template */ require( dirname( __FILE__ ) . '/wordpress/wp-blog-header.php' ); |
以上です。
上手くいかない場合は、３のアップロード個所にindex.htmlなどのファイルがないかご確認ください。
あったら削除してください。
最新記事をTOPページにする方法はよくアップされているのですが、ブログサイトだとそれで問題ないのですが、
コーポレートサイトなどトップは常に固定にしておきたい場合は、メニューに最新のブログのリンクがあると助かります。
そこで探しているとDynamic Latest Post in Nav Menuといういいプラグインを見つけました。
１．Dynamic Latest Post in Nav Menuをインストール
２．プラグインを有効にする。
３．外観＞メニューから設定する。
たったの3ステップ！
とっても簡単でうれしいプラグインですね。
忘れないようにメモしておきます。
Javascript やHTMLなどのコードは普通に入力すると文字化けをしてしまいます。
しかしコードを毎回変換していてはとても時間がかかります。
そこでおすすめなのが、Crayon Syntax Highlighter。
プラグイン＞新規追加から、Crayon Syntax Highlighterを検索し、インストールする。
インストールが完了したら、投稿ページ＞編集からテキストタブをクリックし、CRAYONというコードが選べるようになっているのを確認する。
とっても簡単です。
デザインの備忘録には欠かせないですね。
ヤフーも、楽天も、相次いでHTTPからHTTPSに変更になった2017年！
昨年からGOOGLEがHTTPS化を推奨し始めて、いよいよSEOにもかかわってくるという状況で慌てて導入を始めた大手ECサイト。
それになぞらえて、わたくしもHTTPS化することにいたしました。
HTTPS=HTTPにSSLを追加した、セキュリティの高いサイト、というのは言わずもがななのですが、このSSL証明書の取得って、高いんじゃないの？という昔からのイメージに尻ごみしそうですが、なんとXサーバだと、SSLが無料対応！まさに神サーバ！
と思って検索していたら、意外と他社も安いみたいです。
設定はとっても簡単なのですが、一応説明いたしますね。
サーバーパネルにログインしたら、SSL設定というボタンを押してください。
次にSSLを設定するドメインを選んでください。
独自SSLの設定を追加タブを押し、独自SSL設定を追加する（確定）を押して完了です。
反映までは、最大1時間くらいかかるようですので、気長に待ちましょう。
あとURLがHTTPのままだとエラーになる場合がありますので、
反映後は、くまなくサイトをチェックしましょう。
反映が完了したらXサーバの「.htaccess編集」から301リダイレクトの設定を行います。
HTTPに訪問したユーザを自動的にHTTPSにジャンプさせる必要がありますので、この設定をしていないとグーグルからもサイトが2つあると勘違いされ、減点対象になってしまいますので、設定をお忘れなく！
|
1 2 3 4 5 |
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] </IfModule> |
あとは確認ボタンを押し決定してください。
設定＞一般のWordPress アドレス (URL)もサイトアドレス (URL)もどちらもHTTPSに変更してくださいね。
以上になります。
デザイン的に、グーグルマップのカラーリングって結構浮いたりするときがあります。
そんな時は、グーグルマップを白黒にしてしまいましょう！
とっても簡単にグーグルマップを白黒にできます。
こちらのコピペしてエディタに貼り付けてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
function initialize() { var latlng = new google.maps.LatLng(34.672243, 135.20255); var opts = { zoom: 13, center: latlng, mapTypeControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; /* 表示エリアのID名を指定。この場合id="map"のところに出力されます */ var map = new google.maps.Map(document.getElementById("map"), opts); /* 地図style */ var styleOptions = [{ 'stylers': [{ 'gamma': 0.8 }, { 'saturation': -100 }, { 'lightness': 20 }] }] //地図の切り替えボタン var styledMapOptions = { name: 'モノクロ地図' } var monoType = new google.maps.StyledMapType(styleOptions, styledMapOptions); map.mapTypes.set('mono', monoType); map.setMapTypeId('mono'); //マーカーの画像パス(相対、絶対どっちでも) var image = 'http://flat-g.net/wordpress/wp-content/themes/bluestreet_child/images/flatg01.png'; var Marker = new google.maps.Marker({ position: latlng, map: map, icon: image//デフォルトのマーカーを表示する場合は指定無し }); //マップのタイトル var contentString = 'マップのタイトル'; var infowindow = new google.maps.InfoWindow({ content: contentString }); //infowindow.open(map, lopanMarker);//初期状態で吹き出しを表示させる場合は有効にする google.maps.event.addListener(Marker, 'click', function() { infowindow.open(map, Marker); }); } google.maps.event.addDomListener(window, 'load', initialize); |
座標をこちらから取得して、書き換えてください。
■グーグルマップ座標取得
http://www.geocoding.jp/
※34.672243, 135.20255といった数値
またマーカー画像もお好きなものに変えちゃってください。
こちらは当社のロゴを入れています。
書き換えたら、JSファイルをご自分のサーバーにアップしてください。
あとは、これを貼り付けるだけ。ただし、先ほどアップしたJSファイルの指定場所だけは間違わないように。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <header> <!--APIの呼び出し--> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <!--さっき作ったmap.jsの呼び出し--> script type="text/javascript" src="http://www.flat-g.net/wordpress/wp-content/themes/bluestreet_child/js/map.js"></script> </header> <body> <!--id="map"の所にマップ出力--> <div id="map" style="width:100%; height: 500px;"></div> </body> </html> |
以上、たったの3ステップ！
さあ、やってみましょう。