ブログ

簡単!横長アイキャッチ画像を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

関連記事

はてなブログからwordpressへの移行の仕方【2015】

以前、はてなブログからwordpressに移行した理由を書いたので、移行の仕方についても書きます。自動化できたので、以外に簡単でした。 スポンサーリンク はてなブログエクスポート まず、はてなブログか …

超簡単!記事中の見出し【サブタイトル】を自動的にもっと見やすくする!

はてなブログはフォントの大きさなどもちょうどよくて気に入っているんですが、他の人のブログを読んでいると、あーこんなんいいなぁと思うことがありまして、、 そのうちの一つがこれ!サブタイトル、見出しという …

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

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

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

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

ソースコード【html, css】をはてな記法で記事中に表示がどうしてもできない時の解決法

ソースコードを記事の中表示させるっていうのは、結構いろんな方が説明してくれているんですが、どのページを見て、その通りにやってみてもできなかったので、もう諦めかけていたんですが、できました! たぶん、こ …

  • 2008年から2年間オーストラリアに留学。卒業後、シドニーでIT関連の仕事につく。留学中に出会った彼女と結婚しオーストラリアで生息中。ブログは「オーストラリア生活の予備知識」として、オーストラリア生活に役立つ情報を中心にブログを書いてます。 詳しいプロフィールはこちら!!