【SWELLカスタマイズ】SWELLで温泉ブログを作ったよ！～トップページの作りかた（ヘッダー・トップページ調整）

40 x 40ピクセル以上の縦横比1:1の画像を用意して、メディアにアップロードしておきます。アップロード後のURLを予めコピーしておきましょう。

カスタマイズ用のCSSを、下記の通りに追記します。

.c-headLogo {
  padding:16px 16px 16px 48px;
  background:url(ここに縦横比1:1の画像URLを貼り付けます) no-repeat left center/auto 40px;
}

CSSを追記する場所は、テーマカスタマイザーの「追加CSS」または、子テーマ（SWELL CHILD）のテーマエディターの「スタイルシート (style.css)」内でも良いかと思います。

「テーマカスタマイザー」＞「ヘッダー」＞「■ ヘッダーロゴの設定」について、それぞれ「画像サイズ (PC)」のサイズを40に、「画像サイズ (PC追従ヘッダー)」のサイズを40に設定変更しておきます。

ここを40以上に設定しておかないと、画像の上下が切れてしまいます。必ず、カスタマイズ用CSSで/auto 40px;と設定したものと同じサイズ以上の数字を入力しておきましょう。

「外観」＞「メニュー」を開き、「表示オプション」を表示しましょう。

「リンクターゲット」のチェックを入れておきます。

ここではTwitterとInstagramのアイコンを追加しています。

グローバルナビに設定されているメニューから「カスタムリンク」をクリックし、URLを設定し、リンク文字列に下記のようなコードを追加しましょう。

<i class="icon-twitter icon-menu"></i>

<i class="icon-instagram icon-menu"></i>

「スマホ開閉メニュー内」のメニューを別で設定しないと、グローバルナビで設定したメニューがそのままスマホ開閉メニューにも現れてしまうので、必ず別メニューで「スマホ開閉メニュー内」のメニューを設定しておきましょう。

「カスタムリンク」の設定後、外部リンクに飛ばすものは忘れずに「リンクを新しいタブで開く」にチェックを入れておきましょう。

ここで忘れがちなのですが、必ず「メニューを保存」ボタンをクリックして保存しておきましょう。

SWELLで使えるアイコンの一覧は、SWELL公式の設定マニュアルを参考にしてください。

SWELL

SWELLで使えるアイコンの一覧 | WordPressテーマ SWELL ここでは、SWELLでフォントファイルとして読み込んでいるアイコンを一覧で紹介しています。 SWELLで標準で使用できるアイコンフォントは、IcoMoonで作成しています。 Font …

icon-menu以前のicon-twitterやicon-instagramのクラス名の部分を、上記のアイコン一覧の中から任意のクラス名に置き換えることにより、お好きなアイコンに設定することができます。

カスタマイズ用のCSSを、下記の通りに追記します。

.icon-menu {
  font-size:20px;
}

「テーマカスタマイザー」＞「ヘッダー」＞「■ 検索ボタン設定」＞「検索ボタンの表示位置（PC）」について「ヘッダーメニューに表示」を選択します。

若干のデザイン微調整のため、カスタマイズ用のCSSを下記の通りに追記します。

※検索アイコンだけ少し間隔が詰まっているのと、右肩上がりになってしまっている問題を解消します。

.c-gnav__sBtn {
  margin:1px 1px 0 0;
}