mono-tone

design sample blog

はてなブログテーマストアに「FLAT」を投稿しました

はてなブログのテーマストアに「FLAT」というテーマを投稿しました。
f:id:mono_tone:20130508122234p:plain


全体的なコンセプトとしては、ブログの内容が映えるようにシンプルかつクリーンなレスポンシブテーマを目指しました。
トップページ、カテゴリーページ、記事ページ(パーマリンク)、プロフィールページで、それぞれ全体の色が変わるようになっています。

また、タブレットで見た時にも文字が見やすくなるように、全体的なフォントサイズを調整しています。
タブレットで見ると、このように1カラムになります。
f:id:mono_tone:20130508122611j:plain
f:id:mono_tone:20130508122618j:plain

色を変えたい場合

色を変えたい場合は、下記のCSSを元に「#000000」の部分をお好きな色コードに変更して、「デザインCSS」の中に追記してください。
(ページ毎に色指定しているので、かなり長いです…。ごめんなさい。)

/* Home */
#blog-title,
.hatena-module-profile .hatena-module-body,
.hatena-urllist li a:hover,
.leave-comment-title:hover,
.pager a:hover,
#main ul li a.entry-title:hover,
#footer {
  background-color: #000000;
}
.hatena-module-search-box .search-module-input:focus {
  border: 1px solid #000000;
}

/* Entry */
.page-entry #blog-title,
.page-entry .hatena-module-profile .hatena-module-body,
.page-entry .hatena-urllist li a:hover,
.page-entry .leave-comment-title:hover,
.page-entry .pager a:hover,
.page-entry #main ul li a.entry-title:hover,
.page-entry #footer {
  background-color: #000000;
}
.page-entry .hatena-module-search-box .search-module-input:focus {
  border: 1px solid #000000;
}

/* Archive */
.page-archive #blog-title,
.page-archive .hatena-module-profile .hatena-module-body,
.page-archive .hatena-urllist li a:hover,
.page-archive .leave-comment-title:hover,
.page-archive .pager a:hover,
.page-archive #main ul li a.entry-title:hover,
.page-archive #footer {
  background-color: #000000;
}
.page-archive .hatena-module-search-box .search-module-input:focus {
  border: 1px solid #000000;
}

/* About */
.page-about #blog-title,
.page-about .hatena-module-profile .hatena-module-body,
.page-about .hatena-urllist li a:hover,
.page-about .leave-comment-title:hover,
.page-about .pager a:hover,
.page-about #main ul li a.entry-title:hover,
.page-about #footer {
  background-color: #000000;
}
.page-about .hatena-module-search-box .search-module-input:focus {
  border: 1px solid #000000;
}

/* Tablet用のフッター */
@media (max-width: 1024px) {
  /* home */
  #box2 { background-color: #000000;}
  /* Entry */
  .page-entry #box2 { background-color: #000000;}
  /* Archive */
  .page-archive #box2 { background-color: #000000;}
  /* About */
  .page-about #box2 { background-color: #000000;}
}

初めてテーマを作ってみて

「Boilerplate」を土台として作りましたが、結構変えたので、手間取った所も多々ありました。
chorme、safariFirefox、IE8~10で動作チェックはしておりますが、
もし崩れなどありましたら教えていただけると幸いです。

サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

段落

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

フォトライフ

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

ブロック

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大きい画像

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

h1見出し

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h2見出し

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h3見出し(*)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h4見出し(**)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h5見出し(***)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h6見出し

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

asin

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

「へんな会社」のつくり方 (NT2X)

「へんな会社」のつくり方 (NT2X)


あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

リスト(ul,ol,dl)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

  1. 大賞1名:Amazonギフト券5万円分
  2. 入選9名:Amazonギフト券1万円分
    1. 大賞1名:Amazonギフト券5万円分
    2. 入選9名:Amazonギフト券1万円分

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大賞1名
Amazonギフト券5万円分
入選9名
Amazonギフト券1万円分

テーブル

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

名前 個数
りんご 1
みかん だいだい 2

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

PRE

.XXX {
  width:999px;
  height:999px;
}

.propA, .propB, .propC {
  width:999px;
  height:999px;
}

#YYY {
  width:9px;
  height:999px;
}