WordPress公式プラグインのヘッダー画像！ みんなもカッコよく作ってみよう！

2013.02.18 | サイト推薦！ | 覚えておきたい | |
スポンサードリンク

バレンタインデーは自分でチョコ買って食べたブラウンです。。。

 

Hello Dolly

WordPress.orgの公式プラグインディレクトリからプラグインを探していると、やはりヘッダー画像が設定されているプラグインに目がいきますよね。

画像が入っているだけで豪華に見えるし、プラグインの内容が記載されているとダウンロードして利用している人にとって、非常にわかりやすいですよね。

設定がまだの方！下記に設定する方法と、参考となるカッコイイデザインを集めてみたので、是非参考にしてみて下さい。

ヘッダー画像を作るための方法

ヘッダー画像のサイズ

  • W772 × H250px 　(レティーナ対応は、1544x500pxのデザイン)

ヘッダー画像のファイル名

  • banner-772×250.jpg
  • banner-772×250.png

JPEG形式、もしくはPNG形式。GIFはNGです

ヘッダー画像の格納場所

プラグイン登録用の subversion ディレクトリのルートに assets フォルダを作成し、画像ファイルを入れましょう。

 

【参考】カッコイイヘッダー画像のデザイン集めました

header_image_adcodemanager

(参照元: http://wordpress.org/extend/plugins/ad-code-manager/ )

header_image_akismet

(参照元: http://wordpress.org/extend/plugins/akismet/ )

header_image_allinoneseopack

(参照元: http://wordpress.org/extend/plugins/all-in-one-seo-pack/ )

header_image_batcache

(参照元: http://wordpress.org/extend/plugins/batcache/ )

header_image_bbpress

(参照元: http://wordpress.org/extend/plugins/bbpress/ )

header_image_buddypress

(参照元: http://wordpress.org/extend/plugins/buddypress/ )

header_image_cachify

(参照元: http://wordpress.org/extend/plugins/cachify/ )

header_image_contactform7

(参照元: http://wordpress.org/extend/plugins/contact-form-7/ )

header_image_debugbar

(参照元: http://wordpress.org/extend/plugins/debug-bar/ )

header_image_developer

(参照元: http://wordpress.org/extend/plugins/developer/ )

header_image_dynamictotop

(参照元: http://wordpress.org/extend/plugins/dynamic-to-top/ )

header_image_editflow

(参照元: http://wordpress.org/extend/plugins/edit-flow/ )

header_image_feedbackchampuru

(参照元: http://wordpress.org/extend/plugins/feedback-champuru/ )

header_image_flamingo

(参照元: http://wordpress.org/extend/plugins/flamingo/ )

header_image_getsnarky

(参照元: http://wordpress.org/extend/plugins/get-snarky/ )

header_image_himegoto

(参照元: http://wordpress.org/extend/plugins/himegoto/ )

header_image_hotfic

(参照元: http://wordpress.org/extend/plugins/hotfix/ )

header_image_hyperdb

(参照元: http://wordpress.org/extend/plugins/hyperdb/ )

header_image_ichigensan

(参照元: http://wordpress.org/extend/plugins/ichigen-san/ )

header_image_jetpack

(参照元: http://wordpress.org/extend/plugins/jetpack/ )

header_image_palldaddypolls

(参照元: http://wordpress.org/extend/plugins/polldaddy/ )

header_image_primestrategypagenavi

(参照元: http://wordpress.org/extend/plugins/prime-strategy-page-navi/ )

header_image_pstaxonomyexpander

(参照元: http://wordpress.org/extend/plugins/ps-taxonomy-expander/ )

header_image_recipress

(参照元: http://wordpress.org/extend/plugins/recipress/ )

header_image_seoultimate

(参照元: http://wordpress.org/extend/plugins/seo-ultimate/ )

header_image_google

(参照元: http://wordpress.org/extend/plugins/simple-google-connect/ )

header_image_thewpbooster

(参照元: http://wordpress.org/extend/plugins/wpbooster-cdn-client/ )

header_image_tinymceadvanced

(参照元: http://wordpress.org/extend/plugins/tinymce-advanced/ )

header_image_tumblrimporter

(参照元: http://wordpress.org/extend/plugins/tumblr-importer/ )

header_image_videopress

(参照元: http://wordpress.org/extend/plugins/video/ )

wordpressfilemonitor

(参照元: http://wordpress.org/extend/plugins/wordpress-file-monitor-plus/ )

header_image_wordpressseo

(参照元: http://wordpress.org/extend/plugins/wordpress-seo/ )

header_image_wpfacebookapp

(参照元: http://wordpress.org/extend/plugins/wp-facebook-applications/ )

header_image_wpsitemanager

(参照元: http://wordpress.org/extend/plugins/wp-sitemanager/ )

header_image_wptotalhack

(参照元: http://wordpress.org/extend/plugins/wp-total-hacks/ )

header_image_wpwappuwidget

(参照元: http://wordpress.org/extend/plugins/wp-wapuu-widget/ )

header_image_yetanother

(参照元: http://wordpress.org/extend/plugins/yet-another-related-posts-plugin/ )

デザイナーの皆さん！

いつも使っているプラグイン！開発者のためにヘッダー画像を作ってみませんか！
まだまだヘッダー画像が設定されていないプラグインがたくさんあります。
まず開発者にコンタクトを取ってみるのもひとつの貢献ですよ！

以上。
今後、皆様の作業が少しでもスムーズになるよう、お役に立てればいいなと思います。

 

著者情報

WPD-Brown
右脳専門！感覚だけのデザイナー人間！