2018年07月28日

さくらブログをレスポンシブ化でスマホ対応させた話


レスポンシブ化

レスポンシブ化するにあたって、参考にしたサイトはこちらです。
思ったよりも作業量が少なくて、特に問題なくレスポンシブ化が完了しました。

ただ、私の場合はこれで終わりというわけではなく、記事が横にはみ出す感じになってました。
中央揃えとかいろいろ調べて、頑張ってcssをいじってみたのですが
どうしてもブログ記事を中央に持ってくることが出来ず、今は仕方なくマージンで調整しています。
一応私のスマホからは問題なく見ることが出来たので、とりあえずOKということにしました。

このあとはスマホで見た時のためにbackgroundイメージを用意したり
サイドメニューの文字を中央揃えにしたり、マージンを調整したりしました。

あと、何気に苦労したのが検索ボックスを中央に寄せることでした。
コンテンツ→検索ボックスのhtmlの中にcssで書いてあるとこがあって
そこにtext-align : center;を書いてあげたら中央に来てくれました。

ちゃんとスマホで確認を

PCでもブラウザの幅を狭めれば、スマホで見ているのとだいたい同じにはなりますが
微妙に違う点もあります。やはり、スマホで確認することが大事だと思いました、
posted by とり at 18:50 | Comment(0) | さくらブログ
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]