たまには部屋をかたづけようよ

部屋を片付けせなあかんと思いつついつも放置プレイ。そんな自分の日々の想いをつづった日記系ブログですよ?

最近書いた記事

はてなブログデザインテーマのCSS変更点を紹介するよ(その3)

 #13/8/23追記
 現在はこの記事を書いた当時とは違うデザインテーマを採用しているため、以下に書いてあることは、現在のテーマには当てはまりません。ご注意ください。

 前回のエントリ記事はてなブログデザインテーマのCSS変更点を紹介するよ(その2)の続きで、自分のブログCSS変更点 その3です。

 なお、この変更点その3は当ブログのデザインテーマ「ヨミカキ by kanahei」さんのデザインテーマでのみ関係する部分なので、あまり参考にならないかも。


 これを適用する際の注意点などははてなブログデザインテーマのCSS変更点を紹介するよ(その1)の冒頭を参照してください。 


- 目次 -

※以下の、その1とその2は別エントリ記事で、それらのタイトルがリンクになっています。

はてなブログデザインテーマのCSS変更点を紹介するよ(その1)

  • リンクにマウスオーバーさせた際の表示効果追加
  • 画像のセンタリングと角丸の縁取り追加
  • エントリ記事の表示幅の拡大
  • 大見出し(h3タグ)、中見出し(h4タグ)の装飾追加
  • グローバルヘッダ(はてなブログ特有の最上部に表示されている「↑Hatena Blog」と左側に書いてあるメニューバー)の非固定化


はてなブログデザインテーマのCSS変更点を紹介するよ(その2)

  • リンクのボタン化
  • 「続きを読む」文字サイズ変更
  • 「引用」箇所の背景色と角丸の縁取り変更
  • 「pre」記法使用時の背景色や文字間隔などの変更
  • エントリ記事最後に表示される脚注文の文字サイズ縮小
  • サイドバーのはてなモジュール同士の表示間隔の縮小
  • サイドバーの「最新記事」「カテゴリ表示」などのulリストの文字サイズと行間隔の縮小
  • javascriptが無効になっていた場合の注意文表示(これだけは変更したのは、CSSではなくHTMLです)


はてなブログデザインテーマのCSS変更点を紹介するよ(その3)

 下記タイトルはリンクになっているので、クリックすればその項目にスクロール移動します。
 ※スクロール移動の方法については、こちら(はてなブログでページ内スムーズスクロールを実現させる



個人的に、デフォルトフォントの「ふい字」では記事本文やサイドバーの文字などの小さい文字が読みにくかったので、一般的なフォントへ変更したのと、フォントサイズも若干大きくした。

.entry-content, .customized-footer, .entry-footer-html, .comment-content, .lnk-btn, #box2, #dropmenu {
font-family: \x27Helvetica\x27, \x27Arial\x27, \x27メイリオ\x27, \x27Meiryo\x27, \x27MS PGothic\x27, sans-serif;
}

.entry-content {
/*  font-size: 95%; */
  font-size: 100%;
}



kanaheiさんの背景画像が大きすぎたので、ちょっと小さくした。それに伴ってブログ紹介文字の縮小や、ブログタイトルのリンク色変更なども行った。
※こちらのエントリ(もう勘弁して下さいIE先生)にもあるとおり、IE8以下ではbackground-sizeプロパティが効かないので、この指定はIE8以下では意味がないです。

/* header customize */
#blog-title {
/*  background: url('title.png') no-repeat;  */
/*  width: 900px;  */
/*  height: 345px;  */
/*  margin: 30px 0 0 0;  */
/*  padding: 20px 0;  */
    background-size: contain;
    height: 245px;
    margin: 40px 0 0 5px;
    padding: 2px 0;
}

#blog-title #blog-title-inner {
/*  margin-top: 70px;  */
/*  margin-left: 60px;  */
    margin-top: 73px;
    margin-left: 32px;
}
#title {
/*  margin: 0;  */
/*  width: 360px;  */
/*  font-size: 170%;  */
    margin: 0;
    width: 350px;
    font-size: 150%;
}

#title a {
/*  color: #333333;  */
    color: #0080ff;
}

#blog-description {
/*  font-weight: normal;  */
/*  font-size: 18px;  */
/*  margin: 10px 0 0 0;  */
/*  width: 360px;  */
    font-weight: normal;
    font-size: 14px;
    margin: 10px 0 0 0;
    width: 360px;
}



隙間が大きかったので減らした。

/* top-editarea customize */
#top-editarea {
    margin-bottom: 15px;
}



これも隙間が大きかったので変更した。

#top-box .breadcrumb {
/*  margin-bottom: 40px; */
  margin-bottom: 10px;
}
広告を非表示にする

↑ページトップへ