SWELLで簡単カスタマイズ！カラムブロックを使ったピックアップバナー（風）の作り方を解説
こんにちは "osaboo"
です。"@osaboo_Bot"
SWELLに標準装備されている「ピックアップバナー」と同様のバナーリンクの作成方法をご紹介します。
SWELL標準拡張機能のピックアップバナーは、以下の記事でご紹介しています。参考にしてください。
SWELLに標準装備されている拡張機能に「ピックアップバナー」は、簡単に設置できますが、ヘッダー部にしか表示できません。
ピックアップバナーをコンテンツ中央やフッターなど、自由に設置したい方必見！配置場所を選ばずにカスタマイズする方法をご紹介します。
- ピックアップバナーを色々な場所に貼りたい
- ピックアップバナーを何種類か作りたい
- オリジナルのピックアップバナーの作り方と貼り方は？
- SWELLのピックアップバナーとピックアップバナー（風）とは？
- ピックアップバナー（風）：バナーリンクの作り方
- ブログパーツの挿入は超簡単！
- まとめ！
それではご覧ください。
SWELLのピックアップバナーとピックアップバナー（風）とは？
SWELLのピックアップバナーは、最大4つのバナーリンクが作成でき、『WordPressの管理＞ダッシュボード＞外観＞メニュー』で、ピックアップバナー用のメニューの作成と表示位置を設定することで、以下のサンプルのようなバナーリンクができます。
注意 表示できる箇所がヘッダー部に限定されます。（記事の中央やフッターには表示できません）
この記事では、以下のような「ピックアップバナー（風）」のバナーリンクの作り方をご紹介していきます。（好きなところに自由に表示できます）
ピックアップバナー（風）：バナーリンクの作り方
- ブログパーツを準備（タイトルや用途など）
- リッチカラムでカラム作成（全幅を100%として分割数で割る）
- 各カラムにバナーリンクを挿入（画像・リンク・タイトル・サブテキストを設定）
- ブログパーツを公開
- ブログパーツに『呼び出しコード』をコピー（ページ貼り付け用）
ブロック挿入ツール（右上）から『リッチカラム』ブロックを挿入します。
リッチカラムブロックを挿入→25%x4つを作成（4カラム均等）→バナーリンクを各カラムに挿入（画像とリンク設定）
リッチカラムブロックの挿入方法など詳しくは以下の記事でご覧いただけます。
サンプルでは、各カラムに挿入した 4つのバナーリンクにそれぞれ「画像・リンク・タイトル・サブテキスト」を設定します。
ブログパーツが完成したら、公開をクリックします。
公開したブログパーツの『呼び出しコード』をコピーします。（あとで、ページに貼り付けます）
基本的な作業は以上です。
背景の色や表示をスタイルを一工夫したい場合は、フルワイドブロックを使用して背景やテキストを追加すると綺麗に仕上がります。以下の記事を参考にしてみてくださいね。
ブログパーツの挿入は超簡単！
前章で、作成したブログパーツ（ピックアップバナー（風）：バナーリンク）の挿入（貼り付け）は 超簡単です。
- 貼り付けたいページを開く（エディター画面）
- ピックアップバナー（風）：バナーリンク（ブログパーツ）の『呼び出しコード』をコピー
- 設置したい場所にブログパーツを挿入する
- 『呼び出しコード』をそのままペーストする（ショートコード）
- ブログパーツを選択して『呼び出しコード』をペーストする（おすすめ）
- 表示を確認して完了
- ブログパーツとショートコードでの挿入で見栄えは変わりません。
「固定ページ・投稿ページ・アーカイブページ」など、貼り付けたいページを開きます。
（エディター画面）
ブログパーツの画面
前章で、作成した ピックアップバナー（風）：バナーリンク（ブログパーツ）の『呼び出しコード』をコピーします。
『呼び出しコード』をそのままペーストする（ショートコード）
ブログパーツを挿入するエディター画面に『呼び出しコード』をペーストして、以下ように表示されば完了です。
ブログパーツを選択して『呼び出しコード』をペーストする（おすすめ）
ブログパーツを挿入するエディタ画面で、ブロック挿入ツールから『ブログパーツ』ブロックを選択します。
エディター画面に挿入された『ブログパーツ』ブロックから、任意の機能を使って呼び出して完了です。
SWELLブログパーツの使い方は、以下の記事で詳しくご紹介しています。合わせてご覧ください。
以下は、実際にサンプルを挿入しています。
これはサンプルです。
まとめ！SWELLで簡単カスタマイズ！カラムブロックを使ったピックアップバナー（風）の作り方を解説
カラムブロックを使ったピックアップバナー（風）の作り方をご紹介しました。
今回紹介した「ピックアップバナー（風）ピックアップバナー」はブログパーツに保存されるため、自由にお好きな場所に貼り付けることができます。バナーリンクの内容を工夫すれば、サイトのバリエーションが広がり、アクセス数も増えるかもしれませんね。^^ 是非、トライしてみてください。この記事がお役に立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／