月無ことのは日記

月無ことのは日記

美少女ブロガー、月無ことのはちゃん(@tukinasikotonoh)の雑記ブログ!

月無ことのは日記

Twitterではてなブログのサムネイルを最適化させる方法

 どうも、月無ことのは(@tukinasikotonoh)です。

 今回は僕がはてなブログ用のサムネイル画像を作成する際の手順を、共有いたします!

 「その方法、もう知ってるよ!!!」って人が居たらゴメンナサイ。僕が独学で見つけた方法なのでもっと効率が良いやり方があるかもです。

 それでは早速、進行してまいります。

まずはサムネイルの画像サイズを知る

 上記の画像にも明記しているのですが、

はてなブログの記事をTwitterで共有する場合

表示される画像サムネイルのサイズは

「約504ピクセル×252ピクセルになっているんです! 

※参考画像↓

f:id:tukinasikotonoha:20161024001048j:plain

 ※表示されるサムネイルサイズは申請などをすれば変更できるみたいなのですが、手順が大変そうだったのでこの場では割愛します。

 ご存じの方も居ると思いますが、はなてブログにはSNSで表示される画像を自由に選択できる「アイキャッチ画像」という便利な機能が搭載されています。↓

f:id:tukinasikotonoha:20161024000951p:plain

 この設定項目で適切なサムネイル画像を選択すれば先ほど上部に載せた「※参考画像」のようにピッタリのサイズでTwitterに投稿できるわけです。

 サムネイル画像作成

 僕ははてなブログのサムネイル画像を作成する際、photoshopを使って

「1008ピクセル×504ピクセル」のキャンバスを用意します。

 ※簡単な画像加工なので他の画像編集ソフトでもできる工程だと思います。

f:id:tukinasikotonoha:20161024003111p:plain

「なんでわざわざ2倍のサイズにするの?」と疑問に感じる人も居ると思いますがこれは、はなてブログ内でサムネイル画像を適切なサイズで表示するためです。

1008ピクセル×504ピクセルで貼りつけておけば下の画像にように横一杯に表示されるのです。(赤枠内が画像)

f:id:tukinasikotonoha:20161024002655j:plain

  「そんなことしたら、Twitterに投稿する際にリサイズされて自分の表示したいようにできないんじゃ・・・」と不安に感じる人も居るでしょう。僕もそうでした。

 でも、安心してください。縦横幅の比率は同じで丁度2倍の画像サイズなので表示が崩れることは有りません。

 1008ピクセル×504ピクセルのキャンバスを用意したらサムネイルにしたい画像を配置してきます。

f:id:tukinasikotonoha:20161024003229j:plain

そして保存。

f:id:tukinasikotonoha:20161024003329j:plain

 文字入れの作業へと移行

 次に文字入れの工程です。

 僕は文字入れはphotoshop上では行わずにillustratorに移動させてから作業を行っています。

 まずはillustratorpsdファイルを読み込みます。

f:id:tukinasikotonoha:20161024004013j:plain

 無事にpsdファイルが読み込まれました。

f:id:tukinasikotonoha:20161024004044j:plain

 

 あとは、タイトルの文字を入れて完成です。(文字色悩む・・・)

f:id:tukinasikotonoha:20161024004331j:plain

 

 後は、作成した(1008ピクセル×504ピクセル)のサムネイル画像をはてなブログの記事を作成する際に、「アイキャッチ画像」に設定するだけで完了です。↓

f:id:tukinasikotonoha:20161024000951p:plain

 

 これで記事を公開した後にTwitterに投稿すれば、サムネイル画像が綺麗に表示されて完了となります。

 「画像に少しでもこだわりたい!」という人の参考になれば幸いです!

 それでは今回の紹介はここまでになります。

 

おわり。

関連記事

【2016年11月】Googleアドセンス審査通過+審査通過のためにやったこと

【お年玉の使い道】ココナラでイラスト依頼をしてオリジナルのアイコン作成!

【ブログで稼ぐ】おすすめのブログテーマ7選(はてな+Wordpress)