昨今、パソコンの画面は大きく非常に見やすくなり
ブログスキンも８００ｐｘではなく１０００ｐｘが主流になってきています。
自分のスキンも横幅を１０００ｐｘにしていたのですが
それよりも大きい画面が増え始め、今現在は横幅１３６６、１２８０、１９２０が中心。
なのでちょうど記事幅を少し広めに取りたいなと思っていたので
久しぶりにCSSをいじくって改造してみました。
まずスキン幅なのですがサイズを１０００pxから１０２０pxへ広げました。
一番小さい１０２４ｐｘに合わせたもので
これ以上の大きさにしてしまうとブログ上で横スクロールが出てしまうため自重。
本当は１２００ｐｘくらいにしたかったんだけどね。
※旧スキンをベースにしているため新スキンには俺の書いてるCSSは使えません。
なのでリンクを貼るのはやめ、どこがどう変わったのかだけを。
まずスキン幅を１０２０ｐｘにしたのでヘッダー、記事枠の上下中
そしてコメント欄のゲスト、管理の上中下と作り直す羽目に。
これが結構めんどくさかった。
でもそのおかげで記事幅を５６０ｐｘから６００ｐｘへと大幅に広げる事が出来ました。
差分の２０ｐｘはサイドと記事の間を従来の２０pxから１０pxへ減らし調節。
それによって余分が出来たので文字のサイズを基本の１２pxから１３pxへあげて
見やすい大きさに変更しました。
２７日くらいからやっていたのですが気付かれましたかね。
実は一番やりたかったのがここ。
文字サイズをあげることで老若男女、誰でもブログを見やすくなるかなと。
まとめブログやニュースサイトなど文字が大きく見やすいですからね。
たった１ｐｘですが印象は違うかなと思います。
そして記事幅を４０ｐｘ広げたおかげで今まで５３０ｐｘの画像が限界だったけど
これで５６０ｐｘまで引き延ばせ、動画は５７０ｐｘまで掲載可能になりました。
後はコメント欄の画像を５９０ｐｘまで引き延ばし
ヘッダー下リンクとアメーババーも２０ｐｘ程足して調節。
これでブログのお直し完了です。
- ゼロからわかる HTML&CSS超入門/技術評論社
![]()
- ￥1,974
- Amazon.co.jp
見た目的にはあまり変わってないように見えますが
過去記事の画像を見ると記事幅いっぱいだったものが
少し間があいてるのが確認できます。
Firefox１３とIE９で表示確認をしましたが崩れていないので大丈夫だとは思います。
画像をちょっとずつ編集するのが凄いめんどくさかったで。
ヘッダーと記事枠だけと考えていて、途中コメント欄に気付いた時の絶望感。
自分からやり出したものの途中で投げ出すところだったでや。
サイドバーの幅は２００ｐｘでベストなので変更はなし。
文字の大きさもあれ以上大きくすると折り返してしまって非常に不格好になるからね。
しかし記事幅を広げたとはいえ、文字の大きさを変えたので
過去記事に変な段差ができてる可能性があるんですよ。
それを見つけたら修正していこうかなと思っています。
ワンピースの記事のテーブルタグも５７０ｐｘへと変更したのですが
文字が大きくなったせいでどうしても変な折り返した出るため
こちらだけは元の１２ｐｘにすることに。
ワンピース懸賞金一覧
ワンピース悪魔の実一覧
該当記事の文字の大きさだけ変えたい場合はHTMLを表示してこちらのタグを挿入。
<div style="font-size:12px;">記事内容</div>
これで囲った部分はもとの１２ｐｘになります。
記事の修正は以上ですかね。
ただ今回の改造によってひとつの難点が・・・
画像が５６０ｐｘまでおｋになったため記事を書くところに貼ると
エディタに横スクロールが出てしまうという。
ほんのチョコっとなんですが凄い気になる。
記事を書く場所の右サイドはブログネタなどのくだらんフラッシュや
いらないものをべたべた貼ってるので
それを排除してエディタの幅を広げて欲しいものです。
いつもポチがとうございます。
クリックして下さると１０ポイントが入り喜びます。
