#019 ブログに使用するアイキャッチのサイズを統一する

ブログに使用するアイキャッチのサイズを統一する ブログ発展記録
ブログ発展記録
スポンサーリンク

イントロダクション

前回の記事でも言いましたが、何日かトレースの実習にあてる事になりましたので暫く省エネ記事になります。(申し訳ございません)

と、いう事で今日は『アイキャッチのサイズを統一化しよう』というのがテーマらしいです。

今まで大体フリー素材をそのまんまのサイズで使用してきましたが、大きかったり小さかったりと、割とカオスな状態だったんですよね。

このサイズ感の違いが非常に見づらいという事で、この機に規格化して読みやすくしたいそうです。

……今まであんまり気にしてなかったんですが、予備知識を得てから過去の記事を読んでみると確かに違和感があります

そっかー、アイキャッチってトリミングしなきゃいけなかったんだー。

って、そういう事は早く言ってほしかったですわっ!!!

※追記。順次過去記事のアイキャッチ画像の差し替えをしております。

画像のトリミング方法を模索する

サイズを統一化する方法に関しては幾つもあるそうですが、師匠達と相談した結果、

まさかの手作業でやる事になりました!!!

……マジカー。

一応、WordpressのphpやらCSSとかをいじって『画像をアップロードする時に規定のサイズに強制的にトリミングしたりとかも出来る』との事ですが、設定した基準点でトリミングするので画像によってはとんでもない場所で切り取ってしまう事もあるそうで、完成度を考えれば手作業でやった方が良いとの結論に達しました。

って事で、まずはサイズの方ですが、検索してみたら1200×630pixelくらいが良いらしいので今後それで統一していこうと思います。

※画像規格の方は『PNG』というものに変換した方がいいとの事で、種類の違いがいまいち解りませんが、とりあえずそれにしておく事にします。

で、具体的なトリミング方法なんですが、『クリスタを使ってテンプレートを作り、それにアイキャッチの画像を合成する』という方法をとった方が効率が良いそうです。

では、次の項でさっそく作ってきましょう。

アイキャッチ用のテンプレートを作ろう

クリスタを起動して新規作成します。幅1200、高さ630、解像度は適当に70以上あればいいとの事ですが、私は無駄に350に設定しておきました。

で、ここに使いたい画像を入れて調整したらPNGで出力すれば完成です。

ただ、それだけだと味気ないですし、折角なのでちょっとだけ装飾してみましょう。

前に作ったヘッダーロゴとか流用して5分くらいでテンプレートを作成してみました。

こちらに使いたいアイキャッチ画像を入れて位置を調整すれば、下記のようになります。

うん。思いつきで超適当に作ってみましたが、そんなに悪くないですね。

サイズを統一化すると共に装飾もできますし、一石二鳥です。

ってな訳で、暫くはこちらのテンプレートを使っていこうと思います。

※追記。現在は異なるテンプレートに差し替えていますので使用されておりません。

今回の経費&記事作成時間

今回の記事作成時間&支出

記事作成時間:約2時間
(テンプレート作成を含める)

今回は難しい事を何にもしていないので割とサクサク出来ました。

まあ、裏でやっているトレース実習の方は普通に難航していますが。

では、恒例の累計出費&記事作成時間を発表して今回は終わりにしましょう。

最後まで読んでくださった方はありがとうございました。

現在までの総制作時間&累計支出

総制作時間:約77時間
累計支出:17,080円

タイトルとURLをコピーしました