何でもない日常だから

幸せだと思う。

トップ > はてなブログ > はてなブログに忍者画像ＲＳＳを導入する（追記しました）

はてなブログに忍者画像ＲＳＳを導入する（追記しました）

はてなブログ

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

 

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

 

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

忍者画像ＲＳＳです

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

 

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

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

設定はこんな感じです

 

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

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

記事表示件数を１２記事

記事の大きさをピクセル指定にして横１５５ｐｘ縦１６０ｐｘ

画像の形を自動

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

 

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

 

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

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

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

 

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

 

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

まず記事の表示件数は初期設定では１０ですが、１０記事表示するとＰＣでは

□□□□

□□□□

□□

 ４×２＋２

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

□□□

□□□

□□□

□

３×３＋１

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

これで４×３、３×４、２×６となるので違和感なく表示できます。

 

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

 

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

 

 追記・・・

 

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

 

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

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

とりあえずヘルプとＱ．Ａを確認。

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

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

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

 

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

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

 

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

 

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

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

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

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

 

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

 

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

 

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

 

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

 

なんだかんだと記事数も１００を超えているので全てを編集する事が大変（）

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

 

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

 

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

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

 

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

 

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

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

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

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

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

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

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

 

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

 

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

これで決まり！です