どうせなら自分好みのサイトにしたい
自分でブログやサイトを立ち上げると自分好みのサイトデザインにしたくなってくる。そうするとCSSをいじって、ということになるのだが気をつけておきたいポイントがある。
私も何を隠そう、htmlやcssなどほとんど知らない初心者。私のような方がCSSをいじってミスらないように注意点を書いておきたい。
画面幅いろいろ
私のサイトを例に上げて見ていく。
ワードプレスというCMSのsimplicityというテーマを使っている（ちなみに無料とは思えないほど超優良テーマ）。現在はデフォルトスタイルにしているが、これを例えばタイル形式にしてみよう。そうすると、
このように当たり前だがいわゆるタイル形式になる。本来タイル形式とはそういうものではあるが、ここで記事一覧インデックスの高さを揃えたくなってくる。CSSをいじり出すと、あれもこれもと整えたくなってくるものだ。
そして、インデックスの高さを揃えるために、「simplicity タイル 高さ 揃える」などとネットで色々と調べてみる。そうすると、エントリーカードの高さと見出しの高さを揃えれば良いんだなということに行き着く。そして、
/* これは見出しの高さ */
.entry-card-content h2{
height:72px;
}
/* これはエントリーカードの高さ*/
.entry-card-content {
height:190px;
}
といったコードを「テーマの編集」→スタイルシートに張りつける。そうすると、
こうなって、一見すると綺麗に揃っているかのように思えてしまう。しかしスマートフォンなどのモバイル端末で見てみると
このように見出し幅が広すぎて若干、間の抜けた感じになってしまう。ぐぬぬ、ということでスマートフォン閲覧用にCSSを書き換えるために、モバイルCSSを編集する。
/*見出しの高さ*/
.entry-card-content h2{
height:48px;
}
すると、
こうなり、まぁ許容範囲かなということになる。私はこれで一安心としばらくサイトをそのままにしてしまっていたが、ある日、一口にスマートフォンといっても、画面の幅が違うということに気付いた。そして、Google Chromeの「右端にある❗ボタン」→「その他のツール」→「デベロッパーツール」でスマートフォン画面を調べてみた。すると、320×575はいいのだが、375×575になるとこうである。
ドギャーン！！
375×575になると、見出し幅が狭くて文字がはみ出てしまっている。では、もう少し広くしなければ……と見出し幅を広くすると、今度は320×575でまた、間の抜けた広さになってしまう……。私はここで挫折した。
まとめ
他にも
#main .masonry-brick{
height: 任意の数字px;
}
で、記事の高さを調節して、タイトル幅が気になればスクリプトで揃えるといったやりかたもあるのかもしれない。が、ここまでに費やした時間は半日以上。慣れないことに頭はくたくた。もうその気力はない。さらに疲れてしまって記事を書く気力もなくなっていたのだ。
つまり、私のような初心者がCSSを下手にいじらない方が良い理由は、一度いじりだすと細かいところまで気になってくる、うまくいったと思ってもモバイルの種類によってはうまくいってないことがある、疲れる。ということだ。知識のある人は、何をそんなことに手こずってという感じかもしれない。知識を身につけたら、またいつの日かチャレンジしたい。
コメント