Googleマップをレスポンシブサイトに対応させる方法。スマホサイトに埋め込む時など

Googleマップをスマホサイトに埋め込むとはみ出す時の対処法

レスポンシブのスマホサイトに Google map を埋め込むと、はみ出してしまう。

これをはみ出さないようにしたい。

gmap-respon

共有から

gmap-respon2

iframeのタグをコピペする。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d23796.650854092717!2d140.75646100404356!3d41.79423516221846!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f9ef46bcb8d5525%3A0xa9e4bd2d96c4d502!2z54m55Yil5Y-y6Leh5LqU56ic6YOt6Leh!5e0!3m2!1sja!2sjp!4v1460702096429" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

 

HTMLをちょこっとだけ改造

<div class="gmap"><iframe...上のコピペソース.../iframe></div>

という感じで、 div でくくってやる。

そして普通にページに貼り付ける。

ちなみに class名の gmap は何でもOK。

 
 

CSSに追記

.gmap {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}

.gmap iframe,
.gmap object,
.gmap embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

 
 

これだけで、勝手にレスポンシブに対応してくれる。

コピペソースに 

width="600" height="450"

 などの記述があるが、レスポンシブ時にはこれは無視されるのでそのままでOK。

【WordPressにログインできない場合の対処法】エラー:予期しない出力によりCookiesがブロックと言われる

急にWordpressにログインできなくなった時の原因と対処法

(ユーザー名とパスワードは間違ってないのに)

主なエラーメッセージはこんな感じ。

Warning: Cannot modify header information – headers already sent by (output started at /…サーバーパス/wp-includes/session.php:1) in /…サーバーパス/wp-login.php on line 425
最後の数字は色々ある。

エラー:予期しない出力により Cookies がブロックされました。ヘルプが必要な場合はこちらのドキュメンテーションを読むか、サポートフォーラムをご利用下さい。

ログインエラーの原因の特定

このエラーが出ている場合の原因を特定すれば、それぞれ対処できる。またブログのデータそのものは壊れていないので、心配はいらない。

1. functions.php の中の改行。
2. functions.php の中の echo が原因。
3. wp-config.php を UTF-8(BOMあり) で保存してしまった。
4. php.ini の設定が原因。
5. 外部からの悪意のある攻撃で nav-menu.php が書き換えられた。

1. 2. 3. については、自分でphpファイルを操作したり、テンプレートをカスタマイズした場合に発生する。

4. は、自分で設定を変更する、または自分で設定しなくても、サーバーの仕様が運営会社によって勝手に変更された場合に発生。

5. は、最近全然使ってなかったけど久しぶりにログインしようと思ったら、といった場合、つまりWordpressのバージョンが最新じゃない時に起こりやすい(特にWordpress4.4以前)。

 
 

1. functions.phpの中の改行が原因の場合の対処法

functions.phpの中の余分な改行、もしくは、header(“Location:….”); の前に改行が入ってるとダメ。

解決法 → functions.phpの該当しそうな改行を片っ端から消す。
ログインできないので、管理画面からではなく、FTPソフトなどを使って/wp-content/themes/テーマ名/functions.php のファイルを直接編集してアップロードしなおす必要がある。

 
 

2. functions.phpの中のechoが原因。

header(“Location:…”); の前に echo があるとダメ。

解決法 → 1.の時と同じように、ファイルを直接修正する。

 
 

3. wp-config.php を UTF-8(BOMあり) で保存してしまった。

何らかの理由で、wp-config.php を編集して上書き保存する時に UTF-8(BOMあり) で保存してしまうことが原因。

解決法 → wp-config.php を UTF-8 で保存しなおす。

もちろん管理画面からではなくFTPソフトなどを使って wp-config.php のファイルを直接保存しなおしてアップロードしなおす必要がある。

 
 

4. php.ini の設定が原因。

自分で設定を変更した場合はもちろんだが、サーバーの運営会社がメンテナンスなどを理由に勝手に変更する場合もある。

この場合は、Wordpressは関係ないので、サーバーにログインして、 php.ini の設定で output_buffering = Off となっていたら、output_buffering = On にすると解決する。

サーバーによっては、そもそも php.ini の設定ができない場合もあるので、カスタマーセンターなどに問い合わせてもいいかもしれない。

 
 

5. 外部からの悪意のある攻撃で nav-menu.php が書き換えられた。

解決法 → /wp-includes/nav-menu.php と /wp-admin/includes/nav-menu.php の2つのファイルを確認し、 istart と検索して、該当箇所を削除。

詳しい削除方法はこちらの外部からの攻撃でnav-menu.phpが書き換えられた場合の対処法を参照。

 
 

それでもログインできない場合

最終手段。
新しいWordpressをダウンロードしてきて、Wordpressフォルダを丸ごとFTPで再アップロードする。
記事内容などはデータベースに格納されているので、丸ごと再アップロードしてもブログは無事だ。

ただし、以下のファイルとフォルダだけはアップロードしない事!

WordPressのフォルダ直下にある .htaccess と wp-config.php

/wp-content/themes/今使ってるテーマのフォルダ/

これでどんな問題があってもログインできるようになる。
逆に言うと、これでもダメな場合は、 .htaccess wp-config.php 自分が使っているテーマ のどれかに問題があることになる。

WordPressが外部からの攻撃で nav-menu.php が書き換えられた場合の対処法

WordPressにマルウェアを送り込むソースを埋め込まれた時の対処法

JPCERT/CC や サーバーの管理会社から、下記のようなメールが届いた場合は要注意。

<div id=”zqtf” style=”display:none”>67 76 90auc 72 1-8 a7 bm,as4等の文字列が埋め込まれています。
※当該 URL を確認する際は、十分お気をつけください。確認する際は、
ブラウザのスクリプト機能を無効にするなど、影響ない環境で、
ご確認ください。
※上記は、http と :// の間を空けております。
※当該コードは Internet Explorer で確認しております。
同様の改ざんは WordPress や Joomla などの CMS を使用したサイトで確認
されており、”//istart” や “//iend” のような文字列が埋め込まれていまし
た。CMS に関連するファイルを一度ご確認願います。

でも、対応は簡単なので、すぐに対処しよう。

JPCERT/CCとは?

一般社団法人 JPCERTコーディネーションセンターの略で、簡単に言うと、セキュリティ関連の注意喚起をしている機関。

 
 

原因と攻撃の経路

これは、Wordpress 4.4系より前バージョンのセキュリティホールを狙ったものだ。もちろんサーバーの状況などにより、Wordpress4.3以前のバージョンでも攻撃されない場合もある。

ちなみに、ロリポップ、お名前.comは特に多くの被害が報告されている。

→ マルウェアを埋め込まれると、ブラウザでのデータのやり取りが外部に送信されるので、メールフォームなどを設置している場合は特に注意が必要。

簡単に特定でき、修正もできるので、被害が発生する前に対処しよう。

WordPressの場合
/wp-includes/nav-menu.php
/wp-admin/includes/nav-menu.php

この2種類のファイルが狙われ、ソースコードの中に //istart と //iend というコードが埋め込まれてしまう。

acreport-cms_01

FTPソフトで、/wp-includes/nav-menu.php と /wp-admin/includes/nav-menu.php の2つのファイルを確認し、 istart と検索して、該当があれば攻撃されている。

//istart から //iend までのソースを全て削除すれば、ひとまず脅威はなくなる。

その後、再度同じ被害にあわないように、WordPressを最新にアップデートしておくこと。

既にWordpressが最新の場合は、サーバーの設定に問題がある。

海外からの管理画面や、コアファイルへのFTPアクセスをを全て拒否する設定する。
管理画面にBASIC認証を設定する。

などの対策が有効。

 

明日試したくなるカスタマイズ、ネットな日々に役立つ小技と、たまに旅行の妄想と。