2017.02.24スポンサーリンクブログにとって画像(写真)を掲載することって大切ですよね!もちろん文章だけで伝える事ができる人は良いですが、文才の無い僕の場合、画像の力を借りて何とか表現しています。使ってるし^^;しかし、はてなブログの画像には問題があります。それは、alt属性を編集できないのです。※編集モードを「みたままモード」にしている場合には、画像を挿入後、「HTML編集」で修正すれば可能です。alt属性とは、画像の上にマウスを置いた時に表示される代替テキストですね!何故alt属性が必要かというと、検索エンジンに、掲載している画像がどのような画像なのかを認識してもらう必要があるからです。何も設定していないとそれだけでSEO的にマイナスです。down」と「はてな記法」モードでは画像タグの編集が出来ません。挿入される画像タグ例[f:id:kasakasa7970:20160408145241g:plain]上記のタグをブラウザからソースを確認するとこのようになります。itemprop="image"></span>肝心のaltはf:id:kasakasa7970:20160408145241g:plainなんじゃこりゃ!?こんなコードを入れるぐらいなら、まだ空にしておいてくれた方が良いぐらいです。downモード」を使用していますが、なんとか、この挿入された画像にalt属性を付けられないかと思い、調べては試し、調べては試しを繰り返しましたが、出来るわけもなく...。残骸はこちら[f:id:kasakasa7970:20160408145241g:plain:カツヲ][f:id:kasakasa7970:20160408145241g:plain:"カツヲ"]![カツヲ](f:id:kasakasa7970:20160408145241g:plain)"カツヲ")![カツヲ]([f:id:kasakasa7970:20160408145241g:plain]"カツヲ")そしてついに見つけました!僕の悩みを解決してくれる神ツールを!それも2つ!!いいたいよ~はやくいいたいよ~はてなブログで画像の「alt属性」を編集する方法をいいたいよ~僕の好きなネタ、レイザーラモンRGさんの「あるあるはやく言いたい~♪」風に書いてみましたが、ウザいですね^^;スポンサーリンクそれでは、説明します。画像の「alt属性」を編集する方法はてなフォトライフ2HTMLこちらの方法は、画像をアップロードした際に保存される「はてなフォトライフ」の画像を「ブックマークレット」を使ってHTMLに書き出す方法です。やり方はとっても簡単です。ご自身のフォトライフに移動します。画像一覧より書き出したい画像をクリック。すると選択した画像の拡大ページに移動します。そこで、予めブックマークに保存しておいた「ブックマークレット」発動!その画像のHTMLコードが生成されるので、そのコードをブログの編集画面にそのまま貼り付けて、「alt属性」と「title属性」の名前を変更したら完成です。※「title属性」はFirefoxなどのブラウザで表示される代替テキストです。はてなフォトライフの仕様変更に対応して一部サンプルコードとブックマークレットソースを修正しました。はてなフォトライフへ保存した画像ファイルを、はてなブログに埋め込む時って、外部エディタを使ってるとHTMLを生成しないといけ...tar.blogru.me作成してくださった「tar@メガネ男子(id:tarVolcano)」さん。本当にありがとうございます。このツールを使わなくても、フォトライフに行って、画像のURLを取得してHTMLコードで記述すれば可能ですが、それでは、画像が大きい場合の拡大処理等の記述を追加しなければいけません。それなら、絶対このツールを使ったほうが便利ですよね!次に2つ目の方法です。_)mこちらは使用できるブラウザが限定されますが、こちらも“神ツール”です。はてブロimageTitleまず、説明する前に、こちらの方法はブラウザの拡張機能を使う方法なので、お使いのブラウザが「Chrome」もしくは「Firefox」の方が対象となります。「はてブロimageTitle」の一番のメリットは、はてなブログの編集画面から、直接操作出来ます!なんと!!僕は「Chrome」を使っているので、「Chrome」のやり方を紹介します。「Chromeのウェブストア」より「はてブロimageTitle」へ移動します。ブラウザに追加して下さい。以上です!え!?以上です。え、え!?すいません、ちょっと説明不足でしたね^^;「はてブロimageTitle」をブラウザに追加して、はてなブログの編集画面のサイドメニュー「写真を投稿」を選択すると以下のように変わっています。すごく気になる「?」マークのお出迎えですw(このように変わっていたら正常に追加されたと思って下さい。)後は、簡単です!新しい画像でも、既にアップロード済の画像でも構いませんので、掲載したい画像を選択して下さい。赤枠で囲っている箇所に好きなタイトルを入力して変更ボタンを選択。後はいつも画像を掲載するように、メニュー下の「選択した写真を貼り付けより」画像を挿入すると、alt属性とtitle属性が変更された状態で書き出されます。"はてブロimageTitleのの設定例")基本的な使い方は以上です。他にも細かい設定も出来ますので、詳しくは下記をご覧ください。すなばいじりはてなブログでは、fotolifeを使って画像を貼り付ける事ができるけど、タグとかよく分からないし、もっと簡単に意味のある説明文やタイトルにしたいなぁ。psn.hatenablog.jp作成してくださった「すなばいじり(id:psne)」さん。本当にありがとうございます。まとめ僕はブラウザがChromeなので、「はてブロimageTitle」の方が使いやすいように思いますが、どちらも簡単にalt属性を変更出来るので助かります。過去の記事のalt属性を変更するためにいろいろと考え、一度、記事をエクスポートして、テキストエディタ等でalt部分を修正し、そのデータをインポートすれば、過去の記事も効率よく変更できるかと思いましたが、この方法は無理でした...。上書きされるのではなく、同じ記事が2つ出来てしまうので、ご注意下さい。今まで、先で説明したように公式の方法では、alt属性を編集することが出来ませんでしたが、はてなブログの機能拡張により編集出来るようになりました。はてなブログ開発ブログはてなブログでは、はてなフォトライフに投稿した画像を表示するはてな記法(fotolife記法)を拡張し、画像(img要素)のtitle属性とalt属性を指定できるようにしました。staff.hatenablog.comスポンサーリンクスポンサーリンクはてなブログSEOシェアするTwitterFacebookはてブPocketLINEコピーフォローお願いします!スポンサーリンクカツヲ晴れ時々晴天なり関連記事はてなブログはてなブログ|サイドの関連記事を記事下に表示する方法!内部リンク強化にも効果的!はてなブログで関連記事を記事下に表示する方法はいろいろと試してきましたが、Javascriptを使ってHTMLとして表示する一番良い方法を見つけました!はてなブログ祝!読者100人達成!皆さんありがとう!はてなブログの運営を開始して6ヶ月。読者さんが100人を突破しました!はてなユーザーさんだけで100人達成出来たことは本当に嬉しい限りです。そこで、読者登録して下さっている方の中から数名の方を紹介させていただきたいと思います。はてなブログはてなスターを外して1週間。孤独感から解放されたいけど卒業します!こんにちは、最近孤独になったカツヲです。実は1週間ほど前にこのブログの「はてなスター」をしれ~っと外しました。ブログを初めて1年半。グループに登録しませんか?はてなブロググループで「個人事業主」を作りました。アクセスアップにもつながると思いますのでよろしければご参加下さい!はてなブログはてなブログ|管理画面で読者一覧が確認できるようになったよ!はてなブログの管理画面(ダッシュボード)に読者一覧を確認出来るようになったようです。はてなブログはてなブログ|カテゴリーのタイトル編集機能を使って広告を掲載する方法!はてなブログに「カテゴリー別記事一覧で、ページのタイトルや説明文をカスタマイズ出来る」機能が追加されました!この機能自体すごく便利なのですが、もう一つ大きなメリットがあります。それはカテゴリーページに広告(AdSense)を掲載出来る点です。はてなブログはてなブログの大見出しが<h2>ではなく<h3>なのか?SEO的にも変更すべき!はてなブログでは「大見出し」を選択すると<h3>となりますが、疑問が浮かび上がります。それは<h2>の存在です。SEO的にも<h>タグは順番が重要とされていて上記のように歯抜けになっている場合、ペナルティにはならないまでもマイナスな評価を受ける可能性があります。はてなブログはてな15周年記念の「はてなTシャツ2016」を買おうかな。はてなTシャツって知ってますか?全く存在を知りませんでしたが、毎年?販売されてるんですね!今年は「はてな15周年」記念デザインらしく、昨年から「はてなブログ」でブログを書いているので記念に買おうかどうか悩み中です。カラーはグレーとブルーの2色。デザインはあまり好みではありませんが、値段も2,160円(税込)で送料無料もなのでTシャツとしてはまぁ安いほうかな。はてなブログはてなブログProに変更しました。変更してよかった!この度、はてなブログProに変更しました。はてなブログproをご存知無い方に簡単に機能の説明を書いておきます。キーワード自動リンクオフ...はてなブログYahoo!検索もAMPに対応するのならAMP対応をもう一度試してみるの巻はてなブログがAMPに対応して随分経ちましたが、Yahoo!検索もAMPに対応することを発表したようです。Yahoo!も対応となると見過ごせません!もう一度僕のブログもAMPに対応してみます!はてなのブログカード風にリンクをカスタマイズする方法!Yahoo!検索もAMPに対応するのならAMP対応をもう一度試してみるの巻カツヲ40代3児の父でサラリーマン。個人事業主でもありアルバイトもしています。しても開業→会社員+個人事業+アルバイトの三足のわらじで生計を立てています。フォローお願いします!スポンサーリンクよく読まれている記事はてなブログをAMPに対応する時の注意点!設定・デザイン・広告まとめ2017.04.032019.08.02はてなブログ|画像の「alt属性」を編集する方法!これでSEO対策もバッチリ!2017.02.242019.08.07はてなブログのAMP用CSSを試してみました!2017.03.312019.08.02はてなブログに楽天商品紹介機能が追加!2016.05.242019.08.07はてなのブログカード風にリンクをカスタマイズする方法!2017.02.092019.08.08新着記事パグ犬よもぎのInstagramとYoutube始めました!2019.10.172019.10.31写真で振り返る、姫路・神戸観光1泊2日の家族旅行2019.09.23自虐ネタで大盛況?姫路セントラルパークの混雑事情2019.09.19ありがとう!はてなブログ。2015年11月サイト内検索よく読まれている記事はてなブログをAMPに対応する時の注意点!設定・デザイン・広告まとめ2017.04.032019.08.02はてなブログ|画像の「alt属性」を編集する方法!これでSEO対策もバッチリ!2017.02.242019.08.07はてなブログのAMP用CSSを試してみました!2017.03.312019.08.02はてなブログに楽天商品紹介機能が追加!2016.05.242019.08.07はてなのブログカード風にリンクをカスタマイズする方法!2017.02.092019.08.08はてなブログ|表示速度が遅いので改善するまで足掻いてみた!2016.10.262019.08.07はてなブログ|アクセスアップの為にやっておきたいグループ登録2016.01.262019.08.08ありがとう!はてなブログ。4年間クソお世話になりました!2019.09.12はてなブログ|記事の直下に広告を掲載する方法2016.01.202019.08.07ページの表示速度|Googleの指示通りに改善したけどこれがはてなの限界ですか?!2017.08.182019.08.08新着記事パグ犬よもぎのInstagramとYoutube始めました!2019.10.172019.10.31写真で振り返る、姫路・神戸観光1泊2日の家族旅行2019.09.23自虐ネタで大盛況?姫路セントラルパークの混雑事情2019.09.19ありがとう!はてなブログ。ダイエットAMPプール姫路城メリケンパークパグ犬YoutubePHPInstagram著者カツヲ40代3児の父でサラリーマン。個人事業主でもありアルバイトもしています。しても開業→会社員+個人事業+アルバイトの三足のわらじで生計を立てています。検索タイトルとURLをコピーしました。