ワードプレスを使って自分のサイトやブログを作成する際、最初に訪問者が目にする「フロントページ（トップページ）」の設定はとても重要です。フロントページの設定次第で、サイト全体の印象や回遊率、SEO効果までも左右します。この記事では、初心者の方でも迷わずにできる「ワードプレス フロントページの設定方法」を、実際の手順とともにわかりやすく解説していきます。

ワードプレスのフロントページとは？

ワードプレスにおける「フロントページ」とは、サイトのトップページ、つまり訪問者が最初にアクセスするページのことです。デフォルト設定では、新着記事が一覧で表示されるブログ形式になっていますが、企業サイトやポートフォリオ、サービス紹介ページなどでは、静的ページをトップに表示したい場合もあります。

そのため、目的に応じて「固定ページをフロントページに設定する」か、「最新の投稿をフロントページにする」かを選択できるようになっています。

フロントページ設定を行う前に準備しておくこと

フロントページを設定する前に、次の準備をしておくとスムーズに作業が進みます。

1. トップページ用の固定ページを作成しておく
   「ホーム」「トップページ」などのタイトルで固定ページを新規作成します。内容は一旦仮のテキストでも構いません。
2. 投稿一覧ページを作成しておく（ブログ機能を使う場合）
   投稿記事一覧を別ページに表示したい場合、「ブログ」や「お知らせ」などの固定ページも作成しておきます。
3. テーマの構造を理解しておく
   一部のテーマでは独自のフロントページテンプレートが用意されていることがあります。テーマの説明書（ドキュメント）も確認しておくと安心です。

フロントページの設定手順

固定ページをフロントページに設定する方法

1. 管理画面から「設定」→「表示設定」を開く
   ワードプレスの管理画面左側メニューから「設定」＞「表示設定」に進みます。
2. 「ホームページの表示」を変更する
   「ホームページの表示」で「固定ページ」を選択します。
3. フロントページと投稿ページを指定する
   「ホームページ」には先ほど作成した固定ページ（例：ホーム）を設定し、「投稿ページ」にはブログ一覧ページを指定します。
4. 変更を保存
   最後に「変更を保存」をクリックすれば、設定完了です。

これで、サイトのトップページが固定ページに変更され、任意の内容を表示できるようになります。

最新の投稿をフロントページに設定する方法

ブログ形式のサイトを運営したい場合は、「最新の投稿」をフロントページに設定しておくと便利です。

1. 「設定」→「表示設定」を開きます。
2. 「ホームページの表示」で「最新の投稿」を選択します。
3. 「変更を保存」をクリックして完了です。

これで、トップページに最新記事の一覧が自動的に表示されます。ブログ中心のサイトに最適です。

固定ページ型フロントページの魅力

固定ページをフロントページにすることで、以下のようなメリットがあります。

• デザインを自由にカスタマイズできる
  企業の公式サイトのように、トップページをブランドイメージに合わせたデザインに変更できます。
• 重要な情報を常に上部に表示できる
  新着投稿に関係なく、常に特定のメッセージやCTA（行動喚起ボタン）を表示可能です。
• SEOに有利
  構造化データを設定したり、特定のキーワードで最適化したりできるため、検索上位を狙いやすくなります。

フロントページをカスタマイズする方法

カスタマイザーを使う

「外観」→「カスタマイズ」から、ヘッダー、フッター、背景画像、ウィジェットなどを簡単に編集できます。リアルタイムでプレビューを確認しながら変更できるのが利点です。

ブロックエディター（Gutenberg）を使う

ブロックエディターを利用すれば、画像・見出し・ボタンなどを自由に配置し、コードを書かずにプロ並みのデザインを実現できます。

ページビルダープラグインを使う

「Elementor」「Divi Builder」「SiteOrigin」などのページビルダーを使えば、ドラッグ＆ドロップで直感的にデザインできます。

テーマによるフロントページの違い

テーマによっては、独自の「フロントページテンプレート」が用意されている場合があります。例えば：

• Cocoon：シンプルなブログ型に最適。トップページにおすすめ記事を表示可能。
• SWELL：ブロックエディター対応でデザイン性が高く、トップページを自由に構成できる。
• Lightning：企業サイト向け。トップにスライダーやお知らせ欄を簡単に追加可能。

フロントページ設定後に確認すべきポイント

1. スマホ表示の最適化
   レスポンシブ対応を確認し、スマホでもレイアウトが崩れないかをチェック。
2. ナビゲーションの整備
   メニューリンクが正しく設定されているか確認。
3. メタディスクリプションとタイトルタグ
   SEO対策として、トップページのタイトルやメタ説明文も必ず最適化しましょう。
4. キャッシュの削除
   変更が反映されない場合はキャッシュプラグインをクリアしてください。

トップページにおすすめのコンテンツ構成

トップページでは、訪問者が知りたい情報に素早くアクセスできるようにすることが重要です。以下のような構成が効果的です。

SEOに強いフロントページの作り方

• タイトルタグに主要キーワードを入れる
  例：「ワードプレス フロントページの設定方法｜初心者でも簡単！」
• h1・h2タグを適切に使う
  見出しタグを構造的に使うことで、検索エンジンにページ内容を伝えやすくします。
• 内部リンクを設置
  フロントページから各主要ページ（サービス紹介・ブログ・問い合わせ）へのリンクを設置します。
• ページスピードを改善
  画像の最適化やキャッシュプラグイン活用で、表示速度を上げましょう。

よくある質問（FAQ）

Q1. フロントページを設定しても反映されません。どうすればいいですか？
A. キャッシュプラグインを使っている場合、キャッシュを削除して再読み込みしてください。また、テーマのテンプレートに固定ページが反映されない仕様の場合もあります。

Q2. 投稿ページを作らずにフロントページを設定できますか？
A. はい、ブログ機能を使わない場合は「投稿ページ」を空欄のままで構いません。

Q3. トップページのURLを変更できますか？
A. 「固定ページ」編集画面からスラッグを編集すればURLを変更できます。ただし、SEO上は変更しすぎない方が良いです。

Q4. フロントページを複数作ることはできますか？
A. ワードプレスでは1サイトにつき1つのフロントページ設定が可能です。複数作りたい場合は、マルチサイト機能を利用します。

Q5. フロントページでスライダーを表示したいです。
A. 「Smart Slider 3」などのプラグインを使うと、簡単にスライダーを設置できます。

Q6. 固定ページを削除するとどうなりますか？
A. 設定していたフロントページが削除された場合、ワードプレスは自動的に「最新の投稿」ページをトップに切り替えます。

まとめ

フロントページの設定は、ワードプレスサイト構築の中でも特に重要なステップです。固定ページを使うか、最新投稿を表示するかでサイトの印象は大きく変わります。自分の目的に合わせて最適な方法を選び、デザインやコンテンツを整えることで、ユーザーにとって魅力的なトップページを作り上げましょう。

あなたのサイトの第一印象を決めるのは、この「フロントページ」からです。正しい設定と工夫で、より多くの訪問者を惹きつけるページを構築していきましょう。

コクーンの困ったをまとめて見ました。

https://tacademy.jp/cocoon-change/

タイトル前moreタグ前に広告を入れる

1. cocoon設定
2. 広告
3. 本文中のみ（オート、先頭から-１のみ）

アドセンス審査のhead(ヘッド)挿入どこ？

https://wp-cocoon.com/google-adsense-authentication-code/

アイコン一括変更

https://tacademy.jp/icon/

ページスピードアップ関係

https://tacademy.jp/pagespeed/

https://tacademy.jp/preload/

https://tacademy.jp/slow/

https://tacademy.jp/mobile-site-kousoku-cocoon/

https://tacademy.jp/cocoonkousokuka/

サーチコンソール

https://tacademy.jp/search-console/

https://tacademy.jp/googlesearchconsole/

エディター

https://tacademy.jp/style/

https://tacademy.jp/button/

最終的にこのプラグインは不要になりました。
コクーンで対応可能になったため。

カルーセル設定

https://tacademy.jp/karu-seru/

ツールからSearchRegexを選択してクリック

SearchRegexが起動します。

検索に置き換えたい画像のアドレス

置き換えに変えたい画像のアドレス

WordPressでブログを運営すると、どうしてもサイトのスピードが遅くなってしまいます。

サイトのスピードについてはGoogle「PageSpeed Insights」で問題点を解消していきましょう。

ブログが遅い原因の一つに、「キーリクエストのプリロード」というのがあります。

そもそもプリロードって？

プリロードとは「Preload」、つまり「Pre（前に）」「load（読む）」ということ。

WordPressはHTMLやCSS、JavaScriptなど、たくさんのファイルを使って作られていて、ページを読み込むため順序が決まっています。

その中で、後に読み込まれている関係で、表示速度が遅くなっているものがあります。

それを先に読み込むことでサイト表示の高速化がはかれるというものです。

漠然と意味がわかったところで、実際にキーリクエストのプリロードを改善していきます。

改善方法

表示されたURLを右クリックし、「リンクのアドレスをコピー」を押して下さい。

Twitterの埋め込みは絶対に遅くなる！

下のような埋め込みをトップに持ってくると必ず遅くなる

たっくって誰やねん？

どんなやつやねん？

って人のために

サイトのまとめ記事作ってみました。

読んでもらったら

どんな感じのやつかは

わかるかと思います✨

興味ある方はどうぞ

よろしくお願いします‼️

コメントとかもらえると嬉しいです😊https://t.co/GlPD9EHFQ6

— たっく✨@人生楽しむ”学び”を提供 (@TacAcademy) March 29, 2020

スマホでのカルーセル表示

これは若干ですが低下の要因になります

サイト高速化の事前読み込みの以下の部分が不要？

削除することで若干のページスピードが改善

ブログを運営する上でアクセス数は非常に重要

一つの目安となるのがドメインパワー

https://www.ispr.net/

このサイトで一つの目安として測定が可能です！

今日はドメインパワーをあげる方法をご紹介！

ドメインパワーを上げる6つの方法

前述したサイトでドメインパワーがある程度把握できます。

では、ドメインパワーを向上させるにはどうすればいいのでしょうか？

検索エンジンの信頼度を上げるには、様々な方法があります。

中でも有効な施策を6つご紹介。

これらは当たり前の方法ですが、ドメインパワーの向上には地道にやるしかないです。

1. 記事数を増やす

1つ目は、サイトの記事数を増やすこと。

キーワードと関連性の高い記事が多いサイトは、検索エンジンから信頼を得やすく、ドメインパワー向上につながります。

しかし、闇雲に記事数を増やすだけでは効果がありません。

質の低いコンテンツの量産は、サイト全体の評価を下げることになります。

高品質な記事を増やすことが重要なのです。

ここで大事になって来るのがリライトですね。

リライトする場合はこちらのツールを活用しても良いと思います。

私は実際にこのsmartASPを利用しています。

利用の際の難しかった点は下記の記事にまとめました。

https://tacademy.jp/smartasp/

2. 文字数を増やす

2つ目は、記事の文字数を増やすことです。

検索エンジンからの評価が高いのは、ユーザに価値のある情報を発信している記事です。

文字数が少ない記事は、情報が薄い場合が多い。

情報量を多くすれば自然に文字数が増え、それだけユーザのニーズに応えやすくなります。

すると記事の「滞在時間」や「直帰率」も改善し、検索エンジンの評価が上がることにつながります。

3. 記事のクオリティを上げる

3つ目は、記事のクオリティを上げることです。

これは２にも通じることですが、

最近、検索エンジンのロジックが変化して記事の質がより評価されるようになりました。

文字数の増加は重要ですが、ただ増やしても意味がありません。

また、検索キーワードの出現率や回数など、小手先のテクニックでは通用しなくなってきました。

ユーザに必要な情報を多く提供した結果字数が増え、テクニックよりもユーザが喜ぶ内容を熟考し発信することが大事です。

4. 更新頻度を上げる

4つ目は、記事の更新頻度を上げること。

ドメインパワーはサイト設立の年数が長いほど強い傾向があります。

ですが、更新されないとドメインパワーは上がりません。

たとえ質の高いコンテンツを発信していても、更新頻度があまりに少ないと評価されないのです。

ホームページの更新頻度を上げ、少しでも記事を増やすことが重要です。

サーチコンソールなどを活用するとインデックスが早くなりやすいので活用しない手はないでしょう。

https://tacademy.jp/googlesearchconsole/

5. 被リンクを集める

5つ目は、被リンクを集めること。

被リンクは、自分のサイトが他のサイトにリンクされること。

コンテンツが、ドメインパワーの大きいメディアに被リンクされると、サイトの信頼度が高まります。

被リンクは”信頼の証”と考えられますね。

被リンクはドメインパワー向上に大きく役立ちますが、自分でコントロールすることが難しいのも確かです。

質の高いコンテンツを頻繁に発信することが被リンクの近道とも言えます。

6. サイトそのものをSEOに強く改造する（SEOに強いテンプレートを使う）

6つ目は、サイトそのものをSEOに強く改造すること。

言い換えると、SEOに強いテンプレートデザインを使うことです。

例えばサイトのUIやデザインが悪いと、記事の質が高くても読者が離脱する場合があります。

スクロールのスムーズさ、ページの読み込み速度、文字の読みやすさ等に気を配ることで、滞在時間や直帰率が改善し、ドメインパワーの向上につながるのです。

別サイトですがこちらを参考にしてもいいかもしれません。

ちなみに私は「無料で行けるとこまで！」という考えでやっているのでcocoonを採用しています。

これは、初心者がブログってはじめやすいし楽しいと思って貰えるように低コストで、できるだけやった実績を残すためでもあります。

同じテーマだとアドバイスもしやすいですからね！

投稿画面のビジュアルでスタイルドロップダウンリストが表示されない時の対処方法。

原因はAdvanced Editor Tools (旧名 TinyMCE Advanced)

下記のフォーラムでも記載が有りますが、原因はプラグインです。

参考

https://wp-cocoon.com/community/cocoon-theme/スタイルドロップダウンリストが表示されない/#post-3043

テーブル（表）などは使いたい

純正のコクーン のではテーブール（表）が使いづらいので、

なんとか利用できないか調べてみました。

設定方法

ここでは、TinyMCE Advancedを使ってビジュアルエディタでの編集ボタンの追加方法を見ていく。

エディター設定画面で「Classic Editor(TinyMCE)」をクリックした後、下図のように、追加したい編集ボタンを選んで、上のツールバーにドラッグ&ドロップしよう。

バズ部や弊社クライアント様のサイトでは以下のボタンを使用している。あなたも、これらのボタンを追加しておけば問題ないだろう。

アイコン	ツール名	用途
	段落	<h2>や<h3>などの見出しタグを設定する時に使用する。インデックス効果を高めるWEBライティングのために必須。
	フォントサイズ	文字のフォントサイズを変更する時に使用する。
	太字	文字を太字にして目立たせたい時に使用する。
	テキスト色	文字色を変更したい時に使用する。
	テキスト背景色	文字の背景に色を付けたい時に使用する。
	イタリック	文字をイタリック体に変更したい時に使用する。
	下線	文字にアンダーラインを付けたい時に使用する。
	左寄せ	文字を左寄せにしたい時に使用する。
	中央揃え	文字をセンター寄せにしたい時に使用する。
	右寄せ	文字を右寄せにしたい時に使用する。
	両端揃え	文字の横幅を統一したい時に使用する。
	ツールバー切り替え	※このボタンは、これ以上の数のボタンを追加したい時に必須。
	「続きを読む」タグを挿入	モアタグを挿入したい時に使用する。
	番号なしリスト	リストタグを挿入したい時に使用する。
	番号付きリスト	ナンバータグを挿入したい時に使用する。
	引用	引用タグを挿入したい時に使用する。
	インデントを減らす	文章をアウトデントしたい時に使用する。
	インデントを増やす	文章をインデントしたい時に使用する。
	リンクの挿入/編集	文字にリンクを挿入したい時に使用する。
	リンクの削除	文字のリンクを外したい時に使用する。
	テーブル（表）	テーブルタグを作成したい時に使用する。
	画像の挿入/編集	画像の挿入、編集の時に使用する。実際には画像に余白を入れたり、画像サイズのピクセル数を入力して調整する時に便利。
	動画を挿入/編集	動画を挿入する時に使用する。実際にはYouTubeの動画コードを挿入する時に利用すると便利な機能。

 

今回改善したサイトはモバイルでの順位がパソコンよりダブルスコアで低めだったので、これで上がって行きました。

それでは、今回行った施策を紹介したいと思います。

公式で推奨の高速化設定を実行する

まず、Cocoon公式サイトに書かれている高速化の設定はすべて試してみたので説明したいと思います。

画像の圧縮・最適化

まずは、プラグインを使って画像の最適化を行います。

https://wp-cocoon.com/recommended-plugins/?theme-switch=reset#toc14

cocoon公式のサイトでは３種類が紹介されていますが、

私の場合効果が高かったこちらを採用

https://tacademy.jp/imagify/

これで最適化は完了です。

Cocoonの高速化設定

公式サイトを参照ください。

https://wp-cocoon.com/site-speed-up/

ここまでで、90点以上も可能みたいです。

私は３０点台のままだったので、さらに最適化を試みました。

もし90点以上出ているならここで完了でもいいと思います。

要確認！「Jetpack by WordPress.com」 でさらに画像を最適化

「Jetpack」→概要→画像アクセラレーター　オフ

「Jetpack」→設定→パフォーマンス→パフォーマンスおよびスピード　オフ

Jetpackは使用しないほうが速度が早くなります。

Lazy Loadをプラグインで対応

公式でのコクーン設定では改善しない場合

Lazy Load→オフ

「WP Fastest Cache」でキャッシュを最適化

ページキャッシュプラグインは、サーバーがMixHostなら「LiteSpeed Cache」、

それ以外は「W3 Total Cache」もしくは「WP Fastest Cache」を使います。

ただ、ページキャッシュプラグインは不具合が多いらしいので、もし使うにしても試すのは最後にしましょう！

そして、念のためバックアップをとっておきましょう！

まずプラグインをインストールしたら、日本語化をしてください。

「言語」の横から日本語を選択して、「Submit」をクリックすれば言語が日本語に変わります。

私がチェックを入れた箇所は上記のようになります。

不具合を起こしたくないので、最小限の設定です。

次にキャッシュの有効期限を設定します。

キャッシュの有効期限のタブから「Add New Rule」をクリック。

上記のように設定して「Save」をクリックで完了です。
(時間はアクセスが少ない時間なら何時でも構いません)

ページキャッシュプラグインについては、もっと最適な設定もあるかと思います。

私の場合この設定が一番早くなりました

でも、アクセスが月5万くらいあるサイトじゃないと効果がないらしいので、それ以下の場合そもそも設定しなくてもいいかもしれません。

エックスサーバーの設定更新

エックスサーバーのサーバーパネル→高速化Xアクセラレータ→ver2に変更

■提供開始日
2019年2月20日(水)

■提供対象
エックスサーバー sv7721以降のサーバー

※上記以外のサーバーにつきましては、
2019年3月から5月にかけて順次対応します。

■ご利用方法
サーバーパネルにログイン後、
『高速化』カテゴリの「Xアクセラレータ」メニューよりご利用ください。

◇マニュアル
エックスサーバー：Xアクセラレータ
エックスサーバービジネス：Xアクセラレータ

■「Xアクセラレータ」をすでにご利用中の場合
・「Xアクセラレータ」をすでに有効にしていた場合も、
「Xアクセラレータ Ver.2」が自動的に有効になることはありません。
お手数ですが、サーバーパネルより「Xアクセラレータ Ver.2」を有効にしてご利用ください。

・「Xアクセラレータ Ver.2」の提供に伴い、
これまで提供していた「Xアクセラレータ」の各設定名を変更しています。

ON [静的ファイル]　→　「Xアクセラレータ」機能の「Xアクセラレータ Ver.1」
ON [全ファイル]　→　「サーバーキャッシュ設定」機能

◇関連マニュアル
エックスサーバー：サーバーキャッシュ設定
エックスサーバービジネス：サーバーキャッシュ設定

■ご利用にあたっての注意事項
・当機能の提供時点ではPHPバージョンが PHP 7.2 の場合のみご利用可能です。
その他のPHPバージョンについては順次対応予定です。
・php.ini設定において一部の設定が変更不可となります。
対象の設定についてはマニュアルページをご参照ください。

https://www.xserver.ne.jp/news_detail.php?view_id=5245

過去に実施「レンダリングをブロックするJavascriptを除去する」

コレは詳しい仕組みがよくわかっていませんが、とりあえずjQueryというやつが悪さをしているようです。

下記のコードを「functions.php」に追加して解決しました。

「functions.php」(テーマのための関数)は「外観」→「テーマの編集」から変更が可能です。
(Cocoonなら「//以下にSimplicity子テーマ用の関数を書く」の下にそのままコピペでOK)

（こちらの記事を参考にさせてもらいました）

AMP化する

Cocoonは設定から簡単にAMP化が可能です。

アフィリエイトタグもそのままで大丈夫みたい。

設定はすごく簡単です。

「Cocoon設定」

「AMP」タブ

「AMP機能を有効化する」にチェックを入れて、「変更をまとめて保存する」をクリックすれば完了です。

その他

結果

モバイルのスピード

追記

キーリクエストのプリロードも改善！

https://tacademy.jp/preload/

ボタンテキストの挿入

コクーン は、ビジュアルエディターからリンク用のボタンを挿入できます。

ボックスも同じところからできます。

リンクは自前で

上記のように、このボタン拡張スタイル機能は、href属性やtarget属性を持ちません。

ですので、テキストエディター側で以下のように属性を入力する必要があります。

<a class="btn btn-red btn-l" href="リンク" target="_blank">タイトル</a>

これを実際に表示させると、以下のようになります。

投稿画面のビジュアルでスタイルドロップダウンリストが表示されない

画像を見ると、ビジュアルエディターの機能を強化するプラグインが邪魔している？

とりあえずそれを無効にした。

原因プラグインはTinyMCE Advancedでした！

インストール方法、設定方法。

画像の最適な大きさについても解説していきます。

なお、圧縮率は「EWWW Image Optimizer」よりも高め。。なので変更しました。

また、オンライン上で画像を圧縮してくれるサービスはありますが、画像を都度圧縮しに行くことが手間でした。

「imagify」を使えば、WordPressに画像をアップすれば自動的に圧縮してくれるので大変便利です。

ちなみに今まで使っていたのは

EWWW Image Optimizer

EWWW Image Optimizer

Speed up your website to better connect with your visitors. Properly compress and size/scale images. Includes lazy load and WebP convert.

ja.wordpress.org

画像をロスレス圧縮することで、サイズを縮小しページ表示する上で最適化するためのプラグインです。

ただし、強力な圧縮を行うには有料ライセンスを購入する必要があります。

imagifyでできること

imagifyは画像最適化のためのプラグインです。

画像最適化とは、画像の読み込み速度を速くするためにファイルサイズを小さくすることを言います。

単に「圧縮」とも言います。

サイトのファイルに画像の占める割合は半分以上にもなると言われています。

そのため、サイトの表示速度を上げるには、画像の最適化が不可欠ということになります。

また、表示速度速度を上げることは、ユーザーの利便性が向上し、SEO対策にもなります。

imagifyのインストール方法

WordPressに「imagify」をインストールしていきます。

「Imagify – WebP & Image Compression」を見つけたら、右上の「今すぐインストール」をクリックします。

インストールできたら、「有効化」をクリックします。

imagifyのAPIキーの取得方法

imagifyの使用には、アカウント登録とAPIキーの取得が必要です。

と言っても、下記の手順でメールアドレスの登録だけで簡単に取得できます。

imagifyの設定方法

では、imagifyの設定項目を順に説明します。

General Settings

① OPTIMIZATION LEVEL

画像の圧縮度合いを「NORMAL」「AGGRESSIVE」「ULTRA」の3段階から選びます。

参考に、約52kbの画像を3段階で圧縮してみました。

違いが分かりにくいかも知れませんが、拡大してみるとULTRAの劣化具合がよく分かると思います。

毎回、このように劣化するわけでは無く、元の画像の大きさや被写体などによって劣化具合は異なります。

② Auto-Optimize images on upload

チェックを入れると、アップロードした画像を自動で圧縮してくれます。

これは絶対やっておいたほうがいい設定ですね。

③ Backup original images

チェックを入れると元の画像を保存しておいてくれます。

元の画像があれば、圧縮のやり直しや圧縮率の変更が可能です。

圧縮率の変更は、「メディア」 > 「ライブラリ」で操作します。

④ Keep all EXIF data from your images

EXIFデータとは、カメラの機種や撮影場所など撮影時の情報です。

EXIFは画像に埋め込まれており、チェックマークを外すとEXIFは消去されます。

少しですがデータは軽くなり、個人情報の漏洩も防げます。

Optimizationの設定

① WEBP FORMAT

WebP（ウエッピー）はGoogleが開発した画像のファイル形式。データ容量を小さくできるのが特徴です。

しかし、WebPはAppleのSafariに対応していないため、WordPressのプログラム（.htaccess）の変更などが必要です。

WebPを使用しない方は、チェックを外してください。

② MEDIA LIBRARY

画像の横幅の上限を決めておくと、大きすぎる画像を小さくしてくれます。

横幅の上限は、テーマによって異なります。

たとえば、SANGOのメインカラムの横幅は700pxです。

なので、下のように700px以上の1000pxや1300pxの画像を貼り付けても、全て700pxで表示されます。

じゃあ上限は700pxかというと、そうでもありません。

ユーザーのパソコンモニターの大きさが違うことや拡大表示することも考えておかないといけないからです。

上の画像も拡大すると、600px、700pxの画像からぼやけてくるのが分かると思います。

個人的にはメインカラムが700pxなら、900～1000pxくらいが上限で良いと思います。

③ Files optimization

WordPressは画像をアップロードすると、サムネイルなど別サイズの画像を何種類か自動で作ります。

テーマもサムネイルを作るように設定されています。

ただし、無料版のimagifyの圧縮上限25MBはサムネイルの圧縮でも消費していきます。

たとえば100Kbの画像をアップロードしたとき、圧縮画像量の計算では130Kbとかになります。

そもそもサムネイルは画像サイズが小さいので、全て圧縮無しでも良いと思います。

Display Options

SHOW TOOLBAR MENU

チェックを入れると、画面上部にImagifyへのショートカットボタンを設置できます。

imagifyの使い方

上記の設定でアップロードごとに圧縮しない設定にしたとき、または、すでにアップロードした画像の圧縮するときは次の方法でおこなってください。

画像1枚ごとに圧縮

メディア > ライブラリ > 左上のアイコンを順にクリックすると、画像の一覧が圧縮状況とともに確認できます。

圧縮したい画像の右にある「Optimaize」をクリックすると、その画像だけを圧縮できます。

過去画像をまとめて圧縮

すでにWordPressにアップロードした画像も圧縮することが出来ます。

メディア > Bulk Optimizationの順にクリックします。

圧縮レベルを確認し、一番下にある「IMAGIF’EM ALL」ボタンをクリックすると別ウインドウに注意書きが表示されます。

注意書きには、画像サイズによっては時間がかかること、最適化中はページを閉じないことが書かれています。

問題なければ「START THE OPTIMIZATION」ボタンをクリックします。

その場合は、1ヶ月待つか有料版を検討してみてください。

有料版は月額のほか、単発のプランもあります。

「imagify」のよくある質問

プラグイン「imagify」を外したら、圧縮した画像はどうなりますか？

圧縮した画像はプラグインが無くても圧縮した状態のままです。なぜなら、圧縮は画像を元に戻せない不可逆圧縮（もとに戻せない圧縮）を行っているからです。ほとんどの画像最適化プラグインは不可逆圧縮なので、プラグインを外しても画像は元に戻りません。

他の画像最適化プラグインと圧縮率の違いは？

imagifyの各モードと「Compress JPEG & PNG images」「EWWW Image Optimizer」を比較してみました。画像のオリジナルサイズは145 KBです。

EWWWの圧縮率が低いのは、無料版EWWWが可逆圧縮（もとに戻せる圧縮）を行っているからです。有料版は不可逆圧縮も選べます。また、圧縮率は画像によって異なるので参考数値と捉えてください。

モード別の圧縮率