ブロックエディター/ワードプレスのサンプル

ブロックエディター サンプル

実際に見てわかるように書き出しました。
作り方と言うよりはどんなものがあるかわかるようにしてあります
参考にして下さい

  1. 段落
  2. リスト
  3. リンク
  4. コード表示
  5. 引用
  6. カバー
  7. 画像
  8. ギャラリー
  9. 動画
  10. ファイル
  11. 整形済みテキスト
  12. プルクオート
  13. 区切り
  14. スペース
  15. ボタン
  16. カラム
  17. メディア
  18. カレンダー
  19. ソーシャル
  20. 検索
 

★段落

サイズは自由にカスタムできる
通常の文字はコレ
文字色&背景色は自由に変更できる

デフォルトサイズ 小

デフォルトサイズ 標準

デフォルトサイズ 中

デフォルトサイズ 大

デフォルトサイズ 特大

 

リスト表示でわかりやすく

  • 標準のリストです
  • 個別に太文字
  • 個別にリンクできる
  1. 数字にでも変えれます
    1. もう一つ段落もつけれます
      1. 取り消し線も
        1. 個別で色も変えれます
 

表も作れます

表の例

行&列を変えれますこれは2列
太文字もリンクもできる
取り消し線文字色も変えれます
これは4行

表の例

文字を中央に寄せれますこの列は左寄せこれは3列
列ごとに左にも寄せれますああああこの列は右寄せ
個別には無理ですこれは3行
 

コードを表示

コードを表示したい時に便利です

上記のコードはコチラです

<div style="width: 300px; heifht: 80px; background: #f0f8ff; border: 1px solid #000000;"><strong><span style="font-size: 105%;">目次</span></strong>
<ol>
<li><a href="#an">今日の天気</a></li>
<li><a href="#anc">明日の天気</a></li>
<li><a href="#anch">今日の朝食</a></li>
<li><a href="#anche">まとめ</a></li>
</ol>
</div>
 

リンクの説明

リンクとは簡単に言うとジャンプです
このページの一定の場所に飛ばします
ページを変えることもできます(ブラウザの戻るで帰ってきます)

ちなみに目次はリンクの塊です


<li><a href="#a">ここから</a></li>
<div id="anch">ここに飛ぶ</div>
 

★引用

どこからの文章かを表示してくれます

扁桃(へんとう)と呼ばれる
南ヨーロッパ、オーストラリア、アメリカなどで栽培されている
日本では鹿児島、山形などで栽培される
スライス、ホール、ダイス、ペースト、パウダーなどの形状で売られている
栄養価が高く、世界的にも注目されている
ビタミンEの含有量が多い
ビタミンEには抗酸化作用があり、老化防止、美肌効果が期待できる
一日の適切な摂取量20~25粒
カルシウム、亜鉛、マグネシウム、鉄分などが含まれており、体の調子を整える

https://japanese-food.net/almond/
 

★カバー

写真を背景に

表も通常通り使えます
これは2列そして2行
 

★画像を挿入

リンクをつける事ができます(クリックで指定したページに飛びます)
画像下に説明もつけれます
大きさも変えれます

牛肉の説明(外バラ)
 

ギャラリーを入れる

並べる列を変更できます
クリックすると画像が拡大される(オフにできます)
リンクをつけるとリンク先が表示されます

 

★動画を張り付ける

YouTubeを張り付けることもできます

 

★ファイルをダウンロードできるようにできます

ファイル名(数字)と「ダウンロード」の文字だけなので画像を添えるとわかりやすいかもしれません

 

★整形済みテキスト

下記のようにスペースなどの場所が決まっていて、形になっているものを使うときに便利

あいうえお かきくけこ
 あいうえお かきくけこ
  あいうえお かきくけこ
   あいうけお かきくけこ
    あいうけお かきくけこ
     あいうけお かきくけこ
 

★プルクオート

引用と似ています
引用よりも目立たせたい時コチラ

引用元はありません

色も変えれます
上下の線も色変更

これはプルクオート
 

★詩

以下のように改行などを正確に詩を書けます

はるはあけぼの
やうやう白くなりゆく山際
すこしあかりて
紫だちたる雲の細くたなびきたる

夏は夜
月のころはさらなり
闇もなお蛍の多く飛びちがひたる
また、ただ一つ二つなど、ほのかにうち光て行くもをかし
雨など降るもをかし
 

★区切り

幅広線(長い区切り)色も変えれます


デフォルト(短い区切り)


ドット 


 

★スペーサー

好きなスペースを空けることができます

もっと広くもできます

 

★ボタン

 

★カラム

  • 縦に分割できます
  • これは2列
  • 色も
  • 太字も
違うブロックリンクも
2行

  1. サーモン
  2. 胡瓜
  3. 錦糸
  4. がり
  5. いくら
  6. まぐろ

こんなこともできる
これは2カラム1/3

 

★メディアと文章

キャベツ100g

文字サイズも変えれる
文字の色も

太さも
打消し線

とまと

メディアの大きさも変えれます

  1. リストも可能
  2. 赤いトマト
  3. プチトマト
 

★カレンダー

サイトの投稿カレンダーです。
投稿した日をクリックで何を投稿したのかわかります

2020年4月
 12345
6789101112
13141516171819
20212223242526
27282930 
 

★ソーシャルアイコン

Twitter
Facebook
Instagram
Skype
Google
Amazon
YouTube
などをアイコンで表示できる

 

★検索

検索を設置できます
自分のサイト内検索
他のサイトは検索できません
検索窓の文字は変更できます

 

リンクの説明のための場所


もう一度、リンクの説明場所へ戻る