SWELLのヘッダーのカスタマイズの方法とサイズも解説!

当ページのリンクには広告が含まれています。
SWELLへっだーアイキャッチ

SWELLのヘッダーのカスタマイズがわからないよ〜

それに、カスタマイズ方法とヘッダーサイズわからないよ〜

このような悩みを抱えているブログ初心者の方は多いと思います

なので、今回はヘッダーのカスタマイズ方法とヘッダーサイズを解説していきます

今回の記事で分かること

・ヘッダーの設定方法が分かる
・カスタマイズ方法が分かる
・ヘッダーサイズが分かる

ジャンプできるもくじ

ヘッダーのカスタマイズ

ヘッダーは、ブログの(頭)を意味するので、最初に作ってた方がいいですね!

ヘッダーのカスタマイズ1

では、早速作っていきます!

カスタマイズ画面を開く

最初にカスタマイズ画面を開きます

「設定画面」⇨「外観」⇨「カスタマイズ」⇨「ヘッダー」の手順でカスタマイズ画面が開きます

ヘッダーの使い方1

カラー設定

こちらは簡単です。ヘッダーの「背景色」と「文字色」は好きな色で選んでください

ヘッダーの使い方2

ヘッダーロゴの設定

ヘッダーロゴの設定の前にサイズをお伝えします

推奨サイズは、横幅1,600px×高さ360pxとなってます

ですが、個人的にはもう少し横幅も高さも大きなサイズにしていいと思います

ヘッダーの使い方3

僕の画像サイズはこんな感じですので、よかったら参考にしてください

レイアウト・デザイン設定

レイアウト・デザイン設定で大きくデザインが変わるのでここは要注意です

ヘッダーの使い方4

今回はヘッダーのレイアウト(PC)と(SP)が重要なので解説します

ヘッダーのレイアウト(PC):パソコンからの表示される見た目のこと
ヘッダーのレイアウト(SP):スマホやタブレットで表示される見た目のこと

ヘッダーの境界線はお好みの種類を選べます

ヘッダーのトップ画面

パソコン表示(カスタマイズ画面)の例

こんな風に「ヘッダーのロゴを中央」「ヘッダーナビを下」に配置することも可能です

ヘッダーのカスタマイズ6

外観もかなり変わるので、最近こっちの方が「おしゃれ」だなぁって思ってます

スマホ表示(カスタマイズ画面の切り抜き)の例

最近はスマホでも見る時代が主流ですね!なので、スマホから見た画面も大事だと思いますので参考にしてください

ヘッダーのカスタマイズ2

ヘッダーサイズはいくらなの?

このヘッダーサイズも推奨サイズ:横幅1920px × 高さ350pxと言われてます

でも、僕は横幅2,000px×高さ500pxにしてます

ヘッダーの使い方18
サイズは?

ヘッダーサイズは横幅1,920〜2,000px×任意pxでいいと思います

ヘッダーのトップ画面の解説

では、実際にヘッダーサイズもわかったところでヘッダーのトップ画面を作成していきましょう!

「カスタマイズ」⇨「トップページ」⇨「メインビジュアル」を開きます

ヘッダーの使い方15

「メインビジュアルの表示内容」は「画像」を選択してください

ヘッダーの使い方17

次に「各スライドの設定」⇨「スライド画像[1](PC)」に画像を貼り付けたら完了です

ヘッダーの使い方16

間違ってたらすみません「スライド画像[1](SP)」に画像を貼けたら、スマホ版の画像も表示されると思います

SP版はサイズは横幅250px×高さ100pxと書いてました

でも、タブレットの大きさも考えると(PC)版だけでいいのかなと思います

まとめ

最後まで読んでいただきありがとうございました

今回は「SWELLのヘッダーのカスタマイズ方法とヘッダーサイズ」について解説していきました

  • ヘッダーの設定
  • ヘッダーのサイズ
  • カスタマイズ方法

以上の3点を覚えておくと便利です

それでは、何かまた紹介しますね!

SWELLへっだーアイキャッチ

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

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

コメント

コメントする

CAPTCHA


ジャンプできるもくじ