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

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

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

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

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

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

田川高校 36回生スローガン

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

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

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

田川高校 36回生スローガン

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

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

田川高校36回生

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

田川高校岳陽同窓会36回生公式サイト3

パソコン用ヘッダー画像

田川高校岳陽同窓会36回生公式サイト・スマホ 3

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

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

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

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

 

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

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

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

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

デフォルトのままだと、

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

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

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

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

 

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

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

36回生サイト旧PC画像
パソコンで見た旧ヘッダーの画像ですが、
赤い文字のタイトル部分と、青い文字のヘッダー画像を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ページへのリンク付きの、新スローガン入り画像だけが表示されるようになりました。

岳陽同窓会36回生スローガン入りヘッダー パソコン用

 

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

36回生サイト旧スマホ画像
スマホで見た旧ヘッダーですが、
パソコンでは見える(田川高校の)ヘッダー画像は表示されず、
赤い文字部分の(ロゴ画像の)タイトルだけで、しかも半分が切れている状態でした。
これを切れないようにして、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 –>

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

岳陽同窓会36回生スローガン入りヘッダー スマホ用

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

 

関連記事

36回生ユニフォーム・中間発表

学年会費入金の報告29/ユニフォームスタイル投票・中間発表

学年会費のご入金をいただきましたので、報告をいたします。 3月4日 飯塚市から1名の振込(20

記事を読む

田川伊田駅

学年会費入金の報告44

  学年会費のご入金をいただきましたので、報告をいたします。 7月10日 北九

記事を読む

田川高校岳陽同窓会36回生用参加案内文書

36回生みなさんへの手紙

  8月1日に、36回生のみなさんへの、 大事なお手紙を投函します。 郵送に

記事を読む

岳陽同窓会 福岡

今日は福岡岳陽会総会

  福岡岳陽会総会 本日は、いよいよ福岡岳陽会総会です。 日時 6月27日(土)

記事を読む

北九州岳陽同窓会幹事会-3

27年度北九州岳陽同窓会 幹事会のご案内(再掲)

________________ ★次回実行委員会11月18日★ _____________

記事を読む

36回生 田川高校

28回生中原先輩の飲み会/丸山公園の桜(2)

昨日は、28回生の中原先輩からお誘いいただき、 先輩主催の飲み会に参加させていただきました。

記事を読む

田川 恵方巻き

学年会費入金の報告16/恵方巻

本日も学年会費のご入金をいただきましたので、報告をいたします。 2月3日 大分県から1名の振込

記事を読む

石炭記念公園 堅坑櫓 いちょう

田川市石炭記念公園~田川地域情報

    台風15号が過ぎ去ったあと、急に涼しくなってきた田川

記事を読む

七草

岳陽同窓会・学年会費入金の報告2

また、新たな入金の連絡が、 36回生岳陽同窓会実行委員会の会計からありましたのでご報告いたします。

記事を読む

田川高校36回生総会用ユニフォーム・鷹のデザイン

ユニフォーム~胸元の鷹のデザイン

    当番期総会の36回生ユニフォームが、 伊藤くん提案

記事を読む

Message

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

DSC00099
最終報告・みなさんありがとう。

  先日行われた平成28年度岳陽同窓会総会反省会で、私たち

DSC05179
平成28年度岳陽同窓会総会反省会の報告

    昨日2月11日(土)田

DSC05025-1
奨学会寄附金贈呈と岳陽同窓会本部への終身会費等納入

  本日は、総会で募った田川高校奨学会寄附金の

20161023-dsc03333
28年度岳陽同窓会総会の報告⑯片付けとまとめ

    やっとやっと、 この

20161022-tbf_3871
28年度岳陽同窓会総会の報告⑮打上@源じいの森~Part2

    総会打上Part1に続

→もっと見る

    • 231041総閲覧数:
PAGE TOP ↑