ヘッダー部分の改修 ― ホームページ作成記のようなもの《5》

さすがに簡素すぎるかなということで、手を加えました。
ちなみに改修前はロゴ（文字だけ）があるだけでメニューなし。

変更前のヘッダー

photoscapeでちょっと文字装飾しただけの画像（笑）
メニューもありません。
これではあんまりですね。

ロゴを作ってみる

と言っても絵心がないので、適当に記号を組み合わせて作成。

どこかで見たような初代携帯ゲーム機の画像っぽいです。
まんまを避けるためにボタンは３つにしました（笑）
左の画像はwindows10付属のペイントで記号を組み合わせただけ。
それにphotoscapeで文字をいれました。
こんなものでも、前の文字だけよりはマシでしょう。
キャンバスが大きくならないようにきちんとペイントソフトでトリミングもしておきます。

そして、画像に組み合わせた場合に白部分がそのままだと違和感があるので、白部分に透過処理。
透過処理に関しては、インストール作業などもいらずに簡単作業の「画像透過ツールサイト様」にて。

ついでに、重ねる背景の色次第では必要になる白黒反転パターンも２種類作成。

結果的に作成したロゴデザインとしては４種の色違いとなります。

①黒ロゴ白背景
②黒ロゴ透過背景
③白ロゴ黒背景
④白ロゴ透過背景

今回使用するのは透過処理をした②と④
①と③は後々に編集したくなった時に備えたバックアップです。

メニュー部分の設定　【外観 ⇒ メニュー】

まずはメニュー（グローバルナビ）を作ります。
新しいメニュー（メニュー名は適当）を作成して、構成要素を左からもってきます。

icon class =”XXX” のところはナビゲーションラベルの設定になります。
swellでは公式からアイコン一覧が提供されているので、使えそうなアイコンを設定してみます。

下がっていくと、どこに設定するメニューなのかチェックマークをいれるところがあります。
今回は「グローバルナビ」にチェックマークをいれて保存。

また、Font Awesomeとの連携もswellでは簡易に行えます。
Font Awesomeに関してはサイト登録などせずともswellでは使用できますが、一部機能制限（使えないアイコンや挙動）があるのようです。
swellで使用する際にはひと手間かかるので、次の記事で解説します。

Font Awesomeアイコン使用例

ヘッダー部分の設定　【外観 ⇒ カスタマイズ ⇒ ヘッダー 】

① ヘッダーロゴの設定
上で作成したロゴ画像を設定します。

②レイアウト・デザイン
今回はロゴを左、ナビを右に

③トップページの特別設定
今回は、トップページの画像にかぶせる予定なので、ここだけ色反転（透過処理）の別画像を使います。

「ヘッダーの背景を透明にするかどうか」にチェックをいれると、トップページの画像に重なってロゴやメニューが表示されます。
画像がある場合は、基本的に文字色は白になると思います。
ここだけ見ると間抜けな配色ですが、背景画像がつく予定なので。

④ヘッダーの追従設定
今まではホームに戻るだけであまり意味がなかったので追従させていませんでしたが、各ページに飛べるようになったので追従に。
一応モバイルでもアクセスして問題ないか確認。

今回はこのあたりだけ設定をして保存。

どうなったか

[変更前](トップページ／投稿ページどちらも同じ）

[変更後]
トップページ

投稿ページ

簡素なのは変わらないですが、（あくまで前よりは）マシになったんじゃないでしょうか。

内容はスカスカなのでこれからですけどね。