Picasaにアップした画像をalt属性を付けてブログに挿入する為の3ステップ!

Picasaにアップした画像をalt属性を付けてブログに挿入する為の3ステップ!

「記事に挿入する画像のaltなんてめんどくさくてつけてねーや」

以前の僕はまさにこれでした!でも、Picasaユーザーならこの「めんどくさい」を少しラクにする方法がありますよ!

こんばんは!
よっひー(@yosiakatsuki)です。

ブログに挿入する画像をPicasaにアップロードしてる方向けの記事になりますが、画像のalt属性をつけるのを簡単にする為に僕が実践してることを紹介します!

画像のaltタグをつけよう!

SEO関連の記事を読むと度々出てくるのが「画像のalt属性」の話。

正直alt属性をいちいち設定するのはめんどくさいのですが、僕はしっかりalt属性を設定するようにしています!

ブログで使う画像をPicasaにアップロードしてる方向けに、僕が実践しているブログに画像をalt付きで挿入する方法を紹介します!

ブログに画像をalt属性付きで挿入する方法!

利用するアプリ・サービス!

Picasaにアップロードした画像をalt属性付きでブログに挿入する為に、「PicasaHtml」というサービスを利用します!

iPhoneで利用することを想定したページの作りになってるようですが、PCブラウザからでも問題なく使えます!

画像のアップロードについては、僕はPCではブラウザからPicasaにアクセスしてアップロード、iPhoneからはPicportというアプリを使ってます!

まずは画像をアップロード!

ブログで使う画像をまずはアップロードします!

ここでポイントとなるのは説明を入力するということです!

Picasaのページからアップロードした場合は、アップロードした画像の下に「説明を追加」というリンクが表示されるので、クリックして説明を入力します!

Picasaの画像アップロードページで説明を挿入する

iPhoneからPicportを使用してアップロードする場合は「編集」から説明を入力します。

Picportの編集から写真の説明を入力する

ここで入力する説明は最終的にaltタグに設定されるテキストになります!

画像をアップロードする際は、アルバムの公開範囲の設定を「ウェブで一般公開」にしてください!

これで画像のアップロードは完了です!

PicasaHtmlのテンプレートを編集する!

PicasaHtmlの初期設定はこちら↓の記事を参考にしてください!

PicasaHtmlが使えるようになったら、テンプレートタグを編集していきましょう!

PicasaHtmlの「設定」ページ下部にある「フォーマット」を「カスタム」に変更します!

PicasaHtmlのフォーマットをカスタムに変更

この時、利用しているフォーマットをそのまま使いたい時は「Copy Preset to Custom」を押して、利用中のフォーマットをカスタムにコピーしておきます!

PicasaHtmlのプリセットフォーマットをカスタムにコピー

カスタムフォーマットのimgタグの中に「alt=”${description}”」を追加してください!

PicasaHtmlのカスタムフォーマットでimgタグにalt属性を出力するための記述をを追加する

カスタムフォーマットを入力したら左上の「保存」を押すのをお忘れなく!

コレでPicasaHtmlから画像にaltタグを設定した状態で画像のHTMLタグを吐き出すことができます!

細かいことは省きますが、カスタムフォーマットでは、いくつかの予約語を組み合わせて自由にフォーマットを作り変えることができるので、興味のある方は色々改造してみてください!

実際に画像のHTMLタグを出力してみる!

設定が完了したら、画像のHTMLタグを出力してみましょう!

目当ての画像をアップロードしたアルバムを選んで、「Get Photo」を押します!

Picasaのアルバムを選んでGet Photosを押す

すると、画像の一覧が表示され、ページの最後に「Show HTML」から出力されたHTMLタグを確認できます!

Picasaで設定した説明がaltに追加されていればOK

どうでしょう?altタグに入力した説明が入ってますか?

もし、狙い通りにHTMLが出力されなかったらPicasaHtmlのフォーマットを再度確認してみてください。

いかがでしょう。この設定をしておくだけで、アップロードの時に画像を見ながら説明をつけられるので、かなり作業効率は上がると思います!

Picasaユーザーのブロガーの方はぜひお試しあれ!

よっしーのひとこと

よっひー

カスタムフォーマットは編集する度にEvernoteなど、何処かにコピーして保存しておいた方がいいですよ!

ブラウザのアップデートで設定がぶっ飛んだってことも何回かありましたので…

モブログで利用する場合はさらに便利にPicasaHtmlを利用する為のスクリプトとブックマークレットを作りましたので、こちらも合わせてどうぞ!

ではまた。