DigiPressによるコンテンツ装飾テスト

DigiPressによるコンテンツ装飾テスト

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

表示サンプル

このサンプルのコード

<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!

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> まで。

利用可能なアイコン

  • icon-feedly
  • icon-cloud-upload
  • icon-cloud-download
  • icon-mail-alt
  • icon-edit
  • icon-resize-exit-alt
  • icon-resize-full-alt
  • icon-headphones
  • icon-phone
  • icon-open
  • icon-sale
  • icon-diamond
  • icon-tablet
  • icon-music
  • icon-picture
  • icon-pictures
  • icon-th
  • icon-space-invaders
  • icon-retweet
  • icon-chart
  • icon-phone2
  • icon-gmail
  • icon-skype
  • icon-pocket
  • icon-up-bold
  • icon-right-bold
  • icon-down-bold
  • icon-left-bold
  • icon-ok
  • icon-home
  • icon-chrome
  • icon-safari
  • icon-opera
  • icon-ie
  • icon-firefox
  • icon-link
  • icon-new-tab
  • icon-facebook-rect
  • icon-facebook
  • icon-twitter
  • icon-twitter-rect
  • icon-flickr
  • icon-pinterest
  • icon-pinterest-rect
  • icon-pinterest-circled
  • icon-instagram
  • icon-rss
  • icon-vimeo
  • icon-cupcake
  • icon-raceflag
  • icon-speaker
  • icon-th-large
  • icon-lock
  • icon-unlock
  • icon-alarm
  • icon-clock
  • icon-coffee
  • icon-building
  • icon-metro
  • icon-automobile
  • icon-bus
  • icon-shipping
  • icon-warmedal
  • icon-crown
  • icon-doc
  • icon-docs
  • icon-download
  • icon-upload
  • icon-plus
  • icon-minus
  • icon-evernote
  • icon-martini
  • icon-trophy
  • icon-podium
  • icon-google
  • icon-popup
  • icon-pencil
  • icon-blocked
  • icon-checkbox-checked
  • icon-quote-right
  • icon-quote-left
  • icon-cmd
  • icon-terminal
  • icon-finder
  • icon-bookmark
  • icon-star
  • icon-star-half
  • icon-star-empty
  • icon-yahoo
  • icon-eye
  • icon-wordpress
  • icon-podcast
  • icon-connection
  • icon-volume-up
  • icon-volume-off
  • icon-404
  • icon-paypal
  • icon-visa
  • icon-mastercard
  • icon-mobile
  • icon-desktop
  • icon-logout
  • icon-food
  • icon-facebook-circled
  • icon-twitter-circled
  • icon-rss-rect
  • icon-rss-circled
  • icon-tumblr
  • icon-gift
  • icon-movie
  • icon-attach
  • icon-videocam
  • icon-list
  • icon-equalizer
  • icon-ok-circled
  • icon-menu
  • icon-torigate
  • icon-christmastree
  • icon-left-circled
  • icon-right-circled
  • icon-up-circled
  • icon-down-circled
  • icon-video-play
  • icon-youtube
  • icon-youtube-rect
  • icon-search
  • icon-cross-circled
  • icon-minus-ciecled
  • icon-plus-circled
  • icon-apple
  • icon-windows
  • icon-android
  • icon-linux
  • icon-tag
  • icon-tags
  • icon-comment
  • icon-comments
  • icon-user
  • icon-users
  • icon-folder
  • icon-folder-open
  • icon-folder-alt
  • icon-folder-open-alt
  • icon-comment-alt
  • icon-floppy
  • icon-dropbox
  • icon-heart-empty
  • icon-heart
  • icon-thumbs-down
  • icon-thumbs-up
  • icon-right-hand
  • icon-left-hand
  • icon-up-hand
  • icon-down-hand
  • icon-cog
  • icon-print
  • icon-plane
  • icon-zoom-in
  • icon-zoom-out
  • icon-laptop
  • icon-globe
  • icon-angle-circled-left
  • icon-angle-circled-right
  • icon-angle-circled-up
  • icon-angle-circled-down
  • icon-angle-left
  • icon-angle-right
  • icon-angle-up
  • icon-angle-down
  • icon-double-angle-left
  • icon-double-angle-right
  • icon-double-angle-up
  • icon-double-angle-down
  • icon-mail
  • icon-calendar
  • icon-starburst
  • icon-written-doc
  • icon-camera
  • icon-login
  • icon-basket
  • icon-email
  • icon-left-open
  • icon-right-open
  • icon-down-open
  • icon-up-open
  • icon-info
  • icon-triangle-right
  • icon-triangle-up
  • icon-triangle-down
  • icon-triangle-left
  • icon-leaf
  • icon-bookmark-narrow
  • icon-bag
  • icon-info-circled
  • icon-attention
  • icon-help-circled
  • icon-help
  • icon-ccw
  • icon-cw
  • icon-safe
  • icon-dollar
  • icon-dollar2
  • icon-basket2
  • icon-credit
  • icon-ambulance
  • icon-cogs
  • icon-hospital
  • icon-arrow-left-pop
  • icon-arrow-right-pop
  • icon-arrow-up-pop
  • icon-arrow-down-pop
  • icon-code
  • icon-palette
  • icon-trash-empty
  • icon-trash-full
  • icon-dot
  • icon-left-light
  • icon-right-light
  • icon-up-light
  • icon-down-light
  • icon-spaced-menu
  • icon-triangle-up-down
  • icon-finger-tap
  • icon-finger-pinch-in
  • icon-finger-pinch-out
  • icon-finger-point
  • icon-book-open
  • icon-man
  • icon-woman
  • icon-baby
  • icon-database
  • icon-keyboard
  • icon-powercord
  • icon-beer
  • icon-amazon
  • icon-game-pad
  • icon-hatebu
  • icon-piano
  • icon-ticket
  • icon-play
  • icon-stop
  • icon-pause
  • icon-backward
  • icon-forward
  • icon-first
  • icon-last
  • icon-next
  • icon-previous
  • icon-spinner
  • icon-spinner2
  • icon-spinner3
  • icon-spinner4
  • icon-spinner5
  • icon-spinner6
  • icon-spinner7
  • icon-spinner8
  • icon-spinner9
  • icon-spinner10
  • icon-creativecommons
  • icon-spam
  • icon-microphone
  • icon-microphone-off
  • icon-microphone2
  • icon-box
  • icon-box-opened
  • icon-box2
  • icon-zip
  • icon-book
  • icon-minus2
  • icon-plus2
  • icon-cross
  • icon-cake
  • icon-update
  • icon-html5
  • icon-css3
  • icon-yen
  • icon-coin-yen
  • icon-location
  • icon-location2
  • icon-cube3
  • icon-cube4
  • icon-dot-menu
  • icon-dot-menu2
  • icon-code2
  • icon-soundcloud
  • icon-soundcloud2
  • icon-sun
  • icon-sun2
  • icon-moon
  • icon-moon2
  • icon-share
  • icon-bed
  • icon-sofa
  • icon-diving-goggle
  • icon-sports-shoe
  • icon-sports-shoe2
  • icon-display
  • icon-edge
  • icon-wakaba-mark
  • icon-t-shirt
  • icon-bicycle
  • icon-ferry
  • icon-train
  • icon-walk
  • icon-rest
  • icon-window
  • icon-disc
  • icon-key-a
  • icon-one-finger-swipe-left
  • icon-one-finger-swipe-right
  • icon-one-finger-swipe-up
  • icon-one-finger-swipe-down
  • icon-yen2
  • icon-lamp
  • icon-store

ABOUT THIS AUTHOR

digioress.incWebデザイナーBecky Mendez
これはユーザーのプロフィール情報エリアです。
肩書きや対象ユーザーのSNSアカウントのリンク、紹介文などをWordPressのプロフィール画面から登録するだけで自動的に表示されます。

また、各プロフィール情報はMicrodata形式として出力されるため、検索エンジンにも寄稿者として認識させることができます。

COMMENTS & TRACKBACKS

  • Comments ( 3 )
  • Trackbacks ( 0 )
  1. DigiPressであんなサイトやこんなサイトを簡単に作っちゃおう!

    インスピレーションをすぐ形にできるよ!

    • やぁ!

      自分でコメントしといてそれに返信してみたよ!

      これはテストコメントなんだ!

  2. やろうと思えば何でも出来るけど、説明しきれないから買ってね!

COMMENT ON FACEBOOK

Archive List Widget (*Only full ver)