ArchiDesign　byKBSK

DigiPressテーマにはテキストやコンテンツを用途に応じて装飾する様々なスタイルシートが用意されています。

ちなみに、このページは投稿オプションにてサイドバーを非表示（１カラム）にしています。

フォントサイズを変えよう(8〜100ピクセル)

フォントサイズを変更したいときは、ft[数値]pxという書式のクラス指定をするだけで変更できます。

表示サンプル

8ピクセルです。
10ピクセルです。
15ピクセルです。
20ピクセルです。
30ピクセルです。
35ピクセルです。
40ピクセルです。
45ピクセルです。
50ピクセルです。
60ピクセルです。
70ピクセルです。
80ピクセルです。
90ピクセルです。
100ピクセルです。

このサンプルのコード

<span class="ft8px">8ピクセルです。</span>
<span class="ft10px">10ピクセルです。</span>
<span class="ft15px">15ピクセルです。</span>
<span class="ft20px">20ピクセルです。</span>
<span class="ft30px">30ピクセルです。</span>
<span class="ft35px">35ピクセルです。</span>
<span class="ft40px">40ピクセルです。</span>
<span class="ft45px">45ピクセルです。</span>
<span class="ft50px">50ピクセルです。</span>
<span class="ft60px">60ピクセルです。</span>
<span class="ft70px">70ピクセルです。</span>
<span class="ft80px">80ピクセルです。</span>
<span class="ft90px">90ピクセルです。</span>
<span class="ft100px">100ピクセルです。</span>

Noto Sans Japaneseで美しいフォントで表示しよう

DigiPressは、Google, Adobeによって共同で開発されたOFL(Open Font License)の下で提供されているオープンソースのフリーフォント「Noto Sans CJK JP」が組み込まれており、設定画面から使用有無、適用箇所の指定(全体、主要タイトルのみ、class指定による個別表示)が簡単に行えます。

なお、日本語フォントゆえにWebフォントとして利用するには致命的な欠点であった膨大なファイルサイズ(約115MB)を、使用する文字を実用的かつ必要十分なものだけに絞ることで軽量(サブセット)化しています。

テーマ標準フォント表示

Noto Sansを指定した場合

フォントカラーを変えてみよう

spanタグなどのインライン要素に class="blue"などのクラスを指定すると、タグで括られたテキストのフォントカラーを変更できます。

表示サンプル

このテキストはグレーで表示しています。
このテキストはブルーで表示しています。
このテキストはライトブルーで表示しています。
このテキストはグリーンで表示しています。
このテキストはイエローで表示しています。
このテキストはオレンジで表示しています。
このテキストはレッドで表示しています。
このテキストはピンクで表示しています。

このサンプルのコード

<span class="gray">このテキストはグレー</span>で表示しています。
<span class="blue">このテキストはブルー</span>で表示しています。
<span class="lightblue">このテキストはライトブルー</span>で表示しています。
<span class="green">このテキストはグリーン</span>で表示しています。
<span class="yellow">このテキストはイエロー</span>で表示しています。
<span class="orange">このテキストはオレンジ</span>で表示しています。
<span class="red">このテキストはレッド</span>で表示しています。
<span class="pink">このテキストはピンク</span>で表示しています。

文字にハイライトをつけてみよう

spanタグなどのインライン要素に class="mk-blue"などのクラスを指定すると、タグで括られたテキストをハイライト表示します。

表示サンプル

この部分はブラックでハイライト表示しています。
この部分はグレーでハイライト表示しています。
この部分はブルーでハイライト表示しています。
この部分はライトブルーでハイライト表示しています。
この部分はグリーンでハイライト表示しています。
この部分はイエローでハイライト表示しています。
この部分はオレンジでハイライト表示しています。
この部分はレッドでハイライト表示しています。
この部分はピンクでハイライト表示しています。

このサンプルのコード

<span class="mk-black">この部分はブラック</span>でハイライト表示しています。
<span class="mk-gray">この部分はグレー</span>でハイライト表示しています。
<span class="mk-blue">この部分はブルー</span>でハイライト表示しています。
<span class="mk-lightblue">この部分はライトブルー</span>でハイライト表示しています。
<span class="mk-green">この部分はグリーン</span>でハイライト表示しています。
<span class="mk-yellow">この部分はイエロー</span>でハイライト表示しています。
<span class="mk-orange">この部分はオレンジ</span>でハイライト表示しています。
<span class="mk-red">この部分はレッド</span>でハイライト表示しています。
<span class="mk-pink">この部分はピンク</span>でハイライト表示しています。

文字に下線をひいてみよう

spanタグなどのインライン要素に class="bd-blue"などのクラスを指定すると、タグで括られたテキストに指定したカラーの下線を引くことができます。

表示サンプル

このテキストはグレーの下線で表示してこの部分は太い下線で表示しています。
このテキストはブルーの下線で表示してこの部分は太い下線で表示しています。
このテキストはライトブルーの下線で表示してこの部分は太い下線で表示しています。
このテキストはグリーンの下線で表示してこの部分は太い下線で表示しています。
このテキストはイエローの下線で表示してこの部分は太い下線で表示しています。
このテキストはオレンジの下線で表示してこの部分は太い下線で表示しています。
このテキストはレッドの下線で表示してこの部分は太い下線で表示しています。
このテキストはピンクの下線で表示してこの部分は太い下線で表示しています。

このサンプルのコード

<span class="bd-gray">このテキストはグレーの下線</span>で表示して<span class="bd-gray-b">この部分は太い下線</span>で表示しています。
<span class="bd-blue">このテキストはブルーの下線</span>で表示して<span class="bd-blue-b">この部分は太い下線</span>で表示しています。
<span class="bd-lightblue">このテキストはライトブルーの下線</span>で表示して<span class="bd-lightblue-b">この部分は太い下線</span>で表示しています。
<span class="bd-green">このテキストはグリーンの下線</span>で表示して<span class="bd-green-b">この部分は太い下線</span>で表示しています。
<span class="bd-yellow">このテキストはイエローの下線</span>で表示して<span class="bd-yellow-b">この部分は太い下線</span>で表示しています。
<span class="bd-orange">このテキストはオレンジの下線</span>で表示して<span class="bd-orange-b">この部分は太い下線</span>で表示しています。
<span class="bd-red">このテキストはレッドの下線</span>で表示して<span class="bd-red-b">この部分は太い下線</span>で表示しています。
<span class="bd-pink">このテキストはピンクの下線</span>で表示して<span class="bd-pink-b">この部分は太い下線</span>で表示しています。

背景色をつけてみよう

divやpタグなどのブロック要素に class="bg-blue"などのクラスを指定すると、指定した領域を様々な背景カラーで装飾できます。

表示サンプル

このサンプルのコード

<div class="bg-black pd14px">背景カラー<code>bg-black</code>を指定して１４ピクセルの余白を設けたよ。</div>
<div class="bg-gray pd14px">背景カラー<code>bg-gray</code>を指定して１４ピクセルの余白を設けたよ。</div>
<div class="bg-green pd14px">背景カラー<code>bg-green</code>を指定して１４ピクセルの余白を設けたよ。</div>
<div class="bg-yellow pd14px">背景カラー<code>bg-yellow</code>を指定して１４ピクセルの余白を設けたよ。</div>
<div class="bg-orange pd14px">背景カラー<code>bg-orange</code>を指定して１４ピクセルの余白を設けたよ。</div>
<div class="bg-pink pd14px">背景カラー<code>bg-pink</code>を指定して１４ピクセルの余白を設けたよ。</div>
<div class="bg-red pd14px">背景カラー<code>bg-red</code>を指定して１４ピクセルの余白を設けたよ。</div>
<div class="bg-blue pd14px">背景カラー<code>bg-blue</code>を指定して１４ピクセルの余白を設けたよ。</div>
<div class="bg-lightblue pd14px">背景カラー<code>bg-lightblue</code>を指定して１４ピクセルの余白を設けたよ。</div>

ボックスを表示してみよう

divやpなどのブロック要素のタグに、class="box"などのクラスを指定するだけで、文章中にちょっとしたメッセージ用などに使えるボックスを表示できます。

表示サンプル

このサンプルのコード

<div class="box">これは最もシンプルなボックスです。<code>box</code>というクラス属性値を指定しています。</div>
<div class="box-blue">これは色付きのボックスです。<code>box-kblue</code>というクラス属性値を指定しています。</div>
<div class="box-pink">これは色付きのボックスです。<code>box-pink</code>というクラス属性値を指定しています。</div>
<div class="box-red">これは色付きのボックスです。<code>box-red</code>というクラス属性値を指定しています。</div>
<div class="box-orange">これは色付きのボックスです。<code>box-orange</code>というクラス属性値を指定しています。</div>
<div class="box-yellow">これは色付きのボックスです。<code>box-yellow</code>というクラス属性値を指定しています。</div>
<div class="box-green">これは色付きのボックスです。<code>box-green</code>というクラス属性値を指定しています。</div>

疑似ボタンを使ってみよう

表示サンプル

このサンプルのコード

<a class="btn" href="#" role="button">Normal Button</a>
<a class="btn btn-blue" href="#" role="button">Blue Button</a>
<a class="btn btn-lightblue" href="#" role="button">Lightblue Button</a>
<a class="btn btn-orange" href="#" role="button">Orange Button</a>
<a class="btn btn-pink" href="#" role="button">Pink Button</a>
<a class="btn btn-red" href="#" role="button">Red Button</a>
<a class="btn btn-primary" href="#" role="button">Primary Button</a>
<a class="btn btn-green" href="#" role="button">Green Button</a>
<a class="btn btn-black" href="#" role="button">Black Button</a>
<a class="btn disabled" role="button">Disabled Button</a>

見出しラベルで注目を集めよう

表示サンプル

Labelラベルサンプル
Newラベルサンプル
Blueラベルサンプル
Greenラベルサンプル
Primaryラベルサンプル
Orangeラベルサンプル
Pinkラベルサンプル
Redラベルサンプル
Blackラベルサンプル

このサンプルのコード

<span class="label">Label</span><span>ラベルサンプル</span>
<span class="label label-blue">New</span><span>ラベルサンプル</span>
<span class="label label-lightblue">Blue</span><span>ラベルサンプル</span>
<span class="label label-green">Green</span><span>ラベルサンプル</span>
<span class="label label-primary">Primary</span><span>ラベルサンプル</span>
<span class="label label-orange">Orange</span><span>ラベルサンプル</span>
<span class="label label-pink">Pink</span><span>ラベルサンプル</span>
<span class="label label-red">Red</span><span>ラベルサンプル</span>
<span class="label label-black">Black</span><span>ラベルサンプル</span>

アイコンフォントと組み合わせてラベルを表示

表示サンプル

OK

Point!

Check!

Attention!

このサンプルのコード

<p class="label label-green icon-ok">OK</p>
<p class="label label-primary icon-pencil">Point!</p>
<p class="label label-pink icon-search">Check!</p>
<p class="label label-red icon-attention">Attention!</p>

画像を使わないWebフォントによるアイコン表示

以下のアイコンはすべてDigiPressに組み込まれているWebフォントによって表示しています。
アイコンを表示したいテキストやブロック要素のタグに、class="icon-star"などのクラスを指定するだけで表現できます。

フォントデータなので、Retinaなどの高精細ディスプレイでも画像のように解像度の問題で粗くなることもありません。

表示サンプル

DigiPressは、専用のサイトテンプレートです。
レスポンシブ・ウェブ・デザインだから でも でもフレキシブルにレイアウトを最適化します。

お問い合わせは 012-345-6789 まで。

このサンプルのコード

<div class="al-c">
<a class="ft22px btn btn-green icon-android">Download App</a> <a class="ft22px btn btn-black icon-apple" href="#">Available on App Store!</a> <a class="ft16px btn icon-basket" href="#">Add to cart</a> <a class="icon-mail btn btn-red" href="#">E-Mail</a> <a class="btn btn-blue icon-facebook" href="#">Like</a> <a class="btn btn-lightblue icon-twitter" href="#">Tweet</a> <a class="btn btn-pink icon-pocket" href="#">Pocket</a>
</div>
DigiPressは、<i class="icon-wordpress ft30px blue"></i>専用のサイトテンプレートです。
レスポンシブ・ウェブ・デザインだから <i class="icon-tablet"></i> でも <i class="icon-desktop"></i> でもフレキシブルにレイアウトを最適化します。

お問い合わせは <a href="tel:0123456789" class="icon-phone ft25px"><span class="serif i b">012-345-6789</span></a> まで。

利用可能なアイコン

CSS3アニメーションで動きをつけてインタラクティブに

円形にするコード

<img src="画像のURL" alt="" width="300" height="300" class="alignleft img-circular" />

マウスカーソルを画像に合わせてみると…

ブルブルシェイク(animate-shake)

<img class="img-circular animate-shake" src="画像のURL" alt="Circular image" width="300" height="300" />

くるっと回転(animate-rotate)

<img class="img-circular animate-rotate" src="画像のURL" alt="Circular image" width="300" height="300" />

ズームイン(animate-zoom-in)

<img class="img-circular animate-zoom-in" src="画像のURL" alt="Circular image" width="300" height="300" />

ズームアウト(animate-zoom-out)

<img class="img-circular animate-zoom-out" src="画像のURL" alt="Circular image" width="300" height="300" />

ホバーシャドウ(animate-shadow)

<img class="img-circular animate-shadow" src="画像のURL" alt="Circular image" width="300" height="300" />

スウィング(animate-swing)

<img class="img-circular animate-swing" src="画像のURL" alt="Circular image" width="300" height="300" />

ぐらぐら(animate-wobble)

<img class="img-circular animate-wobble" src="画像のURL" alt="Circular image" width="300" height="300" />

ぴくぴく(animate-wiggle)

<img class="img-circular animate-wiggle" src="画像のURL" alt="Circular image" width="300" height="300" />

バウンド(animate-bounce)

<img class="img-circular animate-bounce" src="画像のURL" alt="Circular image" width="300" height="300" />

パルス(animate-pulse)

<img class="img-circular animate-pulse" src="画像のURL" alt="Circular image" width="300" height="300" />

複数組み合わせた場合

<img class="img-circular animate-shadow animate-shake animate-zoom-in" src="画像のURL" alt="Circular image" width="300" height="300" />