投稿者: pugiemonn

ブラウザのコンソールでエラーが出ていました。

fonts.googleapis.com/earlyaccess/notosansjapanese.css net::ERR_ABORTED 404 (Not Found)

この記事では、実例でエラー修正の手順をご紹介します。

404 (Not Found)エラーを修正

テーマのソースを見ると以下のようになっていました。

<link href="fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />

これは Typo でしょうか。手動編集によって間違った URL が入力されています。
リンクが切れてしまったことがエラーの原因のようです。

href 属性の値を確認してみましょう。

リンクを修正

URL を修正して fonts.googleapis.com へアクセスできるようにします。

<link href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />

href 属性の値を正しい URL に修正したのでエラーは解消しました。

さくらレンタルサーバーでは .htaccess でドメインなしありを統一する方法が紹介されています。

この記事ではヘルプを参考に実際のドメインを例に設定をしてみましょう。

さくらレンタルサーバーでは、.htaccess なしのプラグインを利用する方法が紹介されています。.htaccess を編集するよりも、プラグインの利用を推奨します。

プラグイン SAKURA RS WP SSL をさくらレンタルサーバーで設定する

.htaccessで www なしドメインを統一

さくらレンタルサーバーで紹介されているヘルプでは次のようになっています。

WordPressを常時SSL化、かつwww.無しドメインでのアクセスに統一したい
.htaccessの設定例

https://help.sakura.ad.jp/rs/2163/?article_anchor=js-nav-3

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_HOST} ^(www\.example\.jp) [NC]
RewriteRule ^(.*) https://example.jp/$1 [R=301,L]
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

こちらを参考にすればOKです。
例えば以下の部分などは他のサーバーでも使えますね。

RewriteCond %{HTTP_HOST} ^(www\.example\.jp) [NC]
RewriteRule ^(.*) https://example.jp/$1 [R=301,L]

こちらはロリポップ!レンタルサーバーの .htaccess で利用したことがあります。

実際のドメインを例に設定

当サイトのドメインは、camon.tokyo ですので .htaccess に以下のように記載します。

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_HOST} ^(www\.camon\.tokyo) [NC]
RewriteRule ^(.*) https://camon.tokyo/$1 [R=301,L]
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

example.com の部分を camon.tokyo に書き換えました。
このようにお持ちのドメインに書き換えて .htaccess へ記載することで、www ありのドメイン（ https://www.camon.tokyo ）を www なしのドメイン（ https://camon.tokyo ） に統一することができました。

また SSL に統一されているので、HTTP でのアクセスも HTTPS にリダイレクトされるのが良いですね。

さくらレンタルサーバーの .htaccess では挿入場所に注意

.htaccess に挿入すれば OK と記載しましたが、さくらレンタルサーバーの .htaccess を確認したところ、記入場所には注意が必要だと感じました。

ソースを以下に表示しますのでご確認ください。

# BEGIN SAKURA Internet Inc.
<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/x-javascript application/javascript application/ecmascript
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive On
    <FilesMatch "\.(css|js)$">
        ExpiresDefault "access plus 1 week"
    </FilesMatch>
    <FilesMatch "\.(gif|jpe?g|png)$">
        ExpiresDefault "access plus 1 month"
    </FilesMatch>
</IfModule>
# END SAKURA Internet Inc.

# ここに常時SSL化のコードを記載

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

ソース内に「ここに常時SSL化のコードを記載」とコメントさせてもらいました。.htaccess にある 「#BEGIN WordPress」というブロックの後ろに記載してしまうと、動作に少し問題が生じたので躓きポイントだと感じました。

ドメイン設定は .htaccess で簡単に設定しよう

www ありドメインを統一したり、HTTP のリダイレクトは、インターネット上には様々な方法が紹介されているため、何を選択していいのか迷ってしまうこともあるかもしれません。

当記事のさくらレンタルサーバーで紹介されている方法は、シンプルでさらに試しやすいリーズナブルな方法と感じています。とてもシンプルでおすすめの方法です。

ドメイン周りのリダイレクトなどで迷ったらこの手法をご利用ください。

参考

https://help.sakura.ad.jp/rs/2214/

Google カレンダーの予定をサイトに埋め込みたいという場合、スマホとデスクトップ両方のレスポンシブ対応が必要となります。

この記事では Google カレンダーのレスポンシブ対応の方法をご紹介します。
レスポンシブ対応でユーザーのカレンダー閲覧環境を改善してください。

埋め込みiframeタグをレスポンシブ対応クラスで囲む

Google カレンダーの埋め込みタグを、googleCalendar クラスで囲います。

<div class="googleCalendar">カレンダーiframe埋め込みコード</div>

レスポンシブ対応スタイルを追加

レスポンシブ対応のための CSS を追加してください。

<style>
.googleCalendar{
  position: relative;
  min-height: 740px;
  width: 100%;
  padding-bottom: 50%;
}

.googleCalendar iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

min-height の部分は、media-query などでモバイルとデスクトップで環境に合わせて調整すると良いでしょう。

参考

Googleカレンダー11変化！パラメータを変更して比較しました

HTTPからHTTPS移行したもののブラウザで、警告が表示される場合があります。

『このサイトへの接続は保護されていません。このサイトでは機密情報（パスワード、クレジットカードなど）を入力しないでください。悪意あるユーザーに情報が盗まれる恐れがあります。』

SSL証明書を設定して対応をしHTTPSでアクセスができるにもかかわらず、警告が出る場合は、HTTP参照が残っているケースが多いです。

対策はHTTPの参照をHTTPSに書き換える

次のような画像やCSS、スクリプトのURL参照があるとSSLの警告は消えません。

<img src="http://example.com/test.jpg" />

こちらをhttpから、httpsもしくはスラッシュに書き換えます。

<img src="https://example.com/test.jpg" />

このようにHTTPSへの参照に切り替えれば警告が消えます。
SSL対応で警告が消えない場合は、ソース内を調査するなどご検討ください。