【SWELL】記事以外でのブログパーツの使い方・使用例 総集編

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

(スポンサーリンク)

SWELLには「ブログパーツ」という記事内はもちろん、記事以外でも登録した内容が使いまわせる機能があります。

記事内の使い方は分かるようになったけど、ブログパーツの活用方法がいまいちよく分からないよ。

じゃあまずは、使える場所を一つ一つみていこう!

ブログパーツを使える場所
  • 記事内
  • メインビジュアル
  • ウィジェット
  • カテゴリー・タグページ
  • プロフィールページ

今回はブログ記事以外での使用方法を例をまじえて紹介していきます。

ブログパーツについての基本や、再生ブロックとの違いは別記事に詳しく書いているのでそちらを参照ください。

ブログパーツ設置場所ごとの使用例まとめはコチラからどうぞ。

目次

(スポンサーリンク)

メインビジュアル

メインビジュアル

メインビジュアルとはTOPページの上の方に表示させる画像のことです。

通常はテキストやボタンしか設置出来ないよね。

ブログパーツを使えばなんでも設置出来るんだね。

メインビジュアルでのブログパーツ設定方法

メインビジュアルでブログパーツを設定する方法を説明します。

メインビジュアルに設置するブログパーツの用途は何でも可能です。

STEP
ブログパーツの呼び出しコードをコピー(数字の部分のみ)
ブログパーツの呼び出しコード
STEP
「外観」→「カスタマイズ」
メインビジュアルでのブログパーツの使い方
STEP
「トップページ」→「メインビジュアル」
メインビジュアルでのブログパーツの使い方
STEP
「ブログパーツID」に呼び出しコードの数字入力
メインビジュアルでのブログパーツの使い方
STEP
プレビューで確認
メインビジュアルでのブログパーツの使い方

ブログパーツさえ作ればあとは簡単に設置出来るんだね。

メインビジュアルでの使用例:カテゴリーアイコン

カラムを使ってアイコンを設置

ブログパーツの活用法

もちろん縦に並べる事も、横一列に並べる事も可能です。

メインビジュアルでの使用例:テキストカテゴリー

「カテゴリー」ブロック使用

ブログパーツの活用方法

ウィジェット

ウィジェットでもブログパーツを好きなように設定することが出来ます。

ウィジェットでのブログパーツ設定方法

ウィジェットで使用する際は、呼び出しコードの数字だけではなく全文コピーする必要があります。

ウィジェットに設置するブログパーツの用途は何でも可能です。

STEP
ブログパーツの呼び出しコードをコピー
ブログパーツの呼び出しコード

メインビジュアルの時と違って、コード全て選択してね。

私はいつも「Ctrl + C」でコピー、[Ctrl + V」でペーストしてるよ。

STEP
管理画面の「外観」→「ウィジェット」
ウィジェットの選択の仕方
STEP
ブログパーツを使いたいエリアを選択
ウィジェット
STEP
使いたいエリアに「カスタムHTML」をドラッグ
ウィジェット

カスタムHTMLの内容部分に、先ほどコピーした呼び出しコードを貼り付けます。

ctrl + Vね。

ウィジェットでの使用例

グローバルメニューの横にボタンを設置することも出来ます。

ただしPCのみで、スマートフォンでは表示されません。

SWELLでヘッダーメニューにボタン

SWELL開発者である了さんのブログパーツについての記事のサイドバーがとても素敵です。

カテゴリーページ・タグページ

カテゴリーページ、タグページの上部、その記事内の下部にもブログパーツを使用することが出来ます。

カテゴリー・タグページでのブログパーツ設定方法

ここでブログパーツを使うためには、ブログパーツの用途を使用するページに合わせて「カテゴリー」もしくは「タグ」にする必要があります。

STEP
左のメニューから、「投稿」→「カテゴリー」
カテゴリーページにてブログパーツの設定
STEP
ブログパーツ入力

ページの下の方にブログパーツ入力箇所があります。

カテゴリーページにてブログパーツの設定

ここはそれぞれ用途が正しく選択されていなければ出てきません。

タグ・カテゴリーページ使用例:ページで呼び出すブログパーツ

こちらにブログパーツを入れると、カテゴリーページの上部に表示されます。

2カラムで作りました。

カテゴリーページでブログパーツ使用例

こちらも2カラムで作りました。

カテゴリーぺーじでのブログパーツ使用例

カテゴリーごとにページの設定できるのがいいね

記事が増えたら一番読んでほしい記事を上に固定するのもいいね。

タグ・カテゴリーページでの使用例:CTAエリア

CTAエリアに入力すると、記事の下のエリアに表示されます。

「SWELL」カテゴリーのページだから、SWELLのアフィリエイトを設置。

ブログパーツのCTAでの使い方

CTA…「Call to Action」の略。ウェブ上でユーザーを誘導したいページに飛ばす役割。成約につながるボタンやリンクとして設置されているものです。

これも記事のカテゴリーに合わせて変えられるからいいね。

読んでほしい重要な記事をバナーリンクしてもいいね。

プロフィール

記事の下の方に出てくる「この記事を書いた人」の部分にもブログパーツを使うことが出来ます。

プロフィールでのブログパーツ使用

プロフィールでのブログパーツ使用方法

STEP
メニューの「ユーザー」→「プロフィール」選択
プロフィールでのブログパーツ使用方法
STEP
ブログパーツのID入力

数字のみの入力でOKです。

プロフィールでのブログパーツ使用例

著者アーカイブページのプロフィールの下に表示されます。

3カラム、画像にリンクをキャプションブロックで囲って作成

プロフィールページの下にブログパーツ活用

記事の下に表示されるプロフィールには反映されないよ。

著者アーカイブページ下だけなんだね。

記事下プロフィールにはブログパーツは表示されません

まとめ:SWELLのブログパーツは色々な場所で使える

ブログパーツ設置場所ごとの使用例

メインビジュアルでのブログパーツの使い方
ブログパーツの活用法
ブログパーツの活用方法
メインビジュアルでカテゴリーをプルダウン表示

前回の記事では、記事内で使う方法を紹介しました。

今回は、ブログパーツを記事以外で使う方法を例をまじえて解説しましたが、いかがでしたでしょうか。

前回よりもレベルアップした使用方法ですが、例を見ながらだと「自分でも出来そう」という気になってきませんか?

ブログパーツを使える場所
  • 記事内
  • メインビジュアル
  • ウィジェット
  • タグ・カテゴリーページ
  • プロフィール

登録したブロックを使いまわすだけじゃなくて、レイアウトのカスタムにも役立つんだね。

色々サイトデザインしたくなってきた…♡

カタカナや専門用語が多いですが、くじけず使用例を見ながら是非やってみてください。

ソルト

(スポンサーリンク)

SWELLブログパーツの使い方

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

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

このブログはWordpressの

「SWELL」というテーマを使用しています。

  • オシャレ
  • 豊富な機能
  • 追加料金無し
  • CSSの知識いらず
  • 常にアップデート

この記事を書いた人

Twitter毎日更新してます。
インスタはほとんど見る専門です。

是非仲良くしてください♡

コメント

コメントする

目次