はてなブログのカスタマイズ
旧はてなダイアリーとは違って、CSSのみだけではなく、jQuery、JSファイルも利用できるので一気にカスタマイズ制度が向上。
しかし！LESSとかわかんない！（勉強中）そもそもCSSってなんじゃ！って人向け。
適当に三日間いじったことを適当にメモっただけなのでそもそもそんなすごいものではないのでまぁ参考程度にしてください。
というか書いてる自分自体、CSSはだいたいコピペで済ませてるのでなんとも言えないし、元デザインを作ってくれた人ありがとうございます！って感じです。
多段カラム
まず適当に公式テーマストアから公式デザインをインポート。
はてなブログでサイドバーを2つ（3カラム）にして、さらにモジュールを使えるようにした - とあるサブカルの情報日記
とりあえず知識もなかったので、「3カラム」CSSをそのままコピー。
割ります。
勿論、この状態だとサイドバーの位置や記事の位置がおかしくなるのでCSSをいじります。#containerとか#wrapperとか適当にいじります！！！
デザインに寄るので細かく書きません。
はてなブログのいいところはCSSを直接弄り、項目がすぐに反映されて調整できるところでしょうかね。
見栄えが良い三段カラムブログが出来ても公式にあげちゃ駄目ですよー。
それは注意です。
ヘッダ部分にグローバルナビとRSSフィードをつける
livedoor 相互RSS - アクセスアップのベストツール
はてなアンテナでも良いとは思うんだけど、更新されて即記事を見たい！と思う時はRSSの方が便利だよねぇ。擬似インラインフレームを利用するといいかもです。
*.logbox
{
border: solid 1px #808080;
width: 240px;
height: px;
padding: 0.5em;
overflow: auto;
}
q { color: #008000; }
<div class="logbox"></div>
CSSは記述しておくと好きな所にインラインフレームを設置できるのでお勧めです。
グローバルナビは
参考にするといい感じです。
CSS MenuMakerさんは無料で、操作が簡単、わかりやすくできるので便利なんですが、
有料
なんですよねー。払って使ってますが、「グローバルナビ CSS」なんかで検索すると結構出てくるのでそれを利用してもいいかもしれません。
その後
サイドバーにLast.fmのウィジェットつけたり、Twitterウィジェットつけたり、メールウィジェットつけたりしましょう。
今はソーシャルパーツをボタンに変えようと努力してます。難しい。
昨日レビュー書いてて面白かったのが星評価をCSSで記述できるコード。
いちいち星評価ソースをHTML編集画面で書き込まなければならないという難点がありますがわかりやすくなったかと思います。ランクを表示できるように為ったのは良かったなぁと思ってます。レビューとかに便利。
WordPressとかじゃないとプラグイン無いだろうしねー。はてなブログも今後対応してくれれば良いんですけど。
サイトのサムネイルを保存できるHeartRailsCaptureは便利だね！
そんな感じでやっていけると面白いと思いますのでカスタマイズ頑張ってください。
おまけ
デザインテーマを3カラムに弄ってみた。
body {
width: 1390px;
margin: 0 auto;
}
#container {
width: 1000px;
padding: 200px;
/*
サイドバーを外に
width: 720px;
margin-right: 860px;
*/
/*
サイドバーを左よせ
margin-left: 0px;
*/
}
#content {
padding: 0;
}
#content-inner {
position:relative;
}
#wrapper {
width: 600px;
margin-right: 1000px;
position: relative;
/*
サイドバーを外に
margin-left: 180px;
*/
/*
サイドバーを左よせ
margin-left: 100px;
*/
}
#box2 {
width: 370px;
position: absolute;
right: 0;
/*
サイドバーを外に
margin-left: -360px;
*/
/*
サイドバーを左よせ
left: 0;
*/
}
.hatena-module:nth-child(2n + 1) {
float: left;
clear: left;
}
.hatena-module:nth-child(2n) {
float: right;
clear: right;
}
.hatena-module {
width: 180px;
}
/* ----- NEW_ENTRY ----- */
.htbl_new_entries {
height: 100%;
width: 100%;
}
.htbl_new_entry {
position: relative;
background: #ddd;
width: 100%;
height: 100px;
overflow: hidden;
margin-top: 1px;
border-radius: 1px;
}
.htbl_new_entry_img { position: relative; top: -9px; min-height: 118px;}
.htbl_new_entry_text {
position: absolute;
top: 0px;
word-break: break-all;
overflow: hidden;
background: rgba(15, 15, 15, 0.65);
width: 90%;
height: 100px;
margin-top: 0px;
padding: 0 5%;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.35s ease-out;
-moz-transition: all 0.35s ease-out;
-o-transition: all 0.35s ease-out;
transition: all 0.35s ease-out;
}
.htbl_new_entry_text:hover {
background: rgba(255, 255, 255, 0.05);
color: transparent;
text-shadow: none;
padding-top: 100px;
}
.htbl_new_entry_text span.entry_title {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 100px;
font-size: 14px;
font-weight: lighter;
}
.htbl_new_entry_text span.entry_date {
position: absolute;
bottom: 0;
right: 5px;
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
text-shadow: none;
}
*.logbox
{
border: solid 1px #808080;
width: 170px;
height: 320px;
padding: 0.5em;
overflow: auto;
}
Handwriting
Venetia
若干花の位置が気になるのでそこら辺は調節したほうが良さそう
Pink Pharmacy
これもサイドバーが寄り過ぎてる（プロフィールモジュール）っぽいので要調節。
Donuts
ヘッダ部分の画像とサイドバー要調整
Novel
綺麗に表示できてるので問題なし。
レトロポップ
これも綺麗に表示できてるので(ry
Terminal
これも問題ないかなー。
Report＆Epic
問題なし。もっといじれるような気がする
Mistilteinn
SUPER NOVA
Frash Green
Nishikino
Timeline-minimal
要調整
Simple Gray
Written
コメントの部分を消せば良いと思います
レスポンシブル―
