初心者でもSWELLの公式サイトみたいなかっこいいサイトを作れるの?《タブ編》

ポンデ
今回は、閲覧者がサイト表示を変更できる機能のタブ機能を実装するよ!

見ていただけましたか?
公式サイトかっこいいですよね!動画動いていたり、背景画像がスクロールしても固定していたり!

特に、
ブログやサイトを紹介している部分は、閲覧者が選択できる操作感と、統一感があり、カッコいいと思いませんか?

この公式サイトはSwellを使って作っていると、運営者さんも言っているのでトライしてみましょう。(下図:公式サイトより)

今回は、公式ページのタブ部分を再現します。

\\目次から飛べるよ//

タブの作成方法

早速、タブ機能を実装していきます。(超簡単です)

まずは、自分の作りたいページ(私の場合、固定ページ)を開きます。

ブロックにカーソルを持っていき、「1. +ボタン」→「2. フルワイド」を選びます。

フルワイド部分にカーソルを持っていき、その中の「3. +ボタン」→「4. タブ」をクリック。

以上でタブ設定は完成!!!

後は、自分好みに設定を変えるだけです。今回はSWELL公式に近づけます。

ビジュアル設定

先ほどの画面のまま、タブ部分を選択し、「1. 点点々マーク」→「2. 追加設定を表示」→「3. スタイル/下線」&「4. タブサイズ設定/端まで並べる」を選択します。

これで、ビジュアルをSWELLの公式と同じビジュアルにすることができます。

まとめ

あとは画像を貼り付け、画像スタイルを変更したら完成します。

完成したのがこれです!!!!

今回も初心者の私でも簡単に作成できました。
ぜひ試してくださいね!(^^)!

サイト掲載を許可してくださった方、ありがとうございます。すべて、デザインが素晴らしく勉強になりました。

また、「サイト載せてもいいよっ」ていうブロガーさんはTwitterかお問い合わせフォームより、連絡お願いします。

(スポンサーリンク)

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

コメント

コメントする

\\目次から飛べるよ//
閉じる