ブログ

簡単!横長アイキャッチ画像をStinger / wordpressの記事一覧に埋め込んで見やすくしよう!

投稿日:

IMG_4846

Stinger6を愛用させてもらっています。無料とは思えない本当に使いやすいブログテンプレートなんです。

でも、たくさんの人に使われすぎているために、インストールしただけだと他の人と同じデザインになりがちなんです。

なので、多少カスタマイズを加えることで他の人と差別化していきたいですよね。

今回デザインを決める上で重要なアイキャッチ画像を変更してみようと思います。

とても簡単にできますし、丁寧に説明していくのでぜひ参考にしてもらえると嬉しいです。

一応、ほとんどのメジャーな携帯、パソコンサイズでテストしてみたのでしっかり指示に従って貰えればstinger / wordpress の基本デザインを崩すことなく安心して使えます。

スポンサーリンク

見やすくしよう!

Stingerのほとんどのテンプレートをインストールすると正方形のアイキャッチ画像が記事一覧に表示されます。ちなみにこれが私のブログの変更前です。

IMG_4845

最終的には、正方形ではなく横長のアイキャッチ画像を記事一覧に表示します。最終形は、この記事の一番上の画像を参考してください。

見た目的にもすっきりしますよね。正方形だと妙なスペースが記事タイトルの下に出来てしまい、特にスマートフォンの表示だと位置画面で表示できる記事数が2.5記事ぐらいになってしまいます。

でも私の変更後だと、3.3記事ぐらいまで表示できてより見やすく感じますよね。

それにスクロール数も少なく済むのでユーザーにも優しいです。

 

ステップ1

ということで早速、初めてみましょう!

まず一番需要なfunction.phpを変更していきます。

wordpressのテンプレートを使っているいる人はこんな記述があります。

add_image_size( ‘st_thumb100’, 100, 100, true );
add_image_size( ‘st_thumb150’, 150, 150, true );

この下にこれを記述してください。150は横幅、100は縦幅です。このサイズは自由に決められますがstingerを使っている方だと横幅は150と決められているので縦幅を買えることで横長のアイキャッチを作ります。

add_image_size( ‘yokonaga_eyecatch’, 150, 100, true );

yokonaga_eyecatch っていうのは私が決めた名前なので好きな名前にしてくれて構いません。最後の’true’というは写真を縮小しないで切り取るという意味です。なので、これはそのままにしといてください。

 

ステップ2

次にitiran-thumbnail-on.phpを変更します。以下の記述を見つけてください。

ここのst_thumb150はさっきのfunction.phpにありましたよね。これをyokonaga_eyecatch(もし自分で名前を設定したならその名前を設定してください。)私の場合変更したらこうなりました。

 

まとめ

これだけで終了です!どうでしたか?たった2つのラインを変更するだけで見た目が良くなるので是非自分でブログをやっている方は、試してみてくださいね!

この写真はデスクトップで私のブログを見た時です。写真の下に若干スペースが出来てしまいましたが、記事タイトルの下に出来るよりかは全然良いかなと思っています。ココらへんはもう少し改良の余地ありですね。続きは次の記事に!
Screen Shot 2016-03-19 at 11.08.16 AM

関連記事

トラッキングがインストールされていません / Tracking Not Installed (Google Analytics)

グーグルアナリティクスをはてなブログに導入しようとしてみたけれど、データがうまく反映されていないことがありました。同じ経験する人が必ずいると思ったので、シェアしておきます。 スポンサーリンク

簡単に、”続きを読む”ボタンの見栄えを良くする

はてなブログのトップページにある記事をすばやく閲覧してもらうために、”続きを読む”ボタンを配置しておく方は結構多いと思います。このボタンを追加するのは簡単で、以下の画像のように、文章中のどの箇所でもよ …

簡単にはてなブログにナビゲーションバー【カテゴリー】を追加する。

ナビゲーションバーとは、ウェブサイトのトップにあり、カテゴリーに素早くアクセスさせることが可能です。ある特的の記事に興味がある人が見に来てくれた時でも、このナビゲーションバーで気になる記事だけチェック …

私が使っているブログ設定、テンプレート選び、デザイン、プラグイン等を公開します!

ブログの設定、デザイン、会社選びなどについて質問されることが多くなってきたのでここでまとめておきます。 ブログを初めて間もない方、初めようと思っている方、分からないことが多いと思うのでなるべく丁寧に解 …

超簡単!Facebookページをwordpressに表示するには

wordpressはてなブログと違い、孤立しがち。TwitterやFacebookなどのSMSと連携していことで、閲覧数を増やすことが可能です。 ということで、以下のようなFacebookをページをサ …


2008年から2年間オーストラリアにワーホリ、留学。卒業後、シドニーでIT関連の仕事につく。結婚し子供が生まれたばかり。オーストラリア旅行、生活に役立つ情報を中心にシドニーからブログを書いてます。詳しいプロフィールを見る。