Luminous - Business Edition

Highly Flexible WordPress Theme

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

約 10 分
このサイトは DigiPress の AMP 表示確認用デモサイトです。
AMP モードで表示するには、スマートフォンでご覧いただくか、URL の最後に「/amp」を付けて更新してください。

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

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

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

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

8ピクセルです。
10ピクセルです。
15ピクセルです。
20ピクセルです。
30ピクセルです。
35ピクセルです。

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

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

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

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

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

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

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

これは最もシンプルなボックスです。boxというクラス属性値を指定しています。

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

Normal Button

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

注目!ラベルサンプル

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

Point!
Check!

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

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

フォントデータなので、iPhoneやiPadなどのRetinaディスプレイでも画像のように解像度の問題でぼやけることもありません。

利用可能なアイコン

  • 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-gplus
  • icon-gplus-squared
  • 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-resize-full
  • icon-resize-exit
  • 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-gplus-circled
  • 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-slidedown
  • icon-slideup
  • 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-sldie-lr
  • icon-finger-slide-up
  • icon-finger-slide-down
  • icon-double-finger-slide-down
  • icon-double-finger-slide-up
  • 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

About The Author

株式会社◯◯◯シニアコンサルタントデジプレス・ボーイ
これはユーザーのプロフィール情報エリアです。
肩書きや対象ユーザーのSNSアカウントのリンク、紹介文などをWordPressのプロフィール画面から登録するだけで自動的に表示されます。

Comments & Trackbacks

  • Comments ( 2 )
  • Trackbacks ( 0 )
  1. AMPモードでもコメント一覧を表示しますが、AMPでは制約上、WordPressのコメントフォームを表示できないため、返信や新規でコメントする際は、自動的に非AMPページに遷移して投稿可能な状態にします。

Leave A Reply

*
*
* (公開されません)

Comment On Facebook