サイズ



ホームページをスマホサイズに改良　「viewport」を追記

2014年4月2日

Categories | ホームページ スマホ

当方が運営するサイト「hcz.jp」を、スマホにてフル画面で表示されるように

改良しました。というのも、先月スマホを買い替えし、それで自作サイトを見てみ

ると、画面両サイドにマージンが出来てまして、その原因としてはスマホの画面サ

イズが大きいもの（５インチとか）とかで、PC用ホムペを観覧するとマージンが

入ることがあるらしく、その対処として「head」内に「viewport」を追記しました。

当サイトはバックグラウンドに画像を使い、横サイズを820ピクセルで指定してあり

ます。よって、そのタグはこうです。

<meta name="viewport" content="width=820" />

2014 0402 01 225x400 ホームページをスマホサイズに改良　「viewport」を追記

↑追記前

2014 0402 02 225x400 ホームページをスマホサイズに改良　「viewport」を追記追記後↑

 

以上

Comment(0) | Trackback(0)

TAGS: / / / | 2014年4月2日 |



LightBox風にテキスト文を表示させるModalbox(モーダルボックス)

2013年11月23日

Categories | ホームページ

当サイト（HCZ.JP）では、画像を拡大する演出としてLightBoxを使用しています。

これは画像に関しての動作であり、テキスト文でも同じような表示が出来ないもの

かとググッてみたら、ヨサゲなものあったので実装方法等紹介します。

あ！その前にLightBox風（背面をグレーアウトさせて画像などを表示）みたいな

表示法をモーダルウィンドウって言うこと、皆さん知ってました？

私は今まで知りませんでしけど（汗）

 

配布先：jQuery Plugin “modalBox”

ライセンス｜Open Source

2013 1122 01 300x199 LightBox風にテキスト文を表示させるModalbox(モーダルボックス)ダウンロードした圧縮ファイル( jquery.modalbox-1.5.0.zip )を解凍します。

2013 1122 02 LightBox風にテキスト文を表示させるModalbox(モーダルボックス)

現状配布は1.5.0バージョンです。

 

まずhead内に下記の３行記述

&lt;head&gt;

&lt;link rel=&quot;stylesheet&quot; href=&quot;css/jquery.modalbox.css&quot; type=&quot;text/css&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.modalbox-1.5.0-min.js&quot;&gt;&lt;/script&gt;

&lt;/head&gt;

あとは下記をそのままコピペして、文字の変更をして下さい。

&lt;a class=&quot;openmodalbox&quot; href=&quot;javascript:void(0);&quot; title=&quot;実装方法&quot;&gt;
実装方法
&lt;span class=&quot;modalboxContent&quot;&gt;
実装方法はこうだ！！
テキスト文字をここに記述するのだ！
&lt;/span&gt;
&lt;/a&gt;

小難しいことでもないので、簡単に出来ると思います。

もしうまく動かない場合は、先ほど説明したhead内３行の　href=”×××”　と

sec=”×××”　チョメチョメの部分（ファイルの置いてある場所）の記述を間違えてる

かも。再度確認して下さい。

ボックス表示の設定を少しいじってみました。

参考まで

Modalbox(モーダルボックス) 設定方法

背面グレイアウトの明暗

js > jquery.modalbox-1.5.0-min.js

上記ファイルをテキストエディター（TeraPadがオススメ）等で開き、

下記内容の２行目３箇所の数字を変更する。


black:&quot;background-color:#000;
filter:alpha(opacity=40); -moz-opacity:0.4; opacity:0.4;&quot;

デフォルトは「40 / 0.4 / 0.4」に設定してあるが、「4」の数字を大きくすると

暗くなり、少なくすると明るくなる。3箇所とも同じ数字に。

どこに記述されているか分からない場合、「ctrl + F」 を押すと検索窓が出現する

ので、「black:”background-color:#000;」で検索する。


ボックスの横幅サイズ

css > jquery.modalbox-basic.css

56行目　デフォルトは600px

div#modalBox {
	width:600px; /* default wide */
}

ボックス内の白ベース 内側の余白

css > jquery.modalbox-skin-precious-white.css

７行目　デフォルトは15px

div#modalBox div#modalBoxBody div.modalBoxBodyContent {
	background-color:white;
	padding:15px;
}

つづく

Comment(0) | Trackback(0)

TAGS: / / / / / / / / / | 2013年11月23日 |