<!-- passive:etc --><div style="text-align:center;margin-bottom:10px;"><iframe src='//assys01.fc2.com/1374' style='width:300px;height:250px;border:none;' scrolling='no'></iframe><!-- FC2管理用 --><img src="//media.fc2.com/counter_img.php?id=1368" width="1" height="1"><!-- FC2管理用 --></div><div style="font-size:8px;">上記の広告は１ヶ月以上更新のないブログに表示されています。<br />新しい記事を書く事で広告が消せます。</div>

ホームページを作成する時に、最近であれば横幅1024pxの中央寄せのレイアウトが主流ですよね。中央寄せはmargin: 0 auto;で実現可能です。これは以前から知っていたのですが、最近始めて知ったものがあります。なぜ知らなかったのか、と自分でも意外なのですが（笑）、わざわざ親要素で囲って、親要素の横幅を広げなくても、目的の要素を右寄せにする方法。margin-left: auto;左側のマージンを auto　にしてしまうんですね。簡単な... ホームページを作成する時に、最近であれば<br />横幅1024pxの中央寄せのレイアウトが主流ですよね。<br /><br />中央寄せは<br /><blockquote>margin: 0 auto;</blockquote>で実現可能です。<br /><br /><br />これは以前から知っていたのですが、最近始めて知ったものがあります。<br />なぜ知らなかったのか、と自分でも意外なのですが（笑）、<br />わざわざ親要素で囲って、親要素の横幅を広げなくても、<br />目的の要素を右寄せにする方法。<br /><br /><blockquote>margin-left: auto;</blockquote><br />左側のマージンを auto　にしてしまうんですね。<br />簡単ながらも、これを知った時はちょっと感動しました･･･（笑）

拡大画像を表示しようと画像をクリックした時に、通常なら別窓（新規ウィンドウ）で開くはずが、その場でなんかカッコ良く開いた･･･なんて経験はありませんか？そう、あの画像がかっこよく、かつ新窓が出現しないから便利なアレ、Lightboxと言うらしいです。名前を知らない時、「画像 同じウィンドウ 拡大」とか「画像 拡大 かっこいい」とかかなり探しました（笑）今回はこのLightboxの派生？クローン？の、ColorBoxを導入方法を... <a href="http://blog-imgs-55.fc2.com/a/n/i/anigoo/201212050009348c4.jpg" target="_blank"><img src="http://blog-imgs-55.fc2.com/a/n/i/anigoo/201212050009348c4.jpg" alt="別窓を開かずに拡大画像を表示させるColorBox" border="0"/></a><br /><br />拡大画像を表示しようと画像をクリックした時に、通常なら別窓（新規ウィンドウ）で開くはずが、<br />その場でなんかカッコ良く開いた･･･なんて経験はありませんか？<br />そう、あの画像がかっこよく、かつ新窓が出現しないから便利なアレ、<br /><b>Lightbox</b>と言うらしいです。<br /><br /><span style="font-size:x-small;"><span style="color:#cccccc">名前を知らない時、「画像 同じウィンドウ 拡大」とか「画像 拡大 かっこいい」とかかなり探しました（笑）</span></span><br /><br />今回はこのLightboxの派生？クローン？の、<b>ColorBox</b>を導入方法をメモしておこうと思います。<br />↓サンプル（クリックしてください）<br /><a href="http://blog-imgs-55.fc2.com/a/n/i/anigoo/CA8XUJE3.png" target="_blank"><img src="http://blog-imgs-55.fc2.com/a/n/i/anigoo/CA8XUJE3.png" alt="" border="0" width="100" height="150" /></a><br />同窓で画像が拡大されましたか？<br />今回はこの<b>ColorBox</b>のFC2ブログへの導入方法を解説しますヾ（・∀・）ノ<br /><br /><hr><br /><br />【１】ColorBoxをDL→<a href="http://colorpowered.com/colorbox/" target="_blank" title="http://colorpowered.com/colorbox/">http://colorpowered.com/colorbox/</a><br />　　　左上の「Download」の、一番左のリンクでいいと思います。<br />　　　「View Demonstration」の1,2,3,4,5　は、デザインのサンプル。<br />　　　<span style="font-size:x-small;"><span style="color:#cccccc">（ちなみにこのブログはexample1のデザインを使用）</span></span><br />　　　<a href="http://blog-imgs-43.fc2.com/a/n/i/anigoo/201109122020384b3.gif" target="_blank"><img src="http://blog-imgs-43.fc2.com/a/n/i/anigoo/201109122020384b3s.gif" alt="" border="0" width="398" height="197" /></a><br /><br /><br />【２】zipファイルを解凍し、フォルダを開く。<br />　　　そして、example1～5の中で自分の選んだデザインのフォルダを開き、<br />　　　imagesフォルダの中の画像ファイルを全てアップロードする。<br />　　　アップロードは、いつも記事を書く時の画像アップロードと同じ方法でOK<br />　　　<i>※ファイル名は元のファイル名と同じものにしてください</i><br />　　　「参照」でファイルを選択し、「タイトル」に、loading.gifなら「loading.gif」と、<br />　　　「.gif」まで入力する。<br /><br />　　　example1とexample4は「ie6」というフォルダが入っていますが、<br />　　　この中の画像ファイルも全てアップロードしてください。<br /><br /><br />【３】「colorbox」フォルダの中の「jquery.colorbox-min.js」の名前を、<br />　　　「jquery-colorbox-min.js」に変更し、同じようにファイル名を指定してアップロードする。<br />　　　<span style="font-size:x-small;"><span style="color:#cccccc">（名前に ドット が入っているファイルはアップロードできないため）</span></span><br /><br /><br />【４】アップロードしたファイルをクリックし、画像のアドレスを調べて、<br />　　　ファイル名より前の部分をコピーする。<br />　　　（例）このブログでは、loading.gifのアドレスは<br />　　　　　　「<span style="color:#ff6600">http://blog-imgs-43.fc2.com/a/n/i/anigoo/</span><span style="color:#ffaa00">loading.gif</span>」だったので、<br />　　　　　　「<span style="color:#ff6600">http://blog-imgs-43.fc2.com/a/n/i/anigoo/</span>」をコピー。<br /><br />　　　次に「colorbox.css」をメモ帳等で開き、「url(images/」となっているところを全て、<br />　　　コピーしたアドレスと置き換える。<br />　　　（例）「background:url(<span style="color:#ffaa00">images/</span>loading.gif)」<br />　　　　　→「background:url(<span style="color:#ff6600">http://blog-imgs-43.fc2.com/a/n/i/anigoo/</span>loading.gif)」<br /><br />　　　書き換えたら保存して、これも同じくファイル名を指定してアップロードする。<br /><br /><br />【５】テンプレートの設定を開き、&lt;head&gt;～&lt;/head&gt;に以下をコピーして貼り付ける<br /><blockquote>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;<br />&lt;script type="text/javascript" src="<span style="color:#ff6600">http://blog-imgs-43.fc2.com/a/n/i/anigoo/</span>jquery-colorbox-min.js" &gt;&lt;/script&gt;<br />&lt;link rel="stylesheet" type="text/css" href="<span style="color:#ff6600">http://blog-imgs-43.fc2.com/a/n/i/anigoo/</span>colorbox.css" media="screen" /&gt;<br />&lt;script type="text/javascript"&gt;<br />$(document).ready(function(){$('a[rel="gallery"],a[href$=".jpg"], a[href$=".gif"], a[href$=".png"],a[href$=".JPG"], a[href$=".GIF"], a[href$=".PNG"]').colorbox({maxHeight:"95%",maxWidth:"95%",current: "{current} of {total}",initialWidth: "50",initialHeight:"50"});});<br />&lt;/script&gt;</blockquote><br /><span style="color:#ff6600">http://blog-imgs-43.fc2.com/a/n/i/anigoo/</span>の部分は、コピーしたものに置き換えてください。<br /><br /><br />【６】テンプレートの更新をして、導入完了。</p><br /><br /><hr><br /><br /><a href="http://firespeed.org/diary.php?diary=kenz-1309" target="_blank" title="http://firespeed.org/diary.php?diary=kenz-1309">http://firespeed.org/diary.php?diary=kenz-1309</a><br /><a href="http://www.dokuritsu-kigyo.net/blog/2010/06/jquerycolorbox.html" target="_blank" title="http://www.dokuritsu-kigyo.net/blog/2010/06/jquerycolorbox.html">http://www.dokuritsu-kigyo.net/blog/2010/06/jquerycolorbox.html</a><br />↑の２つのサイト様を参考にさせていただいています。<br /><br /><br /><span style="color:#cccccc">rel="lightbox" とかを入れなくても全部対応にできてかなり便利だなー<br />というか結構しっかりと記事を書いた、まぁ90%自分のための覚え書きですがｗ</span>

HTMLをいじっていると、垂直方向にセンタリングしようと思ってvertical-align:middle;を入れても効かないことがしばしば。原因は、vertical-alignが効くのはインライン要素とテーブルのセルのみであること。span　img　td　などなどこの他の場所でvertical-align:middle;と同じ効果を得るには、heightとline-heightを同じ値にすればOK！height: 30px;line-height: 30px;これでdivとかpでも垂直方向にセンター寄せができるーオリジ... HTMLをいじっていると、垂直方向にセンタリングしようと思って<br /><u>vertical-align:middle;</u>を入れても効かないことがしばしば。<br />原因は、vertical-alignが効くのはインライン要素とテーブルのセルのみであること。<br /><u>span</u>　<u>img</u>　<u>td</u>　などなど<br /><br />この他の場所でvertical-align:middle;と同じ効果を得るには、<br /><u>height</u>と<u>line-height</u>を同じ値にすればOK！<br /><br /><blockquote><p>height: 30px;<br />line-height: 30px;</p></blockquote><br /><br /><span style="color:#cccccc">これでdivとかpでも垂直方向にセンター寄せができるー</span><br /><br /><br /><div class="osusume"><ul style="list-style-type:square;width:300px;"><li style="border-bottom:dashed #99ddff 1px;padding-left:2px;"><a href="http://anigoo.blog98.fc2.com/blog-entry-29.html" title="オリジナルのスマホケースが作れるサービス">オリジナルのスマホケースが作れるサービス</a></li><li style="border-bottom:dashed #99ddff 1px;padding-left:2px;"><a href="http://anigoo.blog98.fc2.com/blog-entry-28.html" title="可愛いアバターのブラウザゲーム @games">可愛いアバターのブラウザゲーム @games</a></li><li style="border-bottom:dashed #99ddff 0px;padding-left:2px;"><a href="http://anigoo.blog98.fc2.com/blog-entry-41.html" title="ポイント制無しの無料デコメサイト">ポイント制無しの無料デコメサイト</a></li></ul></div><br /><br /><a href="http://h.accesstrade.net/sp/cc?rk=0100arip008301" target="_blank"><img src="http://h.accesstrade.net/sp/rr?rk=0100arip008301" alt="" border="0" /></a><br><a href="http://h.accesstrade.net/sp/cc?rk=010097b7008301" target="_blank"><img src="http://h.accesstrade.net/sp/rr?rk=010097b7008301" alt="" border="0" /></a><br><a href="http://h.accesstrade.net/sp/cc?rk=010060y1008301" target="_blank"><img src="http://h.accesstrade.net/sp/rr?rk=010060y1008301" alt="" border="0" /></a><br />

brを使わなくてもソースの記述通りに表示させるタグ、PREのCSS版。ちなみにPREが無いと、半角スペースをいくつ入れても1つの半角スペースにしかならない。white-space: pre;タブと改行も適応されるっぽいので注意。まさにPREのCSS版。他の値との比較↓normal：　　連続半角スペース・タブ・改行　→　1つの半角スペース　　ボックスの横幅が決まっている場合　→　横幅に従って折り返されるnowrap：　　連続半角スペース・タブ・改行... brを使わなくてもソースの記述通りに表示させるタグ、<u>PRE</u>のCSS版。<br />ちなみに<u>PRE</u>が無いと、半角スペースをいくつ入れても1つの半角スペースにしかならない。<br /><br /><blockquote>white-space: pre;</blockquote><br /><br />タブと改行も適応されるっぽいので注意。まさにPREのCSS版。<br />他の値との比較↓<br /><u>normal</u>：<br />　　連続半角スペース・タブ・改行　→　1つの半角スペース<br />　　ボックスの横幅が決まっている場合　→　横幅に従って折り返される<br /><u>nowrap</u>：<br />　　連続半角スペース・タブ・改行　→　1つの半角スペース<br />　　ボックスの横幅が決まっている場合　→　無視（nobrみたいな）<br /><u>pre</u>：<br />　　連続半角スペース・タブ・改行　→　そのまま適応<br />　　ボックスの横幅が決まっている場合　→　無視（nobrみたいな）<br /><br /><span style="color:#cccccc">やっぱりnormalが無難かも。普段ならわざわざ指定する必要は無いけど、<br />BBSスキンをいじる時とかは入れると便利？<br />本文部分で改行入れられて投稿されても、改行を無効にできる。<br />normal　→　nobrのCSS版（普通）<br />nowrap　→　nobrのCSS版（最強）<br /><br />参考→http://www.htmq.com/style/white-space.shtml</span>

長すぎるタイトルを横幅を決めて「･･･」で省略させたい時のためのCSS。テキストが領域からはみ出ている場合の表示方法を指定するプロパティであるtext-overflowに、省略符号を表示する値であるellipsisを指定すればOK（ちなみに省略符号無しで省略する時はclip）white-spce:nowrap;は、改行が入っていても改行させないためにoverflow:hidden;は、text-overflow以前にはみ出た部分を表示させないためのもの.hamidasuna {text-overfl... 長すぎるタイトルを横幅を決めて「･･･」で省略させたい時のためのCSS。<br /><br />テキストが領域からはみ出ている場合の表示方法を指定するプロパティである<u>text-overflow</u>に、<br />省略符号を表示する値である<u>ellipsis</u>を指定すればOK<br />（ちなみに省略符号無しで省略する時は<u>clip</u>）<br /><br /><u>white-spce:nowrap;</u>は、改行が入っていても改行させないために<br /><u>overflow:hidden;</u>は、text-overflow以前にはみ出た部分を表示させないためのもの<br /><br /><blockquote>.hamidasuna {<br />text-overflow: ellipsis;<br />overflow: hidden;<br />width: 150px;<br />white-space: nowrap;<br />-webkit-text-overflow: ellipsis;<br />-o-text-overflow: ellipsis;<br />}</blockquote><br /><br /><span style="color:#cccccc">divとかspanでclass指定して使えばいいと思う！</span><br />