WordPressテーマdeerのデモサイト(旅ブログ)

WordPressテーマdeerのデモサイト(旅ブログ)

Deerでできるブロックパターン

ノルウェーの山

ああああああああ

あああああああああああああああああああああ

シンプルなフルワイドブロック

ここにサブキャッチコピー

Deerで対応できるブロックパターン

基本的にはDeerではWordPressの基本ブロックをDeerで使いやすく対応しています。

1.画像の装飾

1-1.画像に少しだけ影をつける↓

1-2.画像に少し枠を付ける↓


2.ボタンリンク

2-1.WordPressブロックエディターの機能でできるボタンリンク

2-1-2.角の丸め具合の調整

2-1-2.色のパターン(文字色&背景色は自由に設定可能)

2-1-3.ボタンの幅も調整可能

2-1-4.左・中央・右寄せも自由にできる

ここまでできるのでボタン機能についてはWordPressブロックエディターの機能だけでも十分な気もしますが、更にDeerでもう少しボタンリンクのパターンを増やしています。


2-2.Deerが用意しているボタンの種類

2-2-1.マテリアルデザイン風

2-2-2.立体デザイン風

2-2-3.キラッと光るボタン

3.フルワイドブロック

シンプルなフルワイドブロック

基本はWordPressのブロックエディターを使っています。
WordPressテーマDeerに対応するために、フルワイドに広がるようにしています。

ブロックの「パターン」⇒「ヘッダー」の中にある【Deer】フルワイド(シンプル)を使うとちょうどよいフルワイドブロックになります。

シンプルなフルワイドブロック

もちろん背景に画像も置くことができます。

動画を背景にも置けます

動画を背景に置くだけですごくおしゃれなサイト感が出せますね

動画を背景にも置けます

動画を背景に置くだけですごくおしゃれなサイト感が出せますね

動画を背景にも置けます

動画を背景に置くだけですごくおしゃれなサイト感が出せますね

動画を背景にも置けます

動画を背景に置くだけですごくおしゃれなサイト感が出せますね

動画を背景にも置けます

動画を背景に置くだけですごくおしゃれなサイト感が出せますね

動画を背景にも置けます

動画を背景に置くだけですごくおしゃれなサイト感が出せますね

動画を背景にも置けます

動画を背景に置くだけですごくおしゃれなサイト感が出せますね

動画を背景にも置けます

動画を背景に置くだけですごくおしゃれなサイト感が出せますね

シンプルなフルワイドブロック

ここにサブキャッチコピー

※ボタンリンクは「高度な設定」⇒「追加 CSS クラス」を指定してあげると様々なボタンができます。

4.カラム

4-1. 2カラム

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

4-1. 3カラム

3カラムもWordPress標準ブロックで十分対応可能です。

3カラムもWordPress標準ブロックで十分対応可能です。

3カラムもWordPress標準ブロックで十分対応可能です。

他にもカラムは3:7や7:3のカラムなどもできるので十分ですね。

5.リストのスタイル

デフォルトのリストスタイルがこちら。

  • ああああああああああああああああああああああああああああああああああああああああああああああ
  • いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
  • うううううううううううううううううううううううううううううううううううううううううううううう
  • ええええええええええええええええええええええええええええええええええええええええええええええ
  • おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお
  • ああああああああああああああああああああああああああああああああああああああああああああああ
  • いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
  • うううううううううううううううううううううううううううううううううううううううううううううう
  • ええええええええええええええええええええええええええええええええええええええええええええええ
  • おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお
  • ああああああああああああああああああああああああああああああああああああああああああああああ
  • いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
  • うううううううううううううううううううううううううううううううううううううううううううううう
  • ええええええええええええええええええええええええええええええええええええええええええええええ
  • おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお

普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落

  1. ああああああああああああああああああああああああああああああああああああああああああああああ
  2. いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
  3. うううううううううううううううううううううううううううううううううううううううううううううう
  4. ええええええええええええええええええええええええええええええええええええええええええええええ
  5. おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお
  1. ああああああああああああああああああああああああああああああああああああああああああああああ
  2. いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
  3. うううううううううううううううううううううううううううううううううううううううううううううう
  4. ええええええええええええええええええええええええええええええええええええええええええええええ
  5. おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお
  1. ああああああああああああああああああああああああああああああああああああああああああああああ
  2. いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
  3. うううううううううううううううううううううううううううううううううううううううううううううう
  4. ええええええええええええええええええええええええええええええええええええええええええええええ
  5. おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお

普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落普通の段落

見出し2デザイン

見出し2(ノーマル)

見出し2(カギカッコ)

ああああああああああああああああ

見出し2(短い下線)

ああああああああああああああ

見出し2(太いストライプ下線)

ああああああああああああああ

引用

プルクオート(特別な引用ブロック)

ここに引用元について書く

ここに引用ここに引用ここに引用ここに引用ここに引用ここに引用ここに引用ここに引用ここに引用ここに引用ここに引用ここに引用ここに引用ここに引用ここに引用ここに引用ここに引用ここに引用ここに引用ここに引用ここに引用ここに引用ここに引用

ここに引用元について書く

pre codeの表記

整形済みテキストブロック↓

整形済みテキスト整形済みテキスト整形済みテキスト整形済みテキスト整形済みテキスト整形済みテキスト整形済みテキスト整形済みテキスト整形済みテキスト整形済みテキスト

整形済みテキスト整形済みテキスト

整形済みテキスト整形済みテキスト

整形済みテキスト

コードブロック↓

main {
    background-image: url(image/abcdefghijklmnopqrstu.jpg);
    color: #333333;
    margin: 10px;
    padding: 5px;
        }

テーブルデザイン

デフォルト↓

お届け先/果物りんごみかんいちごバナナ
田中さん5105100
山本さん60105
宮本さん03002
甘太郎さん150510000
ヘッダーラベルヘッダーラベルヘッダーラベルヘッダーラベルヘッダーラベル
お届け先/果物りんごみかんいちごバナナ
田中さん5105100
山本さん60105
宮本さん03002
甘太郎さん150510000

ストライプ↓

お届け先/果物りんごみかんいちごバナナ
田中さん5105100
山本さん60105
宮本さん03002
甘太郎さん150510000
ヘッダーラベルヘッダーラベルヘッダーラベルヘッダーラベルヘッダーラベル
お届け先/果物りんごみかんいちごバナナ
田中さん5105100
山本さん60105
宮本さん03002
甘太郎さん150510000

区切り(hr)デザイン

デフォルト


幅広線


ドット


注意書きデザイン

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

注意事項を書く

Good!! おすすめポイントなどを書く

Bad… おすすめしないポイントを書く

投稿一覧ブロック

WordPressテーマdeerのデモサイト(旅ブログ)