読者です 読者をやめる 読者になる 読者になる

何でもない日常だから

幸せだと思う。

はてなブログに忍者画像RSSを導入する(追記しました)

はてなブログ

スポンサーリンク

今回もこことは別のページの話です。

 

そのブログは構成上いわゆるホームページのようにトップページを固定(未来日記の形にしています)していて更新情報は一様サイドバーに表示していたのですが、メインページがスカスカで収まりが悪いので結局手書きで更新情報をテキスト入力していたのですが、毎日の事なので結構大変。

 

なんとか楽に出来ないかと悩んでいたら便利なサービスを発見!

忍者画像RSSです

その名の通りRSSから更新情報を取得して表示してくれるサービスです。

 

同様のサービスは他社さんでもやっているのですが忍者Admaxも導入しているので

そのまま同じIDでできるという事で使ってみました。

設定はこんな感じです

 

f:id:commseed:20160530122856j:plain f:id:commseed:20160530122855j:plain

 設定し直した部分は画像を縦並び、

記事表示件数を12記事

記事の大きさをピクセル指定にして横155px縦160px

画像の形を自動

タイトル文字数を16文字にしたくらいです。

 

但しこの形に決定するまでには結構悩んだので少し書き残しておきます。

 

まずレイアウトですが、当初は横並びを検討しました。

但し自分の使っている画像が横長の画像が多く画像の表示がうまくいかなかったので断念して縦並びに変更。

これも最初は1列1記事の形にしていたのですが、やっぱり画像がうまく表示されず。。。

 

どうしたものか悩んでいたのですが、使用しているページがレスポンシブなのであまり大きなサイズではまずいので余白も考慮して1列2記事の155pxにしたら理由は不明。。。ですがうまく収まってくれたので、この形に決定しました。

 

ここまでくれば、後は微調整です。

まず記事の表示件数は初期設定では10ですが、10記事表示するとPCでは

□□□□

□□□□

□□

 4×2+2

ぐりぐりっと幅を縮めると

□□□

□□□

□□□

3×3+1

となってしまってみっともないので2記事増やして12記事にしました。

これで4×3、3×4、2×6となるので違和感なく表示できます。

 

後はタイトル文字数を2列で収まるように設定しました。

 

このサービスを使うと新着記事だけでなくカテゴリ別だったり横スクロールで表示させたり色々な事が出来るみたいなので少し勉強して使ってみたいと思います。

 

 追記・・・

 

 自分は泥使いですでの確認はPCとAndroidスマホで確認しているのですが、iphoneを使っている人にはどう見えるのかなんとなく知人に確認してみたら衝撃の事実が・・・

 

画像をタップしてもリンクしないみたいです。。。

画像長押しで「新しいウィンドウで開く」はOKみたいです。

とりあえずヘルプとQ.Aを確認。

可能性としてはjavaがオフになっているとダメとの事ですが、オンになっていました。

悩んでもしょうが無いのでメール問い合わせ。

少々時間かかりましたが、回答を頂く事が出来ました。

 

要約すると、こっちの問題ではなく、はてなの仕様で無理的な回答でした。

ま~忍者さんの問題では無いので、確認に時間かかってもしょうがないね~って思いながらその原因を確認すると・・・

 

platform.twitter.com/widgets.jsが問題になっているようですとの事

 

???リンクの文字列の中にtwitterの文字があります。

はてなと言うよりツイッターのスクリプトと相性が悪いようです。

ツイッターと言えば自分は更新通知用にサイドバーにタイムラインを埋め込んでいます。

とりあえずこれを外して試す事もありですが、重要度的にこっちを残したいので、残念ながら忍者画像rssはあきらめる事にしました。

 

※但し、原因は他にもあるかもしれませんし、使用しているテーマの可能性等もあると思いますのでそれぞれの環境でとりあえず試してみる事をお勧めします

 

とこれで終了なら問題ないのですが、これでトップページ本文に新着記事を表示する事が出来なくなってしまいました。

 

という事で再検討してみます・・・

 

「続きを読む」にして新着記事一覧をを表示させる。

 

なんだかんだと記事数も100を超えているので全てを編集する事が大変()

又、そんな事想定していなかったし、各記事ラフに作っているのでいい感じに続きを読むが挿入できない

 

 サイドバーに新着記事を表示する

 

ま~これでも悪く無いですが、レスポンシブデザインのスマホページではまず見てもらえない。トップに戻った時に新着記事ではどうも落ち着かない。

という事で決定では無いですが、とりあえず次の形で運用しています・・・

 

トップページを記事一覧にする

 

はてなブログ機能のアーカイブでページを表示する方法を使います。

参考というかそのままコピペさせてもらいました

 記事一覧は、はてな自体の機能で外部サービス使用時のような表示スピード等に関する不安も無くとりあえず問題は無いですが、1ページの表示件数50件はちょっと多いです。これが変更できたら良かったと思います。

又スマホで50件表示はちょっと考えてしまいます。

それと1記事あたりの表示領域もちょっと大きめです。

PCならま~こんなものかなって感じですが、スマホで見るとかなり大きく感じてしまいます。

これを自分で制御できらよかったのにな~って思います。

 

ま~なんだかんだ、ぐだぐだと書いてしまいましたが、自分のページは検索からの記事リンクが殆どで、直帰率も中々のハイアベレージでトップに戻る人が殆どいないのであまり関係の無い話でした。。。

 

トッペページは関係ないと強がってみましたが、最適な画像RSSが見つかったので変更しました・・・

これで決まり!です

 

スポンサーリンク