WordPressのテンプレートを作りました。

はてなブログテーマ Coolbox に引き続いて WordPress テーマ Coldbox を作成しました。
デザインは Coolbox を踏襲しつつ、細かなデザインを改善したり、機能性を上げたりしました。

Coldbox テーマをお使いいただいている皆様には気に入って頂けるのではと思います。もし WordPress に移行したりするのであれば お使い頂けますとうれしいです !

coldbox-image

はてなブログテーマ"coolbox"公開しました。

自作はてなブログテーマ"coolbox"を公開しました。
シンプルかつ高機能を目指して開発しています。

ダウンロードはこちらからどうぞ

f:id:mirucons:20160618213640p:plain

特徴

Flexboxを使ったデザイン

先進的なレイアウトモジュールであるFlexboxを使用しており、コードが複雑化しやすいFloatレイアウトは一切使用していません。 よってFlexboxレイアウトの入門にも適しているかと思います。

スマホタブレット対応

画面幅によってデザインが変わる、レスポンシブデザインを採用しています。 どんな画面幅でも最適で綺麗なデザインでご覧頂くことが出来ます。

*デザイン設定から[スマートフォン]>[詳細設定]と進み、[レスポンシブデザイン]にチェックを入れて頂く必要があります。

タブレット環境ではサイドバーは2列表示に

タブレット環境で見た時にはサイドバーが2列表示になり、利便性が向上します。

f:id:mirucons:20160618210619p:plain

その他事項

このサイトについて

このサイトはポータルサイトとしてカスタマイズ情報やアップデート情報を載せていけたらいいと思っています。

既知の不具合

  • iOS 8以下を搭載のiPadで正しくサイドバーを表示できない。(CSSの仕様が原因となる不具合なので解決には少々時間がかかります。ご了承下さい。)
    とはいえiOS 8のシェアは既に10%程度なのでほとんど問題はないかと思います。

連絡先

表示崩れ等の不具合・デザイン修正案など有りましたらお気軽にご連絡下さい。このテーマに関わることであれば何でも聞いていただいて構いません。Twitterが一番早く返信できますので急ぎの場合はTwitterでお願いします。

  • 作者Twitter
  • メール : coolbox [at] mirucon.com
  • このページのコメント欄

ソースコード

全文Githubにて公開中です。
ソースはLESSを使って記述しています。

開発者向け情報

Web開発者に向けたこのテーマのレイアウト実装方法の紹介記事を近日公開予定です。Flexboxレイアウトに関する理解が深まるのではないかと思います。

サンプルエントリー

段落

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

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

フォトライフ

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


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


ブロック

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

大きい画像

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

罫線


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