ブログ記事作成スピードが上がる!ブロックパーツ(デザイン、装飾)まとめ【WordPress有料テーマ SWELL編】

URLをコピーする
URLをコピーしました!

「ブログパーツのデザイン、種類」を視覚的に分かりやすく紹介します。
知らなかった便利な機能が見つかります。記事を書くのが早くなりますよ!

SWELL編とは言いつつも、同じように使えるブロック(パーツ)も多いですので見てください。
※できればパソコンで見るのがおすすめです。

あのドキ

こんにちは
あのドキです
SWELLに変えて初の記事!

とりぴっぴ

とりぴっぴっす
せっかくのオシャレテーマに
似合わないキャラクターだよまったく

SWELLとは

WordPressのブロックエディター「Gutenberg(グーテンベルク)」に完全対応した有料テーマのことです。
2018年12月以降にブログを無料の人気テーマ「Cocoon」などで記事を書き始めた人の大半は、ブロックエディターでしか記事を書いたことがないのではないでしょうか。

SWELL公式サイト
この記事はこんな人におすすめ!
  • 記事を速く書きたい人
  • ブログを本格的に始めたい人
  • SWELLのブロックデザインが気になる人
  • Cocoonなどのテーマでブロックエディターに慣れてきた人

SWELLオリジナルのブロックは 2ページ目から

目次

テキストブロック

段落

早速どんなパーツがあるか紹介していきます!
この本文も「段落」という一般的なテキストブロックの一つです。
↓こんな感じの装飾などができるよ!(視覚的に理解して下され)

段落_太字_イタリック_←インライン画像_(13色+カスタム)
上付き下付き取り消し線_マーカー線(4色)_背景色(13色+カスタム)_最小_最大
注釈(文字色薄い…?)
下線」は文字を選択して、Windowsなら「Ctrl + U」、Macなら「cmd + U」です。

★マーカー線は初期設定ではストライプじゃないものになってます。
WordPressの「SWELL設定」→「エディター設定」→「マーカー」で4種類から選択できます。

★「エディター編集」で色や形、デザインなど様々な設定を変えることができます。

▲ルビ(文字の上の小さい文字でのフリガナ)設定が見つかりませんでした。

あのドキ

とりぴっぴ

なんだよ…
変な機能覚えやがって

ボーダー設定

段落(普通の文字)などには枠を囲って装飾することができます。
WordPressの「エディター設定」で色や枠の太さなどを変えられます。

01_「スタイル」も一緒に重ねることができます

02

03

04

スタイル

上の「ボーダー設定」同様、段落などを装飾することができます。

ストライプ_「スタイル」も色を変えることができます

方眼_「スタイル」は「ボーダー設定」と組み合わせ可能

角に折り目

スティッチ

かぎ括弧

かぎ括弧(大)

窪み

浮き出し

左に縦線

付箋

吹き出し

吹き出し 2

(スタイル)_アイコンボックス

色とボックスのデザインはWordPressの「エディター設定」で変えられます。

グッド

バッド

インフォ

アナウンス

ペン

ポイント

チェック

バツ印

はてな

アラート

メモ

あのドキ

どんどん行くので お気に入りのパーツを探してね!

見出し

タイトルをH1とします。
H2~H6までありますが、H5、6は使うことはほぼないです。

★見出し(H2~H4)のデザインは
WordPressの「外観」→「カスタマイズ」→「投稿・固定ページ」→「コンテンツのデザイン」から変更できます。

あのドキ

記事編集画面にないから
Cocoonを使ってた時は気付かなかった…

見出し」デザインをまとめました

★「目次」のデザイン、設定変更もこの「投稿・固定ページ」→「目次」から。デザインは4種類。
表示させる項目を見出し「H2まで」か、「H3まで」かを選べます。

リスト

リストの左にあるアイコンの色もWordPressの「エディター設定」で変えられます。

  1. デフォルト
  2. リスト
    1. リスト
  1. 目次
  2. リスト
    1. リスト
  1. 【ul】チェック
  2. リスト
    • リスト
  1. 【ul】グッド
  2. リスト
    • リスト
  1. 【ul】バッド
  2. リスト
    • リスト
  1. 【ol】丸数字
  2. リスト
    1. リスト
  1. 注釈_使うかな…
  2. リスト
    1. リスト

その他

引用

デザインは2種類。WordPressの「エディター設定」で変更できます。

引用

引用元

整形済みテキスト

整形済みテキスト_整形済みテキスト整形済みテキスト整形済みテキスト整形済みテキスト整形済みテキスト整形済みテキスト整形済みテキスト整形済みテキスト
あのドキ

「段落」で大体事足りる…

プルクオート

いつ使うんだろこれ

(引用元) ※目立たせたい引用に使うようです。

テーブル

ヘッダーセクション消すこともできます
テーブル_デフォルトテーブルテーブル
3×3で作りました
キャプションもつけられます
ヘッダーセクション消すこともできます
テーブル_ストライプテーブルテーブル
3×3で作りました
ヘッダーセクション消すこともできます
テーブル_シンプルテーブルテーブル
3×3で作りました
ヘッダーセクション消すこともできます
テーブル_二重線テーブルテーブル
3×3で作りました

★他にも
「コード」…余白やタグを考慮したコードスニペットを表示できる。
「クラシック」…従来のWordPressエディターを使用できる。
「詩」…詩を挿入。特別な余白形式を使ったり、歌詞を引用できる。

あのドキ

あの「コードスニペット」を…!

とりぴっぴ

知らないだろ

メディア

画像

画像_デフォルト
画像_角丸
画像_枠あり
画像_影あり
画像_フォトフレーム
画像_ブラウザ風
画像_デスクトップ風
未入力

映え!

とりぴっぴ

映えてたまるか
どうしてこんな画像使ったんや

ギャラリー

クリック( or タップ)してみて下さい。

カバー

カバー
写真に文字を入れてオシャン!
「オシャン」を検索ワードに入れると次に「死語」と出ます。

あのドキ

うーんオシャレ

とりぴっぴ

どこが?

ファイル

このドキのアイコンがダウンロードできます!

とりぴっぴ

いりません

メディアとテキスト

デフォルト
画像と文字の位置を入れ替えることもできます。

ブロークングリッド
文字の背景に色を付けています。

とりぴっぴ

なんで宣伝したん

★他に「音声」「動画」を貼れるブロックもあります。

デザイン

ボタン

色も角丸の半径も変えることができます。

カラム

横に列を増やして見やすくできます。※パソコンのブラウザで見る場合

カラム_(3:3:3)

2~6列にできます

スマホでは分からない…

グループ

グループの中に入れたブロックは、まとめて囲ったり装飾することもできます。

あのドキ

仲間!

アークマ先生

仲間!

とりぴっぴ

……

  • ↑ふきだしも
  • リストとかもまとめることができます!
  • 画像も

★まとめて移動するのが簡単だったりもします。

区切り

デフォルト


幅広線_「区切り」は色を変えられます。


ドット


★他にも
「続き」…このブロックより前のコンテンツをアーカイブページの抜粋に表示できる
「ページ区切り」…コンテンツを複数のページに分けて表示できる。
「スペーサー」…ブロックの間に、高さを変更可能な余白を追加できる。

あのドキ

「続き」は使っていこうっと
「スペーサー」はよく使う!
間(ま)大事!

1 2

応援お願いっ!!(必死)

にほんブログ村 その他日記ブログ 疲れた男性へ
にほんブログ村
Amazonお得お買い物!
ギフト券 チャージタイプで最大2.5%ポイント還元
  1. 現金5,000円~チャージ
  2. コンビニ・ネット銀行・ATMのどれかでお支払い
    • 注文後に「お支払い番号のお知らせ」メールに記載の手順で支払いをします。
  1. ポイントを受け取る
    • チャージ分の0.5~2.5%獲得!(Prime会員なら1%~)

現金派でも
安心して
買い物できるよ!

\ 安心かんたんお得! /

公式の説明ページ

よければシェアしてくだされ
URLをコピーする
URLをコピーしました!

コメント

コメントする

CAPTCHA


目次
閉じる