卓上冒険

卓上でわくわくするだけ・超コスパ系ライフハック

はてなブログのアイキャッチ・横長と正方形を両立してみる

はてなブログのアイキャッチ画像は2種類

こんにちは! 卓上冒険中のさあです。

 

はてなブログには「アイキャッチ画像」が設定できます。

「ブログのデフォルトのアイキャッチ画像」と「記事別のアイキャッチ画像」、

2種類設定できます。

 

こんのぉ…初心者風情が!って言われてOKな私調べ。

 

「デフォルトのアイキャッチ画像」はブログ単位で設定できるやつ。

うちのは、これです。

ブログがただ更新された時とか、紹介では、これが出ます。

f:id:sakkaonline:20180106114614g:plain

 

「記事毎のアイキャッチ画像」は、普通はその記事で使われた1枚目の画像。

記事ごとに編集オプションで指定すれば、その画像になります。

 

今回は、こういったものを用意しました。

はいペタ

f:id:sakkaonline:20180106125737j:plain

  

 

設定したアイキャッチ画像が表示される先を考えた

記事を公開すると、最新記事とかに記事タイトルが出たりする。

はてな内ですね。

そこに、そっと表示されるわけでありますが…

 

TwitterやFacebookに「記事が更新されたよ」って連携する人は、

そこにも、そっと表示されるわけですが…

 

サービスによって使われ方が違う、サイズが違う。

というわけで、アイキャッチ画像はけっこう見切れる。

見切れるので、文字を入れにくい。

あとなんか、とにかく、いつもダサい感じになる。

 

 

世界標準がほしいなあ。

でもそういえば、昔(15年くらい前)のWEBサイト運営でも、

リンクバナーは〇〇×〇〇でお願いします、みたいなことあったな。

つか当時は〇〇が2ケタだったりしたものですが。

200×20ピクセルでお願いします、みたいなことやってたな。

 

16:9くらいが良いと聞いたので試してみる。

そいで作ったのが、この記事のトップの投げやりすぎるこいつです。

なんで2回も貼るの?

って言われそうだけど…

 

すごいやっつけで作ったとはいえ、作ったもんだから、

貼りたいじゃん? えいペタ

 f:id:sakkaonline:20180106125737j:plain

 

Twitterとかでは完璧、でも1×1だとやっぱり見切れる

Twitterに流してみたら、確かにきれいにハマってました。


f:id:sakkaonline:20180106134812j:image

 

でも正方形で表示されるところでは当然見切れます。

「卓上冒険」っていう文字は左右ちゃんと入るけど。

 

この画像で、「卓上冒険」の横幅に合わせて、

中央にめっちゃ寄せて文字書くって、なんか、

余白の力、信じすぎててやばいよね?

左右、めっちゃスッカスカなるじゃん。

それは、悲しい…

 

あ、絵にすればいいのか!?

 

16:9と1:1の両立を目指す

あと、そもそもこのブログをPCで横長に表示すると、

画像の右側に余白ができて、

そもそもPC上でダサい気がするという問題も発生中。

 

発生中だけど、もう、何がダサいのか、

何がかっこいいのかもわからなくなってきた。

 

でもとにかく、こうなる。

左右余白ガン

中央だけ文字ドン はいペタ

f:id:sakkaonline:20180106131835j:plain

 

PC画面上の記事タイトル画像にはちょいダサなのか

知らんけどそんな気がする。

あともう何ていうか、どうせ記事の画像使われるから、

もうデフォルトの画像、いるの? いらなくない?

正方形のコマの時はデフォルトのほう使ってくれればいいのに。

上のほう。

 

仕方ないので、余白に意味がある風を装ってみた。

見切れてもバックの猫画像が意味ありげに見切れるだけ。

f:id:sakkaonline:20180106132821j:plain

一応これが現状の、横長・正方形どっちも両立サイズ。

 

おとなしく写真貼っとけよって言われそうだけど…