![](https://oyoyo-m.com/wp-content/uploads/2021/08/d9a3b9d2b785c467f2b334c6a059997f-1.png)
【SWELL】カスタマイズで増えていくブログパーツとウィジェットを使いやすくする方法
当ページのリンクには広告が含まれています。
![【SWELL】カスタマイズで増えていくウィジェットを使いやすくする方法](https://oyoyo-m.com/wp-content/uploads/2022/04/e05943d26acce895c51474a90e75cd8f.png)
WordPressの人気有料テーマ SWELL
SWELLは【ブログパーツ】を使って、サイトを自由自在にカスタマイズできるところも人気の理由です。
当サイトでも、トップページやサイドバーに【ブログパーツ】で作ったコンテンツを<カスタムHTML>ウィジェットを使って表示させています。
ところが、ブログパーツを使ってサイトをカスタマイズしていくうちに<カスタムHTML>ウィジェットもどんどん増えてしまいました。
そして<カスタムHTML>ウィジェットが増えれば増えるほど、ウィジェットの管理が少しめんどうなたあと感じるようになったのです。
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
一例として、当サイトのウィジェットページをお見せします
こちらは「トップページ下部」と「フッダー直前」のウェジェットです。
それぞれのウィジェットでいったい何を表示しているのかわかりずらいですよね。
![](https://oyoyo-m.com/wp-content/uploads/2022/04/621b4cb51c9f501dd2d9a13cfa22e158.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/621b4cb51c9f501dd2d9a13cfa22e158.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/5d328c94bc06181d4c0cb05bb83cbe99.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/5d328c94bc06181d4c0cb05bb83cbe99.jpg)
このような<カスタムHTML>ウィジェットがずらっと並んでいたら、ちょっとウィジェットの位置を入れ替えるだけの作業もめんどうです。
![](https://oyoyo-m.com/wp-content/uploads/2022/04/85dd98345c0c375cb75ba69b8268645f.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/85dd98345c0c375cb75ba69b8268645f.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/748eb4bd5f4a117a999f499d279823c6.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/748eb4bd5f4a117a999f499d279823c6.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/748eb4bd5f4a117a999f499d279823c6.png)
いちいちサイト画面を見たり「ブログパーツ一覧」でコード
を確認するのはめんどうね・・・
![](https://oyoyo-m.com/wp-content/uploads/2022/04/c37a50df65302e05b4f562620f8ddfde.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/c37a50df65302e05b4f562620f8ddfde.jpg)
わたしと同じように、「カスタマイズで増えていくウィジェットの管理が少しめんどうだなあ」と感じている方がいらっしゃいましたら、ぜひこの記事を参考にしてください。
この記事では、このような内容をお伝えしています。
- <カスタムHTML>ウィジェットで表示させた内容がひと目でわかる方法
- ウィジェット表示させるブログパーツを整理整頓する方法
スポンサーリンク
タップできる目次
カスタマイズで増えていく<カスタムHTML>ウィジェットを使いやすくする4つの方法
![](https://oyoyo-m.com/wp-content/uploads/2021/09/6f97d856cece19a6712a3b3975e8f62d.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/09/6f97d856cece19a6712a3b3975e8f62d.png)
増え続ける<カスタムHTML>ウィジェットを効率的に管理するために、わたしが行っていることを5つ紹介します。
- <カスタムHTML>ウィジェットはブログパーツを表示させる
- ブログパーツのタイトルに表示場所を明記する
- ブログパーツを表示場所ごとに並びかえる
- <カスタムHTML>ウィジェットにタイトルを入れる
- <カスタムHTML>ウィジェットの入力欄にコメントを入れる
<カスタムHTML>ウィジェットはブログパーツを表示させる
SWELLを使用している場合、<カスタムHTML>ウィジェットには『HTMLコード』以外に『ブログパーツ』の呼び出しコードを貼りつけることができます。
わたしは<カスタムHTML>ウィジェットはブログパーツを表示させる方法をおススメします。
なぜなら
![](https://oyoyo-m.com/wp-content/uploads/2023/07/a4e060c906a5112fd34500d84ab613ed-150x150.png)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/a4e060c906a5112fd34500d84ab613ed-150x150.png)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/a4e060c906a5112fd34500d84ab613ed-150x150.png)
ウィジットウィジェットの内容を変更・修正したい場合に管理がしやすいからです
ブログ村のランキングコードを例に説明します。
本サイトも以前が、サイドバーに表示させるブログ村バナーのランキングコードをそのままウィジットに貼りつけていました。
![](https://oyoyo-m.com/wp-content/uploads/2022/04/655b9df953d109475d165759aa1ebb7e.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/655b9df953d109475d165759aa1ebb7e.jpg)
ランキングコードを直接<カスタムHTML>ウィジェットに貼り付ける方法
<カスタムHTML>ウィジェットの内容は下記のようになります。
表示させたいバナーを変更する場合も、ウィジェットの画面で行います。
![](https://oyoyo-m.com/wp-content/uploads/2022/04/81eac7217dc2142f5bb3350fe2126c7a.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/81eac7217dc2142f5bb3350fe2126c7a.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/748eb4bd5f4a117a999f499d279823c6.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/748eb4bd5f4a117a999f499d279823c6.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/748eb4bd5f4a117a999f499d279823c6.png)
ランニングバナーは少しでも順位がいいものに変えたいけど、少しめんどうね(どっちが順位表かもわかりずらいし)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
だったら、これから説明するブログパーツを使った方法が便利ですよ
ブログパーツを<カスタムHTML>ウィジェットに貼り付ける方法
ブログパーツでブログ村用のコンテンツをつくる
必ず「公開」にしてください
![](https://oyoyo-m.com/wp-content/uploads/2022/04/0748ecbe183d7ec3e949e01eca7c505b.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/0748ecbe183d7ec3e949e01eca7c505b.jpg)
ブログパーツの呼び出しコードをコピー
![](https://oyoyo-m.com/wp-content/uploads/2022/04/88fb481f4fa2b5e35ce1dc47a49eb2ca-1024x345.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/88fb481f4fa2b5e35ce1dc47a49eb2ca-1024x345.jpg)
<カスタムHTML>ウィジェットに貼り付ける
![](https://oyoyo-m.com/wp-content/uploads/2022/04/69af32fc905a10cd6aa1c5aa488b855f.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/69af32fc905a10cd6aa1c5aa488b855f.jpg)
表示させたいバナーを変更する場合は、ブログパーツの画面で行います。
プレビューボタンをクリックすると、バナーを表示させることができます。
![](https://oyoyo-m.com/wp-content/uploads/2021/08/34c91a9912ddf33950502b48e9526e4e.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/34c91a9912ddf33950502b48e9526e4e.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/34c91a9912ddf33950502b48e9526e4e.png)
こちらの方が、バナーの管理がしやすいわね
![](https://oyoyo-m.com/wp-content/uploads/2022/04/925b0dd4b1461048e45051a1c5d251f4.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/925b0dd4b1461048e45051a1c5d251f4.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
わたしは、投稿ページ以外に表示する広告も「ブログパーツ」を使って表示させています
ブログパーツのタイトルに表示場所を明記する
作成したブロブパーツをどこで使用しているかわかるように、タイトルに表示場所を明記しています。
ブログパーツを表示する場所を変えた時は、タイトルも変更しています。
![](https://oyoyo-m.com/wp-content/uploads/2022/04/6edb42a1595f4f57a1e9475239c4371d.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/6edb42a1595f4f57a1e9475239c4371d.jpg)
ブログパーツを表示場所ごとに並びかえる
ブログパーツは、表示場所ごとに並びかえると管理しやすくなります。
『Intuitive Custom Post Order』とういうプラグインを導入すると、プログパーツの順番も自由に並びかえることができるようになります。
(『Intuitive Custom Post Order』は、投稿記事を並び替えるためのプラグインです)
WordPress.org
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://ps.w.org/intuitive-custom-post-order/assets/banner-772x250.png?rev=1078755)
![](https://ps.w.org/intuitive-custom-post-order/assets/banner-772x250.png?rev=1078755)
![](https://ps.w.org/intuitive-custom-post-order/assets/banner-772x250.png?rev=1078755)
Intuitive Custom Post Order
Intuitively, order items( Posts, Pages, Custom Post Types, Custom Taxonomies, Sites ) using a drag and drop sortable JavaScript.
『Intuitive Custom Post Order』を導入後の、プログパーツ管理画面です。
ブログパーツを表示場所ごとにまとめました。
![](https://oyoyo-m.com/wp-content/uploads/2022/04/3c8958be0c987743269f0d1b95000343.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/3c8958be0c987743269f0d1b95000343.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
ブログパーツがとても管理しやすくなりました
<カスタムHTML>ウィジェットにタイトルを入れる
<カスタムHTML>ウィジェットにタイトルを入れると、表示内容が一目瞭然でわかります。
![](https://oyoyo-m.com/wp-content/uploads/2022/04/b1d33a8c7b26c4c11709dbf6d88bc66f.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/b1d33a8c7b26c4c11709dbf6d88bc66f.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
ただし、サイトの画面もタイトルが表示されてしまいます
![](https://oyoyo-m.com/wp-content/uploads/2022/04/2137d81a4647ed9b1700b1f5088f9bb5.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/2137d81a4647ed9b1700b1f5088f9bb5.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/1bfa4b109df71b21de2d28088d210bb0.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/1bfa4b109df71b21de2d28088d210bb0.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/1bfa4b109df71b21de2d28088d210bb0.png)
タイトルを表示させたくないときはどうするの?
わたしは「ブログ村に参加しています」をあえて表示していますが・・・・
![](https://oyoyo-m.com/wp-content/uploads/2023/07/a4e060c906a5112fd34500d84ab613ed-150x150.png)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/a4e060c906a5112fd34500d84ab613ed-150x150.png)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/a4e060c906a5112fd34500d84ab613ed-150x150.png)
ウィジェットに「コメント」を入れています
ウィジェットの入力欄に「コメント」を入れる
こちらは、当サイトのトップページ「おすすめ記事コーナー」です。
赤枠のタイトルが少しじゃまですよね。
![](https://oyoyo-m.com/wp-content/uploads/2022/04/3c32d50087befaf8fdffae3733b5312a.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/3c32d50087befaf8fdffae3733b5312a.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/ef1026a091946276b66d1e73866297b6.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/ef1026a091946276b66d1e73866297b6.jpg)
このような場合は、下記のコードを使ってウェジェットの内容に何のプログパーツかわかるように『コメント』を入れます。
![](https://oyoyo-m.com/wp-content/uploads/2022/04/89611402dd5935fc44cab1697b21a1fd-1024x218.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/89611402dd5935fc44cab1697b21a1fd-1024x218.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/6375b24812c7fbdb710c82062e65b9bc-1024x631.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/6375b24812c7fbdb710c82062e65b9bc-1024x631.jpg)
こちらの記事を参考にさせていただきました。
コードが文字化けしてしまい、記事上にテキストとして表示できませんでした。
コードのコピペできるよう「メモ帳」を添付しましたのでご活用ください。
(スマホの画面では文字が小さくて見ずらいです。ごめんなさい)
わたしは「タイトルを入れる」の部分に、ブログパーツと同じタイトルを入れています。
ワンクリックは必要ですが
コメントを入れておくと<カスタムHTML>ウィジェットの内容がひと目でわかるようになり便利です。
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
サイト画面も「おすすめ記事コーナー」のタイトルが消えてスッキリしました
![](https://oyoyo-m.com/wp-content/uploads/2022/04/2e8833e7d019acf7e02a82a4e3d63ef4-1024x458.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/2e8833e7d019acf7e02a82a4e3d63ef4-1024x458.jpg)
スポンサーリンク
まとめ ~ブログパーツ&ウィジェットでカスタマイズを楽しもう~
![](https://oyoyo-m.com/wp-content/uploads/2021/09/620b9bb7cd35faac14e169a73f8691fe-e1642581065493.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/09/620b9bb7cd35faac14e169a73f8691fe-e1642581065493.png)
今回はカスタマイズで増えていく<カスタムHTML>ウィジェットを使いやすくする5つの方法を説明しました。
- <カスタムHTML>ウィジェットはブログパーツを表示させる
- ブログパーツのタイトルに表示場所を明記する
- ブログパーツを表示場所ごとに並びかえる
- <カスタムHTML>ウィジェットにタイトルを入れる
- <カスタムHTML>ウィジェットの入力欄にコメントを入れる
下記のコードを使ってコメントを入れておくと、<カスタムHTML>ウィジェットの管理が楽になります。
![](https://oyoyo-m.com/wp-content/uploads/2022/04/89611402dd5935fc44cab1697b21a1fd-1024x218.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/89611402dd5935fc44cab1697b21a1fd-1024x218.jpg)
<カスタムHTML>ウィジェットを使いやすくして、サイトのカスタマイズを楽しみましょう!
本記事で紹介した『Intuitive Custom Post 』はこちらの記事でくわしく説明しています。
ワードプレステーマ【SWELL】
¥17,600(税込)
初心者にも使いやすくシンプルで高機能なワードプレステーマ。快適な使い心地で、いち押しです!もちろん私も愛用しています。
SWELL
ユーザーさん