（この連休は まとまった作業の時間が取れず…）
今回は軽めの作業として以下を実施。
Z家の「表側」ブログ「ツタエル富山～Z家の日常～」へのリンクバナーをトップページに設置
ざっくり以下の流れです。
- Canvaでバナー作成
- ブログパーツを作成
- ウィジェット「トップページ専用サイドバー」にブログパーツの「呼び出しコード」を貼付
順番にキャプチャ画像を用いて、ご紹介します。
Canvaでバナー作成
今回は 横長(600px×240px)サイズで作成。
簡易的ですが、以下の感じにしてみました。
できた画像はpng (またはjpeg)でダウンロードします。
ブログパーツを作成
まず、ブログパーツを使うメリットを簡単にご紹介します。
ブログパーツのメリット
初めての方はこの段階では「よくわからなくても大丈夫」ですが、ざっと列記します。
（とりあえず❶のイメージだけでも持っておくと理解が進むかと）
- コードやパーツを一元管理できる
- バナーや広告コードなどをブログパーツとして登録しておくと、同じパーツを複数箇所で使える
- 修正はブログパーツ側だけでOK → サイト全体に即反映
- 設置場所を柔軟に指定可能
- サイドバー、記事下、トップページ専用など、ウィジェットやショートコードを使って簡単に配置できる
- HTMLやCSSの知識がなくても管理画面から操作可能
- ウィジェット＋ショートコード両対応
- ウィジェットならドラッグ＆ドロップで設置、ショートコードなら記事中にも挿入可能
- 一つのパーツをPC・スマホ両方に最適化して再利用できる
- デザイン崩れが少ない
- SWELL標準のスタイルが適用されるため、テーマ全体の雰囲気に自然に馴染む
- レスポンシブ対応でスマホ表示もきれい
- テストや差し替えが容易
- バナー画像やリンク先を差し替えてABテスト的に使える
- 季節キャンペーンや期間限定リンクの更新が簡単
では、今回の作業に戻ります。
まずは「ブログパーツ → 投稿を追加」の順にクリック。
必要な素材やテキストを入力し保存するとブログパーツは完成。
保存すると「呼び出しコード」
が生成される
「呼び出しコード」をコピーし、いろいろな場所に貼り付けて、保存した内容を呼び出す感じです。
今回の場合だと、この後ご紹介する「ウィジェット」に貼り付けます。
ウィジェットにブログパーツの「呼び出しコード」を貼付
「外観 → ウィジェット」の順にクリック。
その中の「カスタムHTML」をドラッグ&ドロップで「トップページ専用サイドバー」に持っていきます。
ここで、先ほどコピーした「呼び出しコード」を貼付し保存。
これで「トップページ専用サイドバー」にブログパーツの内容が表示されます。
結果、こんな感じ
ブログパーツに戻って作業します。
作業としては普通にテキストを入力して、センター寄せにしているだけです
＼旬のオトク情報満載／
ちなみに、先ほどコピーした「呼び出しコード」は記事本文にも貼り付けて利用できます。
実際に今回生成した呼び出しコード
[blog_parts id="117"]を以下に貼り付けてみますね。
バナーが表示されていると思います。
＼旬のオトク情報満載／
これで、私のサイトで「同一のブログパーツ」を2か所に貼ったことになります。
つまり、ブログパーツの内容を修正すると 私のサイトの場合、以下の両方に変更内容が反映されます。
- トップページのバナー
- 本文のバナー
ブログパーツとウィジェット（「外観→ウィジェット」)を覚えるだけでも、基本的なカスタマイズは可能になるので、便利だと思います
といったところで、今回はこのあたりで。
コメント