2016 | flatGdesign

17 11月 0

X サーバで簡単HTTPS化

ヤフーも、楽天も、相次いでHTTPからHTTPSに変更になった2017年！
昨年からGOOGLEがHTTPS化を推奨し始めて、いよいよSEOにもかかわってくるという状況で慌てて導入を始めた大手ECサイト。
それになぞらえて、わたくしもHTTPS化することにいたしました。

HTTPS=HTTPにSSLを追加した、セキュリティの高いサイト、というのは言わずもがななのですが、このSSL証明書の取得って、高いんじゃないの？という昔からのイメージに尻ごみしそうですが、なんとXサーバだと、SSLが無料対応！まさに神サーバ！

と思って検索していたら、意外と他社も安いみたいです。

設定はとっても簡単なのですが、一応説明いたしますね。

１．サーバーパネルにログイン

サーバーパネルにログインしたら、SSL設定というボタンを押してください。

２．SSLを設定するドメインを選択する

次にSSLを設定するドメインを選んでください。

３．設定ボタンを押して待つ。

独自SSLの設定を追加タブを押し、独自SSL設定を追加する（確定）を押して完了です。

反映までは、最大1時間くらいかかるようですので、気長に待ちましょう。

あとURLがHTTPのままだとエラーになる場合がありますので、
反映後は、くまなくサイトをチェックしましょう。

４.「.htaccess」でHTTP→HTTPSに301リダイレクトの設定をする

反映が完了したらXサーバの「.htaccess編集」から301リダイレクトの設定を行います。
HTTPに訪問したユーザを自動的にHTTPSにジャンプさせる必要がありますので、この設定をしていないとグーグルからもサイトが2つあると勘違いされ、減点対象になってしまいますので、設定をお忘れなく！

５．「.htaccess」を設定するドメインを選ぶ。

６．「.htaccess編集」タブを開き、以下を追加してください。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

RewriteEngine On

RewriteCond %{HTTPS} off

RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

</IfModule>

あとは確認ボタンを押し決定してください。

７．ワードプレスのサイトURLも変更をお忘れなく！

設定＞一般のWordPress アドレス (URL)もサイトアドレス (URL)もどちらもHTTPSに変更してくださいね。

以上になります。

flatg

デザインメモ

13 11月 0

GOOGLE MAPを白黒にする方法

デザイン的に、グーグルマップのカラーリングって結構浮いたりするときがあります。
そんな時は、グーグルマップを白黒にしてしまいましょう！

とっても簡単にグーグルマップを白黒にできます。

1.JSを用意する。

こちらのコピペしてエディタに貼り付けてください。

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);

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);

2.座標、マーカー画像を書き換えアップする。

座標をこちらから取得して、書き換えてください。

■グーグルマップ座標取得
http://www.geocoding.jp/
※34.672243, 135.20255といった数値

またマーカー画像もお好きなものに変えちゃってください。
こちらは当社のロゴを入れています。

書き換えたら、JSファイルをご自分のサーバーにアップしてください。

3.HTMLを入力する。

あとは、これを貼り付けるだけ。ただし、先ほどアップしたJSファイルの指定場所だけは間違わないように。

<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>

<html>

script type="text/javascript" src="http://www.flat-g.net/wordpress/wp-content/themes/bluestreet_child/js/map.js"></script>

</header>

<body>

</body>

</html>

以上、たったの3ステップ！

デモはこちら

さあ、やってみましょう。