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

ハイファイブクリエイト

東京都を拠点にしたWebサイト制作。WordPress構築やシステム構築、ウェブコンサルティング

  • 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> 

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

WordPress保守管理サービス

Filed Under: TIPS 関連タグ:WordPressカスタマイズ

池田祐太郎

WordPressをはじめとしたCMSの導入を10年以上にわたって手掛けており、中小企業から大企業までコーポレートサイト・ランディングページ・ECサイト・ブランドサイト等、幅広いWebサイトの企画・制作・開発・プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。 プロフィール詳細

この記事と関連する記事

フレームワークを使ってWordPressサイトをリニューアルしたら表示速度が速くなった話
2018年6月4日
タグ: Webサイト高速化, WordPressカスタマイズ
カテゴリー: WordPress, ホームページ制作, モバイル
WP固定ページや投稿内でphpファイルを読み込むショートコード
2018年4月1日
タグ: WordPressカスタマイズ
カテゴリー: TIPS
一覧ページ等で、アイキャッチ画像がなかったら一番目の画像を取得し、さらに画像がなかったら定義した画像を表示するカスタマイズ方法
2018年3月22日
タグ: WordPressカスタマイズ
カテゴリー: TIPS

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • Contact Form 7 に見つかったファイルアップロードの脆弱性はどのくらい危険なのか?
  • 2020-2021年末年始の営業のご案内
  • [WordPressサイト向け支援キャンペーン] WordPress保守管理の無料コンサルティングを実施
  • お名前.com レンタルサーバーでSSH接続する方法
  • WordPress保守管理サービスのメリット・デメリット

カテゴリー

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

タグ

Android BtoC Chrome CMS css Fireworks Google+ HTML Illustrator iOS iPhone jQuery Mac mixi Photoshop初心者 php SEO SNS Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 お知らせ アクセス解析 アプリ カスタマイズ カフェ クラウド サーバー スマホサイト スマートフォン ソーシャル ツール フラットデザイン ブログ プラグイン マーケティング ライフログ リニューアル 保守管理 制作のご依頼 最適化 集客するサイト構築 飲食店

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 特定商取引法に基づく表示
  • 転載・引用について
  • Facebook

© 2021 high five create All rights reserved.