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

bunoshi

働き方を考えるブログ

CSS初心者がオリジナルテーマ作成に挑戦 【はてなブログ カスタマイズ】

ブログ運営

オリジナルテーマ作成に挑戦

色々とカスタマイズしていましたら楽しくなりすぎて、ついにオリジナルテーマを作ることにしました。

ちなみにHTMLもCSSも全く分からない初心者です。

はてなブログは初心者でもオリジナルテーマが簡単に作れると書いてあったので、それを信じてチャレンジ!

と言ってもいきなりメインのブログで作業をするのは怖いので、テーマ確認用のブログを開設しました。Proだと10個まで開設できます。

それから、はてなブログテーマ制作の手引き - はてなブログ ヘルプから「サンプルエントリー」をコピーして記事を1本公開。もちろん公開範囲は自分のみにしています。

 

まずはサンプルテーマ「Boilerplate」をコピー

help.hatenablog.com

↑ここからサンプルテーマ「Bolieplate」のCSSをコピーしてきてデザイン⇒カスタマイズ⇒デザインCSSに貼りつけました。

デザインCSSに最初から書いてあった文字?は邪魔だったので全部消しといた。消してよかったのかな??

 

オリジナルテーマを作ると言っても初心者がゼロから作っていくのはかなり大変。大変と言うか何からやっていいのかさえ分からないので、サンプルテーマをカスタマイズしながら好みのデザインを作っていきます。

 

まずはヘッダ画像をアップロード、そしてグロバルメニューを作った

ある程度見た目が整っていないとイメージがわかないのでまずはヘッダに画像アップロード、そして見た目で最も重要なグローバルメニューを作りました。

bunoshi.hateblo.jp

この記事でもグローバルメニューの作り方は書いていますが、せっかくなので全く違う作り方でやってみました。

まずはタイトル下のHTMLに次のソースを書く。

<div class="navi">
<nav class="menu">
<ul>
<li><a href="カテゴリのURL">カテゴリ名</a></li>
</ul>
</nav>
</div>

 それからデザインCSSに次のソースを書く。

 /* グローバルナビゲーション */
.navi{
background-color: #0000cd;
}
.menu ul {
margin: 0;
padding: 0;
list-style :none;
}
.menu li a{
display: block;
padding: 5px 15px;
color: #ffffff;
font-size: 12px;
text-decoration: none;
}
#menu ul li:last-child {
border-right: 0;
}
.menu li a:hover{
background-color: #00ffff;
}
.menu ul:after{
content: "";
display: block;
clear: both;
}
.menu li{
float: left;
width: auto;
}

 そして出来上がったのがこれ。

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

青が好きなんです。

 

窮屈なので隙間を作った

見た目は大切です。グローバルメニューと記事、サイドの隙間がほとんどなく、見た目が窮屈だったので隙間を少しだけ作りました。

/* 隙間を追加 */

#main {
padding-top: 20px;
}

 記事の上に隙間を入れたソース「padding-top:20px」の部分が隙間の設定。

/* 隙間を設定 */

#box2 {
padding-top: 20px;
font-size: 85%;
line-height: 1.5;
}

 これも一緒、サイドメニューの上に隙間を設定。このやり方があっているかどうかは知らない。見た目が整えばそれでOKです。

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

「/*~*/」の「~」の部分に文字を書けばメモとして使えるので、どんなカスタマイズをしたか忘れないためにも書いておくことをお勧めします。

見た目が崩れてもメモがあれば直すのも簡単ですしね!

 

最後に

イメージは出来ているんですよ。後は形にするだけなんでけどね。

やったことが無いことをやっているだけに、すごく難しくてものすごく面白い!

暇を見つけて地道に頑張ります!

 


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

Presented by bunoshi