読者です 読者をやめる 読者になる 読者になる

IT系女子ログ

3年目 Webデザイナーが、最近気になるアレコレ

はてなブログの最新記事一覧の表示を調整してみました。

f:id:tosssaurus:20150502125503p:plain

PC表示のサイドメニューに表示される最新記事一覧なのですが、サムネイルの左にマージン(余白)があるデザインになっていました。
同じサイドメニューにあるプロフィールや検索ボックスなど、他のコンテンツは左揃えなのに、最新記事一覧だけがマージンを取っているのがとても気になったので、調整してみました。

調べていく手順もご説明していますが、調整方法だけ知りたい方は記事の最後をご覧ください。

 

Chromeデベロッパツール 

どの要素に何のスタイルがつけられているか調べる

おそらくcssでmargin-leftに何pxか指定されているので、そのmarginを0にしちゃえばいいんだと予想できますが。どの要素にスタイルが指定されているのか調べてみます。

 

ブラウザはChromeで説明します。
この記事をみながら同じように作業されたい方は、ご自身のブログの画面とこの記事を別々のタブで開いておくとやりやすいと思います。

デベロッパツールを開いてみる

とにもかくにも要素の検証ですね。
右クリックしたらメニューが開きますが、下の方に『要素の検証』があるのでそれをクリックしましょう。
windowsの方は"F12"キー、Macの方は"option"+"command"+"I"キーでも同じ操作ができます。

f:id:tosssaurus:20150502130023p:plain

すると、上のような画面が開きます。
これがWebデザイナーにとって仲良くしておきたいデベロッパツールです。
デベロッパツールを利用すると、どの要素にどんなスタイルをつけているかが分かりやすく、ブラウザ上で要素を追加してみたり、変更してみたりができてしまう優秀なヤツです。

詳しく見ていきましょう

さっそく、最新記事一覧の要素を探してみます。

要素の検証エリアの上にメニューが並んでいます。
その一番左端に虫眼鏡のマークがあります。(下図の①)
それをクリックしてから、マウスを動かして最新記事の方へカーソルを合わせてみてください。

f:id:tosssaurus:20150502132557p:plain

すると、マウスで選択している要素が青く表示されます。
同じ箇所のHTMLも青く表示されます。とても便利ですね〜。
うまく表示されない方は、もう一度虫眼鏡をクリックして試してみてください。

最新記事一覧はulですね。
さらに詳しくみたいのでulの左に付いている"▶︎"をクリックします。
すると、入れ子になっているliがずらっと表示されます。
表示されたliを選択してみましょう。

f:id:tosssaurus:20150502133457p:plain

今度はliの要素だけが青くなるので、より詳しくみれます。

サムネイルの左側がオレンジになっています。
オレンジはmarginです。やはりmarginがつけられていましたね。

では、どの要素にmarginが付いているのでしょうか。

cssも確認

f:id:tosssaurus:20150502133806p:plain

デベロッパツールの右側を見ると、Stylesと書いてあります。
ここには、選択している要素につけられているCSSが表示されます。
上からmarginを探してみると、margin-left: 20pxがありましたね。
こいつでしたか。
.hatena-urllist li という要素につけられています。

念のため、marginを消すとどんな表示になるか確認しましょう。
margin-left: 20pxの左にあるチェックボックスをクリックして、チェックを外してみます。

f:id:tosssaurus:20150502134720p:plain

すると、サムネイルの左にあったmarginが消えて左揃えになりました!
ビンゴでした。

あとはコピペするだけ

ダッシュボード > デザイン > カスタマイズ >デザインcss

では、この.hatena-urllist li {…}をコピーしちゃいましょう。

そのまま、ダッシュボード > デザイン > カスタマイズ の画面へ行きましょう。一番したの『デザインcss』にペーストします。

f:id:tosssaurus:20150502135024p:plain

忘れずに『変更を保存』ボタンを押して、表示を見てみましょう。

f:id:tosssaurus:20150502135438p:plain

きれいに左に揃いました。いい感じです。
あぁ、すっきりした。

ついでに最新記事一覧の表示を整えました

また、タイトルが長いときに、サムネイルの高さより高くなり、サムネイルの下に文字が入るのが気になっていました。
このついでに、最新記事一覧に表示されるタイトルのフォントサイズを小さくしてみました。
サムネイルの大きさも100pxから80pxに変更しています。
当初は大きい方が分かりやすいと思ったのですが、せっかく記事を読んでいるのに、大きすぎるサムネイルがサイドにあると気になってしまいます。このくらいがちょうどいいと思います。

 

解決方法 

最新記事のサムネイルを左揃えにするには、

デザイン > カスタマイズ > デザインcss
『.hatena-urllist li {margin-left: 0;}』
を追加すればOKでした。