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

はてなブログを三段カラムにしてデザインしてみた

プログラム-CSS

はてなブログのカスタマイズ

はてなダイアリーとは違って、CSSのみだけではなく、jQuery、JSファイルも利用できるので一気にカスタマイズ制度が向上。

しかし!LESSとかわかんない!(勉強中)そもそもCSSってなんじゃ!って人向け。

適当に三日間いじったことを適当にメモっただけなのでそもそもそんなすごいものではないのでまぁ参考程度にしてください。

というか書いてる自分自体、CSSはだいたいコピペで済ませてるのでなんとも言えないし、元デザインを作ってくれた人ありがとうございます!って感じです。

f:id:LikeLife:20150112181355j:plain

多段カラム

まず適当に公式テーマストアから公式デザインをインポート。

テーマ ストア - はてなブログ


はてなブログでサイドバーを2つ(3カラム)にして、さらにモジュールを使えるようにした - とあるサブカルの情報日記

とりあえず知識もなかったので、「3カラム」CSSをそのままコピー。

割ります。

勿論、この状態だとサイドバーの位置や記事の位置がおかしくなるのでCSSをいじります。#containerとか#wrapperとか適当にいじります!!!

デザインに寄るので細かく書きません。

はてなブログのいいところはCSSを直接弄り、項目がすぐに反映されて調整できるところでしょうかね。

見栄えが良い三段カラムブログが出来ても公式にあげちゃ駄目ですよー。

それは注意です。

ヘッダ部分にグローバルナビとRSSフィードをつける

RSSフィードLivedoorのを使ってます。


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は記述しておくと好きな所にインラインフレームを設置できるのでお勧めです。

グローバルナビは

http://weboook.blog22.fc2.com/blog-entry-359.html

参考にするといい感じです。

 

http://cssmenumaker.com/

CSS MenuMakerさんは無料で、操作が簡単、わかりやすくできるので便利なんですが、

有料

なんですよねー。払って使ってますが、「グローバルナビ CSS」なんかで検索すると結構出てくるのでそれを利用してもいいかもしれません。

 その後

サイドバーにLast.fmウィジェットつけたり、Twitterウィジェットつけたり、メールウィジェットつけたりしましょう。

今はソーシャルパーツをボタンに変えようと努力してます。難しい。

 昨日レビュー書いてて面白かったのが星評価をCSSで記述できるコード。

いちいち星評価ソースをHTML編集画面で書き込まなければならないという難点がありますがわかりやすくなったかと思います。ランクを表示できるように為ったのは良かったなぁと思ってます。レビューとかに便利。

WordPressとかじゃないとプラグイン無いだろうしねー。はてなブログも今後対応してくれれば良いんですけど。

http://capture.heartrails.com/

 

サイトのサムネイルを保存できる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

コメントの部分を消せば良いと思います

レスポンシブル―

Copyright © 2016 ブログ名 All rights reserved.