Bloggerがスマホだとサイドバーが表示されないのがどうにかしたくなった
↓
「blogger」「レスポンシブ」とかでググった
↓
ここを発見した
http://www.kuribo.info/2013/06/blogger-responsive-templates.html
↓
並行してテンプレートの変え方をググった
↓
テンプレート見比べた結果
RBSimpleとExtra Newsを採用
採用の理由
Random PostsとRecent Postsがすごく思えたから。
写真メインっぽい感じだから。
RBSimpleやってみた。
期待のRandom Postsが動作しない。ググった。別のサイトで紹介してたhtmlを発見。
入力。表示される。しかしこれだったら、今使ってるテンプレに追加で書くだけで
すむことに気づく。。。
そしてトップの自動スライドショーが動作してないことに今さら気づく。
さらに問題点。検索結果が1コしか表示されない。
スマホだとコメント投稿できない。
Extra Newsやってみた。
こちらもRandom Postsが動作しない。サムネの縦横比率が変。
検索ボックスはいい感じ。Recent Postsの見え方やPrevious Newのでっかいのもいい感じ。
いろいろいじってたがいったん放置。
そしてレスポンシブwebデザインにしたら、urlがPCもスマホも共通になるんだとばかり思ってたら、そんなことはなかった。
そして、またいろいろググってたら、どうやらbloggerの場合、レスポンシブテンプレを持ってこなくても、スマホでサイドバーを表示させる方法を発見。
テンプレのhtmlを編集して、mobile='yes'と書いて、
モバイルのテンプレをカスタムに設定。これだけでサイドバー表示される。
なんやねん。これでええやん。
しかし、スマホ表示だと、記事ページでラベルが表示されないのがまだ残念。
そこでいろいろググった結果、モバイル用のbodyのところに、PC用のbodyで記述してあるラベルのところをコピペ。結果うまく表示された。
ますますmobile='yes'方式でいいやんと思い始める。
adsenseはレスポンシブ形式のを使えばいいしね。
しかしボディ下部に出る、「ウェブバージョンを表示」がまだ気になる。
しかしこれまたhtmlをうーんと眺めてそれっぽいところを削る。
無事に消える。やるなあ。
ところがとあるテンプレで不思議な事件が発覚。大文字表示がいやだったのでググる。
text-transformがuppercaseとなってるのをnoneとすればよいと学習。
やってみる。無事になる。
が、なぜかスマホで見るとモバイル版が表示される。なぜだ。
でいじったところは先のところしか思い浮かばないのでいろいろ試したところ
無事に動く。不思議だけどよかったよかった。
その後、random postsに続き、related postsも、その箇所だけを書き足せばいいのではと思い始め、いろいろ調べる。
結果jqueryとかいうのを知りだす、などなど。
↓
「blogger」「レスポンシブ」とかでググった
↓
ここを発見した
http://www.kuribo.info/2013/06/blogger-responsive-templates.html
↓
並行してテンプレートの変え方をググった
↓
テンプレート見比べた結果
RBSimpleとExtra Newsを採用
採用の理由
Random PostsとRecent Postsがすごく思えたから。
写真メインっぽい感じだから。
RBSimpleやってみた。
期待のRandom Postsが動作しない。ググった。別のサイトで紹介してたhtmlを発見。
入力。表示される。しかしこれだったら、今使ってるテンプレに追加で書くだけで
すむことに気づく。。。
そしてトップの自動スライドショーが動作してないことに今さら気づく。
さらに問題点。検索結果が1コしか表示されない。
スマホだとコメント投稿できない。
Extra Newsやってみた。
こちらもRandom Postsが動作しない。サムネの縦横比率が変。
検索ボックスはいい感じ。Recent Postsの見え方やPrevious Newのでっかいのもいい感じ。
いろいろいじってたがいったん放置。
そしてレスポンシブwebデザインにしたら、urlがPCもスマホも共通になるんだとばかり思ってたら、そんなことはなかった。
そして、またいろいろググってたら、どうやらbloggerの場合、レスポンシブテンプレを持ってこなくても、スマホでサイドバーを表示させる方法を発見。
テンプレのhtmlを編集して、mobile='yes'と書いて、
モバイルのテンプレをカスタムに設定。これだけでサイドバー表示される。
なんやねん。これでええやん。
しかし、スマホ表示だと、記事ページでラベルが表示されないのがまだ残念。
そこでいろいろググった結果、モバイル用のbodyのところに、PC用のbodyで記述してあるラベルのところをコピペ。結果うまく表示された。
ますますmobile='yes'方式でいいやんと思い始める。
adsenseはレスポンシブ形式のを使えばいいしね。
しかしボディ下部に出る、「ウェブバージョンを表示」がまだ気になる。
しかしこれまたhtmlをうーんと眺めてそれっぽいところを削る。
無事に消える。やるなあ。
ところがとあるテンプレで不思議な事件が発覚。大文字表示がいやだったのでググる。
text-transformがuppercaseとなってるのをnoneとすればよいと学習。
やってみる。無事になる。
が、なぜかスマホで見るとモバイル版が表示される。なぜだ。
でいじったところは先のところしか思い浮かばないのでいろいろ試したところ
無事に動く。不思議だけどよかったよかった。
その後、random postsに続き、related postsも、その箇所だけを書き足せばいいのではと思い始め、いろいろ調べる。
結果jqueryとかいうのを知りだす、などなど。
