こんにちわ、トラジです。
スマホでこのブログを見せてもらう機会がありました。
レスポンシブデザインにしておけば良いだろうと思っていたら、
字が画面から見切れていて読めない状態でした。
横スクロールせず読めるようにカスタムしました。
私が使っているOSはWin7です。
スマホの画面サイズでブログを表示する方法
グーグルクロームを使うとアドオンが必要なく楽でした。
自分のブログをクロームで表示。
F12キーを押してデベロッパーツールをクリックして起動。
英語でエレメンツ、コンソール、ソース、ネットワークと
タブが表示されている左にスマホとタブレットのアイコンがありました。
デバイスモードアイコンと呼ぶようです。
これをクリックするとスマホ・タブレットサイズ表示になります。
左上の英語で書いてあるレスポンシブをクリックして
このデバイスモードで私のブログを確認する
(スマホで見る)と右が切れてしまっていました。
ブログの横幅を調整する方法
そこでブルックリンの作者シロマさんのブログで
解決方法を探しました。
すると、
「Brooklyn」の質問ページがありました。
その中でブログの横幅を調整する方法を
聞いている方がいたので参考にしました。
ブログのダッシュボードをクリック、
デザインをクリック、
カスタマイズをクリック、
デザインCSSにコピペしました。
書かれていたコードを微調整して
私が使っている物は下に書いておきます。
しかし、PCのブラウザで表示し時の横幅が
元の少し広い状態に戻ってしまいました。
そこでpxを小さくしました。
/*ブログの横幅*/
#container #content {
width: 1000px;
}
#main {
width: 680px;
}/* スマホとタブレット対策 */
@media (max-width: 919px) {
#container #content {
width: 93.75%;
}
/* 記事の横幅 */
#main {
width: 100%;
}
/* サイドバーの横幅 */
#box2 {
width: 100%;
}
}
これでPCで見た時に
横にスクロールせずに端の文字が読めて
横に見切れる事がなくなりました。
あとは後回しにしてしまっている
ヘッダーの画像とタイトルと文字が被っても
見えるようにしたいですね。
色と画像の配置を変更できるように調べてきたいと思います。
19.4.1 追記
私が見る画面で横幅が足りないのは
PCのディスプレイが4:3の比率だからです。
15年以上前の古い物です。
今回ははてなでブログを
やっている人向けの記事になってしまいましたね。
今日はこの辺で。
では、また。
