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

bunoshi

働き方を考えるブログ

トップページのカスタマイズ 【はてなブログ カスタマイズ】

ブログ運営-はてなブログカスタマイズ ブログ運営

トップページのカスタマイズ

はてなブログはCSSを書くとすぐ反映されるから、カスタマイズが面白くて色々といじっています。

トップページの各記事の下に出ているSNSのマークとはてなスター。

記事ページでも表示されている物をトップページで表示する必要はないかなと思い、消すことにしました。

 

トップページのフッターを消す方法

見た目だけの問題かなと思っていたんですが、フッターの表示を消すと、ブログの表示スピードが上がるんですね。予想外の効果がでてびっくり。

消したのは下の画像の赤枠部分です。

 

f:id:ranmaru-24mensou:20150825204702p:plain

 

ソースは意外と簡単でした。

/*トップ画面フッター消去*/
.page-index
.entry-footer{
display:none
}

たったこれだけのソースをCSSに貼るだけで消すことができます。

ソーシャルボタンを多く押されている記事は読まれる可能性も高くなりますが、ブログを作ったばかりでソーシャルボタンを押されることも少ない時は、いっそのこと表示しない方が余計な情報を読者に与えることがなくていいかもしれません。

表示速度も軽くなるし、一石二鳥!?

 

トップページのパン屑を消す

カテゴリの表示ですね。やっぱりこれも必要無いと思うんです。必要のないものは消してしまった方が表示が早くなるんじゃないかと言う期待もあります。

検証していないので分かりませんが、見た目はすっきりします。

 

f:id:ranmaru-24mensou:20150825205233p:plain

 

なるべくすっきりしたデザインが好きなので。これもソースはすごく簡単でした。

/*トップ画面パン屑消去*/
.page-index
.categories{
display:none
}

/*~*/の間の文字はメモ書きなので、カスタマイズした内容を忘れないように書いています。表示が崩れたら追加したソースだけ消せば直りますし。

 

トップページの記事と記事の間に線を引く

記事と記事の区切りがはっきりしなくて嫌だったんです。薄く影がついているんですが、背景を白にするとほとんど分からなくて。

区切りをはっきりさせるために背景を消して青で線を引きました。

 

f:id:ranmaru-24mensou:20150825205718p:plain

 

影を消す方法が分からなくて苦労しました。Chromeの「要素を検証」を使って該当する部分を探し出し、CSSで変更しました。

Chromeの機能って便利ですね。

 

f:id:ranmaru-24mensou:20150825205953p:plain

 

画面下半分が「要素を検証」で出したHTMLです。この画面を使いながら該当するソースを探しました。サイトの調べたい部分で右クリックして「要素を検証」をクリックすると、該当するHTMLがハイライトされるんですごく便利です。右側がCSSですね。

カスタマイズするときに参考にすると分かりやすいと思います。

ちなみに記事と記事の間に線を引くソースはこれです。

/*ボーダーライン*/
.page-index
.entry, .archive-entry {
box-shadow: 0 0 0px rgba(0,0,0,0);
border-bottom: 3px solid #0000cd;
}

 

さいごに

だいぶ思った通りの形になってきました。

後は引用を変更したいのと、サイドバーにソーシャルボタンを設置したいかな。

記事ページも背景を白にしたら、どこまでが記事かよくわからないから線を引きたいですね。のんびりやっていこうと思います。

※ソースを載せていますが、使用に関しては自己責任でお願いします。


転職30代の転職派遣から正社員ニート・フリーターから正社員働き方コラム転職サイト転職エージェント雑記ブログ運営
免責事項

Presented by bunoshi