2021/02/20 (更新日: 2022/10/11)

【ブログ初心者／初期設定・その4】.htaccessの設定方法！

ブログの始め方

エックスサーバーを申し込んだ「.htaccessってなに？.htaccessをしたら何が変わるの？【http:】を【https:】にする設定方法がわからない」どうすれば良いか教えてください。

今回は、このようなお悩みを解決するための、お手伝いをします。

本記事の内容

.htaccessの設定方法
.htaccess／SSL設定のメリット、デメリット

この記事を読むメリット

.htaccessの設定方法がわかります
.htaccess／SSL設定のメリット、デメリットが理解できます

この記事を書いている僕は、2020年9月から副業を始めました。現在は本業と両立し、ブロガー兼Webライターとして活動中です。

そんな僕は2020年11月にブログを始めましたが、当初はアフィリエイトリンクも適当に貼り付けて終わりだったので、もちろん成約に繋がることはありませんでした。しかし、アフィリエイトについて学び、実践した結果、実収益を上げられるようになりました。

論より証拠としてこちらをご覧ください。

A8ネット

2021年9月　539,434円　

もしもアフィリエイト

2021年9月　2,099,500 円

ブログから収益を発生させることを真剣に考え行動したことで、このような結果を出せるようになりました。また、この実績を元にブログ初心者の方に向けたスクール「Wakablog College」の運営をしており、その生徒さんも収益が発生しています。このことから、この記事にも信憑性があると思われます。

初期設定の段階で僕がいちばん最初に当たった壁はこの言葉です。

「.htaccessって何？？」

【.htaccess ＝ドットエイチティーアクセス】
同じような壁に当たっている人もいると思います。当初、どんなことを意識して.htaccessの設定をしたかシェアしていきます。参考になると嬉しいです。

結論

必ず.htaccessの設定をしましょう

上記のとおりです。
過去の僕と同じ悩みを抱える方へ、心を込めて深堀りします。

なお、こちらの記事に関してはXSERVERを利用の方がメインとなっています。サーバーをまだ契約されていない方はこちらの記事を参考にしてみてください。

この記事の動画解説版

.htaccessの設定方法

「.htaccessの設定ってどうやるんだろう？」

こちらのテーマでは、このような疑問を解消するため、深掘り解説をしていきます。

本テーマの内容

設定に必要なコードを公開します

本テーマを読むメリットはこちら

.htaccessの設定に必要なコードが手に入ります

こちらのテーマでは、.htaccessの設定に必要なコードを公開します。これをコピペすればOKなので、あなたはラッキーです。

「example.com/index.php」や「example.com/index.html」にアクセス → 「example.com/」にリダイレクト
URLの「www」を無しに統一する
「http」にアクセスしたユーザー → 「https」にリダイレクトさせる
【高速化設定】WordPressキャッシュ＆ファイル圧縮の設定
上記、すべてのまとめ【コピペ用】

結論：エックスサーバーでWordPressをSSL設定したあとにやる（.htaccess）です。

※注意：「wakablog.com」の箇所は、ご自身のドメインに変更してご使用ください。

「example.com/index.php」や「example.com/index.html」にアクセス → 「example.com/」にリダイレクト

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /

# index.phpにアクセスできないようにする
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

URLの「www」を無しに統一する

<IfModule mod_rewrite.c>
# wwwなしに統一
RewriteCond %{HTTP_HOST} ^www\.wakablog\.com$
RewriteRule ^(.*)$ https://wakablog.com/$1 [R=301,L]
</IfModule>

「http」にアクセスしたユーザー → 「https」にリダイレクトさせる

<IfModule mod_rewrite.c>
# http→httpsに統一
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
</IfModule>

【高速化設定】WordPressキャッシュ＆ファイル圧縮の設定

# キャッシュを有効にする
Header set Cache-Control "max-age=2628000, public"

# キャッシュ設定
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

# ファイル圧縮設定
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>

上記、すべてのまとめ【コピペ用】

SetEnvIf Request_URI ".*" Ngx_Cache_NoCacheMode=off
SetEnvIf Request_URI ".*" Ngx_Cache_StaticMode
# `BEGIN WordPress` から `END WordPress` までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。

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

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /

# index.phpにアクセスできないようにする
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# wwwなしに統一
RewriteCond %{HTTP_HOST} ^www\.wakablog\.com$
RewriteRule ^(.*)$ https://wakablog.com/$1 [R=301,L]

# http→httpsに統一
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
</IfModule>
# END WordPress

# キャッシュを有効にする
Header set Cache-Control "max-age=2628000, public"

# キャッシュ設定
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

# ファイル圧縮設定
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>

コピペしていただくのは、上記画像になります。こちらを設定してもらうと完了です！