アイキャッチ画像の重要性
知っている人は知っている。はてなブログに画像を載せる方法を紹介します。画像、特に最初に表示する画像は記事のアイキャッチとして使われるのでとても重要です。
追記 変更できるようです。
「アイキャッチ画像」機能を追加しました。注目のエントリーなどに表示される画像が指定できます - はてなブログ開発ブログ
しかし普通に画像を載せるとなると素材サイトから探してきてダウンロードしてPCから貼付けて……という風になりとても大変ですよね。こんなのやってられねーよとブログの更新をやめてしまう原因にもなり得ます。
しかし!はてなブログは画像を載せるあらゆる手段が揃っています。記事編集の右の欄にずらーっと並ぶアイコンたちの一部がそうです。
※めっちゃある……。
こいつらを使いこなせばあなたのはてなブログライフはさらに快適なものになるでしょう。それでは紹介していきます。
写真を投稿
自分のPC上に保存してある写真を貼付けます。はてなフォトライフに投稿してから貼付けるという形式も出来ますが直接投稿することが可能です。やり方は写真を投稿アイコンをクリックして「+写真を投稿」ボタンを押しあとは画像を選ぶだけ!簡単です。
これが一番役に立つのはスクリーンショットを載せるときです。macの場合はコマンド+シフトを押しながら4(う)を押すと楽に撮れます。windowsの場合は詳しくは分からないので調べてみてください。
絵を描く
じぶんでかいた落書きを載せることが出来ます。筆のアイコンをクリックして「+絵を描く」ボタンを押します。
模式図を簡単に書けるようなサービスが欲しいなあ。
画像加工アプリのinstagramに投稿した写真を自分のブログに貼付けることが出来ます。僕の書評記事のアイキャッチ画像もこれを使っています。スマホで撮った写真をすぐに載せることができるので便利です。連携方法は以下の記事を参照してください。簡単に出来ます。
Instagramの写真をブログに貼ろう! 編集サイドバーに「Instagram貼り付け機能」を追加しました - はてなブログ開発ブログ
またアップロードする際の画像のサイズははてな記法の場合
[(URL):image=(URLその2)?size=l]
と表示されますがここのsize=の後の文字によって変更可能です。「t/m/l」を使います。
sizeに入れられる文字は?
「"l"の次に"m"ときたら"s"だと思った? 残念! "t"でしたー」・・・どうも「thumbnail」の略みたいです。それぞれのパラメータ値に対応する画像サイズは以下の通りです。459x459が欲しいところですね。
値 サイズ t 150 x 150 m 306 x 306 l 612 x 612 はてなブログでInstagramから表示する画像の大きさを縮小してファイルサイズを圧縮する方法 - 情報学の情緒的な私試論β
amazon
amazonの商品を画像つきで紹介すればそれがアイキャッチ画像になります。編集バーのamazonアイコンから商品を探して貼付けましょう。ただそれで出来たリンクは直接amazonへは飛ばずに一旦はてなのamazonページを経由します。アフィリエイトを行っているひとにとっては残念なことです。
はてな記法のAmazon商品紹介がはてなキーワードにリンクされるのでブックマークレットで直接リンクを生成するようにした話 - 情報学の情緒的な私試論β
この方の記事ではAmazonHTMLメーカーを推していますがぼくはamazletをおすすめします。
商品を検索して「この商品のリンクを作る」ボタンを押すと商品情報リンク、テキストリンク、イメージリンク、商品情報リンク(画像大)、イメージリンク(大)、商品情報リンク(レビューなし/スタイルなし)という種類別にコードが出てきます。あとはそれをコピーして貼付けるだけ。
flickr
画像投稿サイトのflickrもボタン一発で利用できます。「●●」アイコンをクリックしてキーワードを入力しましょう。海外のサイトなので日本語より英語で検索した方が画像がたくさん出てきます。(トマトよりtomato、ピザよりpizza、仏陀よりbudda)
イイネ!
おわりに
書いているうちに載せる方法を紹介したいのはただの画像に対してなのかアイキャッチ画像に対してなのか分からなくなってしまいました。
いろんな方法があるんだなあと思っていただければ幸いです。またいづれまとめます。
※月曜なのに書評記事ではないのは日、月と旅行に行っているためです。今(日曜の午前五時)のうちに下書きをしてあとで投稿する予定です。今週は火、水、金曜日に書評記事を書きます。ぜったい!