はてなブログのブログテーマ「Minimalism」のカスタマイズまとめ

「カスタマイズ」の「｛｝デザインCSS」から設定するやつ
「カスタマイズ」の「ヘッダ」から設定するやつ
- ナビゲーションメニューの設置
「カスタマイズ」の「記事」から設定するやつ
- シェアボタンの設置（「Minimalism」標準）
番外編－記事に直接タグうちするやつ
- リスト
- 背景を塗りつぶしたボックス
以上！！！

こんにちは、りょう(@ryo_ksw)です。

今回はこのブログでもお世話になってるブログテーマ「Minimalism」のカスタマイズについてです。

といっても、備忘録的なやつ。

自分でやってて、何変えたかわかんなくなっちゃうのでまとめてみました。

基本、先人の知恵をコピペしています。

自分でコネコネしたところは「何その書き方、めっちゃ無駄！」とかあるかもしれないけど、ご容赦！

カスタマイズするときは、もしものためにバックアップを取っておくことをお勧めします。

「カスタマイズ」の「｛｝デザインCSS」から設定するやつ

はてなブログの「ダッシュボード」のメニューから

「デザイン」⇒「カスタマイズ」⇒「｛｝デザインCSS」をクリックして

「｛｝デザインCSS」の欄にコードを貼るやつ。

こちらで画像を使って「｛｝デザインCSS」にコードを貼る方法を説明しているので、上の説明でしっくりこない方は、あわせてどうぞー。

www.crypto-ksw.com

ブログタイトルの設定

ヘッダーの色とかブログタイトルの文字の色、それからブログ説明の文字の色を設定できます。

これは「Minimalism」の使い方・注意事項のところにも、設定方法が記載されてます。

「｛｝デザインCSS」の欄に貼るコード

/* ### ヘッダーの背景色 ### */
#blog-title{
background: #カラーコード !important;
}
/* ### ブログタイトルの文字色 ### */
#title a{
color: #カラーコード !important;
}
/* ### ブログ説明の文字色 ### */
#blog-description{
color:# カラーコード !important;
}

引用：「シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。」

カラーコードは色見本と配色サイト「color-sample.com」がとても便利です。

記事中の見出しの設定

↑こういうやつです。

これは「Minimalism」の使い方・注意事項のところにリンクが貼ってありますが、「CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選」がめちゃくちゃ便利です！

種類豊富でありがたいですねー。

自分でもマステ風の見出しを作ってみました。

興味がある方はこちらからどうぞ―。

www.crypto-ksw.com

見出しのフォントを変更する方法はこちら

www.crypto-ksw.com

下記のコードは以前までこのブログで使っていた、2色使いの下線（途中で色が変わる）です。

「｛｝デザインCSS」の欄に貼るコード

h1 {
border-bottom: solid 3px skyblue;
position: relative;
}

h1:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #ffc778;
bottom: -3px;
width: 30%;
}

引用：「CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選」

気をつけないといけないのが「h1」っていうところ。

「Minimalism」では、記事の大見出し、中見出し、小見出しはそれぞれ「h3」「h4」「h5」にあたります。

数字が小さいほど大きい見出しです。

そのまま「h1」で貼り付けると、ブログタイトルの部分とかが変わっちゃうので、ここだけ気をつけましょう。

ヘッダーとナビゲーションメニューを横一杯に広げる

ヘッダーとナビゲーションメニューを画面の横幅いっぱいに表示します。

この設定では、【続】横幅いっぱいのヘッダーやフッターにするCSSテクニックを参考にさせてもらいました。

「｛｝デザインCSS」の欄に貼るコード

/* はみ出した部分を表示させない */
html {
    overflow: auto;
}
body {
    overflow: hidden;
}

/* ヘッダーとメニューを横一杯に広げる */
#blog-title { /* ヘッダーのデザインを指定するid */
   margin-left: -500%; 
   margin-right: -500%; 
   padding-left: 500%; 
   padding-right: 500%;
}

#gnav {
/* paddingの追記とmarginの変更 */
   margin-left: -500%; 
   margin-right: -500%; 
   padding-left: 500%; 
   padding-right: 500%;
}

/* 横の線 */
#container {
    border-right: none;
    border-left: none;
}

「body」の「overflow: hidden」ではみ出た部分が表示されないようになっているため、ブラウザの幅を縮めてサイドバーが見切れても、横スクロールバーが表示されません。

「body」に「min-width: 1000px;」を追加すると、ブラウザを縮めても横幅が1000px 以下にならないので、「見切れない方がいい」という場合は追加してみてください。

それから「#container」で左右の線を消してるので、「線は必要！」という場合は、この部分を削除してください。

ナビゲーションメニューの背景色の変更

「Minimalism」では、簡単にナビゲーションメニューを設置することができます。

その、ナビゲーションメニューの背景色の設定方法です。

※ナビゲーションメニューの設定方法はこちらから

「｛｝デザインCSS」の欄に貼るコード

#gnav{
background: #カラーコード;
}

このブログでは「CSS3で斜線・ストライプなどの背景装飾のコードまとめ-コピペですぐ使える！」を参考にさせてもらって、ナビゲーションメニューの背景をストライプにしています。

#gnav{
background: #FFeeaa;
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #FFFDE6), color-stop(.5, transparent), to(transparent));
-webkit-background-size: 10px;
}

もとのコードのカラーコードを貼るところに、「CSS3で斜線・ストライプなどの背景装飾のコードまとめ-コピペですぐ使える！」で反映させたいものを選んで、「background-color:」以降のコードを貼ります。

色の設定はマーカー部分のカラーコードを好みのものに設定します。

ナビゲーションメニューの文字サイズや文字色など各種設定の変更

ナビゲーションメニューの各種設定を行うコードです。

※ナビゲーションメニューの設定方法はこちらから

コードの横に説明書きするのでそれを参考に変更してみてください。

「｛｝デザインCSS」の欄に貼るコード

#gnav {
border-top: 1px solid #ffeeaa; /* ナビゲーションメニューの上の線 */
border-bottom: 1px solid #ffeeaa; /* ナビゲーションメニューの下の線 */
margin: 0 0 10px;
background: #ffffff; /* 背景色 */
font-size: 0;
padding: 0 0 0;
}

#gnav .menu a {
display: block;
color: #464646; /* 文字色 */
font-size: 11px; /* 文字サイズ */
font-weight: 500; /* 文字の太さ */
text-decoration:none;
padding: 11px 9px 0px;
height: 40px;
text-align: center;
overflow: hidden;
box-sizing: border-box;
letter-spacing:0px; /* 文字の間隔 */

/* カーソルを合わせた時の背景色が変わるアニメーション */
transition-property: all;
transition: 0.2s linear; /* アニメーションの時間設定 */

}

/* カーソルを合わせた時に背景色を変える */

#gnav a:hover {
background:rgba(255,240,160,1); /* 色設定 */
}

#gnav .gnav-inner {
width: 100%;
height: 38px;
padding: 0 20px;
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
text-align: center;
white-space: nowrap;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}

#gnav .menu {
display: inline-block;
}

ポイント

ナビゲーションメニューの上の線、下の線

border-top(bottom): 1px(線の太さ)　solid(線の種類)　#ffeeaa(色);

線の種類はこちらの記事がとても分かりやすいです！

⇒「border-style－スタイルシートリファレンス」

CSSやHTMLの基本がまとまっているのでとても参考になります。

ポイント

カーソルを合わせた時の背景色が変わるアニメーションの時間設定

transition: 0.2s(時間設定)　linear;

ナビゲーションメニューにカーソルを合わせた時に背景色を変える設定についてはこちらの記事を参考にさせてもらいました。

⇒「【CSS3】リンクhover時の変化をふわっとさせるやつ（transition）簡単すぎわろた」

ポイント

カーソルを合わせた時に背景色を変える色の設定

background:rgba(255(R),240(G),160(B),1(透過設定));

※透過設定は1に近づくほど不透明

この透過する方法についてはこちらの記事を参考にさせてもらいました。

⇒「背景色(background-color)を透過させて文字色は不透明にする方法とhtml,slim,css,scssでの記述方法

タイトルのフォントを変更する

ヘッダー部分のタイトルのフォントの変更方法です。

「はてなブログのタイトルのフォントを変更する方法　日本語対応」を参考にさせてもらいました。

日本語対応のフォントは9種類で、このブログではその中から「ニコモジ」を使ってます。

この設定については、ダッシュボードの「デザイン」⇒「カスタマイズ」⇒「ヘッダ」の「タイトル下」にもコードを貼る必要があります。

「タイトル下」の欄に貼るコード（ニコモジの場合）

「｛｝デザインCSS」の欄に貼るコード（ニコモジの場合）

#title{
font-family: "Nico Moji";
font-size: 65px;
letter-spacing: 5px;
}

「はてなブログのタイトルのフォントを変更する方法　日本語対応」では、フォントのサンプルも合わせてみることができます。

ローマ字版の紹介もされているので、ブログのタイトルがローマ字の人はぜひ！

トップ画面の記事一覧をカード型で表示する

今のこのブログのトップ画面たいな感じです。

⇒トップ画面を確認する

「はてなブログProでトップページを一覧表示にして更にカード型にするカスタマイズ」と「はてなブログトップページをカード型レイアウトにカスタマイズしよう！【PCのみ】」を参考にさせてもらってます。

こちらでは、それぞれの要素についての説明があったり、カラム数を変える方法も紹介されています！

「｛｝デザインCSS」の欄に貼るコード

/*カード型設定*/
.page-index .archive-entries{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
/*カード*/
.page-index .archive-entry{
background :#ffffff; /*カードの背景*/
width: 46%; /*横幅（２カラム）*/
padding-top:210px; /*アイキャッチの分+10pxあける*/
padding-left:7px; /*左に間隔*/
padding-right:7px; /*右に間隔*/
padding-bottom:10px; /*下に間隔*/
position: relative;
box-shadow: 1px 1px 4px #cccccc;
transition: .3s;
border-radius: 4px;
}

/*アニメーション*/
.page-index .archive-entry:hover{
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
box-shadow: 5px 5px 5px #cccccc;
}

/*記事タイトル*/
.page-index .entry-title{
padding : 5px 0px 0px 5px; /*タイトルの上下に間隔*/
}
/*記事の概要*/
.page-index .entry-description{
display : none;
}
/*アイキャッチのサムネイル*/
.page-index .entry-thumb{
display: none;
}
/*アイキャッチ*/
.page-index .entry-thumb-link{
display: block;
width: 100%; /*アイキャッチの横幅*/
height: 200px; /*アイキャッチの縦幅*/
background-position: center center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
border-radius: 4px 4px 0 0;
}
/*日付*/
.page-index .date{
padding-top:2px; /*上に間隔*/
padding-left:7px; /*左に間隔*/
}
/*カテゴリ*/
.page-index .archive-entries .categories {
position :absolute;
top:2px; /*上に配置*/
left:0; /*左に配置*/
z-index:1; /*アイキャッチの上に配置*/
}
/*はてなスター*/
.star-container {
display : none;
}

目次をボタン風に変更する

この記事の目次のようになる変更方法です。

「目次を「ボタン風」にすると楽しい！【はてなブログ・カスタマイズ】」を参考にさせてもらってます。

シンプルなデザインのものを作ってみたので、こちらもあわせてどうぞー。

www.crypto-ksw.com

この設定については、ダッシュボードの「デザイン」⇒「カスタマイズ」⇒「フッタ」にもコードを貼る必要があります。

「フッタ」の欄に貼るコード

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>// <![CDATA[
//クリックすると表示される目次
$(function(){
var $Contents = $(".table-of-contents")
$($Contents).before('<div class="show-area">▶目次を開く</div>');
$(".show-area").click(function(){
var $this = $(this);
if($Contents.css('display') == 'none'){
$Contents.slideDown(400),
$this.text("▶目次を閉じる")
}else{
$Contents.slideUp(400),
$this.text("▶目次を開く");
};
});
});
// ]]></script>

引用：「目次を「ボタン風」にすると楽しい！【はてなブログ・カスタマイズ】」

「｛｝デザインCSS」の欄に貼るコード

/*============================================
折りたたみの目次　ボタン部分のカスタマイズ
================================================*/
/*折りたたみの目次　目次を見る　記事挿入　カスタマイズ*/
.table-of-contents{
display: none;/*元の目次を消す*/
}

/*ボタンの見た目について*/
.show-area{
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #00bcd4;
transition: .4s;
}
.show-area:active{ /*ボタンを押したとき*/
background: #1ec7bb;
}

/*=======================================
目次の見た目カスタマイズ
========================================*/
/*既存のデザイン初期化*/
.entry-content .table-of-contents {
background: none;
border: none;
border-radius: 0;
}

/*目次から　小見出し　を消すCSS */
.table-of-contents ul ul{
display: none;
}

/* 最上部に「もくじ」を追加 */
.table-of-contents:before{
content: "【もくじ】";
font-size: 100%;
font-weight: bold; /* 文字の太さ */
}

/*目次横に、番号をつける*/
.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;/*見出し左の記号*/
}

/*目次の形・文字の位置・文字の大きさ*/
.entry-content .table-of-contents {
font-size: 90%;
font-weight: bold;
background: #f8f8f8 ; /* 目次の背景色 */
padding: 10px 10px 10px 50px; /*上・右・下・左*/
margin: 0;
margin-bottom:1em;/*見出し下の文字との余白*/
border-radius:5px; /* 目次の枠の角の丸さを調節 */
box-shadow: 0 3px 15px rgba(0,0,0,0.2);
}

/*文字のリンク色変更*/
.table-of-contents a:link{
color:#4169e1; /*リンク色はここを変更*/
text-decoration: none;
}
.table-of-contents a:visited{
color: #8c6a6a; /*訪問済みリンク色はここを変更*/
}
.table-of-contents a:hover{
color: #d2b48c;
text-decoration:underline; /*下線をつける*/
}

ボタンの種類は「CSSで作る！押したくなるボタンデザイン100（Web用）」を参考にさせてもらいました。

変更方法はマーカー部分を好みのボタンのコードに差し替えます。

細かい説明は「目次を「ボタン風」にすると楽しい！【はてなブログ・カスタマイズ】」から確認をしてみてください。

シェアボタンを設置する

この記事の上下にあるようなシェアボタンを設置する方法です。

「Minimalism」標準のシェアボタンの設置方法についてはこちらを参照してください。

「CSSで作る！押したくなるボタンデザイン100（Web用）」を参考にさせてもらってます。

ちなみに、Google＋のボタンはあんまり使わないので消してます。

Google＋のボタンも欲しい人は「CSSで作る！押したくなるボタンデザイン100（Web用）」で確認してみてください。

「｛｝デザインCSS」の欄に貼るコード

.share_btn2{
display: inline-block;
text-decoration: none;
width: 50px;
margin:2px;
height: 50px;
line-height: 50px;
font-size: 23px;
color:white;
border-radius: 12px;
text-align: center;
vertical-align: middle;
overflow: hidden;
font-weight: bold;
transition: .3s;
}
.share_btn2 .fa {line-height:50px}
.share_btn2:hover{
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
.share_btn2.shtw {background: #22b8ff;}
.share_btn2.shfb {background: #6680d8;}
.share_btn2.shhtb {background: #49a8fb;}
.share_btn2.shpkt {background: #ff6d82;}
.share_btn2.shfdly {background: #7bda72;}

引用：「CSSで作る！押したくなるボタンデザイン100（Web用）」

それから、ダッシュボードの「デザイン」⇒「カスタマイズ」⇒「記事」の記事上や記事下にもコードを貼る必要があります。

シェアボタンを設置したいところ（記事上・記事下）にhmtlコードを記載します。

「記事上」又は「記事下」の欄に貼るコード

<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share_btn2 shtw">
<i class="fa fa-twitter"></i>
</a>

<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share_btn2 shfb">
<i class="fa fa-facebook"></i>
</a>

<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="share_btn2 shhtb">
B!
</a>

<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="share_btn2 shpkt">
<i class="fa fa-get-pocket"></i>
</a>

<a href="http://feedly.com/i/subscription/feed/http://サイトのURL//feed" class="share_btn2 shfdly">
<i class="fa fa-rss"></i>
</a>

feedlyについては、マーカー部分に自分のサイトのURLを記述する必要があります。

忘れないように設定してください。

ちなみに、記事下のシェアボタンの下にあるフォローボタンも「CSSで作る！押したくなるボタンデザイン100（Web用）」を参考に設置してます。

設置方法はシェアボタンの設置方法と同様です。

記事下のシェアボタンを関連記事よりも上に表示する

何も設定しないで記事下にhtmlコードを記述すると、シェアボタンは関連記事よりも下に表示されます。

これを関連記事よりも上に表示するように変更する方法です。

「｛｝デザインCSS」の欄に貼るコード

/* 関連記事を記事下よりも下に */
.customized-footer {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.entry-footer-modules {
-webkit-order:2;
order:2;
width: 100%;
}
.entry-footer-html {
-webkit-order:1;
order:1;
width: 100%;
}

引用：「はてなブログの関連記事を記事下よりも下に移動させるカスタマイズ」

記事下のシェアボタンの部分に背景色を設定する方法

このブログの記事下のシェアボタンの部分の背景色は灰色に設定してますが、あんな感じにする方法です。

「｛｝デザインCSS」の欄に貼るコード

/*--シェアボタン背景色--*/
.entry-footer-html{
background-color:#f3f3f3;
}

文字にマーカーみたいな線を引く

こういうやつですね。

この設定方法は、「はてなブログでマーカーラインの装飾をする方法」を参考にさせてもらいました。

「｛｝デザインCSS」の欄に貼るコード

.marker_blue {
background: linear-gradient(transparent 60%, #98f1cd 60%);
}

実際に使うときは、記事を書くときに対象の文字をhtmlコードで挟むことになります。

こんな感じ。

<span class="marker_blue">マーカーを引きたい文字</span>

「はてなブログでマーカーラインの装飾をする方法」では線の太さの設定の説明もあってわかりやすいので、ぜひ合わせてご覧ください！

ボックスデザインを設定する

こういうやつ！・オシャレなボックスデザイン
・粋なボックスデザイン
・いなせなボックスデザイン

この設定方法は「【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30」を参考にさせてもらいました。

より具体的な説明はこちらからどうぞ。

www.crypto-ksw.com

自分でも枠線を手書きでぐるぐる書いたようなボックスデザインを作ってみました。

興味がある方はこちらからどうぞ―。

www.crypto-ksw.com

「｛｝デザインCSS」の欄に貼るコード

.box27 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #62c1ce;
}
.box27 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 17px;
background: #62c1ce;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box27 p {
margin: 0;
padding: 0;
}

引用：「【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30」

実際に使うときは、記事を書くときに対象の文字をhtmlコードで挟むことになります。

こんな感じ。

<div class="box27">
<span class="box-title">ここにタイトル</span>
<p>ここに文章</p>
</div>

引用：「【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30」

「【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30」には、他にもおしゃれなボックスデザインがたくさんあるのでぜひ見てみてください。

ページを開いた時にスーッとスライドするアニメーション

このブログのどこでもいいのでページを開いてもらうとわかるんですが、ヘッダーやタイトルがスーッとスライドするアニメーションが設定されています。

それです。

この設定方法は「【本当は教えたくないCSSコピペ】ページを開くとスーッてスライドするアニメーション」を参考にさせてもらってます。

「｛｝デザインCSS」の欄に貼るコード

/**********アニメーション設定**********/
/*右から左*/
@keyframes RightToLeft {
0% {
opacity: 0;/* 透明 */
transform: translateX(50px);/* X軸方向に50px */
}
100% {
opacity: 1;/* 不透明 */
transform: translateX(0);/* X軸方向に0px */
}
}

/*上から下*/
@keyframes SlideDown {
0% {
opacity: 0;/* 透明 */
transform: translateY(-50px);/* Y軸方向に-50px */
}
100% {
opacity: 1;/* 不透明 */
transform: translateY(0);/* Y軸方向に0px */
}
}

/*下から上*/
@keyframes SlideUp {
0% {
opacity: 0;/* 透明 */
transform: translateY(50px);/* Y軸方向に50px */
}
100% {
opacity: 1;/* 不透明 */
transform: translateY(0);/* Y軸方向に0px */
}
}
/**********アニメーション設定end**********/

/*ヘッダーを上から下へ*/
#blog-title {
animation-name: SlideDown;/* アニメーション名 */
animation-duration: 2s;/* アニメーション時間 */
}

/*グローバルナビを上から下へ*/
#top-editarea {
animation-name: SlideDown;/* アニメーション名 */
animation-duration: 2s;/* アニメーション時間 */
}

/*記事一覧を下から上へ*/
.page-archive .archive-entries .archive-entry {
animation-name: SlideUp;/* アニメーション名 */
animation-duration: 2s;/* アニメーション時間 */
}

/*記事タイトルを右から左へ*/
.page-entry .entry-title {
animation-name: RightToLeft;/* アニメーション名 */
animation-duration: 2s;/* アニメーション時間 */
}

引用：「【本当は教えたくないCSSコピペ】ページを開くとスーッてスライドするアニメーション」

「【本当は教えたくないCSSコピペ】ページを開くとスーッてスライドするアニメーション」では、細かい動かし方の設定がとてもわかりやすく説明されているのでぜひ合わせて見てみてください。

【スポンサーリンク】

「カスタマイズ」の「ヘッダ」から設定するやつ

はてなブログの「ダッシュボード」のメニューから

「デザイン」⇒「カスタマイズ」⇒「ヘッダ」をクリックして

「タイトル下」の欄にコードを貼るやつ。

ナビゲーションメニューの設置

ナビゲーションメニューを設置します。

これは「Minimalism」の使い方・注意事項のところにも、設定方法が記載されてます。

※ナビゲーションメニューの背景色の変更方法はこちらから

「タイトル下」の欄に貼るコード

<nav id="gnav">
<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>

引用：「シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。」

この記述で行くと、6つのメニューが表示されます。

上から「HOME」「ABOUT」「TIPS」「STUDY」「DESIGN」「CONTACT」

例えば、上から3行目の「HOME」メニューを自分のブログに合わせて設定する場合

<div class="menu"><a href="URL（設定したいURL）"><i class="fa fa-home" aria-hidden="true"></i> HOME（表示したい単語）</a></div>

となります。

ちなみに<i class="fa fa-home" aria-hidden="true"></i>の部分はFontAwesomeを使ったアイコンです。

これの使い方については「楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips」を確認してみてください。

「カスタマイズ」の「記事」から設定するやつ

はてなブログの「ダッシュボード」のメニューから

「デザイン」⇒「カスタマイズ」⇒「記事」をクリックして

「記事上」又は「記事下」の欄にコードを貼るやつ。

シェアボタンの設置（「Minimalism」標準）

「Minimalism」では、シェアボタンのスタイルが標準で記述されています。

これは「Minimalism」の使い方・注意事項のところにも、設定方法が記載されてます。

この記事の上にあるのは「Minimalism」の標準のスタイルとは別のものなのでこちらを参照してください。

「記事上」又は「記事下」の欄に貼るコード

<div class="shrbtn">

<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>

<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share_btn">
   <i class="fa fa-twitter"></i>
</a>

<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>

<a href="http://feedly.com/i/subscription/feed/http://ブログURL/feed" target="_blank" class="share_btn">
   <i class="fa fa-rss"></i>
</a>
</div>

引用：「シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。」