サイトタイトルの設定とタイトル素材の配置

今回は、サイトタイトル（ブログタイトル）の設定を行い、タイトル素材を配置します。ブログタイトルは、ページのタイトルタグにも使用されますので、きちんと設定をしておきましょう。
このコーナーで作成したAirlogはこちらで公開中です。

1.4 ブログタイトルのレイアウトとタイトル素材の配置

前回までで、ページの基本設定とページの背景画像の設定ができました。次に、ページ上に素材を配置してレイアウトをしていきます。

最初はサイト全体のタイトルイメージの配置です。
ただ、実際に素材を配置するなど、レイアウト作業を始める前に、表示メニューから「レイアウトを表示」を選び、各素材の輪郭線を表示させておきます。
この設定を行っておくだけで、レイアウト作業がグンと楽になります。

さて、まずはブログのタイトル（My Blogと書かれたテキストボックス）に、サイトのタイトル（トップページのタイトル）の設定を行います。ブログのタイトルを選択してください。

位置と回転インスペクタを使って、テキストボックスの大きさを幅250ピクセル、高さ250ピクセルに変更します。

すると突然、ページ全体が縦に伸びてしまったと思います。
これはブログタイトルがヘッダ部分にあるので、ブログタイトルの大きさを変えた事で、自動的にヘッダの高さが広がってしまったからです。

しかし、このままではレイアウトする際に困ってしまいますので、ブログタイトルをコンテンツエリアに移動します。
普通にドラッグして移動しようとしても、ヘッダの領域も一緒に拡大されてしまい、うまく移動できないと思います。

そこで、コマンドキーを押しながら、ブログタイトルのテキストボックスを、ページの下の方にドラッグします。これで、ブログタイトルをコンテンツエリアに移動できます。

では次にブログタイトルの位置を決めましょう。同じく位置と回転インスペクタで位置を設定します。X、Yともに0ピクセルを設定すれば、ページの左上に移動できます。

次はブログタイトルを#333333(濃いグレー)で塗りつぶします。グラフィックインスペクタの塗りつぶし設定で「カラー塗りつぶし」を選び、濃いグレーで塗りつぶします。

「My Blog」の文字も先ほどと同じ濃いグレーに設定したうえで、文字サイズは適度に小さくしておき「MacBook Airの事をいろいろ。- Airlog」と入力します。
つまり、見えなくしておくという事です。

なぜこんな事までして、ブログタイトルのテキストボックスに文字を入力するのかと言いますと、実はここに書かれる文字が、このページをHTMLファイルに出力した時のタイトルタグに書かれる文字になるので、検索エンジン対策として、絶対に必要なのです。
ページの内容を表した文章を書いておきましょう。

次に事前に用意しておいたタイトル用の画像を、ブログタイトルのテキストボックスの真上に配置します。
タイトル画像は、背景色#333333をマット色にした透過GIFで作っておきます。

背景色を塗りつぶした画像にすると、Windowsなどのブワウザで見た時に、画像の背景色とテキストボックスの背景色が、若干ずれてしまいます。テキストボックスの背景色の方がやや薄いグレーになってしまう現象が起こるのです。

その為に、透過GIFや透過PNGなどで素材を作っておきます。

ここまで設定すると下の図のようになります。

「役にたった」と思ったらシェアお願いします