田川高校36回.COMのヘッダーリニューアル

今日3月10日は、朝から強たい風が吹き、
雪もチラチラ、冬に逆戻りしたようなお天気でしたね。
みなさん、いかがお過ごしでしょうか。

さて、お気づきの方も多いと思いますが、
本サイトのヘッダーをリニューアルしました。

 ヘッダーに「蒼鷹夢翔」を入れる

36回生のスローガンが決定し、
せっかくならスローガンを入れたヘッダーに変えようという役員間での話になり、

【蒼鷹夢翔】の文字をどうしようかと思っていたところ、
村上副実行委員長のお知り合いで、書道をされている方がいるとのことで、
書いていただいたのが、こちらです。

神奈川県にお住いの五林さんの書です。
伸びやかで力強く、かつ繊細、
素晴らしい【蒼鷹夢翔】を書いていただきました。

五林さん、このたびは素敵な書を書いていただき、まことにありがとうございます。
副実行委員長からのご紹介でいただいたご縁に心から感謝をいたします。

早速、いただいた書の画像を、ヘッダー画像に取り込むためのファイルを作成。

最初は、横長のヘッダーに合わせて、
横書きに直そうとしたんですが、
文字をバラして横に並べるとちぐはぐでバランスが取れず、書の勢いを殺してしまうので断念。
縦書きをそのまま生かすことにしました。

ヘッダー画像に使うのは、
青い空が背景の田川高校の写真。

この写真をトリミングして、
スローガンとサイト名の「田川高校36回.COM」を入れてヘッダー画像を作りました。

パソコン用ヘッダー画像

スマートフォン用ヘッダー画像

縦書きの場合、右側から左に向かって書くのが基本ですが、
ネット上では横書きがデフォルトなので、
サイト閲覧者の視線は、左上部から右へと向かいます。

視線の流れを妨げないように、
タイトルの「田川高校36回.COM」のあとに
「蒼鷹」「夢翔」とスムーズに読んでもらえるようにレイアウトしました。

いかがでしょうか。
五林さんの書による素晴らしいスローガンが入った本サイトを、
みなさんに親しんでもらえますよう願っています。

ヘッダー画像のカスタマイズ

※以後は、今後またサイトをいじる時のための備忘録が主です。
めんどくさいことを書きますので^^;
興味の無い方はスルーしてくださいm(_ _)m

本サイトは、CMS（コンテンツ・マネージメント・システム）の1つである、WordPressというオープンソースのブログソフトを使っています。
WordPressは、テーマと呼ばれる様々なテンプレートから、デザインや機能を選ぶことができます。

本サイトは、STINGERという無料で配布されているテンプレートを使っていて、
（ちなみに、34回生先輩のサイトや35回生先輩のサイトも同じSTINGER。）

デフォルトのままだと、

◆（サイト）タイトル＋ヘッダー画像のレイアウトで（ヘッダーの分量が多くなる）

◆TOPページへのリンクはタイトルだけで、
ヘッダー画像にはリンクが無い（画像をクリックしてもTOPに遷移しない）ことや、

◆レスポンシブデザインではないため、
スマートフォンではヘッダー画像が表示されない（タイトルだけの表示）

といったこともあって、せっかくヘッダーのリニューアルするんだから、ついでにカスタマイズをすることにしました。

今回のカスタマイズで、やったことは2点。

1.（サイト）タイトルとヘッダー画像を1つにまとめて、TOPページへのリンクを生かす。

パソコンで見た旧ヘッダーの画像ですが、
赤い文字のタイトル部分と、青い文字のヘッダー画像を1つにまとめて、かつTOPページへのリンクも生かします。

・・・・・・・・・

（1）まず、ヘッダー画像を非表示にする。
ダッシュボードの外観からカスタマイズを選択、ヘッダー画像を開いて現在のヘッダーを非表示にする。

（2）実質的には、リンク付きのタイトル部分を、スローガンの入った画像に変えることになる。
Stingerの横幅986pixelと縦幅250pixel（バランスを見て設定）で作成した新ヘッダー画像を、メディアに新規追加する。

（3）メディアライブラリに追加された新ヘッダー画像のファイルURLをコピーし、

（4）外観からエディターを選択、右側に表示されたテンプレートからヘッダー（header.php）を開き、下記の表記部分を探し、

<div id=”h-l”><p class=”sitename”><a href=”<?php echo home_url(); ?>/”><?php bloginfo(‘name’); ?></a></p>
<?php if (is_home()) { ?>
<h1 class=”descr”>
<?php bloginfo(‘description’); ?>
</h1>
<?php } else { ?>
<p class=”descr”>
<?php bloginfo(‘description’); ?>
</p>
<?php } ?>
</div><!– /#h-l –>

これを、先程コピーした新ヘッダー画像のファイルURL（太字部分）を貼って以下に書き変える。

<div id=”h-l”>
<p class=”sitename”>
<a href=”<?php echo get_option(‘home’); ?>/”>
<img src=”http://tagawa36.com/wp-content/uploads/2015/03/田川高校岳陽同窓会36回生公式サイト3.png” alt=”田川高校岳陽同窓会36回生”/>
</a></p>
</div><!– /#h-l –>

これでPCでは、TOPページへのリンク付きの、新スローガン入り画像だけが表示されるようになりました。

2.スマホでもリンク付き新ヘッダー画像を表示させる。

スマホで見た旧ヘッダーですが、
パソコンでは見える（田川高校の）ヘッダー画像は表示されず、
赤い文字部分の（ロゴ画像の）タイトルだけで、しかも半分が切れている状態でした。
これを切れないようにして、TOPページへのリンクが生きた画像のヘッダーに変えます。

・・・・・・・・・

（1）タイトル部分が切れないように全表示させる。
ダッシュボードの外観からエディターを選択、右側に表示されたテンプレートからsmart.cssを開き、
以下の記述を追記する。

.sitename img {
height: auto;
max-width: 100% !important;
width: 100%;
}

（2）スマホ用に、横幅280pixelと縦幅143pixel（バランスを見て設定）で作成した新ヘッダー画像を、メディアに新規追加する。
※パソコン用の画像をそのままスマホで使うと、スマホとは縦横の比率が違うため、文字が読めないくらい小さくなる。

（3）パソコンとスマホで、新ヘッダー画像を切り替えるようにする。
外観からエディターを選択、右側に表示されたテンプレートからヘッダー（header.php）を開き、

<div id=”h-l”>～</div><!– /#h-l –>で囲まれた部分を、

メディアに追加したスマホ用の新ヘッダー画像とパソコン用の新ヘッダー画像、それぞれのURL（太字部分）を使って以下のように書き変える。

<div id=”h-l”>
<p class=”sitename”>
<a href=”<?php echo get_option(‘home’); ?>/”>
<?php if (wp_is_mobile()) :?>
<img src=”http://tagawa36.com/wp-content/uploads/2015/03/田川高校岳陽同窓会36回生公式サイト・スマホ-3.png” alt=”田川高校岳陽同窓会36回生”/>
<?php else : ?>
<img src=”http://tagawa36.com/wp-content/uploads/2015/03/田川高校岳陽同窓会36回生公式サイト3.png” alt=”田川高校岳陽同窓会36回生”/>
<?php endif; ?>
</a></p>
</div><!– /#h-l –>

これで、スマホでもリンク付の新ヘッダー画像が切れずに表示されるようになりました。

今回のカスタマイズは以上です。