SWELLのメインビジュアルにボタンを追加する方法!

SWELLのメインビジュアルにボタンを追加

こんにちは。Hidekiです!

今回はSWELLを利用している人限定記事となります。

パラス

メインビジュアルにボタンついてサイト見かけるんですけど、これどうやって作ればいいんですか~~

ディド

ふむふむ!
これは意外と知らない人多いよね。SWELL使ってる人は簡単に設定できるのでやってみよう。

SWELLを利用してる人はメインビジュアルを設置している人も多いと思います。

今回はこのメインビジュアルにボタンを設定して読者を他のURLへ繋げるための方法を紹介します(^^♪

まだメインビジュアル画像を設定していない人は先にコチラから設定してください↓

あわせて読みたい
【Cocoon/SWELL/THE・THOR】ヘッダー画像の設定方法を紹介! Cocoon、SWELL、THE・THORの3テーマにおけるヘッダー画像の設定方法を紹介!
目次

【SWELL】メインビジュアルのボタン設定

  1. カスタマイズを選択
  2. トップページ⇒メインビジュアル
  3. リンク先URLを設定
  4. ボタンテキスト/ブログパーツ設定

メインビジュアルページ

SWELLのメインビジュアルにボタンを追加

先にURLを設定しておくと便利です!

ボタンテキストは文字を入れるだけで簡易的なボタンが生成されます。

ブログパーツはSWELLの機能で呼び出す機能を作る事が出来る為、そちらでボタンを生成して呼び出します!

ブログパーツでボタンを作る

SWELLのメインビジュアルにボタンを追加

SWELLを使用してる方はワードプレスのTOP画面にブログパーツが表示されていると思います!

コチラをクリックして新規作成を選択してください!

SWELLのメインビジュアルにボタンを追加

タイトルはお好きに設定してください。

もし、複数のボタンを使う時は利用目的ごとのタイトルを付けておくと便利です。

次にブロック挿入ツールからSWELLボタンを選択します。

SWELLのメインビジュアルにボタンを追加

表示されたボタンを選択すると右側に種類を選択できます!

立体を選択する場合はグラデーションカラーは使用できません。

細かい色設定は『SWELL設定』から対応してください。
※今回はメインビジュアルのボタン追加説明なので色設定は割愛します。

SWELLのメインビジュアルにボタンを追加
SWELLのメインビジュアルにボタンを追加

ボタンのサイズとアイコン設定を実施してください。

アイコンを設定するとボタンの文字の横にアイコンが表示されます!

アイコンも左右で配置が選択できます。

ボタンの下に『リンク』があり、コチラにURLを設定すると、このボタンへURLを付与する事が出来ます。

この設定をしていれば、メインビジュアルページのURLは不要となります。

完成したら公開ボタンを押しましょう!

SWELLのメインビジュアルにボタンを追加

完成後、ブログパーツの呼び出しコードから番号をコピーしてください!

メインビジュアルページのブログパーツIDにこの番号を入れると作ったボタンを呼び出してメインビジュアル画像の上に配置する事ができます!

これでメインビジュアルにボタンを設定する方法は終了となります。

もし宜しければ感想など頂けるとモチベーションが上がるのでよろしくお願いします(^^♪

SWELLのメインビジュアルにボタンを追加

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

よかったらシェアしてね!

コメント

コメントする

目次