LITERALLY

知っておくと楽しい知識をまとめて紹介

はてなブログを一瞬でおしゃれにする最強のデザインカスタマイズ方法(テーマDUDEの手引き)


以前、はてなブログのスマホデザインのカスタマイズ方法について書いた。
はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 - Literally
多くの方に参考にして頂いたようでとても嬉しい。続編を書いて欲しいというご要望をいくつか頂いたので、僭越ながらまたデザインカスタマイズのTipsを書こう思う。前回はスマホデザインについてのみ触れたが、今回はPC表示のカスタマイズについて。主にコピペだけで「超カンタン」におしゃれなブログが作れるので、Webデザイン初心者の方にも是非読んでいただきたい。
はてなブログユーザーでないのにこのページに辿り着いてしまった方、大変申し訳ありません…


はてなブログテーマ「DUDE」を作りました。

f:id:tsukuruiroiro:20160117153608p:plain

「はてなブログを一瞬でおしゃれに美しくする最強のデザインカスタマイズ方法」と仰々しいタイトルを先に決め、ブログのカスタマイズ記事を書き出したところ、早速壁にぶつかった。それはデスクトップ用デザインの場合「インストールしているテーマごとにカスタマイズ方法が若干違う」というごく当然のことだった。どのテーマにも適用できるカスタマイズ方法を模索しているうちに「これは新しくテーマを作った方が早いんじゃないか」とふつふつと思いだした。結果として新しくテーマを作った。
デモ用のブログはこちらをクリック(スマホでもPC表示がされます)

テーマ名は「DUDE(デュード)」。「DUDE」の意味は、辞書的には「気取り屋、洒落者」。若者には「DUDE!(ヒュー!とかオォー!)」のような感じで、至るところで使われる言葉だ。その名の通りデザインコンセプトは「気取ったオシャレさ」。古くさい保守的なイメージのはてなブログのデザインから抜け出し「流行にキャッチアップしてるぜぇ〜」というような少し調子に乗った若者的なデザインをしたかったのだ。

ここからは、デザインテンプレート「DUDE」を元に説明してく。テーマをインストールしただけでは、DUDEは完成しない。ぜひインストールしてから、またこのページに戻ってきてほしい。
テーマのダウンロードページはこちら
また、DUDEをインストールしなくても、参考にできる部分もいくつかあるかもしれない。というわけで、はてなブログをやっている全ての人に読んでいただきたい。

DUDEを使っておしゃれなブログを作るためのカスタマイズ方法

タイトルを英語でカッコよく

いきなり身も蓋もないことで恐縮だが、DUDEのブログの最上部に表示されるタイトルは英語のほうが断然カッコよく見えるようになっている。しかし、はてなブログでは基本的に「設定したブログ名」=「ページのタイトルとして表示される名前」になってしまう。そのため、どうしても日本語が良いという人も多いだろう。
ただ裏技もある。それは、ブログ名をデザイン設定により隠し、別に新たなタイトルを表示させるという方法だ。まず以下のコードをコピペして『デザインCSS(ダッシュボード▶︎デザイン▶︎カスタマイズ▶︎デザインCSS)』のいちばん下に加える。

/*タイトルをブログ名と違うものにする*/
#title:before {
    content: "ここに実際に表示させるタイトルを入れる";
    color: white;
    font-family: 'quicksand', sans-serif; }

#title a { display: none; }

次にコードの「content: "ここに英語のタイトルを入れる"」の""内を好きなものに変える。たとえばブログ名「テストDUDE 」を英語に変えたければ「content: "TEST DUDE"」と入力する。すると下の画像のように変わる。

f:id:tsukuruiroiro:20160117171106j:plain

ブログ名が何であろうとこの方法により、好きなようにタイトルを変えられる。ただしSEO的にはあまりよろしくない方法なので、タイトル以外でこの技を使わないほうが良いだろう。


タイトルバーの下に"画像&紹介文"を表示させる

f:id:tsukuruiroiro:20160117173442j:plain
次にヘッダの下に"画像+キャッチ的な役割をするブログ紹介文"を表示させる方法。はてなではほとんど見ない表現だが、DUDEなら簡単に導入できる設定になっている。まず、下のコードをまるごとコピーして『タイトル下(ダッシュボード▶︎デザイン▶︎カスタマイズ▶︎ヘッダ▶︎タイトル下)』に貼り付ける。

<div class="headimg"><h4>大見出し</h4>
<h5>中見出し</h5>
<div class="recommendlist">
<h6><a href="おすすめ記事1のURL">おすすめ記事1のタイトル</a></h6>
<h6><a href="おすすめ記事2のURL">おすすめ記事2のタイトル</a></h6>
<h6><a href="おすすめ記事3のURL">おすすめ記事3のタイトル</a></h6>
</div>
</div>

次に下の4点のテキストを好きなように変えていく。

  • 大見出し(デモでHEY,DUDEにあたる部分)
  • 中見出し(デモでNew to LITERALLY?...にあたる部分)
  • おすすめ記事1のタイトル(デモで企画書のデザインを...にあたる部分)
  • おすすめ記事1のリンク先(URL)

たとえば次のようなコードにした場合、デザインは下の画像のようになる。

<div class="headimg"><h4>Hello.</h4>
<h5>おすすめの記事はこちら</h5>
<div class="recommendlist">
<h6><a href="http://おすすめ1.com">おすすめ記事1のタイトル</a></h6>
<h6><a href="http://おすすめ2.com">おすすめ記事2のタイトル</a></h6>
<h6><a href="http://おすすめ3.com">おすすめ記事3のタイトル</a></h6>
</div>
</div>

f:id:tsukuruiroiro:20160118181346p:plain

おすすめ記事の枠の高さを変える方法

上の場合を見ると、おすすめ記事のタイトルの下が不自然にぽっかりと空いてしまっている(タイトルが1行になったため)。これを修正するために『デザインCSS』に次のコードを追加する。

.headimg h6 { height: 20px /*おすすめ記事タイトルの枠の高さ*/}

これは単純に枠の高さを調整しているコードだ。逆に、おすすめ記事のタイトルが長くなり3行になってしまった場合は、20pxの部分を60pxにすれば良い*1


画像上のフォントサイズを変える

もし、見出しの文字の大きさを変えたければ次のコードを『デザインCSS』にコピペして、emの前の数字を適当に変えれば良い。

.headimg h4 {font-size: 3.5em;} /*大見出しのフォントサイズ。デフォルトはfont-size: 3.5em; */
.headimg h5 {font-size: 1.3em;} /*中見出しのフォントサイズ。デフォルトはfont-size: 1.3em; */
.headimg h6 {font-size: 0.67em;} /*おすすめ記事タイトル(枠内)のフォントサイズ。デフォルトはfont-size: 0.67em; */

たとえば大見出しを少し小さくしたければ「font-size: 3.0em;」に変える。emでなく、%やpxを使っても構わない。

背景画像を変える方法

続いて背景画像を好きな画像に変えたい場合は、次のコードを『デザインCSS』に追加する。

.headimg { background-image: url("画像のURL") }

好きな画像のURLは次の手順に取得できる。①はてなフォトライフに画像をアップロード ②その画像をクリックして開く ③右クリックで「画像アドレスをコピー」もしくは「画像URLをコピー」。④上のコードの""内に貼り付け。
背景画像を白文字で抜いているので、なるべく暗めの画像にすることをおすすめする。

サイドバーをカッコよくしよう

メニュータイトルは英語に

f:id:tsukuruiroiro:20160118195426j:plain
フォントが全体的なデザインイメージに与える影響は大きい。日本語のWebフォントでは現状あまりカッコイイものがないため、英語に変えておくのが良い。英語だと伝わりづらいのでは?と思うかもしれないが、カンタンな英語であればほとんどの読者が理解してくれるだろう。下にサイドバーの英語メニュータイトル例を挙げておく。

  • プロフィール:ABOUT
  • 検索:SEARCH
  • アーカイブ:ARCHIVE(過去記事の記録だからHISTORYなんかでも良いだろう)
  • 人気記事:POPULAR
  • 最新記事:NEW、LATESTなど

あくまでも参考なので自由に決めましょう。

ライター名を署名のように表現

f:id:tsukuruiroiro:20160118201413p:plain
プロフィールに「署名っぽく自分の名前を入れる」ととても気取った感じが出て僕は気に入っている。CatNoseは僕がネット上で名乗っているニックネームだ。手書き風のCatNoseはリンクとなっており、クリックするとツイッターに飛ぶようになっている(デモサイトで試してついでにぜひフォローまでしてほしい)。これはカスタマイズ画面から、サイドバーの『プロフィール(ABOUT)』に次のコードを貼り付けることで実装できる。プロフィール画像とはてなIDは、非表示設定にすることをおすすめする。

<p class="authorname"> Author: <a href="ツイッターなどリンクしたいサイトのURL">手書きにする名前</a>.</p>

上のコードの「手書きにする名前」の部分を好きな名前(英語のみ)に変える。また、その手書きの名前をクリックしたときに飛ぶリンク先のURLをhref=""の""内に入れる。もし、Produce by〜やWritten by〜にしたければ「Author: 」となっている部分をそのように書き変えれば良い。プロフィール編集の場合、コード間にスペースを入れると改行されてしまうのでご注意。

ソーシャルボタンをおしゃれに

f:id:tsukuruiroiro:20160118211003j:plain

続いてサイドバーにちょっと変わった読者登録ボタンを設置する方法を紹介。ここで導入方法を紹介するソーシャルボタンは①facebook ②はてなブログ読者登録 ③ツイッター ④Feedlyの4つ。DUDEでは読者の興味を引くよう、少し工夫を凝らした。ある程度新しいブラウザでデモサイトを見ると、ツイッターの鳥がぷかぷかと飛んでいることが分かるかと思う。これは次のコードを『HTML(サイドバー▶︎モジュールを追加▶︎HTML※タイトルは空欄でOK)』にコピペすることで導入できる。

<div class="sidesocial" >
<h4><i class="blogicon-subscribe"></i>FOLLOW ME</h4>

<!--はてな読者登録-->
<span class="hatenafollow socialbtn" >
<a href="http://blog.hatena.ne.jp/はてなID/ブログURL(http://をのぞいた部分)/subscribe" target="_blank">
<i class="blogicon-hatenablog lg"></i></a></span> <!--はてな読者登録ここまで-->

<!--ツイッタフォロー-->
<span class="twitterfollow socialbtn" >
<a href="https://twitter.com/intent/follow?screen_name=ツイッターアカウント名" target="_blank"><i class="blogicon-twitter lg"></i>
</a></span> <!--ツイッタフォローここまで-->

<!--feedlyフォロー-->
<span class="feedly socialbtn" >
<a href="http://feedly.com/i/subscription/feed/ブログURL/feed" target="_blank">
<i class="blogicon-rss lg"></i></a></span> <!--feedlyフォローここまで-->

<!--facebookページ-->
<span class="fbfollow socialbtn" >
<a href="facebookページのURL" target="_blank"><i class=" blogicon-facebook lg"></i>
</a></span> <!--facebookページここまで-->

</div><div style="clear: both;"></div>

もし、使用していないソーシャルボタンまで含まれている場合は、該当するコードの部分をまるっと削除してしまえば良い。例えばfacebookボタンがいらないということであれば、<!--facebookページ-->から<!--facebookページここまで-->までまるごと削除する。

もし、ツイッターがぷかぷか飛んでいるのが目障りなようであれば、次のコードを『デザインCSS』に追加する。

 .twitterfollow { animation: none; } 

もし、ツイッターがぷかぷか飛ぶ高さを変えたければ以下のコードを『デザインCSS』に追加し、-40pxの数値を変える。

@keyframes bounce {  
    50% {
        transform: translateY(-40px);
    } }

いろんな数値を入れて、試してみると面白い。


細かいデザインを調整する技を覚えよう

フォントサイズや行間の変え方など、DUDEの細かいカスタマイズ方法を書き出せばきりがないので、この記事でここまでにしておく。しかし、Webデザインを勉強したことのない人が、細かな調整を諦めてしまうのはもったいない。できるだけDUDEを自分好みにアレンジし、世界にひとつしかないデザインのブログを運営してほしいと思う。そこで、Webデザインが興味なくともひとつだけ覚えてほしい技がある。

要素の検証を使いこなそう

(ご存知の方は読み飛ばしてください)
グーグルクロームやFireFoxなど多くのインターネットブラウザーでは「要素の検証」という機能を使用することができる。これはPCでブログを開いたまま、ブログのデザインを試しに調整できるというもの。たとえば、ブログの記事のフォントサイズを変えたいとする。そのとき要素の検証を使えば、今そもそも何pxに設定されているのか調べつつ「フォントサイズを1px大きくしたらどうなるか」「5px小さくしたらどうなるか」ということを実際に画面でテストできるのだ。

使用の手順をこれから説明していく。
個人的にはグーグルクロームが最も使いやすくInternet Explorer(IE)が最も使いにくいと思うので、まずIEしかPCに入ってない場合はクロームをダウンロードすることをおすすめする。(IEではF12を押すと要素の検証ができるようだ:参照はこちら)ここではグーグルクロームで「要素の検証」をおこなった場合の手順を紹介。是非、実際に自分の手で試しながら追っていってほしい。
例として、サイドバーメニュータイトルの文字サイズを大きくしてみる。

1. ブログ上でデザインを変えたい部分を選択
(↓例:サイドメニューのABOUTを選択)
f:id:tsukuruiroiro:20160120184209p:plain


2. 右クリック→「検証」を選ぶ
f:id:tsukuruiroiro:20160120184414p:plain


3. 下のような画面が表示される。
f:id:tsukuruiroiro:20160120185235p:plain
画面下に表示されたコードは、区切りの左側が「サイトの骨格とテキスト情報(HTML)」を表しており、右側が「デザイン情報(CSS)」を表している。今、左側のHTMLで、サイドバーメニュータイトルのひとつ「ABOUT」が選択されていることが分かる(薄く灰色がかっている)。右側のCSSでは、ABOUTをはじめとするサイドバーメニュータイトルのデザイン情報が表示されている。
このCSSデザイン情報がどういう意味かを一部説明していくと、

.hatena-module-title←サイドバーメニュータイトルを表すことがHTMLで指定されている。下の{}内はこの部分のデザイン指定を表す。
 {
    color: #202035; ←文字の色: #色コード
    font-weight: bold; ←文字の太さ: 太い
    border-left: 10px #202035 solid; ← 文字の左側に10pxの実線
    padding-left: 10px; ←文字の左側(線との間)に10pxのスペース
    font-size: 150%; ←フォントサイズ: 150%
}


4. デザイン情報のうち、font-size:150%;の150%をクリック→編集

ここで好きな数字を入れれば、「ABOUT」のサイズが数字に合わせて変わっていくことが確認できる
(下の画像は150%を300%に変えた場合)
f:id:tsukuruiroiro:20160120191024p:plain

要素の検証を説明した動画を見つけたので、参考までに貼っておきます

www.youtube.com

Webデザインを学びたい方は

また、Webデザインを0から学びたいという方はよくわかるHTML5+CSS3の教科書【第2版】HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)が丁寧で分かりやすいので読んでみると良いかもしれない。また、本格的にデザインを学びたい方は以前書いたこちらの記事↓を読んでみることをおすすめする。

1年でフリーのWebデザイナーになった僕が実行した8つのステップ【独学デザイン勉強方法】 - Literally

DUDEに関するお願いと注意点

最後にDUDEに関するお願いと注意点をまとめておく

  • デザインカスタマイズ▶︎ヘッダ▶︎タイトル画像に画像をアップしてはダメ(デザインが崩れてしまいます)
  • レスポンシブデザインには対応していないため、スマホ表示にははてなブログ専用のデザインを使うことをおすすめします。スマホデザインのカスタマイズ方法はこちらを参考に→ はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 - Literally
  • DUDEテンプレートについて修正があった場合はこちらの記事でお知らせさせていただきます
  • ここで紹介した他にDUDEのカスタマイズ方法がありましたら、みなさまのブログにて提案していただけると幸いです。参考になるカスタマイズ方法についてはこの記事にて紹介させて頂きます。
  • テーマを作っておいて大変恐縮なのですが、本業の忙しさもあり「DUDEをさらにカスタマイズして、こういうデザインにできないか」などの要望・質問にお答えできない場合があります。誠に申し訳ありませんが、ご了承ください。

*1:たとえばheightを60pxにした場合、3つの枠それぞれ縦方向に中央揃えしたくなるはずだ(やってもらえれば分かる)。その際、次のコードを『デザインCSS』に追加すると良い。古いブラウザだと対応していないこともあるが、それについては諦めるしかない。.headimg h6 a {height: 60px/*ここは先ほどの高さの数値と合わせる*/; display: -webkit-flex; display: flex; webkit-align-items: center; align-items: center; webkit-justify-content: center; justify-content: center; }