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

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

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

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

フォントサイズを変更したいときは、ft[数値]pxという書式のクラス指定をするだけで変更できます。
“DigiPressによるコンテンツ装飾テスト” の続きを読む

レイアウトテスト

パラグラフ配置テスト

デフォルトパラグラフ

吾輩の主人は滅多に吾輩と顔を合せる事がない。職業は教師だそうだ。
学校から帰ると終日書斎に這入ったぎりほとんど出て来る事がない。家のものは大変な勉強家だと思っている。当人も勉強家であるかのごとく見せている。

しかし実際はうちのものがいうような勤勉家ではない。吾輩は時々忍び足に彼の書斎を覗いて見るが、彼はよく昼寝をしている事がある。
時々読みかけてある本の上に涎をたらしている。

左ぞろえ

彼は胃弱で皮膚の色が淡黄色を帯びて弾力のない不活溌な徴候をあらわしている。
その癖に大飯を食う。大飯を食った後でタカジヤスターゼを飲む。飲んだ後で書物をひろげる。二三ページ読むと眠くなる。涎を本の上へ垂らす。
これが彼の毎夜繰り返す日課である。
吾輩は猫ながら時々考える事がある。教師というものは実に楽なものだ。人間と生れたら教師となるに限る。
こんなに寝ていて勤まるものなら猫にでも出来ぬ事はないと。それでも主人に云わせると教師ほどつらいものはないそうで彼は友達が来る度に何とかかんとか不平を鳴らしている。

中央ぞろえ

吾輩がこの家へ住み込んだ当時は、主人以外のものにははなはだ不人望であった。
どこへ行っても跳ね付けられて相手にしてくれ手がなかった。
いかに珍重されなかったかは、今日に至るまで名前さえつけてくれないのでも分る。吾輩は仕方がないから、出来得る限り吾輩を入れてくれた主人の傍にいる事をつとめた。
朝主人が新聞を読むときは必ず彼の膝の上に乗る。彼が昼寝をするときは必ずその背中に乗る。

右ぞろえ

これはあながち主人が好きという訳ではないが別に構い手がなかったからやむを得んのである。その後いろいろ経験の上、朝は飯櫃の上、夜は炬燵の上、天気のよい昼は椽側へ寝る事とした。
しかし一番心持の好いのは夜に入ってここのうちの小供の寝床へもぐり込んでいっしょにねる事である。
この小供というのは五つと三つで夜になると二人が一つ床へ入って一間へ寝る。

両端ぞろえ

吾輩はいつでも彼等の中間に己れを容るべき余地を見出してどうにか、こうにか割り込むのであるが、運悪く小供の一人が眼を醒ますが最後大変な事になる。小供は——ことに小さい方が質がわるい——猫が来た猫が来たといって夜中でも何でも大きな声で泣き出すのである。すると例の神経胃弱性の主人は必ず眼をさまして次の部屋から飛び出してくる。現にせんだってなどは物指で尻ぺたをひどく叩かれた。

読みやすさのテスト

吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

“読みやすさのテスト” の続きを読む

実用的で強力なエディター機能(オリジナルブロック)

専用プラグイン「DigiPress Ex – BLocks Free」、または「DigiPress Ex – Blocks」とセットで利用すると、WordPress の標準ブロックを大幅に拡張して使い勝手を向上させます。

さらにオリジナルブロックによって、HTML や CSS を一切記述せずにデザイン性の高い高度なビジュアルコンテンツを実際に表示されるページと同じデザインで確認しながら編集作業が行えます。

[dp_toc]


オリジナルブロック「吹き出し」

アバター画像、名前、吹き出し文章ブロック内に直接入力するだけで完成する会話風の吹き出しコンテンツを表示します。

オリジナルブロック「吹き出し」
表示例
デジ太郎
やあ!
これは独自ブロックの「吹き出し」だよ!
デジ子
なによこれ!
とっても簡単じゃないの!
よく使い回す吹き出しは、再利用ブロックに追加しておくと便利よね!

オリジナルブロック「ブログカード」

サイト内のページだけでなく、外部URLにも対応した、Webページの情報をリッチコンテンツ化する「ブログカード」を表示します。

オリジナルブロック「ブログカード」
表示例

オリジナルブロック「ボタン」

テーマにプリセットのCSSボタン装飾を利用したボタンリンク、またはWordPress 標準の「ボタン」ブロックよりも自由度が高いカスタムボタンリンクを作成できるオリジナルブロックです。

オリジナルブロック「ボタン」
表示例

オリジナルブロック「ラベル」

テーマにプリセットのCSS装飾を利用したテキストラベルを表示するオリジナルブロックです。

オリジナルブロック「ラベル」
ラベル最もベーシックな表示

基本のラベルカラーは、テーマのキーカラーに依存します。

ラベルアイコンを表示した場合
ラベルブルーラベル
ラベルライトブルーラベル
ラベルグリーンラベル
ラベルパステルグリーンラベル
ラベルレッドラベル
ラベルピンクラベル
ラベルオレンジラベル
ラベルブラックラベル
ラベルグラデーションラベル

オリジナルブロック「カラーボックス」

テーマにプリセットのCSS装飾を利用したカラーボックスを表示するオリジナルブロックです。
カラーボックスでは、CTAとして利用したり、独立したコンテンツとして他のコンテンツとは区別したい場合に活用できます。

このブロックでは、ボックス内にさらに様々なブロックを追加することができます。

オリジナルブロック「カラーボックス」
表示例

カラーボックスブロック

カラーボックス内にはさらに様々なブロックを自由に追加して独立したコンテンツを表示できます。

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

オリジナルブロック「説明リスト」

タイトルとその内容をまとめた HTML の定義リストタグ(dl, dt, dd)を表示するためのオリジナルブロックです。

説明(定義)リスト表示用ブロック
表示例
Step 1 : WordPress のインストール

詳細についてここに表示します。ここのコンテンツは新たに様々なブロックを追加して自由に構成できます。

まずは WordPress をサーバー上にインストールします。

Step 2 : テーマのインストール

WordPress用のテーマである DigiPress をインストールします。

オリジナルブロック「再利用コンテンツ」

再利用コンテンツ機能の詳細については以下をご覧ください。

オリジナルブロック「アイコンリスト」

このブロックは有料版の機能です。

リストの先頭に好みのアイコンを指定したり、カラーボックスでリストを括ることができるオリジナルブロックです。
アイコンの大きさやボックス背景、ボーダーなどの配色、形状をカスタムでき、リストは最大3カラムまで設定できます。

オリジナルブロック「アイコンリスト」
シンプルな表示例
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
2カラム表示例1〜3カラム指定可
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
3カラム表示例ストライプ背景
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
破線表示例
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
二重線表示例
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。

オリジナルブロック「アコーディオンパネル」

このブロックは有料版の機能です。

タイトルをクリックすると、その内容が開閉表示されるアコーディオンパネルコンテンツを表示するオリジナルブロックです。

オリジナルブロック「アコーディオンパネル」
表示例
アコーディオンパネル1

このパネルは最初から開いたままにするよう指定しています(初期値は閉じた状態)。

アコーディオンパネルのコンテンツ内には、別のブロックを追加できます。

カラムブロックを追加し、各カラムに画像ブロックを追加した表示例。

これは→
カラムブロック内に→
画像を表示

DigiPress Ex – Blocks のブロックももちろん追加できます。

オリジナルブロック「ショーケース」

このブロックは有料版の機能です。

このブロックでは、商品やサービス、メンバーなどの一覧を画像付きのリンクで並べて表示したい場合に活用できます。

オリジナルブロック「ショーケース」
表示例

オリジナルブロック「プロセスステップ」

このブロックは有料版の機能です。

このブロックでは、物事の順序、工程、手続き方法などの説明を順番に表示できるプロセスステップ(工程)コンテンツを表示します。

オリジナルブロック「プロセスステップ」
表示例
1
2
3
4

オンラインでのご注文

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

では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

ご決済の確認

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

では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

商品の梱包

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

では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

商品の発送

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

では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

オリジナルブロック「メニュー表」

このブロックは有料版の機能です。

このブロックでは、飲食店などでよく見かけるメニューをWebページ上のコンテンツとして表示したい場合に活用できます。

オリジナルブロック「メニュー表」
表示例1横書き
  • あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
  • あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
  • あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
表示例2縦書き
  • あのイーハトーヴォのすきとおった風、
    夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、
    郊外のぎらぎらひかる草の波。
  • あのイーハトーヴォのすきとおった風、
    夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、
    郊外のぎらぎらひかる草の波。
  • あのイーハトーヴォのすきとおった風、
    夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、
    郊外のぎらぎらひかる草の波。

十分大きな声でそれを口に出せば、いつもませて聞こえる; スーパーカリフラジリスティックエクスピアリドーシャス!

とても長い単語が含まれたとても長いタイトルの投稿。日本語の場合は単語の区切りにスペースを使用していないので単語の長さはあまり関係ない。タイトルの行の高さ (line-height) とタイトルエリアが狭い場合に起こりうるオーバーフローの問題のテスト。