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

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

最近書いた記事

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

ブログについて

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

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

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


－ 目次 －

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

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

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


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

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


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

ここからは当ブログのデザインテーマ「ヨミカキ by kanahei」さんのデザインテーマでのみ、関係する部分です。

  • エントリ記事などのフォント変更
  • ブログタイトル周りのサイズ変更
  • ヘッダHTML記述部とエントリ記事との隙間の縮小
  • カテゴリ一覧表示の際に表示されるパンくずリストとエントリ記事の隙間縮小


通常リンクは下線が表示されるだけなのを、見た目をボタン化して、マウスオーバーした際にそのボタンの色を変化させるようにした。ただし現在は自分のブログでは使っていません。

.lnk-btn a:link, .lnk-btn a:visited{
    font-size: 100%;
/*    background: #45bcd2;*/
    background: #56b5f0;
    display: inline;
    padding: 4px 0 4px 0;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    position: relative;
    cursor: pointer;
    line-height : 2.0;
}

.lnk-btn a:hover {
    background: #FF6347;
    color: #FFFFFF;
    border-radius: 5px;
    text-decoration: none;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    transition: 0.4s;
}


　これを実現するためには、aタグを、div要素にlnk-btn（このクラス名はCSS定義と合わせる）クラスを指定して、囲ってやる必要があります。

<div class="lnk-btn"><a href="･･･">リンクのボタン化のテストです</a></div>

　効果あり：（※IEではtransitionプロパティに対応していないので、瞬時に色が変わってしまいます）　

リンクのボタン化のテストです

　効果なし：
　リンクのボタン化のテストです


デフォルトではサイズが小さすぎて目立たなかったのと、表示文が「続きを読む」だけではわかりにくいので前後に文章を追加した。自分は「続きを読む」をつけるのは、画像が多いエントリ記事のみにしか付けないのでこのコメントにしました。

.entry-see-more {
    color: #0000ff;
    font-size: 130%;
    font-weight: bold; 
}
.entry-see-more:before {
    content: "※この記事は画像が多く、表示に時間がかかるので非表示にしてます。";
}

.entry-see-more:after {
    content: "には、ここをクリックしてください。";
}


効果あり：
※この記事は画像が多く、表示に時間がかかるので非表示にしてます。続きを読むには、ここをクリックしてください。

効果なし：
続きをよむ


デフォルトでは、無色で縁取りが四角だったため、背景色をつけ角丸に変更した。

.entry-content blockquote {
    background-color:FloralWhite;
    border-radius: 10px;
}


効果あり：

「引用」箇所の背景色と角丸の縁取り追加
文字間隔のテスト

効果なし：

「引用」箇所の背景色と角丸の縁取り追加
文字間隔のテスト


デフォルトでは無色で文字間隔も広すぎたので縮小した。角丸へ変更

.entry-content pre {
/*  border: 1px solid #dddddd;  */
/*  margin: 0 0 10px; */
/*  padding: 20px; */
    background-color:FloralWhite;
    border-radius: 10px;
    line-height: 1.3;
}


効果あり：

.entry-content pre {
/*  border: 1px solid #dddddd;  */
/*  margin: 0 0 10px; */
/*  padding: 20px; */
    background-color:FloralWhite;
    border-radius: 10px;
    line-height: 1.3;
}

効果なし：

.entry-content pre {
/* border: 1px solid #dddddd; */
/* margin: 0 0 10px; */
/* padding: 20px; */
background-color:FloralWhite;
border-radius: 10px;
line-height: 1.3;
}


脚注文が目立ちすぎていたので若干縮小した。

.footnote {
/*    font-size: 90%;  */
    font-size: 85%;
}


効果あり：
*1 これは脚注文のサンプルです。

効果なし：
*1 これは脚注文のサンプルです。


広すぎたので変更した。

.hatena-module {
/*  margin-bottom: 60px;  */
/*  padding: 20px 20px 0 20px;  */
  margin-bottom: 15px;
  padding: 15px 15px 0 15px;
}


これも幅が広すぎたので縮小した。

.hatena-urllist li {
  font-size: 95%;
  padding: 5px 0px 5px;
}


javascriptが無効になっていると「ページトップへ移動」ボタンが動かないため、注意文を表示するようにした。
なお、これだけはCSS定義ではなくHTMLです。ヘッダ部分のHTML記述部に入れてください。注意文は適宜変更お願いします。

<p><noscript><b>JavaScriptをONにしないと正常に動作しないよ～(泣) hateblo.jpを許可してね。</b></noscript></p>


その３へ続きます


【同カテゴリー記事】

＜はてなブログデザインテーマのCSS変更点を紹介するよ（その１）｜ブログについて｜はてなブログデザインテーマのCSS変更点を紹介するよ（その３）＞

↑ページトップへ