WordPressテーマのスクリーンショットを綺麗に設定する方法

WordPress テーマ スクリーンショット 綺麗に設置する

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • WordPressのテーマにオリジナルのスクリーンショットを設置したい
  • WordPressのテーマのスクリーンショットを綺麗に作る方法を教えて
  • WordPressテーマのスクリーンショットって何ですか?
  • WordPressのテーマのスクリーンショットの推奨サイズが分からなくて困っている…

という方のお悩みを解決します!

テーマのスクリーンショットとは?

「そもそもWordPressテーマのスクリーンショットってなんぞや?」

という方向けに軽くスクリーンショットについて説明します。

 

管理画面メニューの「外観 > テーマ」へ行くと現在有効化しているテーマやその他デフォルトで用意されているTwenty Seventeenなどのテーマがカード形式で並んでいます。

Wordpressテーマのスクリーンショット例

上の添付画像の赤枠部分の画像がそれぞれそのテーマのスクリーンショットとなります。

特にスクリーンショットを設置していないと「SANGO Childテーマ」のようにダミー画像が勝手に入るようになっています。

 

スクリーンショットを設置しなくても特に運営上問題はありませんし必須ではないです。

ただ設定していたほうがかっこいいので設置しましょう笑

スクリーンショットの推奨サイズは?

WordPressテーマのスクリーンショット画像の推奨サイズはずばり、、、

1200 × 900px

or

880 × 660px

となります〜!!!

スクリーンショットのファイル名とファイル形式は?

スクリーンショットのファイル名とファイル形式は以下のように決められているので作成する際は従いましょう。

  • ファイル名は「screenshot.png」
  • ファイル形式は「.png」

スクリーンショット設置手順

テーマにスクリーンショットを設置する際には以下の手順で行いましょう〜

  1. 推奨サイズでスクリーンショット画像(screenshot.png)を作成する
  2. FTPを使いサーバーにスクリーンショット画像をアップロードする
    アップ場所は「wp-content/themes/テーマ名」の直下。
    index.phpやstyle.cssと同じ階層です。
  3. 「外観 > テーマ」でスクリーンショットが反映されているか確認する

スクリーンショットを綺麗に作るには?

おまけです。

ここではぼくがスクリーンショット画像を作る時に普段やっている方法を紹介します!

 

スクリーンショットを作る時に使っているツールはAdobe XDです。

以下の手順でだいたい作ってます。

2パターン紹介しやす!!!

サイトのロゴ画像と背景色だけで作る場合

超絶シンプルなスクリーンショットの作り方です笑

  1. XDで1200×900pxの長方形を作成する
  2. 長方形の背景色はそのサイトのテーマカラーなどいい感じの色にする
  3. 長方形の上下中央にロゴ画像をいい感じの大きさで配置する
  4. グループ化してscreenshot.pngと名前をつけて保存する

サイトのトップページのスクショを使用して作る場合

コーポレートサイトをWordPreesで構築する際はこの方法でスクリーンショットを作ってます!

  1. Chromeの拡張機能「Full Page Screen Capture」でページ全体のスクショを撮って保存する
  2. XDで1200×900pxの長方形を作成する
  3. ページ全体のスクショをXDに挿入する
  4. そのスクショを横幅1200pxに合わせる(縮める)
  5. 長方形を上から重ねてクリッピングマスクで1200×900pxサイズで切り抜く
  6. screenshot.pngと名前をつけて保存する

 

Adobe XDでなくても無料のデザインツール「Canva」を使っても同じように作成可能だと思うのでやってみてください〜

まとめ

以上、WordPressテーマのスクリーンショットの解説や設置方法を紹介しました!

「まだ設定していなかった〜」という方はこの記事を見ながらぜひチャレンジしてみていただければ幸いです。

 

「WordPressのブログを自分オリジナルにカスタマイズしたいな〜」

という方は以下の記事でいくつか解説しているので気になるものがあったら目を通してみてください〜

WordPressでファビコンをコードをいじらず簡単に設定する方法【WordPress】ファビコンをコードをいじらず簡単に設定する方法 WordPressの管理画面の配色を自分オリジナルにカスタマイズ【WordPress】管理画面の配色を自分オリジナルにカスタマイズする方法 【SANGOカスタマイズ】highlight.jsを導入する方法【SANGOカスタマイズ】highlight.jsでソースコード表示をかっこよくする方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です