MENU
アーカイブ
くうか
ミニマリスト
整理収納・ゲーム・プログラミングが好きな40代専業主婦。4人家族。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしているミニマリストでもあります。
SWELLでサイト型トップページを作る!解説→CLICK!

こんな使い方してます!SWELLブログパーツの利用例

SWELLのブログパーツの使い方
URLをコピーする
URLをコピーしました!

こんにちは、SWELL愛用2年を超えたくうかです。

この記事の内容
  • SWELLブログパーツとは?再利用ブロックと違うの?
  • ブログパーツの使い方6選
  • さらに当ブログで使い回しているブログパーツを紹介!

WordPressテーマ「SWELL」を使っているなら、ぜひとも覚えておきたい機能がブログパーツ

とっても便利なんです!

使い回したいブロックの組み合わせを、パーツとして登録し、それをあらゆる場面で呼び出すことができます。

便利すぎるので、当ブログでも多く利用しています。

くうか

この記事では、当ブログ内で利用しているブログパーツをいくつかご紹介していくので、参考になったら嬉しいです!

目次

SWELLのブログパーツとは?再利用ブロックとの違い

「ブログパーツ」とはSWELL独自のブロックで、複数のページや場所で使い回したいコンテンツをあらかじめ登録しておくことで、自由に呼び出すことができます。

似たような機能にWordPress標準の「再利用ブロック」があります。

再利用ブロックは記事内のみで利用できることに対し、ブログパーツは、

  • 記事内
  • ウィジェット
  • カテゴリーページ
  • タグページ
  • CTA
  • メインビジュアル

にも使えるというところが、大きな違いとなっています。

ブログパーツの基本的な使い方や機能は、公式マニュアルに載っていますので、基本を知りたい場合はご一読ください。

くうか

では実際はどのような場合に使うことができるのか、当ブログでの使用例を挙げていきます!

SWELLのブログパーツ機能の使い方6選

ブログパーツは主にこれらの使い方をしています。

使い方概要用途のチェック
①通常記事内記事内どこでも呼び出せるどれでも
②ウィジェットウィジェット内に呼び出せるどれでも
③カテゴリー(タグ)
ヘッダー
カテゴリー(タグ)のヘッダーを装飾できるカテゴリー用
またはタグ用
④CTACTAに表示させたい場合に使用CTA
⑤メインビジュアルサイトのファーストビューに表示できるどれでも
⑥ブロックパターン編集可能なブロックの組み合わせブロックパターン
くうか

こんなに覚えるのは大変ですよね。

ご自分に必要な使い道を選択してくださいね。


WordPressのメニューから【ブログパーツ】→【新規追加】を選択し、作り始めます。

ブログパーツの新規追加
ブログパーツの新規追加
くうか

では、それぞれのブログパーツの使い方を説明していきます。

1. 記事内によく呼び出す場合

記事を書いていく上でよく使うブロックの組み合わせを、あらかじめ登録しておきます。

例:SWELLの広告

SWELL広告

このようなパーツを作りました。

使用しているブロック
  • 広告タグ(あらかじめ登録してあるもの)
  • SWELLボタン
  • 段落

用途:なし

用途のチェックは入れない
用途のチェックは入れない

用途のチェックは、なしでもありでも記事内で呼び出すことが可能です。

使い方

記事内で【ブログパーツ】ブロックから呼び出す。

SWELLのブログパーツブロック
文字から呼び出すことが多いです

パーツの一覧から選択。

ブログパーツを選択
作成済みのブログパーツを選択
くうか

組み合わせたブロックが1つのブロックとして呼び出されます。

2. ウィジェットに配置する場合

サイドバーやフッターといったウィジェットに装飾したい場合に、ブログパーツを使います。

例:フッター2(中央)にランキングサイトへのリンク

フッター2にランキングサイトへのリンク
実はすべてブログパーツ

フッター2に、ランキングサイトや楽天ROOMへのリンクを貼っています。

ウィジェット内に直接ボタンを配置することはできないので、ブログパーツを使いました。

こちらは「SWELLボタン」ブロックを使用。

ブログランキングのボタン作成
ブログランキングのボタン作成
  1. ブログ村
  2. 人気ブログランキング
  3. 楽天ROOM

3つのボタンを【SWELLボタン】で作成。アイコンはお好みで付けてください。

SWELLボタン設定
SWELLボタン設定
SWELLボタン設定
  • リンク先:ブログ村バナーのリンク先と同じものを入れる
  • スタイル:アウトライン(お好みで)
  • ボタンサイズ:大
  • リンク設定:新しいタブ
  • アイコン設定:お好みのアイコンで
くうか

ボタンサイズに「大」を選択すると、ボタンサイズが揃いますよ♪

使い方

内容を保存し、ブログパーツIDを呼び出しコードごとコピーしておく。

ブログパーツID
呼び出しコードすべてコピー

【外観】→【ウィジェット】→【フッター(PC)2】にテキストを追加。

先程コピーしたブログパーツIDを貼り付けて、タイトルを決めて保存する。

先ほどコピーしたテキストをそのまま貼り付ける
貼り付ける
くうか

ウィジェット以外で呼び出したい場合は、【ブログパーツ】ブロックから呼び出すことができます。

3. カテゴリー(タグ)ページに配置する場合

カテゴリー(あるいはタグ)ページのヘッダーに、ブログパーツを設置できるようになっています。

例:とあるカテゴリーページのヘッダー

カテゴリーページのヘッダー
カテゴリーページのヘッダー

カテゴリーページには、そのカテゴリーの概要やサブカテゴリーを表示させ、あとに記事一覧の表示がくるようにしています。

「ミニマリストカテゴリーすべての記事」という部分までがブログパーツです。

以下、簡単に作り方です。

  1. カテゴリーの画像を追加する(角丸)
  2. 【リッチカラム】ブロックを追加する
  3. 「サブカテゴリーリスト」や「読んでほしい記事」をカラム内に配置する
  4. 設定項目にある「用途」の「カテゴリー用」にチェックし、保存する
ブログパーツの用途にチェック
ブログパーツの用途「カテゴリー用」にチェック

タグの場合は「タグ用」にチェック。

使い方

そしてカテゴリー(またはタグ)編集ページにて、

作成したブログパーツを設定
作成したブログパーツを設定

先ほど作成したブログパーツを選択すれば完了です!

くうか

1ページめだけの表示にする場合は、2ページ目以降は表示しないのチェックをしてね!

用途の「カテゴリー用」にチェックが入っていないと、ここで選択することができないのでお忘れなく!

くうか

カテゴリーごとにヘッダーの内容を変える場合は、カテゴリーの数だけブログパーツを作ることになります…!

4. CTAに配置する場合

記事下に配置できるCTAを、カテゴリーやタグごとに設置できるようになっています。

CTA…読者を次の行動に促すというような意味。

例:SWELLの広告

カテゴリーごとのCTA
カテゴリーごとに広告を表示

①で作った広告と見た目同じなのですが、こちらにも使っています。

記事下に、該当カテゴリーに関連する広告を表示したいと思い作りました。

  1. ブログパーツを新規作成
  2. 段落・広告タグ・SWELLボタンを配置
  3. 設定項目にある「用途」の「CTA」にチェックし、保存
ブログパーツのCTAにチェック
ブログパーツのCTAにチェック

使い方

そしてカテゴリー(またはタグ)編集ページにて、

作成したブログパーツを設定
作成したブログパーツを設定

先ほど作成したブログパーツを選択すれば完了です!

CTAにチェックが入っていないと、ここで選択することができないのでお忘れなく!

くうか

カテゴリーごとに全然違うパーツを作ってもいいですね!
広告へ促すのも良いかも。

5. メインビジュアルに使う場合

メインビジュアルには、もともとテキストやボタンは配置することが可能です。

しかしもっと他のブロックも配置させたい、という場合にはブログパーツを使います。

私は、メニューや画像リンクを配置させたかったので使ってみました。

メインビジュアルのブログパーツ
メインビジュアルのブログパーツ

リッチカラムブロックを使って左側にメニュー、右側にサイトマップへのリンクを配置するように設定しています。

ブログパーツが完成したら、【外観】→【カスタマイズ】→【トップページ】→【メインビジュアル】の【ブログパーツID】項目にIDのみを設定します。

メインビジュアルのブログパーツID
IDのみ!

メインビジュアルの詳しい設定方法はこちらの記事を参照してください。

6. ブロックパターンとして使う場合

よく使うブロックの組み合わせをパターンとして登録しておくことで、記事内にいつでも呼び出せることができます。

他の用途との大きな違いは、「呼び出したあとに編集できる」ことです。

私は記事の冒頭に、このようなブロックパターンを使っています。

記事冒頭のブロックパターン
記事冒頭のブロックパターン

以下のように枠組みだけ作っておくだけで、

ブロックパターン作成画面
ブロックパターン作成画面

呼び出した後に、内容をリストに追加していくことができます。

用途は「ブロックパターン」を選択してください。

くうか

記事を書くたびに使うので、便利です。

もっと使い道あり!SWELLのブログパーツ

当ブログで他に作ってみたブログパーツの例を紹介します。

ボックスメニューブロックを使い回す

【ボックスメニュー】ブロックをブログパーツに登録しておき、使い回しています。

私の場合はカテゴリーのリンクを、ボックスメニューで作りました。

  • サイトマップ
  • スマホ開閉メニュー(ウィジェット)

以上の2箇所で呼び出しています。

くうか

ボックスメニューブロックを使うと、簡単にカテゴリーリンクが作れます。

記事の最後にブログ村へリンクを貼る

記事の最後にこのようなリンクを貼っています

記事下のブログ村リンク

ブログパーツで、段落にメッセージ・カスタムHTMLブロックにリンクのhtmlを貼ります。

ショートコードでアイコンも付けたり。

ブログパーツ編集画面

出来上がったら、ウィジェットの”記事下部”にブログパーツIDを入れます。

くうか

リンクだけならウィジェットにhtmlをそのまま書けば良いけど、ちょっと装飾したいな…という場合にはブログパーツがうってつけです!

サイドバーのおすすめ記事リスト

サイドバーにおすすめの記事をリスト表示させています。

サイドバーのリンク

こちらは「リスト」ブロックで、テキストに記事へのリンクを貼っています。

「投稿リスト」ブロックを多用すると重くなるかもしれない、と多少気にした結果こうなりました。

実はこのブログパーツはかなり使いまわしています!笑

下記画像はサイトマップでの使用例です。

サイトマップの記事リスト
各項目ごとにまとめてリンク集が作れて便利
くうか

まとめ記事をリストで作っておくとこんな使い方もできて便利ですね!

まとめ:SWELLのブログパーツは高機能で進化中

当ブログで利用している、SWELLブログパーツの使い方の例をご紹介しました。

  1. 通常記事内
  2. ウィジェット
  3. カテゴリー(タグ)ページのヘッダー
  4. CTA
  5. メインビジュアル
  6. ブロックパターン

ブログパーツを使えば、少し頭を抱えてしまいそうなことでも実現できたりします。

くうか

とても便利なので、色んな使い方ができることを覚えておくといいですね…!

SWELLのカスタマイズ記事も書いてます!

ぽちっとしていただけると嬉しいです

にほんブログ村 ライフスタイルブログ ミニマリストへ

SWELLのブログパーツの使い方

この記事が気に入ったら
フォローしてね!

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

コメント

コメントする

CAPTCHA


目次
トップへ
目次
閉じる