ブログテーマをカスタマイズしてみた
せっかくなので,ブログのデザインをカスタマイズしてみました.
その手順などを簡単にまとめたいと思います.
1. 元のテーマを決める
最初から各パーツのデザインを全て決めるのは難しいので,あるテーマを元に,それをカスタマイズするという方法をとりました.はてなブログのテーマは,次のページにまとまっています.
この中から,自分のイメージに一番近いテーマを選びます.今回私は
を選択しました.
2. CSSの追加
設定 -> デザイン -> カスタマイズ -> デザインCSS から,CSSを追記できます.
この作業については下のサイトなどが参考になりました.
自分のいじりたい要素を探すのには,Chromeのデベロッパーツールなどを使いましたが,少々面倒でした.後になって見つけたのですが,次のサイトにどの要素がどのような名前かがまとまっているので,参考になりそうです.
3. フォントを変える
せっかくここまでカスタマイズしたんですから,フォントもデフォルトでなくカッコ良いものに変えちゃいましょう.
私は次の2つのサービスを使いました.
このブログでは,タイトルにLato,本文にUD新ゴ,見出しにM+を使っています.
(3/16追記:見出しもUD新ゴになりました)
設定方法などは,次のサイトが参考になりました.
おまけ
自分のCSS構成例を置いておきます.基本的には,フォントと色の設定ですね.
最後の@media以下については,iPhone5Sへのレスポンシブ対応のためで,詳細はそのうちまとめる予定です.
/* */
@import "http://hatenablog.com/theme/10328749687194646740.css";
/* */
/* Responsive: yes */
#globalheader-container {
color: #333;
background: #fff;
}
body {
background-color: #fff;
font-family: "UD Shin Go Light";
letter-spacing: 1px;
}
#title {
font-family: "lato",sans-serif;
font-style: normal;
font-weight: 200;
}
.entry {
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.15);
transition: box-shadow 0.2s;
}
.entry:hover {
box-shadow: 0 0 20px rgba(0,0,0,.15);
}
.hatena-module {
border-radius: 10px;
transition: box-shadow 0.2s;
}
.hatena-module:hover {
box-shadow: 0 0 20px rgba(0,0,0,.1);
}
h1, h2, h3, h4 {
font-weight: normal;
}
a,
a:link,
a:visited,
a span {
color: #660066;
font-style:normal;
text-decoration:none;
}
a:hover,
a:active {
color:#CC00CC;
text-decoration:none;
}
@media (max-width: 960px) {
#content {
margin: 0 auto;
width: 100%;
}
#main {
margin: 0 auto;
max-width: 100%;
width: 100%;
}
#main-inner {
max-width: 95%;
margin: 0 auto;
}
.pager {
margin-left: 10px;
}
#box2 {
max-width: 100%;
width: 100%;
display: block;
}
#box2::after {
content: "";
display: block;
clear: both;
}
#box2-inner {
margin: 0 auto;
width: 95%;
}
}