Things in the closet

ゴロ合わせは拝借&下ネタ満載ですのでご勘弁

 MENU

【はてなブログカスタマイズ】画像の設定

はてなブログで画像を投稿すると、記事画面で画像がクリックできるようになりますが、拡大されたり縮小されたりといまいち仕組みがよく分からなかったので調べてみることに。ついでに画像に関する基本事項や色々なカスタマイズもまとめました。

画像の投稿とサイズ変更

基本中の基本ですが、画像の投稿方法を。記事に写真や画像を貼り付ける(編集サイドバー「写真を投稿」) - はてなブログ ヘルプでも見れます。

① 右上の「画像を投稿」ボタンから投稿

② フォルダを開いて直接ドラッグ&ドロップで投稿

の2種類があります。②の方法であれば複数枚の写真を同時に投稿することも可能です。

画像の投稿

また、見たままモードの場合は投稿した写真をクリックして、角っこにカーソルを当てれば自由にサイズ変更ができます。

はてなフォトライフとリサイズ

 投稿した写真は何処にアップロードされるかというと、「はてなフォトライフ」というはてな専用のサーバーに保管されています。

そして、容量節約のために、長辺が1024pxを超えた画像は、自動的に1024pxにリサイズされる仕様になっています。1024以下であればそのままの大きさでアップロードされます。

staff.hatenablog.com

画像をクリックした際にはアップロード時の画像の大きさが表示されます。例えば、下の画像だと両方とも250×250pxに大きさを変えてありますが、元のサイズは150×150px600×600pxになっていて、クリックしてみると元の大きさが比較できると思います。

小さい葉っぱ大きい葉っぱ

 

ちなみにこの1024pxという値は変えることができて、はてなフォトライフの上にある設定を押すと、

はてなフォトライフ

 こんな画面が出てきます。ここの「画像サイズ」がデフォルトでは1024pxになっているので、もっと大きい画像をリサイズされずに使いたければ大きな値にすることが可能です。また、その下にある「画質」の項目では、100%のところを下げることで容量を多少軽減できます。以下の記事がとても詳しく載っています。

www.foxism.jp

alt属性とtitle属性

title属性というのは画像にカーソルを乗せたときに吹き出しで表示されるやつで、alt属性というのは画像が表示されない場合、あるいは音声ブラウザの際に表示される代替テキストのこと。クローラーは画像の内容を理解するためにaltの内容を読み込んでいるらしく、SEO的にはtitle属性よりalt属性の方が大事だそうです。

しかし困ったことに、はてなブログで普通に画像を貼り付けた場合、こんな感じになっています。

f:id:okotono:20170526213905j:plain

カーソルを乗せてみたら分かりますが、文字列が意味不明。実際にhtmlを見てみると、

title="f:id:okotono:20170526213905j:plain"

で、

alt="f:id:okotono:20170526213905j:plain"

となっています。これじゃあクローラーも何言ってるかわからないぞ。

変更の方法

見たままモードで編集していれば簡単で、html編集からお目当ての写真を探し出して、(ツールチップ=吹き出しのやつとかは別にらないので) title="~"となっているのを削除。alt="~"となっているやつを画像に即した題名に変えます。すると先程の画像から吹き出しが消えます(alt属性は「葉っぱのイラスト」としてあります)。

葉っぱのイラスト

ちなみにMarkdown記法やはてな記法の場合は下の方法で出来るようになったそうです。

staff.hatenablog.com

画像にホバーエフェクトを付ける

 デフォルトでは画像にカーソルを乗っけても、カーソルの形が変化するだけでとても寂しいので、ホバーエフェクトをつけると分かりやすくて良いでしょう。下のサイトを参考にさせていただきました。

www.nxworld.net

はてなブログで適用するときは、.entry-contentを前につければOK。このサイトでは半透明になるやつを使っていて、コードは以下のようになります。

.entry-content :hover img {
 opacity: 0.6;
}

opacityというので要素の透明度を指定していて、0.0 (完全に透明) から1.0 (透過なし)までの値で選択できます。

 

 

とりあえずこんなところかな…またおいおい追加するかもしれません。


HOME

人気記事

カテゴリ

Top