はてなブログテーマストアに「FLAT」を投稿しました
はてなブログのテーマストアに「FLAT」というテーマを投稿しました。
全体的なコンセプトとしては、ブログの内容が映えるようにシンプルかつクリーンなレスポンシブテーマを目指しました。
トップページ、カテゴリーページ、記事ページ(パーマリンク)、プロフィールページで、それぞれ全体の色が変わるようになっています。
また、タブレットで見た時にも文字が見やすくなるように、全体的なフォントサイズを調整しています。
タブレットで見ると、このように1カラムになります。
色を変えたい場合
色を変えたい場合は、下記の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;} }
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
段落
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
h3見出し(*)
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
h4見出し(**)
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
h5見出し(***)
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
h6見出し
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
asin
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
- 作者: 近藤淳也
- 出版社/メーカー: 翔泳社
- 発売日: 2006/02/13
- メディア: 単行本
- 購入: 62人 クリック: 1,985回
- この商品を含むブログ (1085件) を見る
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
引用
本日(11月12日)から11月27日まで、はてなダイアリーの公開デザインコンテスト「公開デザイン祭2007秋」を開催します。
「公開デザイン祭2007秋」を開始しました - はてなダイアリー日記
リスト(ul,ol,dl)
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
- 大賞1名:Amazonギフト券5万円分
- 入選9名:Amazonギフト券1万円分
- 大賞1名:Amazonギフト券5万円分
- 入選9名:Amazonギフト券1万円分
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
- 大賞1名:Amazonギフト券5万円分
- 入選9名:Amazonギフト券1万円分
- 大賞1名:Amazonギフト券5万円分
- 入選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; }
写真を載せてみます
キレイに表示されてるでしょうか。