こんにちは、タケです。
![](https://take-blog-life.com/wp-content/uploads/2021/06/woman_question-e1639570727796.png)
SWELLのブログパーツってどんな使い方?
聞いたことあるけど使ったことないなー。
こういった疑問に答えます。
![](https://take-blog-life.com/wp-content/uploads/2023/05/IMG_1558.jpg)
![](https://take-blog-life.com/wp-content/uploads/2023/05/IMG_1558.jpg)
- ブログ歴3年目の副業ブロガー
- 副業を始めたい人やガジェット好きな人に役立つ情報を発信
- 当ブログ月間PV5,000ほど(リニューアル中)
⬆︎これもブログパーツで作成しています。
この記事を読むことで、ブログパーツの使い方がわかります。
\ ブログが楽しくなるテーマ! /
では早速、本題をみていきましょう。
本記事の内容は以下のとおりです。
- SWELLのブログパーツの登録
- SWELLのブログパーツの使い方
順番に解説します。
SWELLのブログパーツの登録
![](https://take-blog-life.com/wp-content/uploads/2023/05/nikolay-ep6Afz45gH0-unsplash.jpg)
![](https://take-blog-life.com/wp-content/uploads/2023/05/nikolay-ep6Afz45gH0-unsplash.jpg)
はじめに、SWELLのブログパーツの登録のやり方についてお伝えしていきます。
SWELLのブログパーツを使うことで、いろいろなページや記事を便利にカスタマイズできますよ!
では登録のやり方についてみていきましょう。
- ブログパーツを開く
- パーツを組み合わせる
- 用途を選択
- 公開する
順番に解説します。
ブログパーツを開く
WordPressの管理画面にあるブログパーツを開きます。
![](https://take-blog-life.com/wp-content/uploads/2023/05/名称未設定のデザイン-1.jpg)
![](https://take-blog-life.com/wp-content/uploads/2023/05/名称未設定のデザイン-1.jpg)
開いたら、新規追加をクリックしましょう。
![](https://take-blog-life.com/wp-content/uploads/2023/05/名称未設定のデザイン-2.jpg)
![](https://take-blog-life.com/wp-content/uploads/2023/05/名称未設定のデザイン-2.jpg)
すると以下の画面になります。
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-18-14.46.56.png)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-18-14.46.56.png)
パーツを組み合わせる
次にタイトルを決めて入力しましょう!(自分が分かりやすいものにしておきます)
![](https://take-blog-life.com/wp-content/uploads/2023/05/名称未設定のデザイン-4.jpg)
![](https://take-blog-life.com/wp-content/uploads/2023/05/名称未設定のデザイン-4.jpg)
あとは自分の好きなように画像や文章のブロックを組み合わせていきます。
⬇︎例としてこんな感じにしておきます。
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-18-15.03.12.png)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-18-15.03.12.png)
用途を選択
つづいて用途の選択ですが、作ったブログパーツをどこで使うのか設定していきます。
右側のタブに「用途」があるので下矢印をクリックすると、選択できるようになります。
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-18-15.03.59.png)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-18-15.03.59.png)
- CTA
- カテゴリー用
- タグ用
- ブロックパターン
とあるので使いたい場所にチェックを入れましょう。
とりあえず試しで作ってみたい人は未設定でも問題ありません。(✔︎を全て外す)
公開する
あとは右上にある「公開」ボタンをクリックすれば登録完了です。
以下のように追加されていればOKです。
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-18-13.48.50.png)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-18-13.48.50.png)
SWELLのブログパーツの使い方
![](https://take-blog-life.com/wp-content/uploads/2023/05/elnaz-asadi-yexNq_O1npA-unsplash.jpg)
![](https://take-blog-life.com/wp-content/uploads/2023/05/elnaz-asadi-yexNq_O1npA-unsplash.jpg)
つづいて登録したブログパーツの使い方についてみていきましょう!
使いたいページや場所の設定方法を詳しく紹介していきます。
- 投稿記事
- メインビジュアル
- ウィジェット
順番に解説します。
投稿記事
投稿記事の中でブログパーツを使いたい場合は、用途を「未設定」か「ブロックパターン」にしておきましょう。
投稿記事での使い方は以下のとおりです。
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-3.55.31.png)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-3.55.31.png)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-3.56.55.png)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-3.56.55.png)
(タブ下の「タイトルで検索」でブログパーツを探すこともできます)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-3.58.17.png)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-3.58.17.png)
これだけでブログパーツを追加できるので、簡単ですよね。
メインビジュアル
つづいてメインビジュアルでのブログパーツの使い方です。
用途はなんでもOKなので、未設定でも問題ありません。
メインビジュアルでのブログパーツの使い方は以下のとおり。
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-3.59.12.png)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-3.59.12.png)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-4.01.10.png)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-4.01.10.png)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-4.02.12.jpg)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-4.02.12.jpg)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-4.03.40.jpg)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-4.03.40.jpg)
メインビジュアルにブログパーツを設置することで、企業サイトのようなデザインにしたり自由にカスタマイズができて嬉しいですよね。
ウィジェット
ウィジェットにブログパーツを設定するときも、用途はなんでもOKです。
ウィジェットでのブログパーツの使い方は以下のとおり。
ここではコード全てをコピー(
)![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-4.04.30.png)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-4.04.30.png)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-4.06.04.png)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-4.06.04.png)
カスタムHTMLを好きなウィジェットの部分にドラッグして追加しましょう
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-4.07.01.jpg)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-4.07.01.jpg)
タイトルも必要であれば入力しましょう
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-4.08.05.jpg)
![](https://take-blog-life.com/wp-content/uploads/2023/05/スクリーンショット-2023-05-19-4.08.05.jpg)
ウィジェットでのブログパーツも使い方次第では、いいサイトが出来上がりそうですよね。
![](https://take-blog-life.com/wp-content/uploads/2023/05/austin-distel-Imc-IoZDMXc-unsplash-300x200.jpg)
![](https://take-blog-life.com/wp-content/uploads/2023/05/austin-distel-Imc-IoZDMXc-unsplash-300x200.jpg)
最後に:ブログパーツを使うことでブログが楽しくなる!
この記事ではブログパーツについて解説しました。
SWELLはいろいろな便利な機能がありますが、ブログパーツはブログ運営をするなかで効率化UPをしてくれる機能です。
まずは自分で試しに使ってみてブログのカスタマイズをしていくことで、ブログ運営が楽しくなりますよ!
\ ブログが楽しくなるテーマ! /
![](https://take-blog-life.com/wp-content/uploads/2021/11/スクリーンショット-2021-11-25-14.12.48-300x121.png)
![](https://take-blog-life.com/wp-content/uploads/2021/11/スクリーンショット-2021-11-25-14.12.48-300x121.png)
というわけで今回は以上です。
最後まで読んでいただきありがとうございました。
![](https://take-blog-life.com/wp-content/uploads/2023/06/matt-ragland-02z1I7gv4ao-unsplash-1-300x225.jpg)
![](https://take-blog-life.com/wp-content/uploads/2023/06/matt-ragland-02z1I7gv4ao-unsplash-1-300x225.jpg)