コピペで始めるはてなブログテーマDUDEのカスタマイズ集！フォント・色から自分らしく
当ブログは移転しました。5秒後に自動で新ブログの同記事に移動します。
人気ブログLITERALLYの著者CatNoseさんが2016年1月17日に発表した、最強のはてなブログテーマDUDE。
このテーマを使えば、初めからオシャレなブログができてしまうということで異常なほどの人気を誇る。どれほどの人気かというと、テーマ発表後3ヶ月に満たない2016年4月14日現在で、インストール数3187。はてなブログの人気テーマランキングで堂々の2位につけている。
何を隠そう、このブログももちろんDUDEを使用している。DUDEを選んでからもうすぐ一ヶ月になるが、スマホ表示まで含めて一通り満足のいくカスタマイズができた。本記事ではこの経験をもとに、はてなブログテーマDUDEに特化したカスタマイズ解説をしていく。読み進めていくうちにcssの基本が分かるくらい丁寧に説明したつもりなので、全く知識のない人もぜひ挑戦してみてほしい。
DUDEに特化といっても、はてなブログであればcssのクラスやidの指定は基本的に同じなので、そのままコピペでこの記事のコードを使えるものも多い。
雰囲気に合わせる
具体的な設定の説明に入る前に、大事なことを。
ブログのデザイン作りで一番重要なことは、ブログの雰囲気に合わせてカスタマイズしていくことだ。考えてみれば当たり前のことだが、フォントや色遣いなどに唯一絶対の正解はない。料理ブログなら、暖色（赤、茶系統）を中心に構成すべきであり、青や紫といった食欲を削ぐような色は使いづらい。逆に、テクノロジーやプログラミング関係であれば、クールなイメージの黒や青を中心に構成すべきだ。このように、ブログのテーマにあわせてデザインを作っていくことで、ブログがもっと見やすくオシャレになる。
よく女性が男性の好きな服装を聞かれたときに言う、「服は似合ってればいい」というセリフがある。ユニクロでも似合っていればオシャレに見えるし、いくら高級なブランド服でも、似合っていないとダサいということだ。ブログテーマも同じように、ブログの雰囲気とデザインがマッチしていることが一番重要だ。
以下では、はてなブログテーマDUDEのカスタマイズ法を紹介する。それぞれのカスタマイズを行うにあたっては、あなたのブログの雰囲気のことを常に頭の片隅に置いておくことをオススメする。
ブログ上部のカスタマイズ
参考までに、本記事執筆時の当ブログF Lab.の上部はこのようになっている。
タイトル・紹介文のフォントの変更
DUDEの初期設定のブログタイトルのフォントはかなりポップ寄りだ。あなたのブログがポップな雰囲気ではない場合、このままのフォントでは合わないかもしれない。ここはブログの顔といえる部分なので、フォント選びはかなり重要。
フォントはGoogleフォントから選ぼう。
オススメのGoogle フォントは、
こちらから。当ブログでは知的な雰囲気を出したかった（笑）ので、スッキリとしたフォントを探して選び、Open Sansというフォントを採用した。
使用するフォントを選んだら、はてなブログにそのフォントを導入する。上記ページにはてなブログへのGoogleフォントの導入の仕方も解説しているので、読みながらやってみてほしい。
Googleフォントの導入が完了したら、デザインcss（ダッシュボード＞デザイン＞カスタマイズ＞デザインcss）をいじって、実際にフォント変更を適用していく。
ただ、「デザインcssをいじってください。はい、どうぞ」と言われても、初心者には難しい。なので、コピペで対応できるよう、DUDEの作りにあわせて以下に説明する。
ここでは、上の画像の1をブログタイトル、2をブログ説明、3をヘッドタイトル、4をヘッド紹介文と呼ぶことにする。これらのフォントを変更したい場合には、
#title a { font-family: フォント名; } /*ブログタイトルのフォント変更*/
#blog-description { font-family: フォント名; } /*ブログ説明のフォント変更*/
.headimg h4 { font-family: フォント名; } /*ヘッドタイトルのフォント変更*/
.headimg h5 { font-family: フォント名; } /*ヘッド紹介文のフォント変更*/
これをデザインcss（ダッシュボード＞デザイン＞カスタマイズ＞デザインcss）にコピペする。そしてコード中のフォント名と書かれた部分を、自分が使いたいフォント名に変更すれば完了。ちなみに、変更したいフォント名にスペースや全角文字が含まれている場合には、フォント名をシングルクオーテーションまたはダブルクオーテーションマークで囲む必要がある。考えるのがめんどくさければ、フォント名は何でも全部ダブルクオーテーションマークで囲んでしまっても機能する。
/*～*/で囲まれた部分は、cssでは透明人間のように無視されるので、消す必要はない。後で見て分かるためのメモとして残しておいてほしい。
また、フォント名をコンマで区切って並べることで、フォントの優先順位を指定することができる。たとえば、タイトルに英語と日本語が混ざっていて、英語用フォントと日本語用フォントを同時に設定したい場合には、以下のように英語用フォントを先に、日本語用フォントを後にして、コンマで区切って並べて書くことで実現できる。
#title a { font-family: "Avenir Next", "游ゴシック体", "Yu Gothic", YuGothic; }
先に書いたフォント指定が優先されるので、このように記述するとAvenir Nextに入っていない日本語文字だけが游ゴシックで表現されるようになる。
ちなみに、
#title a { font-family: "Avenir Next", Quicksand, Arial, YuGothic, 'Yu Gothic', '游ゴシック体', '游ゴシック', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, 'MS ゴシック', 'MS Gothic', sans-serif; }
このようにいっぱい書き連ねる人も多い。なぜこんなにたくさん書くかというと、OSがMacやWindowsだったり、あるいはスマホを使っていたりと、ユーザーの環境はさまざまで、フォントを一つだけ指定しても、そのフォントをユーザーが表示できないこともあるからだ。この場合も当然、先に書いたものほど優先される。後に書いたものは念のために書いているというイメージ。
また、cssを指定する対象（1ブログタイトル～4ヘッド紹介文）をコンマで区切って
#title a, #blog-description, .headimg h4, .headimg h5 { font-family: フォント名; } /*ページ上部のフォントまとめて変更*/
と書けばこれら4つの部分のフォントをまとめて変更することができる。この方がコードはスッキリするが、後々になってタイトルと紹介文のフォントを別に指定したくなったときに、考えてコードを書き直さなくてはいけなくなる。
自分が後でいろいろイジってみたくなったときに、分かりやすいと自分で思う方をコピペしておくといいだろう。
タイトル・紹介文の色の変更
ここまでで4箇所の文字フォントを変更したが、このうち、2のブログ説明にはもともと青色っぽい色がついている。
この色も、できればブログの雰囲気に合わせて変更したい。デザインcss（ダッシュボード＞デザイン＞カスタマイズ＞デザインcss）の、先ほどコードをコピペした部分とは別の行（上でも下でもかまわない）に
#blog-description { color: #ffffff; } /*ブログ説明の色変更*/
これをコピペして、色コード（上記コード内の#ffffffの部分）を自分の好きなものに変更する。
はてなブログで使用するのにおすすめの同系色グラデーションの色コードを下にまとめたので、コピペして使っていただきたい。はてなブログテーマDUDEはもともと青系統色で作られているので、こだわりがない人や、手間をかけたくない人は青系統から選ぶのが無難ではある。ただし、青系統のブログは多すぎる感がある。色の調整に自信のある人は、別の色系統を使って新規性をアピールするのもメリットが大きい。
青系統
#07141f
#0e263a
#143856
#1b4971
#25649a
#3488cf
#6ba8dc
#a2c8e9
#bdd8ef
#d9e9f6
#e7f1f9
#f4f9fc
緑系統
#07160a
#0c2310
#143c1b
#1d5627
#256f33
#3aaf50
#6fcf81
#a2e0ad
#c8edcf
#d5f1da
#e2f5e5
#eef9f0
赤系統
#2b0503
#3a0705
#4a0906
#6a0d09
#99120c
#d81a12
#ef453e
#f4827d
#f9bebb
#fcdcdb
#fdebea
#fffafa
ピンク系統
#fb03f2
#fd23f4
#fd45f6
#fd67f8
#fe77f8
#fe88f9
#fe99fa
#feaafb
#febbfc
#fecbfd
#ffdcfd
#ffedfe
グレースケール
#111
#222
#333
#444
#555
#6e6e6e
#909090
#b2b2b2
#d4d4d4
#e5e5e5
#eee
#f6f6f6
もっと色コードが見たい方は、
こちらをどうぞ。
余裕があれば、ついでに色コードの仕組みもカラーコードの仕組みをしろう！ | ＋ぷちカスタマイズ日記＋こちらのサイトで理解しておくと、自分で色コードをいじって色の微調整ができて楽しい。
コードを綺麗に
参考程度に、フォント変更と色変更をまとめて
#title a {
font-family: フォント名; /*ブログタイトルのフォント変更*/
color: 色コード; /*ブログタイトルの色コード変更*/
}
こんな感じに書くこともできる。cssでは改行は無視されるので、コードが見やすいように適宜改行を入れてかまわない。コードを綺麗にしたい人はこの書き方で書いてもいい。
使用した色コードをメモしておく
無事色の設定が終わったら、ここで使用した色コードをメモ帳か何かに保存しておくことをオススメする。
今後ブログ内のいろいろな要素の色を変更していくことになるが、一つのブログで使用する色はなるべく同系色のグラデーションに統一した方がスッキリと見える。なので、ブログ内で色コードを指定した場合には、逐一それをどこかにまとめておき、後で別の要素の色指定をするときの参考とできるようにしておきたい。
ヘッド画像の表示領域変更
うまいことヘッド画像の良い部分が表示されない場合など、画像の表示領域をもう少し増やすか減らすかしたいことがある。その場合は、
/*ヘッド画像の表示領域変更*/
.headimg {
-moz-background-size:cover;
background-size:cover;
padding: 60px 20px; /*上下、左右の余白調整*/
}
これをデザインcss（ダッシュボード＞デザイン＞カスタマイズ＞デザインcss）の好きな行にコピペし、上下の余白（60pxとなっている部分）を好きな値に変更すると余白の大きさが変わる。上と下で別の値を設定したい場合には、「○○px」を半角スペースで区切って4つ書く。4つ書いた場合には、それぞれ順番に上、右、下、左の余白指定となる。
グローバルメニューの設置
これは少々難しいのだが、SEO的に重要な「直帰率」という数字に効く（＝検索等で流れてきた人を2ページ目に誘導してくれる）結構大事な要素だったりする。
ほぼコピペだけで簡単に設置するのであれば、
はてなブログに簡易メニューバーを追加 - maroomこちらのサイトからどうぞ。レスポンシブ対応（画面サイズにあわせて適切なサイズで表示）してくれているし、デザイン的にも十分良いのでおすすめ。
難しいけど階層的なメニューが作れたりする高機能なのがよければ
はてなブログのトップにナビゲーション(カテゴリ)メニューを作る！【カスタマイズ】 - すりゴマ・ドットコムこちらのサイトから。
ぼくは2番目の方で導入したが、結構難しかったので別記事をたてて導入方法を紹介するかもしれない。需要を感じれば優先して執筆するので、気になっている方はtwitter等でツツいてみてください。
はてなブログPro版でしかできないが、スマホサイトにグローバルメニューをつけたい場合は
はてなブログのスマホ表示にグローバルナビゲーションを設置する - AIUEO Lab2こちらから。
（2016年4月23日追記：F Lab.のグローバルメニューの仕様は上記のものから変更しました。）
記事内要素のカスタマイズ
ここまではページ上部、ブログの顔と呼べる部分のカスタマイズを紹介した。ここから先は、ブログの本体である、記事のデザインのカスタマイズを紹介していく。
目次のカスタマイズ
はてなブログでは公式の目次機能が用意されている。記事の編集画面で、目次を挿入したい場所に
[:contents]
と書くだけで、自動的に目次が表示されるようになっている。見たまま記法でもHTML記法でもはてな記法でも同じ書き方でいいようだ。目次については、
はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム - Yukihy Life
こちらの記事が分かりやすいのでどうぞ。
ただ、はてなブログテーマDUDEではcssの書き方の関係で、そのままコピペではPC表示時の目次の大見出しが数字のリストにならない。
これを解消し、数字のリストとして表示するためにはcssの.table-of-contentsの前に.entry-contentを書き加えればいい。
/* 目次 */
/* 目次のリストを数字に */
.entry-content .table-of-contents li,
.entry-content .table-of-contents ul{
list-style-type: decimal;
}
/* 「目次」の文字を追加 */
.table-of-contents:before{
content: "目次";
font-size: 150%;
}
/* 目次の小見出しを消す */
.table-of-contents ul ul{
display: none;
}
/* 目次の枠線の丸みと背景色設定 */
.table-of-contents{
border-radius: 4px; /*枠線の角の丸みの変更*/
background: #f6f6f6;/*背景色はここから変更*/
}
/* 目次の小見出しの文字を少し小さく */
.table-of-contents ul{
font-size: 84%;
}
これがF Lab.で設定している目次のコード。だいたい直感的に変更する部分等分かると思うので、色コードなどを変更してデザインcssにコピペしてみよう。
注意点として、はてな公式の目次はh3見出しとh4見出しを自動的に読み取って目次を生成するので、目次を入れたい記事の場合はそこを意識して記事を書く必要がある。
本文の英字フォントの変更
本記事の初めに、タイトル部の英字フォントの変更方法を紹介した。タイトル部の英字フォントを変更した場合には、あわせて本文の英字フォントも変更しておきたい。タイトルと本文の英字フォントは同じでも異なるものでも構わない。
html, body { font-family: "Avenir Next", "游ゴシック体", "Yu Gothic", YuGothic; 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, 'MS ゴシック', 'MS Gothic', sans-serif; }
これをデザインcss（ダッシュボード＞デザイン＞カスタマイズ＞デザインcss）の好きな行にコピペして、"Avenir Next"を好きな英字フォント名に変更すれば完了。日本語フォントについても、游ゴシックよりも好きなフォントがあれば"游ゴシック体"の前に書く。游ゴシックはオシャレだけど細くて読みづらいという難点もある。それを気にしてメイリオを游ゴシックより前に持ってくる人もかなり多いので、気になる人はまずはそれを試してみよう。
h5見出しのスタイルの変更
はてなブログテーマDUDEの見出しは、初期設定では以下のようになっている。
h3とh4はこのままで全く問題ないのだが、h5に特に装飾がないのが惜しい。
ブログを書くうえで、装飾付き見出しが2種類しかないと表現の幅が狭くなってしまう。h5についても何らかの装飾を設定して積極的に使っていくことをオススメする。はてなブログテーマDUDE用にオススメのh5見出しの例として、以下の2つを紹介する。
h5 見出し例1
.entry-content h5 {
position: relative;
color: #333;
border-bottom: 4px solid #ccc;
padding: 5px 7px;
}
.entry-content h5::before {
position: absolute;
top: 100%;
left: 0;
width: 20%;
height: 4px;
background-color: #3498db;
z-index: 2;
content: '';
}
h5見出し例2
.entry-content h5 {
position: relative;
color: #fff;
padding: 8px 12px;
background-color: #6ba8dc;
border-radius: 6px;
}
.entry-content h5::before{
position: absolute;
top: 100%;
left: 32px;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-top-color: #6ba8dc;
content: '';
}
どちらを使う場合も、これをデザインcss（ダッシュボード＞デザイン＞カスタマイズ＞デザインcss）にコピペするだけでOK。
上の2例はいずれも、下記サイトに紹介されている見出しを元に、はてなブログテーマDUDEに合うように余白の幅や色などに若干の改変を施して紹介した。
コピペで簡単！CSSではてなブログの見出しをカスタマイズ！ - NO TITLE
こちらのサイトには他にも定番の見出しカスタマイズが載っているので、気になる人は見てみてほしい。
リストの色の変更
はてなブログテーマDUDEのリストは、初期設定では以下のようになっている。
少量のリストであれば青みのあるこの色合いがオシャレでいいのだけど、リストを大量に書くような場合には、このままではやや目がチカチカしてしまう。リストを大量に書く可能性のあるブログでは、以下のコードをデザインcssにコピペして色みを暗くしておくことをオススメする。
.entry-content ul, .entry-content ol {
color: #070a4b;
border: solid #070a4b 2px;
}
.entry-content ul li ul, .entry-content ol li ol {
border: 0px;
padding: 5px 5px 5px 0;
font-size: 0.9em;
color: #0c118a;
}
コード内の上から2行目にある、color: #070a4b;の色コードを変更すると、リストの文字色が変わる。
上から3行目にある、border: solid #070a4b 2px;の色コードを変更すると、リストの枠の色が変わる。ちなみに、2pxの値を変更すると、枠の太さが変わる。
下から2行目にある、color: #0c118a;の色コードを変更すると、リスト内リストの文字色が変わる。
サイドバーのカスタマイズ
はてなブログテーマDUDEでは、初期設定ではサイドバーの表記はこのようになっている。
ABOUT
サイドバーは印象に残りやすい部分なので、忘れずに調整しておきたい。
フォントの変更
.hatena-module-title {
color: #202035;
font-weight: bold;
border-left: 10px #202035 solid;
padding-left: 10px;
margin-bottom: 15px;
font-size: 150%;
line-height: 1em;
letter-spacing: 0.1em;
font-family: 'Montserrat';
}
散々紹介したのでもはや説明は不要かも知れないが、まずはcolorとfont-familyを自分のブログに合わせて変更しよう。
次に、4行目のborder-left: 10pxとあるところ、数字を増減することでABOUTの左の線の太さを調整することができる。
いろいろ調整が終わったらデザインcssにコピペする。ちなみに、初期設定のままで特にいじらなかった項目は、そのままコピペしてもいいし、いじらなかった行だけ消してコピペしてもいい。デザインcssの中で特に記述しなかった項目は、ブログテーマDUDEの初期設定を受けつぐようになっている。
シェアボタン・フォローボタンのカスタマイズ
ブログと日記の決定的な違い。それは、ブログはPV・シェア・フォローが多ければ多いほど嬉しいということ。シェアボタンやフォローボタンをカスタマイズすることでどれほどの影響があるかは分からないが、デザイン的な面からもカスタマイズすることをオススメする。
ここははてなブログテーマDUDEに限らず、どのブログテーマにでもオススメのものを紹介する。
シェアボタンの変更
シェアボタンのカスタマイズ界はほぼ一強で、
【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2 - Yukihy Life
こちらを採用しているブログが非常に多い。ただ、利用者が多いということはメリットでもありデメリットでもあるので、独自性を求める場合は他のものを。
こちらもシンプルでとてもオシャレで、ぼくはかなり心を動かされている。
はてなブログの超便利なデザインテーマ「Brooklyn」を作りました - NO TITLE
F Lab.で2016年4月現在使っているシェアボタンはこちら。
コピペ一発！はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ！ - いつ俺〜いつから俺ができないと錯覚していた？〜
フォローボタンの変更
こちらも定番のものから。
コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life
ぼくが2016年4月現在狙っているもの。シンプルかつ、色がオシャレ。
コピペOK！読者になるボタンやSNSフォローボタンのカスタムCSS - 急がば 急いでまわれ！
ぼくが2016年4月現在使っているもの。
はてなブログに11種類から選べるSNSフォローボタンをコピペ＋αで実装するカスタマイズ - いつ俺〜いつから俺ができないと錯覚していた？〜
要素の検証
これをマスターすることが一番大事かもしれない。はてなブログテーマの作者CatNoseさんのブログLITERALLYにおけるDUDE紹介でも説明されていたが、ブログをカスタマイズしていくうえで、特に微調整の段階では「要素の検証」を使いこなせるようになることができれば一番良い。
自分のブログの気になる部分の上で右クリックして「検証」をクリックすると、対応する部分のHTMLコードが左側に、cssコードが右側に出てくる。デザインに関する情報はほとんどがcssに書かれている。htmlもcssもやってみれば本当に簡単なので、ブログと長い付き合いになる人はぜひ要素の検証からの微調整にトライしてみていただきたい。
注：デザインcssの書き換えを行う際は、安全のためいったんデザインcssの内容を全部ワード等にコピペしておくことをオススメいたします。
