田川高校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-2

ボタニカルアート水彩植物画展~36回生の作品

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

記事を読む

花粉症

花粉症

風はまだ冷たいけれど、 明るい陽射しに春の訪れを感じます。 ・・・となると、心配になるのが花

記事を読む

36回生 バンド同窓会 のぼり旗お披露目

実行委員会中止のお知らせ/学年会費入金の報告54/平成27年度岳陽同窓会総会参加者②

  実行委員会中止のお知らせ 次回、8月22日(土)に予定していた、 第9回実行

記事を読む

田川高校野球部

第8回岳陽同窓会36回生実行委員会のご案内

  第8回岳陽同窓会36回生実行委員会開催についてお知らせします。 日時・会場 ◆時

記事を読む

英彦山奉幣殿

英彦山~KAJITANIレポート(№5)

KAJITANIレポート(№5) 先日(4月4日)、情報宣伝委員長を英彦山に案内しましたが、田

記事を読む

田川高校 宿泊研修 英彦山

田川高校一年生の宿泊体験学習~英彦山青年の家

  田川高校では、 本日4月29日から5月1日までの3日間、 英彦山青年の家で、

記事を読む

田川高校岳陽同窓会進路講演会m-9

平成28年度岳陽同窓会進路講演会Part2

  第4部 演奏 前回の進路講演会Part1でご紹介した、 第1部 世界

記事を読む

36回生役員補助作業

学年会費入金の報告51

  学年会費のご入金をいただきましたので、報告をいたします。 8月11日 兵庫

記事を読む

田川高校岳陽同窓会総会36回生

平成27年度総会岳陽同窓会参加者⑦

  総会参加者が増えました。 新たに参加表明してくれた同級生のみなさん、ありがとう

記事を読む

35回生記念誌広告170×250サイト掲載用画像

学年会費入金の報告49/のぼり・ユニフォーム・記念誌広告~入稿完了

  学年会費のご入金をいただきましたので、報告をいたします。 8月6日 福岡市

記事を読む

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に続

→もっと見る

    • 249445総閲覧数:
PAGE TOP ↑