いつまで仕事してるの!ゲームしなさい!スマートフォン用の表示で見るいつまで仕事してるの!ゲームしなさい!ゲームで育った姉弟による、大人になってもゲームを楽しむブログ。画像検索のために、はてなブログでもalt属性をつけよう!正しい書き方の確認2017-10-04画像検索のために、はてなブログでもalt属性をつけよう!正しい書き方の確認ブロガー向け【2017年12月13日更新】ゲーマー姉弟の64弟(@64_oto)です。このテーマは難しそうに見えるかもしれませんが、実際はカンタンです。はてなブログにアップしている画像ひとつひとつに、それぞれ『alt属性』を設定してあげましょう。検索エンジンに対して親切なページになりますし、画像検索に引っかかりやすくなります。ないとマズイの?『alt(オルト)属性』とは、画像に付けてあげる説明文のようなものです。画像一枚一枚につけるべき必須の属性です。はてなブログでは一応、デフォルトで個々の画像にalt属性がつくようになっているので、セーフではあります!でもその内容が全く意味のない記号の羅列になっているので、自分で書き直したほうがいいです。画像の赤字下線の部分がaltです。検索エンジンに画像の情報を認識してもらう(画像検索につながる)画像がリンク切れなどで表示されなかったときに、代わりにaltの内容が文字で表示されるボタン画像など、画像にリンクが張ってある場合、そのalt属性がリンクテキスト同様の扱いになる目の不自由な人のための代用テキストとなる(音声ブラウザが画像の代わりにalt属性を読み上げる)altの効果についてもっと詳しく知りたいときは、こちらが参考になります。HACKS]alt属性の書き方とSEO効果教えます『title』ってのもあるけど必要ある?『title(タイトル)属性』は画像に対する補足説明をする役割になります。これは必須ではなく、つけたいときにだけつけるオマケだと思っていいです。つけた場合、画像にカーソルを乗せるとふきだしでその内容を表示してくれます。PCでしか見ることができないので、スマホだと意味がありませんね。画像の赤字下線の部分がtitleです。ちなみに僕のブログでは全く使っていません。スポンサーリンクはてなブログで画像の『alt』はどうやってつけるの?『冬に聴きたい任天堂ゲームミュージック10曲メドレー』の記事で使った画像で説明します。【はてな記法、Markdown法の場合】カンタン!コードをちょいと足すだけ記事編集画面で画像の貼り付けをするとこういうコードがでますよね。編集画面上でのコード[f:id:gamestart:20170927185704j:plain]記事に反映される画像このデフォルトのままだと、altとtitleにそれぞれ『画像のコード名そのまま』が勝手に付いている状態です。前に以下を付け足すだけです!:title=:alt=●●●●(辞書登録しておくといいかも!)titleはナシ、altは●●●●に書き換え、という意味です。例のマリオの画像ではこういう記述にしました。「スーパーマリオ64よりさむいさむいマウンテン」というaltが付いた状態になっています。ソースを確認してみましたが、ちゃんとaltも反映されていました!僕はtitleいらないなと思って空欄にしましたが、付けたい場合は(title=マリオ)といった感じに文言を記述すればOKです。下記の例では、titleにマリオのセリフを入れてみました。編集画面上でのコード[f:id:gamestart:20170927185704j:plain:title=マリオ「ヤッフゥー!!神曲!」:alt=スーパーマリオ64よりさむいさむいマウンテン]記事に反映される画像PCの場合、カーソルを乗せるとマリオのセリフが出るようになっています。参考リンク:公式『はてなブログ開発ブログ』による説明staff.hatenablog.com【見たままモードの場合】カンタン!ちょいと書き換えるだけ※PCからの操作方法で説明しております。スマホからではできないようです(もしやり方があれば教えていただけると嬉しいです!)はてな記法、Markdown法と違って、見たまま編集の場合では画像がそのまま貼られます。編集画面上での見栄えこのただ画像を貼っただけの状態では、altとtitleに変なコードが入ってしまっています。PCで画像にカーソルを乗せたとき、titleが表示されてしまいます!これはいりませんよね><なので今から編集してこの2つをやっつけちゃいましょう!titleを消すaltを正しくする編集画面左上にある『見たまま』になっているタブを、『HTML編集』に切り替えます。するとこのようなコードがズラッと並んだ画面になります。見慣れていないと「うわっ、なんか複雑そう」と難しく考えてしまいますが、カンタンです!title=の後ろ、赤字下線の部分をダブルクォーテーション("")を残して消します。一つの赤字下線の部分(alt=の後)には、適切なテキストを入れます。できた!これで完成です!スポンサーリンクaltでは具体的に何て書けばいいの?『画像の代わりのテキスト』という意識で書くと、親切なaltになると思います。僕は画像検索用のキーワードを考慮しつつ、目が見えない人に伝える気持ちで書いています。関係ない内容は書かないようにします。僕が以前までやっていた悪い例を紹介します。さむいさむいマウンテン......検索に引っかかりやすいよう、関連性のある単語をいくつも書き連ねていたんですね......。これだと最悪の場合、Googleからスパムだと認識されてしまって、検索順位を下げられてしまう危険性があります。この画像はどういうaltがいいかなせっかくなので例題を用意してみました!これでaltの付け方のイメージがわかりやすくなるでしょうか。例題1◯ケーキ◎お皿に乗った苺のショートケーキ写真を使う流れによっては、例えば「カフェのイメージ」や「ケーキセットの写真」など、他の言い方が適している場合もあります。KEY」は画像の説明としては不要だと思うので書きません。例題3◯マリオ◎マリオの魔法陣の絵altの書き方の理解をもっと深めたいときは、こちらの記事がとても参考になります。Imagination!ブログ画像1枚1枚にaltをつけるのは面倒かもしれませんし、はてなブログでは一応無視したままでも問題ではありません。»64姉弟(ロクヨンしてい)プロフィール「私たち、ゲームのために会社を辞めました」アネ美術担当(Twitter)オト音楽担当(Twitter)元社畜ゲーマーの64姉弟と申します。姉(アネ)と弟(オト)の二人組です。大人になっても小学校の放課後のような日々を送るブログ。64姉弟スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。