はてなブログのカスタマイズ方法
はてなダイアリーのカスタマイズの方法を紹介いたします。ソースコードを公開するので参考にしてください。
ページのヘッダにHTMLを入力する
- ここでは主にメインコンテンツから上部の部分をいじります。
<div class="headsentence"> <p>HTML/CSS/JQuery/JavaScript/ActionScript/PHPを半年で習得し<br>Webマスターになる為の成長ブログ</p> </div> <div class="logo"> <img src="http://cdn-ak.f.st-hatena.com/images/fotolife/e/epikhigh/20120502/20120502233956.png" title="フェリカテクニカルアカデミー" alt=""> </div> <div class="main"> <hatena name="adsense">
ページのフッタにHTMLを入力する
- ここではモジュールの追加(カレンダー・カテゴリーなど)、または位置調整を行います。
</div> <div class="sidebar"> <hatena name="calendar2" template="hatena-module"> <hatena name="sectioncategory" template="hatena-module"> <hatena name="section" template="hatena-module"> <hatena name="antenna" template="hatena-module"> <hatena name="profile" template="hatena-module"> <hatena name="pv" template="hatena-module"> </div>
スタイルシートにCSSを入力する
- ブログのみためを変更するのには、ほとんどがこの部分で制御します。今回はCSS3をところどころ使ってみました。
body { background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/e/epikhigh/20120503/20120503193818.png"); } #simple-header { margin-top: 20; background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/e/epikhigh/20120503/20120503193821.png"); -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; -o-border-radius: 4px 4px 0px 0px; -ms-border-radius: 4px 4px 0px 0px; -o-box-shadow: 0px -1px 2px 1px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0px -1px 2px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px -1px 2px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px -1px 2px 1px rgba(0, 0, 0, 0.2); } #simple-header input.search-button { color: #333; } #simple-header ul li a { color: #fff; } .main { background-color: #fafafa; -o-box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.2); -moz-border-radius: 0px 0px 4px 4px; -webkit-border-radius: 0px 0px 4px 4px; -o-border-radius: 0px 0px 4px 4px; -ms-border-radius: 0px 0px 4px 4px; } h1 { background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/e/epikhigh/20120503/20120503152915.png"); background-size:100%; -o-box-shadow: 0px -2px 2px 1px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0px -2px 2px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px -2px 2px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px -2px 2px 1px rgba(0, 0, 0, 0.2); } .headsentence p { color: #8c929c; border-bottom: solid 1px #d2d6de; text-align: center; margin: 0; -o-box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.2); } .logo { height: 0; position: relative; top: 35; left: 170; } .body .section { margin-bottom: 10; padding: 0 10 0 10; border: 1 solid #d2d6de; -moz-border-radius: 4; -webkit-border-radius: 4; -o-border-radius: 4; -ms-border-radius: 4; background:url('http://cdn-ak.f.st-hatena.com/images/fotolife/e/epikhigh/20120504/20120504051333.png'); background-repeat: no-repeat; background-color: #fff; } .body h3.title { font-size: 1.2em; border-left: 0; text-align: center; margin-top: 10px; } .body h4 { color: #666; } .body .section p.sectionheader { text-align: right; border-left: 0; } .body .sectionfooter { font-size: 0.75em; padding-top: 30px; padding-bottom: 20px; text-align: center; } div#google_afc_user, div#google_afc_user { background-color: #fafafa; background-image: none; padding: 10; border: 0; } .hatena-module { background-color: #fff; } .hatena-module .hatena-moduletitle { color: #fff; background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/e/epikhigh/20120503/20120503193819.png"); } .hatena-module .hatena-moduletitle a { color: #fff; } .body .section pre { padding: 20; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; background-image: url("http://subtlepatterns.com/patterns/white_leather.png"); -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; }