本サイトにはプロモーションが含まれています

[SWELL]フッター上に全幅CTAを作ってみた(“THE THOR”のようなCTA)

Wordpressテーマ "SWELL" カスタマイズ

『THE THORからSWELLへ乗り換えする全手順と経過』の一環です。“SWELL” にはトールに付いていたフッターCTA パーツが無いので、テーマ変更すると当然消えてしまいます。

今回は、テーマをSWELL に乗り換えても、なるべく同じようなテンプレートにしてみようという企画として「THE THOR のフッターCTAみたいなもの」を付けてみました。

目次

SWELL のフッターにCTA(コール トゥ アクション)をつける方法

この”THE THOR”時代のフッター上CTAを

[SWELL]フッター上に全幅CTAを作ってみた("THE THOR"のようなCTA)

“SWELL”にも付けています

[SWELL]フッター上に全幅CTAを作ってみた("THE THOR"のようなCTA)

やり方

方法はいくつかあります。が、設置する場所は「外観」→「ウィジェット」「フッター直前」バーツ。

[SWELL]フッター上に全幅CTAを作ってみた("THE THOR"のようなCTA)

1. ブロックウィジェットを使用

このブロックウィジェットというのは、いわゆる「カスタムHTMLブロック」なんですね。

つまり、ただHTMLを貼り付けるだけのウィジェットです。

当方は記事エディターで全幅ワイドのHTMLを作って、それをそのままこのウィジェットに貼り付けました。

こんな感じです。

<div class=”swell-block-fullWide pc-py-20 sp-py-20 has-bg-img alignfull lazyload” style=”background-color:rgba(60, 40, 132, 0.5)” data-bg=”https://画像URL”><div class=”swell-block-fullWide__inner”><!– wp:heading {“className”:”is-style-section_ttl”} –> <h2 class=”is-style-section_ttl”></h2> <!– /wp:heading –> <!– wp:loos/button {“isNewTab”:true,”isCount”:true,”iconName”:”icon-swell”,”className”:”is-style-btn_solid -size-l”} –> <div class=”swell-block-button -html is-style-btn_solid -size-l” data-id=”d49bb8a8″>ボタンの内容</div> <!– /wp:loos/button –></div></div>

よく考えないで作ってしまい、別にこれでも不正解ではないのですが、SWELL には「フルワイドコンテンツ」を作るためのショートコードというものがありました。

[full_wide_content]

ここにコンテンツを自由に配置

[/full_wide_content]

なので、これを使用すれば、ウィジェットをフルワイドにするための徒労は必要ないと思います。

しかし、記事をわざわざ使ってHTMLを作って試してみるなどという方法よりも、もっと簡単な方法がありました。

2. ブログパーツを使用

SWELLには「ブログパーツ」というツールが用意されているので、それで作成すればよかったのです。

[SWELL]フッター上に全幅CTAを作ってみた("THE THOR"のようなCTA)

「新規作成」をクリックすれば普通の記事エディターが立ち上がるので、そこで作成して、出来上がったショートコードを「フッター直前」バーツに入れ込めば完成です。

簡単ですね。

フッターと「直前ウィジェット」の余白を埋める

このままで終わらせると、フッターとフッター上の間になぜか余白が出来ます。

これを埋めるためにCSSなど書かなくても済むのがSWELL の素晴らしいところ。

「カスタマイズ」を立ち上げる

「外観」→「カスタマイズ」→「フッター」を開き、

[SWELL]フッター上に全幅CTAを作ってみた("THE THOR"のようなCTA)

「「フッター」と「フッター直前ウィジェット」の間の余白をなくす」にチェックします。

記事によって、入れたり入れなかったりしたい場合は、作りこんで再利用ブロックに登録するという手もありますね。何にせよ、美しく出来上がるのでありがたいです。

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

profile

主にWordpress中心のサイト・ブログ制作&コーダー、カスタマイザー。

2000年からHP制作を始めました。

ハウツーサイトやキュレーションサイトのライター、ブログ作成・運営のお手伝いなどをしております。

お仕事で関わった無料ブログ&Wordpressカスタマイズ案件実績500件以上。

携わったワードプレステーマ30以上。

アナリティクスを観察するのは生活の一部。

Google Analytics個人認定資格取得(GA4)。 SEOマーケティングアドバイザー資格取得。

SEOに特化したページ作りをめざしています。

 

カスタマイズのご依頼は「一木堂」へ

follow us in feedly 映画@見取り八段 | 映画感想ブログ coconara ss

サポートよろしくお願いします

いつもありがとうございます。

この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。

Amazonギフト券- Eメールタイプ - Amazonベーシック
金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。
※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

a
よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』

コメント

コメントする

目次