ブログテーマ「Minimalism」でカスタマイズ
ブログテーマ「Minimalism」を使っている方は多いと思います。
このテーマはシンプルですがカスタマイズしやすく、同じ「Minimalism」を使っている人でも全然ちがう印象のサイトになります。
今回は「Minimalism」でのカスタマイズ方法を紹介していきます。
ブログタイトルの設定
ヘッダーの色や文字の色のカスタマイズの仕方です。これだけで、かなり印象が変わります。
下のCSSを自分の好きな色に変更して「デザインCSS」に貼りつけてください。
#blog-title{
background: #カラーコード !important;
}
/* ### ブログタイトルの文字色 ### */
#title a{
color: #カラーコード !important;
}
/* ### ブログ説明の文字色 ### */
#blog-description{
color:#カラーコード !important;
}
# の後ろの「カラーコード」の部分を好きな色に設定してください。
色を選ぶ際、下のサイトが参考になります。
シェアボタンを設置
シェアボタンとは、読者がはてなブックマークにブックマークしたり、Twitterやフェイスブックにシェアするためのボタンです。
このブログでは違う設定で作っていますが、「Minimalism」にもともと設定されているものを使うと簡単に設置できます。下の画像の様なイメージです。
Image:ひつじの雑記帳
下のコードをコピーして、「デザイン」をクリックし、「記事」の「記事上」「記事下」に貼りつけてください。「記事上」「記事下」は両方設置できますし、片方だけ設置もできます。自分の好みで選んでください。
<!-- HatenaBookmark -->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="share_btn">
<span class="htvcenter" style="line-height: 1.6;">
<i class="blogicon-bookmark" style="font-size:22px"></i>
</span>
</a>
<!-- twitter -->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share_btn">
<i class="fa fa-twitter"></i>
</a>
<!-- facebook -->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share_btn">
<i class="fa fa-facebook"></i>
</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="share_btn">
<i class="fa fa-get-pocket"></i>
</a>
<!-- feedly -->
<a href="http://feedly.com/i/subscription/feed/http://ブログURL/feed" target="_blank" class="share_btn">
<i class="fa fa-rss"></i>
</a>
</div>
ナビゲーションメニューを設置する
ナビゲーションメニューまたは、グローバルメニューともいいます。
ナビゲーションメニューはブログタイトルの下（ヘッダー）に設置するものです。
トップページへボタン一つで戻れたり、オススメするページへ誘導することも簡単です。
また、グーグルアドセンスを狙っている方は設置しておく方がいいでしょう。
こういったイメージとなります。
「デザイン」をクリックし「ヘッダ」の「タイトル下」の部分に以下のコードをコピーして、アイコンやURL等を書き換えて、貼りつけてください。
※下のままでは一応表示はされますが、URLが設定されていないので、ただ表示されるだけとなります。
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>
<div class="menu"><a href="URL"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</a></div>
<div class="menu"><a href="URL"><i class="fa fa-bolt" aria-hidden="true"></i> TIPS</a></div>
<div class="menu"><a href="URL"><i class="fa fa-graduation-cap" aria-hidden="true"></i> STUDY</a></div>
<div class="menu"><a href="URL"><i class="fa fa-wrench" aria-hidden="true"></i> DESIGN</a></div>
<div class="menu"><a href="URL"><i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div>
</div>
</nav>
URLやアイコンなどの変更の仕方を説明します。
上の部分を例にカスタマイズしてみましょう。
・まず、<a href="URL"> のURLを自身のサイトのトップページのアドレスに変えてみてください。
・そして、アイコンを変えたい場合<i class="fa fa-home" aria-hidden="true">のfa-home部分を好きなアイコンに変えます。
アイコンの一覧に関しては下のサイトが参考にできます。
・最後に</i> HOME</a>のHOME部分を変えると表示される文字が変わります。
上のコードでは、６つのメニューが表示されますが、増やしたり減らしたりして自分のサイトにあうように調整してください。
ナビゲーションメニューの背景色を変更する
今のままではシンプルなので、色を変えたいという人は下のコードをコピーして、「デザイン」の「カスタマイズ」をクリックし、「デザインCSS」に貼りつけます。
/*グローバルメニュー背景色*/
#gnav{
background: #f5f5f5;
border-top: 2px solid #f5f5f5;
border-bottom: 2px solid #f5f5f5;
}
#の後ろを自分の好きな色に変えてください。
boder-top、boder-bottomは、グローバルメニューの上の線と下の線のことです。
2pxの数字を変えると線の太さが変えられます。
/**/で囲うと、cssに繁栄されない形となります。
今後cssをたくさん追加していくと、どれがどのcssだったかわからなくなるかもしれません。
それを防ぐために、/**/でなんのcssなのか、わかるようにしておくと便利です。
この記事は、ひつじの雑記帳さんのサイトから参考にさせていただきました。
シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳
以上が、ブログテーマ「Minimalism」でできる簡単設定です。
今回、説明した以外にもカスタマイズ方法があるので、いずれ説明で来たらと思います。
おすすめ書籍
初心者でも分かりやすく、コピペしているだけのコードの意味が分かるようになります。
どういう記事を書けばいいか、収益化するためにはどうすればいいかが分かりやすく説明されています。
ブログの収益化をめざすなら必読書です。
