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

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

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

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

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

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

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

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

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

続いてサイドバーにちょっと変わった読者登録ボタンを設置する方法を紹介。ここで導入方法を紹介するソーシャルボタンは①facebook ②はてなブログ読者登録 ③ツイッター ④Feedlyの４つ。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);
    } }

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

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

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

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

1. ブログ上でデザインを変えたい部分を選択
（↓例：サイドメニューのABOUTを選択）

2. 右クリック→「検証」を選ぶ

3. 下のような画面が表示される。

画面下に表示されたコードは、区切りの左側が「サイトの骨格とテキスト情報（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%に変えた場合）

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

www.youtube.com

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

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

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