天気館

新米旦那うぇずの日々ちょっとしたことを綴る日記。結婚から始まる秘密の日記。結婚生活からアニメ雑談まで。

新米旦那うぇずの嫁には秘密の日記

はてなブログで自分だけのcssを設定する方法

最近アニメとかゲームとかの話ばかりだったから、ちゃんとWEBデザインにも触れておきます。

バランスがサブカル系によっちゃってたので、たまにはちゃんとブログ的なことを書きますか。

初めての技術系記事は、

はてなブログに自分のデザインを反映しよう!!

とっても簡単ですよ。

数分でちゃちゃってやっちゃいましょう!!

はてなダッシュボードから設定する

ダッシュボードから「デザイン」という列を選択します。

はてなのデザインを選ぶ

はてなのデザインを選ぶ

さらにそこから「カスタム」という名称のスパナアイコンをクリック!

はてなのカスタムを選ぶ

はてなのカスタムを選ぶ

その中の一番下!【{} デザインCSS】っていう項目が設定場所!

はてなのスタイルシートを変更

はてなスタイルシートを変更

ここに自分が設定したいデザインを設定しましょう!

自分のブログは今こんな感じ


.box {
 margin: 6px 0px;
 padding: 6px 0px;
}
.box pre {
 font-size: 12px;
 padding: 0;
 margin: 0;
 background: #f0f8ff;
 border-left: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 line-height: 20px;
 width: 80%;
 overflow: auto;
 overflow-Y:hidden;
}
.c_blue {
 color: #2196f3;
}
.c_red {
 color: #ff5252;
}
.strong_word {
 font-size: 150%;
 font-weight: bold;
}

うん。始めたばっかりって感じだね!まさに最低限だね!笑

もう少しちゃんとcss作ってから書くべき記事だったかな。なんか反省。

書き終わったらちゃんと「変更を保存する」ボタンを押して保存しよう!

あとはブログでclassを書くだけ

「見たまま」モードでまずは書いて、その後に「HTML編集」モードからclassを設定するのもいいし、最初から「HTML編集」モードでもいいと思う。

僕はなんか癖で、最初エディタにガリガリHTMLのブログ書いてる。

まさにこんな感じ。色着いてたりしてて見やすいんですよ...。というか見慣れてる。

みなさんも気が向いたら試してみてねっ

WEB開発者を垣間見せた旦那うぇずでした!

ブログ書くときはこんな感じ

ブログ書くときはこんな感じ