PCからご覧の皆さんこんばんは、僕です。
たった今作業が終了したので、報告させていただきます。
ブログデザインを若干変えたよー！
……と、いうことでね、今日は時間があったので、気になっていた点を修正してみました。
修正ポイント1「本文部分の幅」
このブログを以前から見ていただいている方であれば気になっていたかと思いますが、これまでのこのブログでは、写真や埋め込み動画を掲載すると、「サイズが大きくてサイドバー部分を侵食する」という現象が起きていました。
それはなぜかというと、画像の横幅が640pxなのに対して、今まで本文部分の幅は540pxに設定されていたからです。
つまり、100px分、画像のほうが大きいため、横にはみ出していたんですね。
それを今回、修正いたしました。
ざっくりした手順としてはこうです。
- 管理者ページからCSS編集を開く
- ページ全体の幅（本文部分+サイドバー部分の幅）を、800から900に変更する
- 本文部分の幅を540から640に変更する
- 背景画像とトップ画像を変更に合わせて作り直す
まあ、簡単に言いますと、本文部分の幅を540→640に100だけ増やしたかったので、ページ全体の幅をその分800→900にしたということですね。
数値を変えてやっただけ。
「CSS編集」という言葉だけ聞くとなにやら難しそうな感じがしますが、すでに枠組みはJUGEM側で作ってくれているのがありますから、あとは数値をいじって画像を差し替えるだけなので実はそんなに難しいことはありません。
ネット上で調べれば、やり方を解説してくれているサイトがたくさんありますので、そういったものを参考にすると結構簡単にできますよ。
もし、僕と同じような悩みを抱えていて変更したい方がいらっしゃいましたら、やってみると良いと思います。
自分のブログを自分でカスタマイズするのは楽しいですしね。
修正ポイント2「recommend欄」
"recommend"というのはすなわち「おすすめ」ということですが、実はこのブログには、おすすめ商品を紹介する「recommend」欄が開設当初から存在していました。
画面右側、サイドバー部分に存在しているやつです。
ただ、僕自身、これまでこの機能を使ったことはなく、また、その存在を意識したこともなく、完全にスルーして過ごしておりまして、今までは、なぜかデフォルトで設定されていた、僕は一切見たこともないAKBのDVDが紹介されていたんですね。
そのことにこの度、ブログデザインをいじっている間に気付きまして、非表示にしようか迷ったのですが、せっかくなので僕が今までこのブログで触れたことがあるおすすめ商品を載せておくことにしました。
右を見てもらえば分かりますが、載せたのは、
- 僕にとっての神様、釘宮理恵様のミニアルバム「kokohadoko」の通常盤と限定盤
- おすすめされたのでやってみたら面白かったPSVita用ソフト「GRAVITY DAZE」
- ついこの間買って気に入っているSONYのヘッドホン「MDR-1RMK2」のシルバー
- おそらくマニアックな部類に入るが素晴らしい写真集「ツインテールと機関銃」
の4点です。
僕のおすすめ商品なので当然僕の趣味が全開ですが、Amazonのリンクになっておりますので、もし気にいったら買ってみるのも良いかと思います。
修正ポイント3「タイトルのサイズとデザイン」
今回、ブログの幅が広くなったのに応じて、ブログタイトルのサイズを26px→30pxに変更しました。
それとともにこちらのサイトを参考にしながら、記事タイトル、サイドバー部分のタイトル、記事中の見出しのデザインを一新。
少し良い感じになったのではないかと思います。色々できるもんですねぇ。
今回、そのデザイン一新の過程で、実はブログの設定においては、実はpxではなくemで設定するのが主流だということを学びましたので、また後々修正していこうかなと思っています。
それから、あえて本文のフォントサイズについてはいじらずそのままにしておいたのですが、もしも「実はこのサイズだと見づらいんだよね」という方がいらっしゃいましたらコメント欄のほうへご一報ください。
そのような意見が多ければ反映させていただこうと思います。
……ということで変更は以上です。
これからも見やすいブログを目指して進歩していきたいなと思っていますので、気づいた点があれば教えてくださいね。
また、デザイン面だけでなく文章の書き方も模索していこうと思っております。
今回はその第一歩ということで、細かく見出しをつけてみましたが、どういう見え方になっていることやら。
見やすければ、今後もいくつかの見出しに分けて書いていきますね。
ではでは、ふぁいんでした。
実はもういっこ書きたいことがあるので、また後ほどお会いしましょう。
コメント