2015年9月9日

BLOGGERを使っているなら絶対に設定しておきたい事

すごく些細なことなんだけど、気になっていたものが解決したので解決方法をメモしておきたいと思う。

設定しておきたいポイントは2点です。
・スマホの記事タイトルが途中で折り返される事象の訂正
・スマホ表示の画像のレスポシブル化

他にもやったほうがいいことたくさんあるけど見落としがちなとこなので、これだけ紹介します。

スマホの記事タイトルが途中で折り返される事象の訂正


まずスマホのタイトルが画面半分くらいで改行されてしまうというブロガーなぞの初期仕様を直しました。

なぜかスマホの記事タイトルのみ画面の左から7割くらいで折り返してしまいます。長いタイトルだとすぐに3行とか4行になってしまうし、途中で折り返すのは見た目もよくないので明らかにおかしい。

スマホ表示だけの仕様なのでスマホのデザインをいじります。

で、記事タイトルのデザインなのでいじるのは「h3」ですね。スマホ用のデザインは「.mobile」をつければいいので、こんな感じです。

/*モバイル記事タイトルの訂正*/
.mobile h3{
font-size:120%;
width:95%;
}
幅を95%で指定してあげます。100%だとキチキチ感があるのでオススメは95%です。

もしかしたら、もとから.mobile h3の記述があるかもしれないので検索してあれば追加ではなく記述を変更してください。たぶん70%になってるので95%にしてください。

これで95%まで行ったとこで折り返すのでほぼほぼ画面を目一杯使ってる感じになります。ついでにタイトルの文字が小さい気がしたので120%に拡大しときました。

あと方法は省略しますがBLOGGERのモバイル表示で気になるのがスワイプすると画面が切り替わる機能です。これはOFFにしたほうがユーザビリティ向上すると思う。ページ下にスクロールしてるときに誤って横にスライドすると他のページに移り変わるのはうざいこの上ない。

他のブログサービスでこれを実装しているところはなさそうなのでOFFにしても問題ないと思います。

「blogger スワイプ ページ切り替え 無効」とかでググれば方法がでてくるとおもうので、うちでは省略します。

画像のレスポシブル化


画像の大きさ設定はPCとスマホで分けたほうが綺麗に表示できます。

初期の仕様だとパソコンで調度よくてもスマートフォンでみてみると画像が小さくみずらいです。

スマホはただでさえ画面が小さいのでせっかくなので画像は横幅いっぱいで表示させたいところです。

ちなみに「特大」を選択すると、モバイルでちょうどいいサイズになりますがPCでははみ出てしまいます。

ということでPCの画像の大きさにかかわらずスマホの画像だけは画面いっぱいの大きさに自動調節されるようにしましょう。

Bloggerでは画像に<div class="separator">のタグが自動で設置されるので、この<class="separator>を設定することで画像のサイズを設定できます。

スマホ用のクラスsparatorの設定ですが、さっきのとちょっと書き方を変えます。

/*画像レスポンシブルスマホ*/
@media screen and (max-width:680px){
.separator img{
width:98%;
height: 98%;
display: block;
margin-left: auto;
margin-right: auto;
}
}
これでスマホの画面の98%の幅で表示してくれます。100%でもいいと思うのですが、なんとなくサイドに余白入れたほうが綺麗な気がして98%にしてあります。heightとかいらないと思ったのですが、なぜだか横長になってしまうのでつけときました。

コードの追加の仕方は省略します。

最後に、

当ブログに施したカスタムを一覧にした記事です。

>>当ブログのBloggerカスタム備忘録

月間アーカイブ