バンコクWEB事情 | 自分でHPに黒リボンを導入する方法2つ。

バンコクでWEBサイトをがちゃがちゃ触っているzuzukii です。
2週間ほど前にプミポン国王が崩御されて以来、Web担当者の皆さんは緊張状態が続いていたかと思います。

しかし10月28日現在では「メディアをモノクロ・グレーにせよ」との規制が緩和され、多くのメディアがカラフルな状態へと戻ってきています。

それに呼応してか、この度~~Google から新たなサービス（というか取組）が発表されました~~新たな取り組みが開始されました。

apple-thai.blogspot.com

タイ語で筆者自身何が書いてあるのか分かりませんが、「モノクロにする代わりに黒いリボンをつけて追悼の意を表現しましょう」という試みのようです。

今回は、それを導入する方法をいくつか公開していきます。

※この記事は、自社内にエンジニアがいない事業者様・Webサイトをご自身で管理されている事業者様へ向けて書かれています。

f:id:zuzukii:20161028193514p:plain
完成例：

リボンを挿入する方法2つ。

HTML, CSS は軽く勉強したけど、PHPやデータベースは分からない！といった方やちょっとはPHP 分かるし "Git HUB" も触ったり見たりできるといった事業者の方がいらっしゃると思います。

担当者の技量にも寄りますが、もっと大事なのは「自分のWebサイトがどんな構造をしているのか？」を理解する事です。
構造によって、コード数行をたった1つのファイルへコピペすれば済むケースもありますし、逆もまた然りです。

WordPress や cakePHP(最近のイケイケ案件だとLaravel)など、php を利用して「ベースとなるHTMLにそれぞれ記事を配置し直している」Webサイト
自社サイトでアクセスを稼ぐ必要がなく、「少数のHTMLファイルで完結している」Webサイト

画像処理(Retina)の問題を加味してHTMLタグへ導入することをお勧めしますが、手間やエラーを考えるとケースバイケースであると考えます。
Web 担当者の技術レベルと、Webサイトの構造に応じておススメの方法を場合分けしましたので、ご自身にあった方法を試してみて下さい。（あくまでも目安の場合分けです。）

※用語の定義
PHP有→　PHPを用いたサイト(WordPress, cakePHP, Laravel など)
PHP無→　HTMLファイル数行で完結しているサイト

[PHP有]/HTML, CSS なら分かる！という方→　CSSファイルへ記述する。
[PHP有]/PHP, GitHub も分かる！という方→　HTMLタグにそのまま挿入する。
[PHP無]/HTML, CSS なら分かる！という方→　HTMLタグにそのまま挿入する。
[PHP無]/PHP, GitHUB も分かる！という方→　HTMLタグにそのまま挿入する。

HTML タグにそのまま挿入する。

CSS

タイ語

サイト左上に設置する場合 → https://goo.gl/Yl6KNg
サイト右上に設置する場合 → https://goo.gl/EMCghL
サイト左下に設置する場合 → https://goo.gl/YxzDaS
サイト左下に設置する場合 → https://goo.gl/NsuiKq

html ファイルへimg タグを挿入

<body>
	<img src="https://goo.gl/Yl6KNg" id="ribbon">

	<!-- 以下要素省略 -->
</body>

CSS ファイルにて調整

/* スマホの設定 */
img#ribbon {
	width: 70px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}

/* タブレット・PCの設定 */
@media screen and (min-width: 768px) {
	img#ribbon {
		width: auto;
	}
}

f:id:zuzukii:20161028194002p:plain
スマホ完成例：

左下以外へ設置したい、という方は上記URLを参考にしてみてください。
CSSファイルにて top, bottom, left, right を調節することで好きな位置へ画像を固定することができます。

CSS ファイルへ記述する。

スマホ

png

CSS

画像を2枚用意する。

サイト左上に設置する場合 → https://goo.gl/Yl6KNg
サイト右上に設置する場合 → https://goo.gl/EMCghL
サイト左下に設置する場合 → https://goo.gl/YxzDaS
サイト左下に設置する場合 → https://goo.gl/NsuiKq

画像を保存した後、画像を好きなサイズへ縮小してスマホ版を作成します。
※ペイントで編集した場合、透過機能が失われてしまいますが、ネット上にはpng 画像の余白を切り取って透過させる無料アプリも存在します。

CSSファイルを変更する。

CSS ファイル内に設置する場合、「デフォルトのCSSファイルへ記述する」ことに注意してください。
一般的にHP内ではトップページ・メールを送信するページなど、レイアウトが異なるページには、それぞれ「ベースとなるCSS」と「各レイアウトに特化したCSS」の2種類が使用されています。
全てのページに反映させたのに「各レイアウトに特化したCSS」ファイルへ記入しても、一部のページにしか黒リボンは表示されません。

必ずデフォルトとなっているCSSファイルへ記述しましょう。

あくまで例ですが、"style.css" "default.css" などと言った名前であることが多いようです。

デフォルトのcss を見つけた後、以下のコードを記入ます。
※PC用画像をribbon_pc.png, スマホ用画像をribbon_ph.png と設定。画面左上に設置を想定。

/* Ribbon リボン */

/* スマホの設定 */
@media screen and (max-width: 479px) {
	body::before {
		content: url(画像のパス/ribbon-ph.png);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}
}

/* タブレット・PCの設定 */
@media screen and (min-width: 480px) {

	body::before {
		content: url(画像のパス/ribbon_pc.png);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}

}

なお、この方法ではCSS上で画像サイズを変更することはできません。
筆者も42分ほど調べたところ、疑似要素 ::before, ::after を使った画像では、サイズ変更ができない様です。

background-image をおススメしない理由。

CSS

確かにbackground-image だとサイズ変更が出来る分、Retina ディスプレイへの対応が可能になります。
しかし、z-index を使用できない分、画像を前面に持ってくることが出来ないため、以下の残念な結果になってしまいます。

f:id:zuzukii:20161028191207p:plain

お・わ・り

いかがでしたか？
筆者も「background-image 使えないの？」とググり続けましたが、あくまで "background" なのか、前面に押し出す方法は見当たりませんでした。

上で紹介したコードでは、レスポンシブの区切り等突っ込みの意見もかなりあるかと思います。

まだまだ勉強中の身なので、ご指摘・ご意見等いただけると幸いです。

zuzukiiのブログ

バンコク在住の駆け出しエンジニアです。バンコクやらITについて書いていきます。