Banguardサイトスマートフォン用の表示で見るBanguardサイト「ビジネスマンを応援するブログ」をテーマに、ビジネスに役立つ記事を書いています。この広告は、90日以上更新していないブログに表示しています。2012-02-19RSSアイコンが表示されないので、画像のアップロード先を「はてなフォトライフ」にしたら解決しましたBlog前回、「はてなブログでRSSアイコンを設置する方法」という記事を書きました。ChromeではなくSafariで記事を読み返していたところ、なんとRSSアイコン・Twitterアイコンともに表示されていないではありませんか!どうしたことかと思っていろいろいじってみたところ、どうやら「ブログに掲載する画像のアップロード先」に問題があったことが判明しました。悩んだ結果、はてなブログに表示する画像は、原則「はてなフォトライフ」へアップするのがおすすめだという結論にいたりました。今回はことの顛末と今後画像のアップで気をつけることについてお話したいと思います。はてなフォトライフとは?はてなブログでは、簡単に記事への画像の掲載ができます。数クリックで投稿できてしまうので、いったいその画像がどうやってWeb上に表示されているかわからないままでした。Webへの画像アップロードについての知識が不足していると、冒頭書いた「RSSアイコンが表示されない」といったミスが起きることが後になってわかりました。はてなブログに表示される画像は、はてなフォトライフから読み込まれるはてなブログの記事に表示される画像、いったいどんな仕組みで表示されているのでしょう?簡単に関係を表したのが、下記の図になります。ブログの記事に投稿しようとアップロードされた画像は一旦はてなフォトライフに保存され、はてなブログの記事からははてなフォトライフに保存された画像のデータを読み込みに行きます。はてなブログの無料ユーザーがアップロードできる画像の容量は、月間30MBまではてなブログは無料で利用できるブログサービスですが、アップロードできる画像の容量は30MBに制限されます。言え、毎日高画質の画像をアップし続けない限りは基本は30MBの範囲で事足ります。課金をすることでPro会員となり、画像のアップロード容量が月間1GBになったり広告が非表示になったりと様々な恩恵を受けることができます。気になる方はPro会員にアップグレードしても良いでしょう。ガイドページ|はてなブログ開発ブログRSSアイコンがSafariで非表示だった理由Safariでこのブログを開いたときにRSSアイコンとTwitterアイコンがともに表示されなかったのは、画像のアップロード先に問題がありました。僕は当初画像をDropboxに保存して、Dropboxのデータを読みにいっていました。その場合、同一ブラウザでDropboxにログインしている状態でブログを閲覧する必要があることが後からわかりました。SafariではDropboxにログイン状態になかったため、ブログ上では表示されなかったのです。いうことは、僕以外はDropboxログインID/PWを知らないため誰もブログ上でRSSとTwitterのアイコンが表示されていないということになります。解決方法は、「はてなフォトライフに画像をアップする」ことどうしたものかと悩んでいたのですが、はてなフォトライフに画像をアップすることで解決できました。「はてなフォトライフに画像をアップする」と聞くと難しく感じるかもしれませんが、いつも通りはてなブログからアイコン画像をアップすれば良いだけです。すれば、誰のPCからもアイコンがきちんと表示されるようになります。はてなフォトライフの画像のURLを知るさて、ここまでの話しをまとめると、はてなブログでの画像掲載には以下3点の注意が必要だということになります。読者に画像を見せるには、はてなフォトライフにアップするのがいちばん簡単ここで、前回記事(はてなブログでRSSアイコンを設置する方法)のRSSアイコンの設置方法をもう一度考えてみたいと思います。RSSアイコン設置のためのコードは以下の通りでした。/></a>このコード内にある「画像のURL」とは、はてなフォトライフのどのURLなのでしょうか?実はこの画像のURL、はてなブログの記事を書くページで簡単に確認が可能なのです。記法「見たままモード」のHTML編集タブから画像のURLを確認するはてなブログの記法には、「見たままモード」と「はてな記法モード」という2種類があります。違いについては、以前のエントリーを参考にしていただけると幸いです。・はてなブログで記事に「見出し」を付ける方法はてなフォトライフへアップされた画像のURLを確認するには、「見たままモード」の記法に設定するのがポイントです。アイコンに設定したい画像をはてなフォトへアップします。記事へ投稿するのと同じように、はてなブログの画像投稿のページからアップすればOKです。続いて、「HTML編集」のタブを選択します。すると、アップした画像のコードが表記されているのがわかると思います。この表示されているコードに、画像のURLが含まれているのです。「HTML編集」で表記されるコードを見てみましょう。/></p>こんな感じですね。コード内の「画像のURL」と書いてある部分に表記されるURLが、はてなフォトライフへアップされた画像のURLです。このURLをRSSアイコン設置の際に活用するのです。はてなブログに掲載する画像のアップロード先は、はてなフォトライフで統一させよう記事内に投稿する写真であれサイドバーに表記するブログパーツに使用する画像であれ、はてなブログに掲載する画像のアップロード先ははてなフォトライフに統一させることが最良のようです。今回、たまたまSafariから自分のブログを見返して問題が発覚しました。今後は、ブログパーツの追加などブログデザインのカスタマイズを行った後はいつもとは違うブラウザの環境で閲覧状況のチェックをしてみるようにします。Webに詳しい方ならきっととても初歩的なことなのでしょうが、今回の一件でとても勉強になりました。これからも、ひとつひとつ学んで行きたいと思います。Tumblr広告を非表示にする関連記事2013-06-27はてなブログに、RSSフィードを簡単登録できる『Feedlyボタン』を設置しましたはてなブログのプロフィール下部に、クリックするだけでFeedly...2013-03-06はてなブログに実施した、4つのデザインカスタマイズブログのデザインを少し変更してみました。先日の記事で、初めてブログに表を書きました。検索プロフィール東京都在住、サービスマッチングの会社で主に営業戦略の企画をしています。大事だと思ったことや興味あることを、忘れないように残すためはじめたブログです。このブログが、少しでも皆さんのお役に立てる時があればうれしいです。人気の記事はてなブログをはじめよう!banguard9383さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。