この「Minimal Green」テーマのCSSは自由に改変してくださって構いません。
Minimal Green - テーマ ストア
背景画像や背景色を変えるとこんな感じになります。
メニューやリンク文字の色を変えるとこんな感じになります。
[注意] グローバルメニューとページトップへ戻るボタンを表示させるには、それぞれヘッダとフッターに追加のHTMLコードの貼り付けが必要です。
グローバルメニューの設置
http://www.yukihy.com/embed/dropdown-toggle-menu
ゆきひー (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="https://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>
を追加して下さい。階層構造にしない場合は
<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>の部分は消して下さい。余った部分も消去してください。
全メニュードロップダウン階層構造にしたい場合は上記のカテゴリ5の部分を参考にリストを階層にして下さい
グローバルメニューのカスタマイズについてはこちらもどうぞ。
blog.minimal-green.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="https://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>
各要素のデザインの変更・カスタマイズ
まとめて色を変更する
黒系でまとめて色を変更するカスタマイズ用のコードを用意しました。
以下のエントリへどうぞ。
http://blog.minimal-green.com
http://blog.minimal-green.com/
タイトル画像、ヘッダー周りの設定・カスタマイズ
以下のエントリーを参考にしてください。
blog.minimal-green.com/
タイトル下やフッター部分をcontent幅に揃える（レスポンシブ）
ヘッダのタイトル下やフッタの幅をcontent幅(1000px)に揃えるには
広告バナーや補足説明文を貼り付けたいときにお使いください。
この要素はレスポンシブになっています。
中央寄せにしたい時は.center-inner {
text-align:center;
margin: 0 auto;
display: block;
}
をデザインCSSに追記してください。あるいは単に
文字色、フォント、リンクの色の変更
文字やリンクの色、背景色を変更したい場合は「#好きなカラーコード」のところを適時入れ替えて下さい。
body {
font-family:'“好きなフォント1”', フォント2,; /* フォント */
color: #好きなカラーコード; /* 基本の文字の色 */
}
a { color: #好きなカラーコード; /* リンクの色 */}
a:hover { color: #好きなカラーコード; /* マウスオーバーした時のリンクの色*/ }
a:visited { color: #789dae;/* 訪問済みのリンクの色 */ }
記事幅などレイアウトの変更
blog.minimal-green.com
見出し、サイドバーモジュールタイトルのデザイン
はてなブログでは大見出しがh3中見出しがh4です。
/* 大見出しの文字の色 */
.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 {
position: relative;
padding: 0 .5em .5em 2em;
border-bottom: 1px solid #カラーコード;/* 中見出し下のボーダー */
}
.entry-content h4::before,
.entry-content h4::after {
position: absolute;
content: '';
border-radius: 100%
}
.entry-content h4::before {
top: .2em;
left: .2em;
z-index: 2;
width: 18px;
height: 18px;
background:#カラーコード;/* 前の○ */
}
.entry-content h4::after {
top: .7em;
left: .7em;
width: 13px;
height: 13px;
background: #カラーコード;/* 後ろの○ */
}
/* サイドバーモジュールタイトル */
.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; /* 中の矢印マークの色 */
}
コメントボタンのカスタマイズ
ソーシャルシェアボタンを記事上・下につける
フッターのカスタマイズ
このデモブログでのカスタマイズ
管理画面、デザイン、カスタマイズで背景画像を「左、繰り返させない、スクロール」で設定しています。
今はヘッダ背景に画像を指定しています。
blog.minimal-green.com/
画像はふわふわ。りさんの素材を使わせていただきました。
shimizumari.com
素材サイトの画像を使う場合はそのサイトの規約を守って適切なクレジットとリンクを貼って下さい。
フッターの部分にgif画像を背景に設置しています。デフォルトではここはありません。
ここを付け加えたい場合は以下のコードを追加で記述して下さい。
#footer {
background-image:url(gif画像もしくは背景画像のURL);
background-repeat:no-repeat;
background-position: right bottom;
}
