初心者でもSwellの公式サイトみたいなかっこいいサイトを作れるの?《ヘッダー編》

ヘッダー編アイキャッチ
ポンデ
WordPressの無料テーマから有料テーマへの変更を考えている皆さん、「Swell」というテーマをご存知ですか?

Twitterでオススメのテーマを探すとよく「Swell」が出てきますし、気になっている方も多いと思います。

そんな方や、「Swell」の購入を迷っている初心者ブロガーの皆さんに向けて、WordPressの知識がほぼゼロの私が、試しに「Swell」を使ったサイトを作ってみたいと思います。

見ていただけましたか?
公式サイトかっこいいですよね!動画動いていたり、上の部分がスクロールと共に追従してきたり!

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

今回はとりあえず、公式ページの最初の部分(下図の赤丸)を再現します。

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

Swellの初期外観ってどんな感じ?

初期設定の見た目はこんな感じです。ブログの名前以外いじっていません。

動画部分

まずは動画部分。

WordPress開いて「外観」「カスタマイズ」→「トップページ」→「メインビジュアル

次にメインビジュアルの中の「表示内容の動画に✓」→「動画の設定の動画を選択」→「ファイルを選択」で好きな動画を選び、「動画を選択」。

ここまですると、動画を流すサイトの出来上がりです!!

あとは、細かい設定を行います。

・「Scrollボタンを表示する」にチェックでボタン出現。
・メインビジュアルの高さ設定を「ウィンドウサイズにフィットさせる」で動画サイズを最適化。
・フィルター処理を「ドット」にし、不透明度を変えることで動画の質感変更。

中央の文字部分

次に中心の文字の部分。(下図の赤四角)

動画部分と同じく、メインビジュアルをいじります。

メインテキスト」に題名を書くと、大きな文字として出力されます。次に「サブテキスト」を書くと小さめの文字として出力されます。

これで、文字の部分は終わりです。

ボタン部分は「ボタンリンク先のURL」に飛びたいサイトのURLを書き(今回私は自分のブログのURL)、「ボタンテキスト」にサイト上に表示される文字を書きます。

さらに、「ボタンタイプ」をボーダーにすることで背景を透過したボタンの完成です。

上のヘッダー部分

最後に、ヘッダー部分を編集します。(下図の赤四角)

まずは、先ほどの「メインビジュアル」から戻り、「ヘッダー」を選択。その中の「ヘッダーの背景を透明にするかどうか」で「する(文字色:白)」を選ぶと、ヘッダー部分が透過できます。

次にすぐ下にある、「透過時ロゴの画像」を選び、自分のサイトのロゴをアップロードすると、透過部分の文字がロゴに変わります。(画像はPNG形式だと背景白でも透過するよ!)

さらに、上にスライドして、「ヘッダーロゴの設定」から画像をアップロードすると、ページをスクロールしてヘッダーが透過してないときに表示されるロゴ画像が設定できます

まとめ

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

こんな感じで、ほぼ公式サイトと同じようなサイトが初心者でも作れます!!CSSとかのプログラミングはいじる必要はなかったです。

このブログを見ながら作業すれば、一時間もかからず作れると思います。
ぜひ試してくださいね!(^^)!

ここまでの成果をTiktokの動画に上げますので、動画で確認したい方は下のボタンから見てみてください。

(スポンサーリンク)

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

コメント

コメントする

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