SSK Worldをパソコンからご覧になっている方は、「何か」が微妙に変わったことにお気づきかも知れません。とはいえ、もう本当に微妙で、私からこうして何か振らなければ、そのまま通り過ぎてしまいそうな話です。
記事の左側に黒く表示されているサイドバーの幅を、従来より60ピクセルほど広げました。これまではWordPress標準のTwenty Fourteenデザインをほぼそのまま使っていて、どちらかというと細めのサイドバーだったんですが、ウィジェットをはめ込んでいくと、ものによってはかなり窮屈になってしまうのが気になっていました。例えばTwitterのタイムラインなんかはそうですし、比較的長いタイトルやカテゴリー名が多いSSK Worldでは、シンプルにこれらを表示するだけのウィジェットでも、すぐに行の折り返しが発生してしまい、イマイチ見づらくなります。
幅を広げたら、かなりゆったり見えるようになりました。タグクラウドも、ずいぶん「クラウド」っぽくなったかも。広告も、幅広のより面積が広いものが選択されて表示されるようになりましたが、これはあまり歓迎されないのかも知れませんね。
スタイルシートのどこかを書き換えれば修正できるのだろうな…とは思っていたんですが、何しろレスポンシブデザインのスタイルシートはわかりにくいんですよね。
具体的には、CSSに
@media screen and (min-width: 1008px) {
.site-content {
margin-left: 222px;
}
…
などと記載されているのが、画面のサイズに応じて表示方法を切り替えている部分。例えば、この記述は「表示ウィンドウの横幅が1008ピクセル以上あった場合は、『site-content』というクラスが振られたブロックの左マージンを222ピクセル空けなさい」ということで、この下に
#secondary {
float: left;
width: 162px;
}
なんて書いてあれば、「secondary」というIDが振られたサイドバーは、site-contentコンテンツの左側に幅162ピクセルに調整されて表示されることになります。
レスポンシブデザインの場合、この「@media」ブロックによる指定が複数組記載されていて、デバイスの画面サイズやウィンドウの表示幅、画面の縦横などの条件に合わせて、スタイルシートの定義をどんどん上書きしていくという形になっています。@mediaの条件に応じて、全く異なるスタイルシートの外部ファイルを読み込むことも可能です。
WebブラウザーからHTMLのソースが見られる「開発者モード」を使って、どのID、どのクラスがどのブロックを指しているのかを確認しながら、CSSの該当箇所を探して修正してみました。まだ修正しきれていない部分が残ってヘンな動きをするかも知れませんが、見つけてしまった方は、ワタシにこっそり教えていただけるとありがたいです。
手間さえ掛ければ、どこを修正すれば良いかはわかることなんですが、やっぱり他の人が作り上げたものを後からイジるのは難しいですね。だからといって、こんなに複雑なものを一から作るなんて、とても不可能ですが（汗）。
コメントを残す