【SANGOカスタマイズガイド】タイトルと高さの調整～サイトの顔であるタイトルを見やすい大きさで設定する～

サイトの顔となタイトルを設定する。タイトルは文字でもいいが少しでも見栄えをよくするために画像を設定する。しかしあまり凝りすぎるとキリが無いのでほどほどにした方がよい。

タイトル設定と高さの調整

まずはサイトの顔となるタイトルを設定する。トップページは記事メインでタイトルはやや小さめの設定。設定を変更すれば巨大なタイトルも貼り付けられるが今回はこの本サイトと同じパターンで構築する。

1. タイトル背景色の確認

タイトル画像作成に必要なタイトル部分の背景色を確認する。透過イメージを使うとタイトルの渕がにじみ背景色と違和感がでるため事前に背景色として設定しておく。タイトル部分のカラーはテーマのカスタマイザーから確認できる。

「外観＞カスタマイズ」をクリックしカスタマイザーを起動。

メニューの「色」をクリック。

項目の「ヘッダー背景色」が対象。「色を選択」ボタンをクリックすると詳細が表示される。真ん中にある「#58a9ef」は16進数で表現した色の数値。この数値をツールなどに設定すると同じ色を指定することができる。

2. タイトル画像の準備

設定するサイトのタイトルを画像ファイルで準備する。体裁にこだわらないならその限りではない。画像は保存時に劣化が発生しない「可逆圧縮形式」のPNG等で保存する。

タイトルやロゴの作成についてはこちら。

デザインのド素人がタイトルロゴとサイトアイコンを作成する

無料ツールCanvaでサイトタイトルを30分で作成する～自分でタイトルを作るなら時間をかけずにサクッと仕上げるのが無難～

はじめはあまりこだわり過ぎずデザインを決定した方がよい。気になったら後から差し替えればいい。

3. タイトルの設定

テーマSANGOでサイトのタイトルを設定する。

「外観＞カスタマイズ」をクリック。

テーマのカスタマイズ画面が表示される。「サイトの基本設定」をクリック。

続けて「基本情報とロゴの設定」をクリック。

「ロゴ画像を登録」から事前に作成したイメージを設定する。設定するとトップページの丈夫に指定した画像が設定される。「ロゴ画像だけを表示（文字を非表示に）」にチェックを入れておけばタイトル画像だけを表示してくれる。

4. タイトルの高さ調整

デフォルトだと縦幅が小さいのでスタイルシートを使って微調整する。「外観＞テーマエディター」をクリック。

スタイルシートに高さ調整用のコードを追記する。追記したら「ファイル更新」ボタンをクリック。変更後の確認は「Shift＋F5」で画面をリロードする必要あり。

90の部分を大きくすればタイトル部分の高さが広くなり画像が大きく表示されるようになる。すこしづつ値を変えて微調整すればよい。

#logo, #logo img, .desktop-nav li a,#drawer__open {
    height: 90px;
    line-height: 90px;
}

5. 完成

サイトのタイトル設定が完了。色々試した結果大きさは「高さ90px」で落ち着いた。キャッチフレーズが読めるギリギリの小ささに調整。そもそも背景色がイマイチ気に入らないのでおいおい変更したいと思う。

まとめ

とりあえず、タイトルのデザインに悩まなければ1時間くらいで終わるだろうか。タイトルデザインと同じくらい背景色選びも難航する項目のひとつ。どちらも後から変更できるのではじめてサイトを構築する場合はあまり時間をかけないようにした方がいいだろう。

タイトル画像はあまり時間をかけすぎないのがポイントです。