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

或阿呆のブログ

Pythonを好んで使っているプログラマです。Ruby,Perl,PowerShell,VBAなどでもたまに書いています。おバカなことが大好きです。

はてなブログ最初の設定いじりあれこれ~はてなブログのCSSをカスタマイズ~

はじめてのブログではないので、ガチガチにチューニングしてはじめてやろうかと。

まずは、CSSをいじった。

CSS修正は、ウェブサイトのデザインを修正する場合に行う。ブログの場合、テンプレートがあって、デザインを選択すればそれなりのデザインになるけれども、どうしてもカスタムしたい箇所があったのでCSSを修正した。

CSSについてはwikipedia:Cascading_Style_Sheetsを参照のこと。

どこをいじったかというと、、、

h3,h4タグの論理構造をわかりやすくするために、見出しの横と下に線を入れるようにした。

CSS修正手順

ダッシュボード選択

画像は省略します。

デザインタブ選択

f:id:oneshotlife_tom:20130413204740j:plain

カスタマイズタブ選択

f:id:oneshotlife_tom:20130413204842j:plain

{}デザインCSS選択

f:id:oneshotlife_tom:20130413205702j:plain
デフォルトでは以下のように記載されている。

/* <system section="theme" selected="alpha2"> */
@import "/css/theme/alpha2/alpha2.css";
/* </system> */

/* <system section="background" selected="default"> */
/* default */
/* </system> */

以下を追記した。h3,h4タグにborder-left,bloter-bottom,padding,marginなどを追加した感じ。

.entry-content h3 {
 border-left: 5px solid #333333;
 border-bottom: 1px solid#333333;
 padding: 2px 2px 2px 5px;
 margin: 2px 2px 2px 5px
}
.entry-content h4 {
 border-left: 3px solid #333333;
 padding: 2px 2px 2px 5px;
 margin: 2px 2px 2px 5px
}

プロパティ名は、ブログを表示している状態で、(Winユーザーの場合は)右クリックして、ソースを表示し、cssで検索すると以下のようなものが見つかるのでurlから調べられる。
f:id:oneshotlife_tom:20130413205652j:plain

このブログの場合は、以下のように記載されている。

<link rel="stylesheet" type="text/css" href="http://hatenablog.com/.shared.css:3c3174ecb76a9f1346983f280654426c:/css/theme/base.css,/css/prettify.css,/css/globalheader.css"/>

urlを選択するとcssファイルがそのまま覗ける。そこから、'h3'とか'h4'とかで検索してプロパティ名を探し当てて、デザインCSSのエリアにCSSの文法で記載してやれば、上書きされる。(つまり、同じ設定がされていたら、urlに記載されている値ではなく、デザインCSSに記載した値が適用されるということ。)

注意

CSSの修正は、上級者向けなので、自己責任で・・・。ただ、はてなブログの場合、CSSの修正もwikipedia:WYSIWYGで確認しながら修正出来るので、他のブログよりはずっとやりやすいと思う。

HTML+CSSのおすすめ書籍

初心者向け

ゼロからわかる HTML&CSS超入門

ゼロからわかる HTML&CSS超入門

これ、本当にわかりやすい。この手の書籍にしては良心的な価格設定なのも好感が持てる。