WordPressサイトへのHTTPセキュリティヘッダーの設定方法

■ HTTPセキュリティヘッダーとは？

今回はWordPress管理画面のサイトヘルスに「推奨セキュリティヘッダーがインストール済みではありません」という表示が出ている方向けにセキュリティヘッダーを設定する方法をご紹介します。

上記の文言はプラグイン『Really Simple SSL』をインストールしていれば出てくる文言ですが、HTTPレスポンスヘッダーをセキュリティ目的で利用する”HTTPセキュリティヘッダー”は、適切に設定することでWebサイトが攻撃に利用されるのを防いだり、サイト訪問者の安全性を高めることができます。

この辺りの、サイトセキュリティの専門的なところをより詳しく知りたい方は別の方の技術的なブログを読んでくださいね。今回の記事では「.htaccess」ファイルにコードを少し追加するだけの簡単な方法をご紹介させていただきます。

■STEP1 WordPressのサイトヘルス画面

まずはWordPress管理画面→サイトヘルスからチェック

WordPressの管理画面を開いたら、左のタブから【ダッシュボード】をクリックします。
２段目の左側に「サイトヘルスステータス」が出てると思いますので、青くなってる「サイトヘルス画面上」というリンクをクリックして下さい。

サイトヘルス画面にて上記画像の赤枠のように「推奨セキュリティヘッダーがインストール済みではありません」と表示されていれば、セキュリティヘッダーが未設定で今回の設定対象となりますので、このまま設定へと進んでください。
文言が出ていない場合は既にセキュリティヘッダーが設定されている可能性が高いです。

■STEP2 HTTPセキュリティヘッダーの分析ツール

次に、WordPress管理画面だけでなく、現状把握の為にHTTPセキュリティヘッダーの状態を分析してくれるWebツール『Security Headers』等の外部の分析ツールを使用して、サイトの状態をチェックしましょう。
→https://securityheaders.com/

英語サイトなので一見わかりにくいですが、こちらの分析ツールの使い方はシンプルです。
一番上に表示されてる検索窓内に、HTTPセキュリティヘッダーを分析したいWebサイトのURLをコピペして貼り付けて、右側の「Scan」を押して下さい。

HTTPセキュリティヘッダーが設定されていなければ上記のように「F」判定されてしまいます。
分析サイト画面が急に真っ赤になるのでヤバそうな雰囲気しかありませんね。
一番下に表示されてる文面も日本語に訳すと「Ouch, you should work on your security posture immediately（痛い、あなたはすぐにあなたのセキュリティ姿勢に取り組むべきです）」ボロカスですね。。笑

早速設定していきましょう。

■STEP3 「.htaccess」ファイルの編集

設定方法としてはシンプルで、「.htaccessファイルにコードを追記」する事です。
直ぐに終わりますので、早速FTP上からWebサイトのWordPressがインストールされている一番上のディレクトリから「.htaccess」ファイルを開いて下さい。

「.htaccess」ファイルを開くと、既にいろいろ記述がされてるかと思いますが、「他のソースコードは一切触らず」に一番下に下記のコードを「追記」してください。
（※「.htaccess」ファイルの他のコードを触ってしまうとサイトが崩れたりエラーの原因となります。）

# Security Headers
Header always set Strict-Transport-Security: "max-age=31536000" env=HTTPS
Header always set Content-Security-Policy "upgrade-insecure-requests"
Header always set X-Content-Type-Options "nosniff"
Header always set X-XSS-Protection "1; mode=block"
Header always set Expect-CT "max-age=7776000, enforce"
Header always set Referrer-Policy: "no-referrer-when-downgrade"
Header always append X-Frame-Options SAMEORIGIN
# End Security Headers

上記コードをコピペして、下の画像のように一番下に貼り付けてください。

コードを追記できれば設定は完了ですので、「.htaccess」ファイルを閉じてください。
「.htaccess」ファイルをサーバーにアップして更新ができれば、再度分析ツールでサイトURLを確認しましょう。

ちゃんと設定できれいれば「A」判定へと変更されていると思います。
未設定時に真っ赤だった分析結果画面も緑色に変わってますね。
でも、よく見ると一つだけ赤い箇所が。。
この「Permissions Policy」も設定できますので、再度「.htaccess」ファイルに戻って先ほど追記したコードの下に更に下記のコードを追記してください。

<IfModule mod_headers.c>
Header always set Permissions-Policy “geolocation=(); midi=();notifications=();push=();sync-xhr=();accelerometer=(); gyroscope=(); magnetometer=(); payment=(); camera=(); microphone=();usb=(); xr=();speaker=(self);vibrate=();fullscreen=(self);”
</IfModule>

上記を追記して再度「.htaccess」ファイルを更新してください。
更新ができれば再度分析ツールにてチェックしましょう。

「A +」まで上昇しましたね。
一番下に書かれてる文言も翻訳すると大きく変更されているのがわかります。
「 Wow,amazing grade! perform a deeper security analisys of your website and API（うわー、すごい成績！ WebサイトとAPIのより深いセキュリティ分析を実行します）」

良いコメントに変わりましたね。これで設定は完了です。

＜まとめ＞

WordPressでHTTPS化するのに便利なプラグイン『Really Simple SSL』を使っている方は多いと思いますので、サイトヘルスからのメッセージが表示されている方も多いと思います。
「.htaccess」ファイルにコードを追記して更新するだけで比較的簡単に設定ができますので、未設定の方は設定する事をオススメします。（「.htaccess」ファイルは必ずバックアップをとってから編集してください。）
Calmaでは中小企業様や個人事業主様に向けたGoogleアナリティクスの解析やコンバージョン設定のアドバイスもおこなっています。
自社のWebサイトを効果的に運用し、問い合わせや商品購入などを増やしたい方は、お気軽にご相談ください。

Calma（カルマ）は、枚方市を活動拠点に、主に中小企業や個人事業主をクライアントにしており、様々な業種のクライアントのWebコンサルタントとして企業や事業主のビジネスのIT化、DX化推進のお手伝いをさせていただいております。

サイト制作やサイトリニューアル、Webアプリケーション開発はもちろん、SEO対策やWebサイトの運用、改善といったご依頼から、サイト保守やバナー作成、ロゴデザイン作成、名刺デザイン作成、動画作成、動画編集、ブログ更新代行のようなスポットのご依頼まで幅広く承っております。

Webについてのお困りごとやご相談がありましたら、下記お問い合わせフォームよりお気軽にご相談ください。
（相談＆見積り無料）

ご相談はこちら

Googleアナリティクスでコンバージョン設定する方法

■ Googleアナリティクスのコンバージョンとは？

Googleアナリティクスの「コンバージョン」とは、Webサイトが設定した成果目標を達成することです。
コンバージョンはWebサイトのジャンルによって異なります。

例えば以下のようなものです。

・ECサイトでの商品購入
・Webサイトのフォームから問い合わせや資料請求
・Webサイトのフォームからセミナー等への申し込み
・Webサイトの1人あたりのPV数

上記のようなゴール（目標）をGoogleアナリティクスのコンバージョンとして設定しておくことで、コンバージョン達成状況やユーザーがどのような経路でコンバージョンしたのかを、Googleアナリティクスで計測することができます。成果までの道のりや経緯を計測する事ができれば、成果達成というゴールから逆算してWebサイトを改善する事ができるので、Googleアナリティクスのコンバージョン設定はWebサイト運用では重要な計測設定といえます。

今回は、ユーザーが「どうやってWebサイトの問い合わせフォームに辿り着き、問い合わせ完了（サンクスページ遷移）したのか」を、Googleアナリティクスのコンバージョン設定で計測する方法をご紹介します。

■STEP1 Googleアナリティクスでコンバージョン設定

ビューの目標を選択

Googleアナリティクスの管理画面を開いたら、左下の【管理】をクリックします。

【管理】をクリックすると左から「アカウント」「プロパティ」「ビュー」が列になって出現しますので、「ビュー」列の上から３番目のフラッグのアイコン「目標」をクリックします。

新しい目標を作成

左上の「＋新しい目標」ボタンを押して、目標を作成します。

カスタムで作成

テンプレートでの設定も可能ですが、今回はカスタムでコンバージョンの設定をします。
「カスタム」にチェックをして、「続行」をクリックします。

目標の説明

目標の説明を設定します。

❶名前：目標設定の名前を設定します。今回は問い合わせ完了数を目標としていますので、「問い合わせ完了」と設定しますが、任意の名前で大丈夫です。

❷目標スロットID：ここは特に変更はしなくて大丈夫です。

❸タイプ：今回はフォームからの問い合わせ完了をコンバージョンとして設定しますので、一番上の「到達ページ」のラジオボタンにチェックをします。他の目標をコンバージョンに設定する場合はそちらを選択してください。

3つ全て完了すれば「続行」をクリックします。

目標の詳細

最後に目標の詳細を設定します。

❶到達ページ：到達ページは「ここのURLに辿り着いた数を計測したい」という数値になります。今回は「問い合わせ完了」数を目標にしますので、「等しい」はこのままで「/thanks/」を到達ページに入力しました。

❷値（オプション）：ここは「オフ」で大丈夫です。

❸目標達成プロセス（オプション）：目標達成プロセスの下のボタンをクリックして「オフ」から「オン」に切り替えます。
「オン」に切り替えると下の画像のような画面が出現しますので、コンバージョンまでの導線を意識して１つずつステップに「名前」の欄（任意のページ名）、「スクリーン/ページ」の欄（URL）を入力していきましょう。
ステップが足りない場合は「別のステップを追加」ボタンを押すと項目が追加されます。

3つ全て完了すれば一番下の「保存」をクリックします。

保存が完了すれば上記の画像のように目標が設定された事が確認できます。

■STEP2 コンバージョン設定できてるのかを確認する方法

「目標」でコンバージョン設定ができているかを確認するには、Googleアナリティクスのホーム画面の左列にある【コンバージョン】をクリックし、次に「目標」をクリックします。

以下の項目が表示されるので、確認したい項目をクリックしましょう。

・概要
・目標URL
・目標パスの解析
・目標達成プロセス
・ゴールフロー

「概要」ではコンバージョンの計測期間ごと「目標の完了数（コンバージョン数）」や「コンバージョン率」が確認できます。
それ以外の「目標パスの解析」「目標達成プロセス」「ゴールフロー」では、どうやってコンバージョンしたか等の詳細なデータを見る事ができます。
これらはWebサイトのコンバージョン改善をしていくには、とても重要なデータとなります。

＜まとめ＞

Googleアナリティクスのコンバージョン設定を使いこなせれば、Webサイトからの問い合わせや商品購入に至る経路を定数的に知る事ができ、それに向けた適切な対策を行う事でユーザーにスムーズなアクションを促すことができます。
Calmaでは中小企業様や個人事業主様に向けたGoogleアナリティクスの解析やコンバージョン設定のアドバイスもおこなっています。
自社のWebサイトを効果的に運用し、問い合わせや商品購入などを増やしたい方は、お気軽にご相談ください。

Webについてのお困りごとやご相談がありましたら、下記お問い合わせフォームよりお気軽にご相談ください。
（相談＆見積り無料）

ご相談はこちら

【2022年最新版】All in One SEOプラグイン設定方法

■ WordPressのSEO対策No.1プラグイン【All in One SEO】

WordPressの数あるプラグインの中でも、最も需要が多く全世界で利用者も多い『All in One SEO』ですが、このプラグインはワードプレスでホームページを管理するにあたって、コーディング技術やHTMLの知識が無い人でも直感的にSEO対策ができるという事で全世界にシェアが広まり、WordPressのWebサイトがSEOに強いと言われる大きな要因となった有名なプラグインです。
しかし、アップデート前の古い設定方法や、旧バージョンの管理画面の画像のままのブログがWeb上でも数多く存在していて、「自分のAll in One SEOのプラグイン管理画面とは違う」となって初期設定時に困った方も多いのではないでしょうか？
しかも、直近のアップデートでは日本語化の翻訳が間に合っておらず、設定画面が全て英語になっていて、慣れていない人からすると設定が難しくなってしまったようです。。

そこで今回は、英語がわからなくてもプラグインの初期設定ができるように、初心者向けの『All in One SEO』プラグインの2022年1月時点の最新バージョンでの初期設定方法をご紹介させていただきます。

※『All in One SEO』のセキュリティの脆弱性が報告されております。All in One SEOのバージョン4.0.0から4.1.5.2でご利用されている方は、最新バージョンへのアップデートを強くお勧めします。

■STEP1 プラグイン【All in One SEO】インストール

まずはプラグインの新規追加に『All in One SEO』と入力してプラグインをインストールしてください。

インストール完了後に［有効化］をして、［設定］へと進んでください。

セットアップウィザードではなくダッシュボードから初期設定

All in One SEOの設定へと進むとセットアップウィザードが立ち上がりますが、これは無視して「ダッシュボードに戻る」を押して、ダッシュボード画面から設定へと進みます。

■STEP2 検索の外観

ダッシュボードに戻るのですが、ダッシュボードは日本語化されていない現状では初心者には非常にわかりにくいので、ダッシュボードではなく「検索の外観」から設定を始めることをおすすめします。

Global Settings（一般設定）

「検索の外観」を選択すると、初期画面で一般設定から設定を始める事ができます。ややこしいですが、左側のタブの「検索の外観」の上にある「一般設定」とは違うページですので必ず「検索の外観＞一般設定」と遷移してください。

❶　Home Page（ホームページ）
グローバル設定ではメタ情報で最も重要なサイトのタイトル、ディスクリプションを設定する事ができます。
固定ページのフロントページのAll in One SEOで設定している場合や、WordPressの設定画面で既に設定している場合はプレビュー画面になっているので、プレビューで問題なければそのままにしておきましょう。

❷　Knowledge Graph（ナレッジグラフ）
ナレッジグラフはGoogleで人名検索した際にウィキペディアであるようなGoogleの検索エンジンの横にランダムで表示される画像付きの検索結果の表示設定となります。
設定としては、個人のブログの場合は『個人（Person）』、会社の場合は『組織（Organization）』を選択して、名前、電話番号、コンタクトタイプの選択、表示される画像のアップロードをしておきましょう。
一番下の地図の設定については有料プランとなりますので、今回は説明を省かせていただきます。

Content Types（コンテンツタイプ）

「コンテンツタイプ」タブを選択すると、固定ページや投稿ページなどSEO設定ができます。ここは初期状態でOKですので、そのままにしておきましょう。

Taxonomies（タクソノミー）

次に「タクソノミー」タブを選択します。タクソノミーの設定ではカテゴリーやタグのSEO設定ができます。
カテゴリーを「検索結果に表示：はい」に、タグを「検索結果に表示：いいえ」にして変更を保存しておきましょう。

Image SEO（メディア）

次に、「メディア」タブを選択すると、画像添付ファイルのSEO設定ができます。
ワードプレスでは画像をアップロードする度に画像ファイル毎のURLが生成されるので、画像ファイルだけを表示したページが存在します。その画像だけのページを検索エンジンに登録してもSEO的に悪影響しかないので、「無効」そして「検索結果に表示：いいえ」としておきましょう。

Archives（アーカイブ）

次に、「アーカイブ設定」タブを選択すると、アーカイブページのSEO設定ができます。アーカイブページも画像ファイルと同様に中身の無いページとなりますので、すべて検索結果に表示を「いいえ」に設定しておきましょう。

以上で基本の設定は完了です。
設定が完了すれば左下の『Save Changes』を押して設定を完了する事を忘れないようにしましょう。

■STEP 3 一般設定

次はAll in One SEOの一般設定からGoogleアナリティクスやGoogleサーチコンソールといった、ウェブマスターツールの連携を設定していきます。

Webmaster Tools（ウェブマスターツール）

一般設定の初期設定では「一般設定」になっておりますので、タブを「ウェブマスターツール」へ切り替えて設定をしていきます。

今回は初心者向け設定ですので、設定するのは「Googleアナリティクス」と「Googleサーチコンソール」のみとなります。

※以下ではGoogleアナリティクス、Googleサーチコンソールの設定が完了している前提となります。

Google Analytics設定

Googleアナリティクスの設定はロゴの書いているボタンを押すと「Monsterinsights」のプラグインを強制的にインストールさせられますので、ここは無視して下の「Miscellaneous Verification（雑多な検証）」という所にGoogle Analyticsの管理画面からコピーしてきたトラッキングコードを貼り付けます。
以上でGoogle Analyticsの連携設定は完了です。

正しく設定されているかはアナリティクス画面で確認するようにしましょう。
トラッキングコードが重複していたり、うまくコピペできていないと二重計測や計測エラーとなる原因となるので、設定後はデベロッパーツール等で再確認するようにしてください。

Google Search Console設定

Googleサーチコンソールの連携設定は別のプラグインのインストールを強制される事も無いので、そのまま設定しましょう。
サーチコンソールの設定画面からHTMLタグのメタタグをコピーして『All in One SEO』のウェブマスターツールタブからサーチコンソールのロゴマークボタンを押すと「Google検証コード」を入力する窓が出てきますので、そこにコピペしましょう。

コピペをしたらそのまま保存したいところですが、「Google検証コード」にタグ部分は不要ですので、コードの文字列以前の「<meta name=”google-site-verification” content=”」と、文字列の後ろの「” />」を削除して文字列のみを入力して保存しましょう。

■STEP4 XMLサイトマップの登録

Google サーチコンソールの登録が終わったら、All in One SEOのサイトマップ機能を利用して、XMLサイトマップを登録しましょう。
XMLサイトマップ機能では固定ページ・投稿ページを作成・更新するたびに自動で最新のXMLサイトマップを生成してくれます。これにより、検索エンジンにWebサイトのコンテンツの状態をタイムリーに通知することができます。

サイトマップ設定方法

サイトマップの設定画面では「General Sitemap（一般的なサイトマップ）」のみ設定していきます。

❶については「有効化」にしましょう。

❷は「全投稿タイプを含める」のチェックを外して「添付ファイル」のチェックを外しましょう。

❸は「全タクソノミーを含める」のチェックを外して「タグ」のチェックを外しましょう

❹については一番上の「高度な設定」を有効化して、一番下の「画像を除外」を「はい」にしておきましょう。

設定が完了すれば左下の『変更を保存』してください。
設定ができているか確認する為には、「「http(s)://ドメイン/sitemap.xml」にアクセスしてみましょう。
下記のようにサイトマップが表示されればOKです。
（WordPressでの設定後、サーチコンソールでのサイトマップの登録を忘れずにしておきましょう。）

■STEP 5 ソーシャルネットワークの設定

ソーシャルネットワークの設定ではFacebookとTwitterの設定方法のみご紹介します。

ソーシャルネットワーク＞Facebook設定方法

Facebookシェア時のOGP設定です。
こちらの設定をしておく事で、サイトシェア時のサムネイル画像が表示されます。

❶オープングラフマークアップ：「有効化」

❷デフォルトの投稿画像ソース：「アイキャッチ画像」

❸デフォルト投稿Facebook画像：「イメージをアップロード・選択」から任意の画像を選択

設定が完了すれば左下の『変更を保存』してください。
設定ができているか確認する為には、Facebookのデバッガーでチェックしてみましょう。

https://developers.facebook.com/tools/debug/

ソーシャルネットワーク＞Twitter設定方法

次にTwitterシェア時のOGP設定です。
Facebook同様にこちらの設定をしておく事で、サイトシェア時のサムネイル画像が表示されます。

❶Twitterカード有効化：「有効化」

❷カードタイプのデフォルト：「大きな画像で要約」

❸デフォルトの投稿画像ソース：「アイキャッチ画像」

❹デフォルト投稿Facebook画像：「イメージをアップロード・選択」から任意の画像を選択

設定が完了すれば左下の『変更を保存』してください。

＜まとめ＞

『All in One SEO』は設定がとても簡単にできるので、Webサイト制作に慣れていない人やアフィリエイトなどでWordPressブログを運用したい人にとっては必須のプラグインといえます。
上級者になると今回説明できていない箇所や有料プランなどの使い方も覚えてみるのも良いと思います。

Webについてのお困りごとやご相談がありましたら、下記お問い合わせフォームよりお気軽にご相談ください。
（相談＆見積り無料）

ご相談はこちら

WordPressブログ内にソースコードを表示させる方法

■ ブログ内にソースコードを表示

WEB制作で技術に関するブログを書いたり、読んだりする際にソースコードがブログ内に表示されている記事を読んだ事があるかと思いますが、WordPressのブログでもブログ記事内にソースコードを表示する事ができるようになります。

//テスト
こんなやつです

技術の備忘録にもなりますし、コピペしてそのまま使える便利な機能です。
Google Code Prettifyという機能ですが、ブログとして使う事も多いWordPressでは需要の多いサービスです。
今回はそのブログ内にソースコードを表示する方法をご紹介します。

■STEP1 プラグイン【WP Code Prettify】インストール

まずはワードプレスのプラグインとしては幾つかありますが、私のおすすめは『WP Code Prettify』ですので、プラグインの新規追加に『WP Code Prettify』と入力してプラグインをインストールしてください。

インストール完了後に［有効化］をして、［設定］へと進んでください。

WP Code Prettify設定方法

WP Code Prettifyの設定画面はシンプルですが、全て英語ですのでブラウザの翻訳機能を使って表示させると良いです。

❶についてはjs/cssファイルはどこからロードしますか？という選択画面ですがこちらはheadタグ内に設置する予定ですので［head]を選択してください。

❷は常にjs /cssファイルを読み込みますか？という選択画面ですが、ブログ内にコードが書かれていない場合でも読み込みすると、サイトの表示時間に負荷がかかってしまうので、ここは［No］にしておきます。

❸についてはプルダウンで選択肢が出てきますが、それぞれにフォントや文字サイズ、背景色などの違いがありますので、自由に選択してください。

❹についてはデフォルトでは既にCSSのコードが書かれておりますのでそのまま利用する事ができます。
（私の場合はCSSファイル上で変更できるように、コードをCSSに移行してデフォルトのコードは消しています。）

❺はデフォルトでも空白ですので、ここは空白のままで大丈夫です。

設定が完了すれば左下の『Save Changes』を押して設定を完了してください。

■STEP2 header.phpとfunction.phpに記述

次はheader.phpとfunction.phpに下記のコードを記述して、Google Code Prettifyのプロパティを読み込ませます。

header.phpのhead閉じタグ直前に記述

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&skin=sunburst"></script>

function.phpに記述

// シンタックスハイライト
add_action('wp_enqueue_scripts', 'themeslug_enqueue_script');
function themeslug_enqueue_script(){
  wp_register_script('google-code-prettify-js', 'https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian', null, null, false);
  wp_enqueue_script('google-code-prettify-js');
}

header.phpやfunction.phpを触る時は必ずバックアップをとっておきましょう。
これでGoogle Code Prettifyを使用する準備完了です。

■STEP3 プラグイン【Add Quicktag】インストール

最後に毎回毎回<pre>~と記述するのは流石にめんどくさいので、あらかじめ任意のコードを登録する事ができるプラグインの『Add Quicktag』をインストールして、投稿画面で直ぐに使えるように設定しておきます。
プラグイン画面から［新規追加］で『Add Quicktag』を検索し、インストール完了後に［有効化］をして、［設定］へと進んでください。

Add Quicktag設定方法

WP Code Prettifyの設定画面はシンプルですが、全て英語ですのでブラウザの翻訳機能を使って表示させると良いです。

❶についてはクイックタグのラベル名です。何についてのタグかを記述しておきましょう。（今回は『ソースコード表示』と記述）

❷は❶で記述したラベル名の横に配置されるアイコンを選びます。

❸には上部に開始タグを記述して、下部に終了タグを記述します。
今回はソースコードを表示させるタグなので下記のコードを記述します。

上部：<pre class=”prettyprint linenums”>
下部：</pre>

❹については全てチェックでOKです。

設定が完了すれば左下の『変更を保存』してください。
投稿画面に行って、下記の画像のように『Add Quicktag』のボタンが出現していればOKです。
設定しているにも関わらずボタンが出ていない場合はキャッシュクリアしてリロードすると出現します。

＜まとめ＞

技術ブログやWeb制作についての記事をアップする際にはソースコードを表示する機会が非常に多いので意外と利用する機会の多い機能です。

『Add Quicktags』は他にも汎用性のあるプラグインですので、この機会に使い方に慣れておくのも良いかもしれません。
また、制作時に「これどうやるんだったっけ？」となる場合に、ググるよりも自分のQiita記事やコラムから見つける事ができるので、便利な使い方ができると思います。

Webについてのお困りごとやご相談がありましたら、下記お問い合わせフォームよりお気軽にご相談ください。
（相談＆見積り無料）

ご相談はこちら

WordPressのギャラリー投稿用のCSS設定方法

■ WordPressのギャラリー機能

WordPressで投稿画面などに画像を挿し込む際に、「ギャラリー機能」を使った投稿をする場合がありますが、ギャラリー機能はデフォルトではうまくCSSが効いておらず画像がハミ出してしまっていたり、思いがけないサイズで投稿してしまうケースがあります。
ワードプレスでサイトを制作する場合に、ギャラリー投稿を使う場合はギャラリーのCSSを適切に設定しておく事で、スマホ画面にも対応したギャラリー投稿が可能になりますので、そちらの方法を紹介します。

■STEP1 本体ギャラリーのCSS停止

まずはデフォルトでワードプレス内に入ってるギャラリーのCSSを読み込まないように設定します。
設定としてはfunction.phpに本体ギャラリーを停止させるコードを書き込みます。
下記のコードをコピペして、function.phpの一番下に貼り付けてください。

本体ギャラリーCSS停止

//本体ギャラリーCSS停止
add_filter( 'use_default_gallery_style', '__return_false' );

こちらをやっておかないと CSS をカスタマイズしてもギャラリーには反映されませんし、アップデートがある度に元通りになってしまうので、必ず記述しておきましょう。

■STEP2 ギャラリーのCSS

上記のfunction.phpが書けたら、あとはCSSファイルに記述すれば完了です。
こちらは個人の好みによって調整していただければと思いますが、汎用的なスタイルでよければ下記のコードをCSSにコピペしてください。

ギャラリーCSS

/*-----------------------------
ギャラリー
------------------------------*/
.gallery { 
	width: 100%;
	margin-bottom: 20px !important;
    　　　　　　　overflow: hidden;
}
 
.gallery br {
　　　　　　　　　　　　　　　display: none;
} 
 
.gallery-item { 
    　　　　　　　float: left;
	margin-bottom: 0 !important;
}
.gallery-icon { 
    　　　　　　　text-align: center;
}
 
.gallery-icon img {
	width: 100%;
	height: auto;
	margin-bottom: 10px !important;
}
 
.gallery-caption {
   　　　　　　　 color: #222;
   　　　　　　　 font-size: 12px;
   　　　　　　　 margin: 0 0 10px;
    　　　　　　　text-align: center;
}
 
.gallery-columns-1 .gallery-item { /** カラムなし **/
   　　　　　　　 width: 100%;
   　　　　　　　 margin-right: 0;
}
.gallery-columns-2 .gallery-item { /** 2カラム **/
	width: 48%;
	margin: 0 1%;
}
.gallery-columns-3 .gallery-item { /** 3カラム **/
    　　　　　　　width: 31.33333%;
	margin: 0 1%;
}
.gallery-columns-4 .gallery-item { /** 4カラム **/
    　　　　　　　width: 23%;
    　　　　　　　margin: 0 1%;
}
.gallery-columns-5 .gallery-item { /** 5カラム **/
    　　　　　　　width: 18%;
    　　　　　　　margin: 0 1%;
}
 
@media screen and (max-width: 640px) {
	.gallery-columns-3 .gallery-item, .gallery-columns-4 .gallery-item {
		width: 48%;
		margin: 0 1%;
	}
	.gallery-columns-5 .gallery-item {
		width: 31.33333%;
		margin: 0 1%;
	}
}

以上でWordPressのギャラリーのCSS設定方法は完了です。
CSSファイルとfunction.phpを更新して、投稿画面から「メディアを追加」を開き、「ギャラリーを作成」から画像メディアを選択して記事に画像ギャラリーを挿し込んで確認してください。

＜まとめ＞

WordPressのデフォルトの設定ではギャラリー投稿はキレイに投稿する事ができません。
本体のCSSを停止し、新しくCSSを記述する事で記事内にギャラリー投稿がキレイにできるようになります。

Webについてのお困りごとやご相談がありましたら、下記お問い合わせフォームよりお気軽にご相談ください。
（相談＆見積り無料）

ご相談はこちら

Contact

お問い合わせ

「何から相談すればいいか分からない」
「今のサイトを見直したい」そんな段階でもお気軽にどうぞ。
目的と予算を伺ったうえで、必要なことだけをご提案します。
ご相談・お見積りは無料です。
大阪・枚方を拠点に、北河内エリアや高槻市は訪問でも、全国はオンラインで対応しています。

まずは相談する