【SWELL】記事以外でのブログパーツの使い方・使用例 総集編
![SWELLブログパーツの使い方](https://saltsalts.com/wp-content/uploads/2022/03/img_4261.jpg)
SWELLには「ブログパーツ」という記事内はもちろん、記事以外でも登録した内容が使いまわせる機能があります。
![](https://saltsalts.com/wp-content/uploads/2022/02/salt3-150x150.jpg)
記事内の使い方は分かるようになったけど、ブログパーツの活用方法がいまいちよく分からないよ。
![](https://saltsalts.com/wp-content/uploads/2022/02/salt2-150x150.jpg)
![](https://saltsalts.com/wp-content/uploads/2022/02/salt2-150x150.jpg)
![](https://saltsalts.com/wp-content/uploads/2022/02/salt2-150x150.jpg)
じゃあまずは、使える場所を一つ一つみていこう!
- 記事内
- メインビジュアル
- ウィジェット
- カテゴリー・タグページ
- プロフィールページ
今回はブログ記事以外での使用方法を例をまじえて紹介していきます。
ブログパーツについての基本や、再生ブロックとの違いは別記事に詳しく書いているのでそちらを参照ください。
ブログパーツ設置場所ごとの使用例まとめはコチラからどうぞ。
メインビジュアル
![メインビジュアル](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_f.png)
![メインビジュアル](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_f.png)
メインビジュアルとはTOPページの上の方に表示させる画像のことです。
![](https://saltsalts.com/wp-content/uploads/2022/02/salt-1-150x150.jpg)
![](https://saltsalts.com/wp-content/uploads/2022/02/salt-1-150x150.jpg)
![](https://saltsalts.com/wp-content/uploads/2022/02/salt-1-150x150.jpg)
通常はテキストやボタンしか設置出来ないよね。
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
ブログパーツを使えばなんでも設置出来るんだね。
メインビジュアルでのブログパーツ設定方法
メインビジュアルでブログパーツを設定する方法を説明します。
![ブログパーツの呼び出しコード](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_a.png)
![ブログパーツの呼び出しコード](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_a.png)
![メインビジュアルでのブログパーツの使い方](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_b.png)
![メインビジュアルでのブログパーツの使い方](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_b.png)
![メインビジュアルでのブログパーツの使い方](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_c.png)
![メインビジュアルでのブログパーツの使い方](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_c.png)
![メインビジュアルでのブログパーツの使い方](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_d.png)
![メインビジュアルでのブログパーツの使い方](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_d.png)
![メインビジュアルでのブログパーツの使い方](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_e.png)
![メインビジュアルでのブログパーツの使い方](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_e.png)
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
ブログパーツさえ作ればあとは簡単に設置出来るんだね。
メインビジュアルでの使用例:カテゴリーアイコン
カラムを使ってアイコンを設置
![ブログパーツの活用法](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_g-1024x409.png)
![ブログパーツの活用法](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_g-1024x409.png)
もちろん縦に並べる事も、横一列に並べる事も可能です。
メインビジュアルでの使用例:テキストカテゴリー
「カテゴリー」ブロック使用
![ブログパーツの活用方法](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_h-1024x374.png)
![ブログパーツの活用方法](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_h-1024x374.png)
ウィジェット
ウィジェットでもブログパーツを好きなように設定することが出来ます。
ウィジェットでのブログパーツ設定方法
ウィジェットで使用する際は、呼び出しコードの数字だけではなく全文コピーする必要があります。
![ブログパーツの呼び出しコード](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_o.png)
![ブログパーツの呼び出しコード](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_o.png)
![](https://saltsalts.com/wp-content/uploads/2022/02/salt-1-150x150.jpg)
![](https://saltsalts.com/wp-content/uploads/2022/02/salt-1-150x150.jpg)
![](https://saltsalts.com/wp-content/uploads/2022/02/salt-1-150x150.jpg)
メインビジュアルの時と違って、コード全て選択してね。
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
私はいつも「Ctrl + C」でコピー、[Ctrl + V」でペーストしてるよ。
![ウィジェットの選択の仕方](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_l.png)
![ウィジェットの選択の仕方](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_l.png)
![ウィジェット](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_m-1024x412.png)
![ウィジェット](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_m-1024x412.png)
![ウィジェット](https://saltsalts.com/wp-content/uploads/2022/03/79ff5526edb9b4bf5153312d6000cd83.png)
![ウィジェット](https://saltsalts.com/wp-content/uploads/2022/03/79ff5526edb9b4bf5153312d6000cd83.png)
カスタムHTMLの内容部分に、先ほどコピーした呼び出しコードを貼り付けます。
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
ctrl + Vね。
ウィジェットでの使用例
グローバルメニューの横にボタンを設置することも出来ます。
![SWELLでヘッダーメニューにボタン](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_y.png)
![SWELLでヘッダーメニューにボタン](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_y.png)
SWELL開発者である了さんのブログパーツについての記事のサイドバーがとても素敵です。
![](https://swell-theme.com/wp-content/uploads/2019/03/thumb_blog_parts_2.png)
![](https://swell-theme.com/wp-content/uploads/2019/03/thumb_blog_parts_2.png)
カテゴリーページ・タグページ
カテゴリーページ、タグページの上部、その記事内の下部にもブログパーツを使用することが出来ます。
カテゴリー・タグページでのブログパーツ設定方法
![カテゴリーページにてブログパーツの設定](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_p.png)
![カテゴリーページにてブログパーツの設定](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_p.png)
ページの下の方にブログパーツ入力箇所があります。
![カテゴリーページにてブログパーツの設定](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_q.png)
![カテゴリーページにてブログパーツの設定](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_q.png)
タグ・カテゴリーページ使用例:ページで呼び出すブログパーツ
こちらにブログパーツを入れると、カテゴリーページの上部に表示されます。
2カラムで作りました。
![カテゴリーページでブログパーツ使用例](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_r-1.png)
![カテゴリーページでブログパーツ使用例](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_r-1.png)
こちらも2カラムで作りました。
![カテゴリーぺーじでのブログパーツ使用例](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_z4-1.png)
![カテゴリーぺーじでのブログパーツ使用例](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_z4-1.png)
![](https://saltsalts.com/wp-content/uploads/2022/02/salt-1-150x150.jpg)
![](https://saltsalts.com/wp-content/uploads/2022/02/salt-1-150x150.jpg)
![](https://saltsalts.com/wp-content/uploads/2022/02/salt-1-150x150.jpg)
カテゴリーごとにページの設定できるのがいいね
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
記事が増えたら一番読んでほしい記事を上に固定するのもいいね。
タグ・カテゴリーページでの使用例:CTAエリア
CTAエリアに入力すると、記事の下のエリアに表示されます。
「SWELL」カテゴリーのページだから、SWELLのアフィリエイトを設置。
![ブログパーツのCTAでの使い方](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_u.png)
![ブログパーツのCTAでの使い方](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_u.png)
![](https://saltsalts.com/wp-content/uploads/2022/02/salt-1-150x150.jpg)
![](https://saltsalts.com/wp-content/uploads/2022/02/salt-1-150x150.jpg)
![](https://saltsalts.com/wp-content/uploads/2022/02/salt-1-150x150.jpg)
これも記事のカテゴリーに合わせて変えられるからいいね。
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
読んでほしい重要な記事をバナーリンクしてもいいね。
プロフィール
記事の下の方に出てくる「この記事を書いた人」の部分にもブログパーツを使うことが出来ます。
![プロフィールでのブログパーツ使用](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_w2.png)
![プロフィールでのブログパーツ使用](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_w2.png)
プロフィールでのブログパーツ使用方法
![プロフィールでのブログパーツ使用方法](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_v.png)
![プロフィールでのブログパーツ使用方法](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_v.png)
数字のみの入力でOKです。
プロフィールでのブログパーツ使用例
著者アーカイブページのプロフィールの下に表示されます。
3カラム、画像にリンクをキャプションブロックで囲って作成
![プロフィールページの下にブログパーツ活用](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_w5.png)
![プロフィールページの下にブログパーツ活用](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_w5.png)
![](https://saltsalts.com/wp-content/uploads/2022/02/salt-1-150x150.jpg)
![](https://saltsalts.com/wp-content/uploads/2022/02/salt-1-150x150.jpg)
![](https://saltsalts.com/wp-content/uploads/2022/02/salt-1-150x150.jpg)
記事の下に表示されるプロフィールには反映されないよ。
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
著者アーカイブページ下だけなんだね。
![記事下プロフィールにはブログパーツは表示されません](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_w4.png)
![記事下プロフィールにはブログパーツは表示されません](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_w4.png)
まとめ:SWELLのブログパーツは色々な場所で使える
ブログパーツ設置場所ごとの使用例
![メインビジュアルでのブログパーツの使い方](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_e.png)
![メインビジュアルでのブログパーツの使い方](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_e.png)
![ブログパーツの活用法](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_g-1024x409.png)
![ブログパーツの活用法](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_g-1024x409.png)
![ブログパーツの活用方法](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_h-1024x374.png)
![ブログパーツの活用方法](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_h-1024x374.png)
![メインビジュアルでカテゴリーをプルダウン表示](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_k.png)
![メインビジュアルでカテゴリーをプルダウン表示](https://saltsalts.com/wp-content/uploads/2022/03/swell_blog_parts2_k.png)
前回の記事では、記事内で使う方法を紹介しました。
今回は、ブログパーツを記事以外で使う方法を例をまじえて解説しましたが、いかがでしたでしょうか。
前回よりもレベルアップした使用方法ですが、例を見ながらだと「自分でも出来そう」という気になってきませんか?
- 記事内
- メインビジュアル
- ウィジェット
- タグ・カテゴリーページ
- プロフィール
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
![](https://saltsalts.com/wp-content/uploads/2022/03/DA49DE2C-692E-4DA6-B9C5-DB26CCF4335C-150x150.jpeg)
登録したブロックを使いまわすだけじゃなくて、レイアウトのカスタムにも役立つんだね。
![](https://saltsalts.com/wp-content/uploads/2022/02/salt-1-150x150.jpg)
![](https://saltsalts.com/wp-content/uploads/2022/02/salt-1-150x150.jpg)
![](https://saltsalts.com/wp-content/uploads/2022/02/salt-1-150x150.jpg)
色々サイトデザインしたくなってきた…♡
カタカナや専門用語が多いですが、くじけず使用例を見ながら是非やってみてください。
![](https://saltsalts.com/wp-content/uploads/2022/03/img_4036-300x169.jpg)
![](https://saltsalts.com/wp-content/uploads/2022/03/img_4036-300x169.jpg)
ソルト
コメント