これから Nishiki テーマを使うなら
1度は確認しよう!

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る

WordPressテーマ Nishiki のバージョン0.1.29から、トップページの「メインビジュアル」と「フロントページ設定の各セクション」に設定された画像に対して「プレースホルダー」の画像が設定できるようになりました。

プレースホルダーを設定するとこうなります

プレースホルダーの画像を設定すると、容量の大きな画像の読み込みが終わるまでは、容量の小さな画像を表示します。

容量の大きな画像を読み込むまで容量の小さな画像が表示される

容量の大きな画像に差し替えます

容量の大きな画像の読み込みが完了したら、容量の小さな画像から大きな画像にフェードインでフワッと差し替わります。

プレースホルダーを設定するメリット

トップページに限った話ではないのですが、表示するページに容量の大きな画像を使用している場合は、画像の読み込みが完了するまでは画像が表示されず、容量の大きな画像であればあるほど、読み込みにも時間がかかってしまいます。

ウェブサイトを閲覧する方にとっては、ページを開いた時に「なかなか画像が表示されない」という状態は「コンテンツが表示されない時間ができる」ことと同じなので「なんだ、何も表示されないじゃない!」と思われてしまい、ページ離脱にもつながりますね。

そのようなページ離脱を防ぐため、もしトップページで画像を多用している場合は、プレースホルダーの設定をおすすめします。プレースホルダーの画像が表示されている間は「あっ、画像を読み込んでるんだな〜」と思ってもらえそうですね。

それでは、以下に設定方法を書きましたのでご参考ください。

プレースホルダーの画像の設定方法

プレースホルダーの画像は「メインビジュアル」と「フロントページ設定の各セクション」でそれぞれ設定できます。

メインビジュアルの設定方法

WordPressの管理画面より「外観」→「カスタマイズ」を選択します。

カスタマイズ項目の中から「トップページ」を選択します。

トップページのカスタマイズ項目の中から「メインビジュアル」を選択します。

メインビジュアルのカスタマイズ項目の中に、プレースホルダーの設定が表示されます。

プレースホルダーの画像の表示・非表示の設定と、プレースホルダーの画像のグレースケールの設定(0で白黒)ができます。

フロントページ設定の各セクションの設定方法

WordPressの管理画面より「外観」→「カスタマイズ」を選択します。

カスタマイズ項目の中から「トップページ」を選択します。

トップページのカスタマイズ項目の中から「フロントページ設定」を選択します。

各セクションを「カスタム」に設定している場合は、以下の画像のようにプレースホルダーの画像の設定項目が表示されます。

プレースホルダーの画像が表示されない!という場合の対処方法

バージョン0.1.29以前からトップページのメインビジュアルと各セクションに画像を設定している場合は、設定している画像を一旦解除(削除)して、再度画像をアップロードして設定してください。画像を新しくアップロードすることで、プレースホルダー用の画像が作成されます。

もし、プレースホルダーの表示にチェックを入れているのに「画像が表示されない!」という場合はお試しください。

Nishiki テーマに関する情報は#wpnishikiをチェックしてください。

サポトピア
ユーザーコミュニティ
ユーザーコミュニティ
サポトピア会員であればどなたでも参加できるユーザーコミュニティを作りました。日々のウェブサイト運営にご活用ください。マニュアル・機能追加の要望やフィードバックなども受け付けています。まだできたばかりのサービスで、参加いただける方が増えるといいな〜と思います。ご参加お待ちしております。

参加する

※サポトピアにログインしてください

このページの著者について

bouya Imamura

東京都北区十条にあるウェブサイト(ホームページ)制作会社 AnimaGate(アニマゲート) という会社をやっています。サポトピアでは自社製品・サービスの全般的な開発・管理などを行っています。これまで数多くのウェブサイトの新規作成・リニューアル・運営などを経験し、WordPress(ワードプレス)公式テーマ・公式プラグインなど、ウェブサイト運営に役立つ様々なツールを開発・公開しています。YouTube Liveでオンラインサポートを始めますので、チャンネル登録いただけると大変嬉しいです。→ブログはこちら