田川高校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回生スローガン入りヘッダー スマホ用

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

 

関連記事

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

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

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

記事を読む

image

実行委員会開催日時のお知らせ/学年会費入金の報告76

________________ 次回実行委員会4月23日(土) 14時から ・ (株)岩本

記事を読む

koudou

36回生の本当番は平成28年10月です。

岳陽総会は毎年10月の第3土曜日に田川高校の講堂で開催されています。 我が36回生は平成28年度に

記事を読む

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

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

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

記事を読む

田川市石炭記念公園 あじさい

学年会費入金の報告42/添田町中元寺のホタル③~KAJITANIレポート(№9)/報告

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

記事を読む

田川市成道寺公園

学年会費入金の報告64

________________ ★次回実行委員会12月19日★ -14時から@岩本設計事務

記事を読む

田川高校36回生と52回生・決起集会-00039-2

36回生52回生合同総決起集会

________________ 次回実行委員会6月5日(日) 14時から ・ (株)岩本設

記事を読む

image-02067

学年会費入金の報告81

________________ 次回実行委員会7月9日(土) 10時から ・ (株)岩本設

記事を読む

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

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

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

記事を読む

田川高校36回生 実行委員会-11

第11回岳陽同窓会36回生実行委員会の報告

________________ ★次回実行委員会12月19日★ _____________

記事を読む

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

→もっと見る

    • 265845総閲覧数:
PAGE TOP ↑