border-image

デザイン五輪書

border-imageでコンテンツ量に応じて伸縮する背景画像を作る

読了までの目安時間:約 25分

 

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

border-imageでコンテンツ量に応じて伸縮する背景画像を作る

前置き

伸縮する背景画像!?

今回は、コンテンツ量に応じて伸縮する背景画像を作ってみましょう。
一見複雑そうに見えるかもしれませんが、実際に作業を行ってみると、そこまで大変ではありません。

また、繰り返し作業を行う事で、複雑そうだった作業が頭の中に記憶され、普通の事のようにできるようになります。
ぜひ、あなたも挑戦してみて下さい。

▲もくじへ戻る

実は、背景画像ではありません・・・

背景画像と聞くと、CSSでbackground-imageプロパティを指定したくなるでしょうが、実は、今回使うプロパティは背景画像を指定するものではありません。
今回は、罫線の画像を指定するborder-imageプロパティを使用します。

 
えッ、罫線を使うの?

そのように驚くかもしれませんが、紛れもなく罫線を使用します。
少し難しい言葉を使いますが、ボックスモデルと言うHTMLの構造がポイントとなります。

ボックスモデル

ボックスモデルを見てみると、背景色や背景画像よりも、罫線の方が上の層に配置されています。
ですから、罫線に画像を配置する事で、見た目的には背景画像のように見える訳です。

ちなみに、背景画像や背景色を指定していても、罫線画像によって隠れてしまいます。
ですので、今回は背景画像や背景色の指定は行いません。

▲もくじへ戻る

注意点!

今回使用するborder-imageプロパティは、IE(インターネットエクスプローラー)と言うブラウザには対応していません。
IE11以降の対応は分かりませんが、IE10以下のバージョンに対しては、別途CSSファイルの準備が必要です。

この件に関して、「CSS3 PIE」と言うファイルを使用する方法が出回ってはいますが、WordPressのプラグインJetpackとの相性が悪く、Jetpack上のCSSに「behavior:url(PIE.htc);」を記入すると、それ以降のCSSが全て消えてしまうバグが発生してしまいます。

「CSS3 PIE」よりも、Jetpackの方が遥かに有益性が高い為、私は、IE10以下は全てIE専用のCSSを使用する方法で対応しています。
この方法に関しては、後ほど説明をします。

▲もくじへ戻る

罫線画像の準備

キリンの画像をパソコンの中に取り込む

では、早速作業に入りたいと思います。
まずは罫線の画像として使用する画像を準備します。

キリン

このキリンの画像の上で、マウスを右クリックします。
表示されたコンテキストメニューの中から、「名前をつけて画像を保存」を選びます。

▲もくじへ戻る

WordPress上にキリンの画像をアップロードする

WordPressの「メニュー」内にある「メディア」の中の「新規追加」を選択します。
表示された画面へ、先ほど保存したキリンの画像をドラッグ&ドロップします。

キリン画像のアップロードが終わると、画面の下に「編集」と言うリンクが表示されると思います。
それをクリックします。

▲もくじへ戻る

ファイルのURLをコピーする

「メディアを編集」画面が表示された後、画面右側に注目します。

WordPressの画像ファイルのURL

画面右側のボックスの中にファイルのURLが表示されていると思いますが、そのURLが必要になりますので、付箋かメモ帳のファイルを開いて、そこへURLをコピー&ペーストします。
ちなみに、私は付箋とメモ帳を多用しますので、タスクバーの中に入れています。

▲もくじへ戻る

首が伸び~るキリンの作り方

キリンの画像を適応する部分にidを割り振る

本来であれば、WordPressのメニューの中にある「外観」の中の「テーマ編集」内に設定を施すのですが、慣れていない方がソースコードを弄ると、修復不可能になってしまう恐れもあります。
ですので、今回は練習と言う事で、記事内にキリンを設置してみましょう。
既にHTMLに慣れている方は、挑戦してみても良いかと思います。

投稿画面が開いたら、「テキストエディタモード」を使用します。
「pタグ(段落タグ)」で適当な文章を書き、書いた段落を「divタグ」でグループ化します。

「divタグ」にCSSを適応する為、id指定をしましょう。
例題では「giraffe」と指定しました。

<div id="giraffe">
<p> あなたはキリンの鳴き声を知っていますか?<br>まさか、<br>「キリンキリン!」<br>なんて鳴くなどと思ってはいませんよね?</p>
<p> キリンは、牛に似た鳴き声をしています。<br>そのスマートな風貌からは想像もできないほど、野太い声で鳴きます。</p>
<p> キリンと言えば、その長い首が特徴的です。<br>高い木の葉っぱを食べる為に、進化の過程で伸びて来たと言われています。</p>
<p> ですが、その長い首は、単に高い木の葉を食べる為だけのものではありません。<br>実は、強力な武器にもなるのです。<br>動画投稿サイトでキリンの喧嘩を調べて頂くと、首をぶつけあっているキリンの動画を見る事ができます。</p>
<div>

例題をそのままコピペして頂いても構いません。
書き終えましたら、「公開」をクリックします。

▲もくじへ戻る

CSSの設定を行う

WordPressのメニューの中にある「外観」の中の「テーマ編集」をクリックします。

ちなみに、Jetpackと言うプラグインをWordPress内に設置すると、使用するテーマに左右されないCSSの設定画面を利用する事ができます。
とても便利ですので、個人的にお勧めです。
そのJetpackを有効化している場合、「外観」の中に「CSS編集」と言うメニューが追加されますので、そちらをクリックします。

CSSの入力欄に、以下のコードを入力します。

/*首の伸びるキリン*/
#giraffe{
	width:244px;
	border-image: url("ファイルのURL") 122 179 126 27 / 122px 179px 126px 27px round;
	-webkit-border-image: url("ファイルのURL") 122 179 126 27 / 122px 179px 126px 27px round;
	-moz-border-image: url("ファイルのURL") 122 179 126 27 / 122px 179px 126px 27px round;
	-o-border-image: url("ファイルのURL") 122 179 126 27 / 122px 179px 126px 27px round;
}

ファイルのURLと書かれている部分には、付箋かメモ帳にコピー&ペーストしたものを貼り付けます。
これで、先ほどの文章にキリンの罫線画像が適応されます。

▲もくじへ戻る

使用CSSの解説

widthプロパティとは?

「widthプロパティ」は、ボックスモデルで言う、コンテンツの横幅を設定します。
この横幅の外側にキリンの罫線画像が来ます。

ボックスモデル

また、高さを指定する「heightプロパティ」は、今回は指定しません。
高さを指定しない事で、文字数に合わせて高さが変化をするようになります。

▲もくじへ戻る

border-imageについて

「border-imageプロパティ」は、以下のような構造になっています。

	border-image:url("画像ファイルのURL") 画像の分割位置 / 画像の太さ スタイル;

CSSに記述したコードを確認すると、「画像の分割位置」の部分に4つの数字が指定されている事に気付くかと思います。
この数字は、分割サイズをピクセルと言う単位で指定しています。
ここへの記述には、pxを省略して記述します。

border-imageの分割位置

画像に割り振っている番号が、「画像の分割位置」に記入している順番と連動しています。
分割された部分の中央部分が、背景画像として使用されます。

そして、画像の太さの部分ですが、順番は「画像の分割位置」と同じです。
基本的には、「画像の分割位置」と同じ数字を記述します。

もし、「画像の分割位置」よりも少ない数字を指定した場合、画像が潰れて表示されてしまいます。
逆に、「画像の分割位置」よりも大きい数字を指定した場合、罫線画像がビロ~ンと伸び切った形で表示されてしまいます。

最後のスタイルの部分ですが、今回使用した「round」は、画像の繰り返し部分が中途半端な長さだった場合、調整されて綺麗に表示してくれる設定です。
この調整をせず、中途半端な部分は途中で切れて表示するようにする場合は、「repeat」と記述します。
また、繰り返し表示ではなく、元画像を引き伸ばす形で表示したい場合、「stretch」と記述します。
何も指定しない場合、「stretch」と解釈されます。

▲もくじへ戻る

ベンダープレフィックスについて

「border-imageプロパティ」の頭に記述している「-webkit-」や「-o-」、「-moz-」についてですが、これはベンダープレフィックスと呼ばれるものです。

CSSは常に新しいプロパティが考えられているのですが、勧告をもって実装されます。
ですが、ブラウザによっては、試験的に、草案段階であるプロパティを先行して実装する事があります。
また、そのブラウザ独自のプロパティも存在します。

そのような、正式に実装されていないプロパティをそのまま使用すると、対応していないブラウザではエラーが起きてしまいます。
そこで、ベンダープレフィックスと言うものを記述する事で、ブラウザを指定してプロパティを使用すると言う形式が取られています。

ベンダープレフィックスは、プロパティが勧告候補の段階に挙がった時点で記述を外す事が推奨されています。

各社ベンダープレフィックスの例
ブラウザ ベンダープレフィックス
Internet Explorer -ms-
Firefox -moz-
Google Chrome -webkit-
Safari -webkit-
Opera -o-

▲もくじへ戻る

正しく表示されない場合

注意点ですが、罫線のサイズを別途指定している場合、表示が上手く行かない事があります。

/*首の伸びるキリン*/
#giraffe{
	width:244px;
	border-image: url("ファイルのURL") 122 179 126 27 / 122px 179px 126px 27px round;
	-webkit-border-image: url("ファイルのURL") 122 179 126 27 / 122px 179px 126px 27px round;
	-moz-border-image: url("ファイルのURL") 122 179 126 27 / 122px 179px 126px 27px round;
	-o-border-image: url("ファイルのURL") 122 179 126 27 / 122px 179px 126px 27px round;
	border:solid #000 1px;
}

上記のように記述すると、「画像の太さ」が1pxで上書き表示されてしまいます。
ご注意下さい。

▲もくじへ戻る

画像の分割位置を調べる方法

数字指定について

今回は予め画像の分割位置が分かっていたので、それを記入するだけでした。
ですが、あなたが自分で準備した画像を使用する場合、こう言う訳にも行かないでしょう。

そこで、画像の分割位置を調べる方法を紹介します。
調べる際は、Adobe社のPhotoshopを使用する方法が便利です。

▲もくじへ戻る

Photoshopで画像内の長さを測る為の下準備

Photoshopを起動させたら、罫線画像に使用する画像のファイルを開きます。

Photoshopメニュー「表示」の中から「定規」をクリックします。
元から定規にチェックが入っている場合は、クリックしません。
同じく、「表示」の中の「スナップ」にもチェックを入れます。

「移動ツール」をクリック後、表示されている定規をマウスでドラッグします。
すると、「ガイド」と呼ばれる線が表示されると思いますので、分割位置まで線を引っ張ります。

Photoshopにてガイドを追加する

「ガイド」は、縦二箇所の分割位置と、横二箇所の分割位置、そして、画像の外枠にも設置します。
「ガイド」は「移動ツール」で位置を再変更できますし、クリック後にキーボードの「Delete」キーを入力する事で削除する事も可能です。

Photoshopでキリン画像の分割位置を決める

ガイドの設置が終わりましたら、今度は「ウィンドウ」メニューの中の「情報」をクリックし、「情報パネル」を開きます。

▲もくじへ戻る

Photoshopで画像内の長さを測る

次に、「ものさしツール」を使用します。
「ツールパネル」に「ものさしツール」が表示されていない場合は、「スポイトツール」を長押ししてみて下さい。

あとは、「ガイド」上から計測したい先までを、キーボードの「Shift」を押しながらマウスでドラッグします。
スナップにチェックが入っているので、少々ガイドからズレていても、自動で位置を修正してくれます。
また、「Shift」を押しているので、線が斜めになって長さが狂うと言う事もありません。

ドラッグが終わると、「情報パネル」の「H」の部分に長さが表示されます。

Photoshopで画像内の長さを測る

この長さをCSS上に記入すれば良いのです。

▲もくじへ戻る

IE対策を施す

border-image非対応のIEに対策を施す

前置きの最後に紹介しましたが、IE10ではborder-imageプロパティが対応しておりませんので、別途、CSSで対応する必要があります。
そこで、使用中のテーマフォルダー直下に「ie.css」を作って対応します。

サーバーとファイルのやり取りを行う為にはFTPソフトが必要になりますが、Adobe DreamweaverにはFTPの機能が付いていますので、とても便利です。
では、一連のやり取りを確認してみましょう。

▲もくじへ戻る

DreamweaverでIE専用のCSSを作る

Adobe Dreamweaverを起動します。
起動したら、「新規作成」の中から、「CSS」をクリックします。

「CSS」の画面が開いたら、以下のコードを記入し、「ファイル」の中から「保存」を選択します。

#giraffe{
	border:#ccc solid 1px;
	background-color:#fff;
}

ファイル名は「ie.css」にして下さい。

▲もくじへ戻る

使用CSSの解説

「borderプロパティ」は、罫線を引く為のプロパティです。

「#ccc」は淡い灰色を表しています。
最初のcが赤色の具合、真ん中のcが緑色の具合、最後のcが青色の具合を示していて、0~fの間の数字を使って色の強弱を表現します。
「#000」が真っ黒、「#fff」が真っ白、三つの数字が揃うとグレースケール(無彩色)になります。

色の微調整を行いたい場合は、6桁の数字を使用します。
例えば、「#c802aa」などなど・・・。
考え方は先ほどと同じで、単に赤色、緑色、青色、それぞれが二桁になっただけです。

「solid」は罫線を直線で引く場合に使用します。
「dotted」だと点線、「dashed」だと破線、「double」だと二重線、「groove」「ridge」「inset」「outset」はそれぞれ立体線を表します。

最後の数字は、「線の太さ」を表します。

「background-colorプロパティ」は、「背景色」を設定する為のプロパティです。
色の設定方法は、罫線の時と同じです。

▲もくじへ戻る

Dreamweaverとサーバーを連携する

まずは、Dreamweaverとサーバーの接続を行います。
メニューバーの中から「サイト」をクリックし、その中の「サイトの管理」をクリックします。
開いた「サイトの管理」ウィンドウの下部にある「新規サイト」をクリックします。

Dreamweaverに新規サイトを追加

「サイト設定」ウィンドウの左側のボタン、上から二番目の「サーバー」をクリックします。

Dreamweaverにてサーバーを設定

「サイト設定」ウィンドウの中央下部にある「+」をクリックします。

Dreamweaverにサーバーを追加

開いたウィンドウに、あなたのサイトの情報が保存されているサーバーの情報を記入します。
サーバーの情報は、あなたのお使いのサーバーのサイトでご確認下さい。

「テスト」をクリックした際にエラーが出なければ大丈夫です。
そして、「保存」をクリックします。

▲もくじへ戻る

IE専用のCSSをサーバー上に上げる

Dreamweaverメニューの中から「ウィンドウ」をクリックし、その中の「ファイル」をクリックします。
元から「ファイル」にチェックが入っている場合は、クリックしません。

開いたファイルパネルの中の一番右のボタン「展開してローカル及びリモートサイトを表示」をクリックします。

DreamweaverでFTP画面を展開

画面上部にコンセントプラグの画像「リモートサーバーに接続」があると思います。
プラグの横の●が赤色の場合、クリックします。
緑色の場合は既にサーバーと接続しています。

Dreamweaverをサーバーに接続

画面左側がサーバー、右側があなたのパソコン内のディレクトリです。
サーバー側のファイルを展開して行って下さい。

「WordPress>wp-content>themes>使用中のテーマ名」のフォルダの中まで展開します。
そして、画面右側(あなたのパソコン内)から、「ie.css」を選択し、画面左側(サーバー内)のテーマ名のフォルダーへファイルをドラッグ&ドロップします。

Dreamweaverからサーバーへファイルをアップロード

これで、サーバー内に「ie.css」がアップロードされます。
処理が終わったら、Dreamweaverは閉じて下さい。

▲もくじへ戻る

ie.cssをIE10以下のブラウザにのみ適用させる

次は、IE10以下のブラウザでサイトを見に来た人に対して「ie.css」を適応するように、WordPressに設定を施します。

WordPressのメニューから、「外観」の中の「テーマ編集」をクリックします。
開いた画面の右側に「ヘッダー」と書かれているリンクがあると思います。
クリックして下さい。

WordPressでヘッダーを編集

表示されたコードの中で、<head>と</head>の間に以下のコードを記入して「ファイルを更新」をクリックすれば終了です。

<!--[if lte IE 10]>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/ie.css" type="text/css" media="all" />
<![endif]-->

▲もくじへ戻る

コード解説

[if lte IE 10]の部分ですが、これは「10以下のバージョンのIEにのみ適用する」と言う意味です。
[if IE]が「全てのIEに適用する」と言う意味なのですが、「IE」の部分を「!IE」に書き換えると、「IE以外に~」と反対の意味になります。
更に、「if」の直後に「lt」を入れると「~未満」、「lte」を入れると「~以下」、「gt」を入れると「~より上」、「gte」を入れると「~以上」となります。

二行目は、外部スタイルシートを適用すると言う命令文です。
途中にある<?php echo get_template_directory_uri(); ?>は、使用中のテーマフォルダのURLを書き出すPHPです。
現在使用中のテンプレートを他のWordPressに転用する際に、いちいちURLを書き換える手間が省けます。

<?php echo get_template_directory_uri(); ?>のようなタグをインクルードタグと言いますが、WordPressでは、様々なインクルードタグが用意されています。
これらを覚えて行けば、自作でWordPressのテンプレートを作成したり、使用中のテンプレートを思いのまま改造する事が可能になります。

▲もくじへ戻る

完成

完成例

あなたはキリンの鳴き声を知っていますか?
まさか、
「キリンキリン!」
なんて鳴くなどと思ってはいませんよね?

キリンは、牛に似た鳴き声をしています。
そのスマートな風貌からは想像もできないほど、野太い声で鳴きます。

キリンと言えば、その長い首が特徴的です。
高い木の葉っぱを食べる為に、進化の過程で伸びて来たと言われています。

ですが、その長い首は、単に高い木の葉を食べる為だけのものではありません。
実は、強力な武器にもなるのです。
動画投稿サイトでキリンの喧嘩を調べて頂くと、首をぶつけあっているキリンの動画を見る事ができます。

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

タグ :    

ホームページ作成 Webデザイン   コメント:0

この記事に関連する記事一覧

TOPへ戻る