▶月3万稼ぐオンライン講座◀

solobizで使っているWordPressの装飾&スタイル設定

Solobizで使っているWordPressの装飾&スタイル設定方法
  • URLをコピーしました!

当サイトで使っている基本のソース・CSSなどの装飾系を掲載していきます。コードやSNS、You Tubeのタグも入っています。ソースコードや枠やボタンなどのCSSの種類・設定を忘れた時の備忘録ですw

WordPressテーマ履歴
  • 2023年:SWELL ▶ いまここ
  • 2020年:SANGO
  • 2017年:STORK

※SANGOからSWELLに変更。理由としてはブロックエディターでかなり使いづらいわかりづらい仕様になったため。※SANGO子テーマのPOPRIPUは2022年に停止。理由としてはSANGO Landの進化に耐えられなかったから。

目次

よく使う顔の吹き出し系

吹き出し

「/ふきだし」から選択

マナボット

笑顔な表情

文字の装飾

WordPressテーマをSWELLにしてからブロックエディターに完全対応。MarsEditなどのエディターを使わずHTMLコードで書かなくなりました。

文章の太字や強調などの装飾はブロックエディターのツールバーから修正できるので便利。

文字装飾のツールバー
ツールバーからの文字装飾例
  1. 文字の配置を左寄せ・真ん中寄せ・右寄せにしたり
  2. 太字にしたり
  3. 斜めにしたり
  4. リンクにしたり
  5. 打ち消しにしたり
  6. SWELL装飾にしたり
  7. マークをつけたり
  8. ←タグ</>したり
  9. 大きくしたり
  10. 小さくしたり
  11. 蛍光色強調したり
  12. その他ツールバーから削除やコピー、ロックもできる

ブロック装飾

ブロック装飾はブロックエディターの右側にあるツールバーより選択します。

ボーダー系

ブロック装飾からのボーダー系はこの装飾を参考にしてください。

ブロック装飾からのボーダー系はこの装飾を参考にしてください。

ブロック装飾からのボーダー系はこの装飾を参考にしてください。

スタイル系

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロック装飾からのスタイル系はこの装飾を参考にしてください。

ブロックをクリアスタイルをクリアで装飾が解除できます。

ボックス系

「/キャプションボックス」からボックスが選べる。リストにキャプションをつけたい場合に利用する。その際はリストをグループ化してコピペによりキャプションボックスを利用する。

キャプションボックスの例
  1. リスト
  2. リスト
  3. リスト

リスト系

「/リスト」からリストのスタイルを選択して、リストの親グループのスタイルから変更

  • リスト1
  • リスト2
  • リスト3

テーブル

上に見出しがあるテーブル

ヘッダーラベルヘッダーラベルヘッダーラベル
中身A中身B中身C
中身A中身B中身C
中身A中身B中身C
キャプション

SWELL汎用パターン

SWELL汎用テーブル

左上のプラスマークから選択が可能です

 SWELL汎用テーブルの選び方
メリットデメリット
メリット
メリット
メリット
メリット
デメリット
デメリット
デメリット
デメリット
スクロールできます
フリープラン
0円
プレミアムプラン
1000円/月
機能A
機能B
機能C
制限あり
機能D
機能E
機能F
無料ではじめる購入はこちら
スクロールできます
商品特徴価格評価

商品A
xxxが便利
xxxもできる
xxxはできない
1000円

商品B
xxxが便利
xxxもできる
xxxはできない
1000円

商品C
xxxが便利
xxxもできる
xxxはできない
1000円
各製品の比較
スクロールできます

商品A

商品B

商品C
機能A少し古い普通最新版
機能B非対応制限付き使用可
性能A200[単位]500[単位]1000[単位]
性能B500[単位]1000[単位]800[単位]
デザイン普通良い微妙
価格5,000円10,000円15,000円
購入する購入する購入する
各製品の比較

SWELL汎用ブロック

\ ぼたんだよ /

  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト

ここは段落ブロックです。文章をここに入力してください。

  • リスト
  • リスト
  • リスト

SWELLはよく利用されるブロックを汎用パターンやブロックとして登録してあるから便利。汎用メディアは今のところ???

説明する時に役立つコード

アコーディオン系

SWELLの「アコーディオン」ショートコード

SWELLのアコーディオンのタイトル部分

SWELLのショートカット部分・隠したいコンテンツをここに記載する部分

ステップアップ系

SWELLの「ステップアップ」ショートコード

スマートフォンだとSTEPアイコンの縦ラインがなくなってしまう(泣)SANGOの方が良かった。。。と思っていたらステップの種類が3種類あった。

ステップ形式①:デフォルト

STEP
ステップ1のタイトル

ステップ1のテキスト部分。画像も動画もコードも挿入OK

STEP
ステップ2のタイトル

ステップ2のテキスト部分。画像も動画もコードも挿入OK

STEP
ステップ3のタイトル

ステップ3のテキスト部分。画像も動画もコードも挿入OK

ステップ形式②ビック

STEP
ステップ1のタイトル

ステップ1のテキスト部分。画像も動画もコードも挿入OK

STEP
ステップ2のタイトル

ステップ2のテキスト部分。画像も動画もコードも挿入OK

STEP
ステップ3のタイトル

ステップ3のテキスト部分。画像も動画もコードも挿入OK

ステップ形式③スモール★これはスマホにも対応できてるのでGOOD!?

STEP
ステップ1のタイトル

ステップ1のテキスト部分。画像も動画もコードも挿入O

STEP
ステップ2のタイトル

ステップ2のテキスト部分。画像も動画もコードも挿入OK

STEP
ステップ3のタイトル

ステップ3のテキスト部分。画像も動画もコードも挿入OK

関連記事系

関連記事は選べる3種!最初はデフォルト

スリム

テキスト

外部リンク

SWELLは外部リンクの場合も関連記事に統一。関連記事で外部リンクをデフォルト表示すると下記のように。 キャプションボックスではなくなる。

ボタン系

/ボタン」や「/SWELLボタン」から選択可能。計測率も測れる優れもの。角を四角や丸にするのはSWELL設定から変更か、カスタマイズするしかない?

汎用パターンからボタンを選択するということも可能。汎用パターンは登録ができるのかもしれない!?

\ ぼたんだよ /

ツィッター

「/Twitter」からTwitterURLを挿入すると下記のように表示されます。

https://twitter.com/komawoo/status/1827154408771350963

地図を埋め込む系

Google Mapのメニューの「地図を共有または埋め込む」⇒「地図を埋め込む」からコードを取得できます。これを「テキスト」エディタの方へとコピペすればOKです。

SWELLでGoogleマップなどのiFrameを埋め込む場合は「カスタムHTML」にて挿入する。ポップアップツールバーの「プレビュー」をクリックすると地図が表示されます。

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

目次