ひさしぶりに、ブログをカスタマイズしてみた。
結構自分の記事を見返すことも多くなり、「なんか少し読みにくいな。」と思っていたので調節することにした。
ただ、一番の理由はアフィリエイトのリンクを作成してくれる『カエレバ』が使いづらくなったからだ。かわりに、『もしもアフィリエイトのかんたんリンク』を使うようしたら、yahoo!ショッピングが2行になってしまうのがバランスが悪いため、どうにか1行で表示できないものかと思った次第。
なんせ、2年も前のことなど覚えていない。きちんと記事にしてやり方を保存しておけば、後々の自分のためになるのだが、そんなことすら知らずに適当に書いていたものだから、当然残していない。
再び、調べ直したので、今度こそきちんとまとめておこうと思う。
『ブログ設定』→『デザイン/ブログパーツ設定』の『PC』→『カスタマイズ』→『CSS』でブログ内の設定をいじるところまでこれる。以下の写真は元のブログの設定。ここから調節していく。まずは、それぞれの説明からだ。
全体のレイアウトでは、大まかな枠を設定できる。ここでは、『メイン記事の幅（#main）』と『サイドバーの幅(#sidebar)』を調節する。『#container 』でブログ全体の表示幅を設定できるのだが、よく使われている画面サイズが1024pxらしいので、そのサイズを超えてしまうと横スクロールバーが表示されてしまうというデメリットが有る。したがって、1000pxのままでいいだろうという判断。
メインカラムでは、『メイン記事の幅（#main）』で設定した中の文字の位置を決める。ここで少し余白をとっておかないと、パソコン以外の端末（例えばipadなど）で見たときにキツキツになってしまい見にくくなってしまう。
こちらでは、『サイドバーの幅(#sidebar)』で設定した中の文字の位置を決めることができる。メインカラムのときと同様だ。今回はいじらない。
CSSの中からこれらを手動で探すのはとても時間がかかるので、ショートカットキーの『Ctrl』+『F』を押せば、その記事内の単語検索が可能だ。この方法を知っておくと調べごとをするときに便利なので覚えておいて損はない。
いじるのは、全体のレイアウトの#mainの中のwidthと、メインカラムの#articleの中のmarginだ。
このブログは1文字16pxで設定している。1行に42文字表示したいので、16×42=672。それに、左端から20pxほど間隔を取りたいので、672+20=692。したがって、横幅は692px必要になるというのがわかる。また、margin の横にある数字だが、時計回りに 上 右 下 左 というふうになっており、それぞれに開けたい間隔を設定することができる。
調節をしていき、かんたんリンク内のyahoo!ショッピングの文字を1行表示させたければ、1行あたり42文字以上表示させる必要があることがわかったからだ。
あまり文字数が増えてしまうと見にくくなってしまうので、このぐらいが限界かなと言う感じ。42文字でもちょっと多いかなというぐらい。
これで、あとから見てもやり方がわかるようになったかな。
いろいろと試してみて、見やすいブログにしたい。
コメント