• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / アイキャッチ画像の利用とサイズ追加

アイキャッチ画像の利用とサイズ追加

池田祐太郎 | 2018年1月21日 公開


WordPress公式テーマや有料テーマを利用の場合、アイキャッチ画像は設定されていることがほとんどかと思いますが、オリジナルテーマを作成する場合はアイキャッチ画像出力を定義させる必要があります。

今回はアイキャッチ画像の利用開始と、デフォルトのサイズの設定方法をご紹介します。

目次

  • 1. オリジナルテーマはアイキャッチ画像の設定を定義させる必要がある
  • 2. アイキャッチ画像のデフォルトのサイズを変更する
  • 3. サンプルコード
    • 3.1. 切り抜きする場合

オリジナルテーマはアイキャッチ画像の設定を定義させる必要がある

独自にテーマ制作をしている場合、アイキャッチ画像は利用できませんので、テーマ内(functions.phpファイル)に記載させてあげる必要があります。
そうすると、管理画面各投稿等にてアイキャッチ画像を設定できる項目が表示されるようになります。

アイキャッチ画像のデフォルトのサイズを変更する

オリジナルテーマを作成の場合、デザインありきで進めていることが多いと思います。
そうすると出力する画像のサイズを厳密に定義させる必要がありますよね。
指定したサイズでリサイズさせる方法や、指定した縦横サイズに切り抜きして合わせる方法などがあります。

指定サイズでリサイズした例:

指定した縦横サイズに切り抜いた例:

サンプルコード

以下のコードをfunctions.phpに追加します。バックアップは取っておきましょう。

/*
* アイキャッチ画像の利用とサイズ追加
*/
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size(500, 500 );
//set_post_thumbnail_size(500, 500, true ); //切り抜きする場合

上記例だと500×500のサイズでリサイズする例となります。
任意のサイズに変更してください。

切り抜きする場合

切り抜きしたい場合、例のコメントアウトしている箇所を有効とし、一方のものを無効にします。

〜省略
//set_post_thumbnail_size(500, 500 );
set_post_thumbnail_size(500, 500, true ); //切り抜きする場合</pre> 

オリジナルテーマ作成ではないと利用するケースはあまりないかもしれませんが、何かの役に立つかもしれません。

外部IT部門サービス

カテゴリTIPS 関連タグ:WordPressカスタマイズ

池田祐太郎

IT担当を置けない中小企業の「外部IT部門」として、業務システムの設計・開発・運用を一貫して手掛けています。2016年から業務システム設計・運用を開始し、長期で仕組みを育て続ける進め方を強みとしています。2012年創業。WordPressの保守も10年以上継続しています。 プロフィール詳細

この記事と関連する記事

同一ページでMW WP Formのフォームを切り替える方法
2023年8月29日
タグ: WordPressカスタマイズ
カテゴリー: TIPS
WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
2022年1月27日
タグ: WordPressカスタマイズ
カテゴリー: WordPress
フレームワークを使ってWordPressサイトをリニューアルしたら表示速度が速くなった話
2018年6月4日
タグ: Webサイト高速化, WordPressカスタマイズ
カテゴリー: WordPress, ホームページ制作, モバイル

最初のサイドバー

外部IT部門

Search

最近の投稿

  • WordPressが急に遅くなった!保守会社の自社サイトで起きた障害対応を包み隠さず公開します
  • IT外注の費用はどう決まる?金額を比べる前に「範囲」を揃えるべき理由
  • 情シスがいない会社はどうすればいい?兼任担当で回す限界と3つの選択肢
  • 準委任と請負はどう違う?システム開発の総額を着手前に確定させる方法
  • システムの外注先は乗り換えられる?中小企業のためのベンダーロックイン対策

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 外部IT部門
  • 整体院
  • 美容院
  • 雑感

タグ

ai Android ChatGPT CMS css DALL-E elementor gmail google workspace Gutenberg HTML iPhone jQuery Mac Photoshop php SEO SNS ssh SSL Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン セキュリティ ツール ブログ プラグイン マーケティング リニューアル レスポンシブWebデザイン 保守管理 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2026 high five create All rights reserved.