デザインテーマ「Minimal Green」のカスタマイズの手引

この「Minimal Green」テーマのCSSは自由に改変してくださって構いません。
Minimal Green - テーマ ストア

背景画像や背景色を変えるとこんな感じになります。

メニューやリンク文字の色を変えるとこんな感じになります。

[注意]　グローバルメニューとページトップへ戻るボタンを表示させるには、それぞれヘッダとフッターに追加のHTMLコードの貼り付けが必要です。

グローバルメニューの設置

www.yukihy.com
ゆきひー (id:ftmaccho) さんのグローバルメニューをカスタマイズしています。
デザインの変更は上記の記事をどうぞ。
CSSで記述済みですので以下のHTMLコードを"リンク"の中をご自分のブログのカテゴリURLなどに書き換えて、デザイン→カスタマイズ→ヘッダー→タイトル下に貼り付けて下さい。

<div id="menu">
<div id="menu-inner">
    <div id="btn-content">
        <span id="menu-btn"><i class="blogicon-reorder"></i> MENU</span>
    </div>
    <ul id="menu-content">
        <li>
            <a href="１階層目のリンク">カテゴリ名1</a>
        </li>
        <li>
            <a href="リンク">カテゴリ2</a>
        </li>           
        <li>
            <a href="リンク">カテゴリ3</a>
        </li>
        <li>
        <a href="リンク">カテゴリ4</a></li>
　　　　<li>
            <a href="１階層目のリンク">カテゴリ５ <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="２階層目のリンク">カテゴリ５-１</a></li>
                <li><a href="２階層目のリンク">カテゴリ５-２</a></li>
                <li><a href="２階層目のリンク">カテゴリ５-３</a></li>
                <li><a href="２階層目のリンク">カテゴリ５-４</a></li>
            </ul>
        </li>
    </ul>
</div>
</div>
<div style="clear:both"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
    var menuBtn = $("#menu-btn"),
        menuContent = $("#menu-content");
    menuBtn.click(function(){
        menuContent.slideToggle();
    });
    $(window).resize(function(){
        var win = $(window).width(),
            p = 960;//19
        if(win > p){
            menuContent.show();
        }else{
            menuContent.hide();
        }
    });
});
</script>

メニュー項目を増やしたい場合は>||

||<の中に

<li><a href="１階層目のリンク">カテゴリ1</a></li>

を追加して下さい。

グローバルメニューのカスタマイズについてはこちらもどうぞ。
syofuso-sub.hatenablog.com

ページ上部へ戻る

デザインはCSSで記述済みです。

/*ページ上部へ戻るCSS*/
.pagetop a{ background-color:#好きなカラーコード;
 color:#好きなカラーコード; !important;
}
.pagetop a:hover{ background-color:#好きなカラーコード;
}

ページ上部へ戻るボタンの設置するには以下のJavaScriptコードをデザイン→カスタマイズ→フッターの部分に貼り付けて下さい。

<p class="pagetop"><a href="#"><i class="blogicon-chevron-up"></i></a></p>
<!--JQueryを使用-->
<script src="http://cdn7.www.st-hatena.com/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
	var pagetop = $('.pagetop');
	$(window).scroll(function () {
		if ($(this).scrollTop() > 700) {
			pagetop.fadeIn();
		} else {
			pagetop.fadeOut();
		}
	});
	pagetop.click(function () {
		$('body, html').animate({ scrollTop: 0 }, 500);
		return false;
	});
});
    </script>

各要素のデザインの変更・カスタマイズ

まとめて色を変更する

黒系でまとめて色を変更するカスタマイズ用のコードを用意しました。
以下のエントリへどうぞ。
syofuso-sub.hatenablog.com

syofuso-sub.hatenablog.com

タイトル画像、ヘッダー周りの設定・カスタマイズ

以下のエントリーを参考にしてください。
syofuso-sub.hatenablog.com

文字色、フォント、リンクの色の変更

文字やリンクの色、背景色を変更したい場合は「#好きなカラーコード」のところを適時入れ替えて下さい。

body {
  font-family:'“Lucida Grande”', '“segoe UI”', '“ヒラギノ丸ゴ ProN W4”', '“Hiragino Maru Gothic ProN”', “メイリオ”, Meiryo, Verdana, Arial, sans-serif;/*フォント*/
  color: #好きなカラーコード;/*基本の文字の色*/
}
a {
  color: #好きなカラーコード;/*リンクの色*/
}
a:hover {
  color: #好きなカラーコード/*マウスオーバーした時のリンクの色*
  text-decoration-line: underline;
}
a:visited {
  color: #789dae;/訪問済みのリンクの色*/
}

見出し、サイドバーモジュールタイトルのデザイン

.entry-content h3 {color:#好きなカラーコード;/*大見出しの文字の色*/
}
.entry-content h3 {
  position: relative;
  padding: .25em 0 .5em .75em;
  border-left: 3px solid #カラーコード;  /*左横バーの色*/
}
.entry-content h3::after {
	border-bottom: 2px solid #カラーコード; /*見出し下のボーダー*/
}
.entry-content h4 {　　　　　　　　　　　　/*中見出し*/
}

.hatena-module-title {                     /*サイドバーモジュールタイトル*/
  font-size: 120%;
  color: #47a89c;　　　　　　　　　　　　　/*サイドバータイトルの色*/
  border-left: 2px solid #好きなカラーコード;　　　　　/*左横バーの色*/
}

日付の色

.entry-header .date{border:3px solid #好きなカラーコード;     /*日付を囲む○の枠の色*/
background:#好きなカラーコード;　　　　　　　　　　　　　　　/*背景色*/
color:#好きなカラーコード;　　　　　　　　　　　　　　　　　　/*日付の文字の色*/
}
.archive-entry .date a{color:#好きなカラーコード;　　　　　　　/*アーカイブページの日付の文字の色*/
}

続きを読むのデザイン

a.entry-see-more {
    background-color: #好きなカラーコード;　　　　　　/*背景色*/
    color: #fff!important;                /*続きを読むの色*/
}
a.entry-see-more:hover {
    color:#fff!important;　　　　　　　　/*ホバーした時の続きを読むの色*/
    background-color: #好きなカラーコード;　　　　　/*ホバーした時の背景色*/
    opacity: 0.8;                       /*ホバーした時の半透明にする*/
}

カテゴリーの色

/* カテゴリー */

.categories a {
	border: 1px solid #好きなカラーコード;　 /*カテゴリーを囲む枠の色*/
        color:#好きなカラーコード;　　　　　　　 /*カテゴリー文字の色*/
}
.categories a:hover {
	color: #好きなカラーコード          　　　 /*カテゴリー文字の色*/
	background-color: #好きなカラーコード;　　 /*カテゴリー枠の中の背景色*/
}

.page-archive .categories a {
  color: #好きなカラーコード;　　　　　　　　/*アーカイブページのカテゴリーの色*/
  background: #好きなカラーコード;　　　　　　/*アーカイブページのカテゴリーの背景色*/
}

ページャのデザイン

ページ下部の「次へ」の部分です。

/* Pager */
.pager a{
	color:#47a89c;  /*次への文字の色*/
	
}

.pager-next a:before,.pager-prev a:before{
	background-color:#47a89c;　/*円の背景色*/
	color:#fff;　　　　　　　　/*中の矢印マークの色*/
}

このデモブログでのカスタマイズ

管理画面、デザイン、カスタマイズで背景画像を「左、繰り返させない、スクロール」で設定しています。
今はヘッダ背景に画像を指定しています。
syofuso-sub.hatenablog.com

画像はふわふわ。りさんの素材を使わせていただきました。
shimizumari.com

素材サイトの画像を使う場合はそのサイトの規約を守って適切なクレジットとリンクを貼って下さい。

フッターの部分にgif画像を背景に設置しています。デフォルトではここはありません。
ここを付け加えたい場合は以下のコードを追加で記述して下さい。

#footer {
	background-image:url(gif画像もしくは背景画像のURL);
	background-repeat:no-repeat;
	background-position: right bottom;
}

GitHubにCSSをアップしています。

github.com