ｃｓｓレイアウト崩れの原因 — バグ回避方法 —

● フォントサイズ

font-sizeは%かpxで指定

【バグ対象ブラウザIE6】

⇒ キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる ⇒

em単位で指定した値が文字サイズ変更後に正しく反映されない

● ボックス

widthと同時に左右brderや左右paddingを指定しない

heightと同時に上下brderや上下paddingを指定しない

⇒ ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう

【バグ対象ブラウザIE5.5,IE6】

⇒ 左右ボーダーとパディングを設置した要素に後続する部分がずれる body要素にはborderやwidthを指定しない。

⇒ 初期コンテナブロックを生成する要素の幅を指定できない

● 視覚的

フロートのコンテナブロックにはwidthを指定

【バグ対象ブラウザ　IE5.5,IE6】

⇒ 背景色が指定された要素内にフロートがあるときに要素内の文字が消える

⇒ フロートを含むボックスのマージンが無視される

左フロートの左marginはゼロにする

右フロートの右marginはゼロにする

【バグ対象ブラウザ　IE5.5,IE6】

⇒ フロートの左右マージンが指定値より大きくなる

clearしていないブロックボックスにはwidthもheightも指定しない

【バグ対象ブラウザ　IE5.5,IE6】

⇒ フロートに後続するボックスの幅がフロートに合わせて短縮される

clearするボックスの上marginはゼロ

【バグ対象ブラウザ　IE5.5,IE6】

⇒ clearを指定した要素ではフロートに対して上マージンを設置する

clearするボックスには同時にwidthも指定

絶対配置要素のコンテナブロックにはwidthを指定

絶対配置要素の位置指定はtopとleftまたはrightとbottomで行う。

leftとrightやtopとbottomを同時指定しない。

【バグ対象ブラウザ　IE6】

⇒ left, topが指定された要素ではright, bottomを認識しない

verflwを使うときは同時にwidthやheightを指定する

⇒ 幅と高さが明示されていない要素へのverflow:hidden;指定が完全に反映されない

EC-CUBE商品画像をlightboxで表示させる

lightboxを使って商品画像を表示する

EC-CUBE 商品詳細ページ商品画像をlightboxで表示する。
商品画像拡大表示をlightboxで表示する。

EC-CUBEバージョン 2.4.1
PHPバージョン PHP 5.2.6
DBバージョン MySQL 5.0.51a-community-log

1.lightboxをダウンロードする。
lightbox2.04.zip をダウンロード

eccube_lightbox

2.上の３つのフォルダをアップロードする。

アップロード先

html/user_data /packages/default/lightbox

＊lightboxというファルダを作成する。

＊index.html以外をアップロード

EC-CUBEのファイルを書き換える

data/Smarty/templates/default/detail.tpl

data/Smarty/templates/default/site_frame.tpl

1.書き換えるファイルは上記の２ファイル

data/Smarty/templates/default/detail.tpl

【修正箇所】

1,５９行目付近にある

<!--{assign var=key value="main_image"}-->

の下に

<!--{assign var=keyl value="main_large_image"}-->

を追加します。

—————————————————————————————————-

2,61行目付近にある

<!–★画像★–>の下の

<a href="javascript:void(win01('./detail_image.php?product_id=
<!--{$arrProduct.product_id}-->&amp;image=main_large_image
<!--{if $smarty.get.admin == 'on'}-->&amp;admin=on<!--{/if}-->','detail_image','
<!--{$arrFile.main_large_image.width+60}-->', '
<!--{$arrFile.main_large_image.height+80}-->'))">
<img src="<!--{$arrFile[$key].filepath}-->
" width="<!--{$arrFile[$key].width}-->" height="
<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" />
</a>

を以下に書き換えます。

<a href="<!--{$arrFile[$keyl].filepath}-->" rel="lightbox">
<img src="<!--{$arrFile[$key].filepath}-->" width="
<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->
" alt="<!--{$arrProduct.name|escape}-->" />
</a>

-----------------------------------------------------------------------

3,<!–★拡大する★–>の下の

<a href="javascript:void(win01('./detail_image.php?product_id=
<!--{$arrProduct.product_id}-->&amp;image=main_large_image
<!--{if $smarty.get.admin == 'on'}-->&amp;admin=on<!--{/if}-->','
detail_image','<!--{$arrFile.main_large_image.width+60}-->', '
<!--{$arrFile.main_large_image.height+80}-->'))" onmouseover="chgImg
('<!--{$TPL_DIR}-->img/products/b_expansion_on.gif','expansion01');"
onMouseOut="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion.gif','expansion01');">
<img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif"
 width="85" height="13" alt="画像を拡大する" name="expansion01" id="expansion01" />
</a>

を以下に書き換えます。 

<a href="<!--{$arrFile[$keyl].filepath}-->" rel="lightbox"
 onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion_on.gif','
expansion01');" onMouseOut="chgImg('<!--{$TPL_DIR}-->
img/products/b_expansion.gif','expansion01');">
<img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif"
 width="85" height="13" alt="画像を拡大する" name="expansion01" id="expansion01" />
</a>

data/Smarty/templates/default/site_frame.tpl

【修正箇所】

1,<head>と</head>の間に以下を追加。

<script type="text/javascript" src="<!--{$TPL_DIR}-->
lightbox/js/prototype.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->
lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->
lightbox/js/lightbox.js"></script>
<script>LightboxOptions.fileLoadingImage="<!--{$TPL_DIR}-->
lightbox/images/loading.gif"; </script>
<script>LightboxOptions.fileBottomNavCloseImage="<!--{$TPL_DIR}-->
lightbox/images/closelabel.gif"; </script>
<link rel="stylesheet" href="<!--{$TPL_DIR}-->
lightbox/css/lightbox.css" type="text/css" media="screen" />

cssハック　css hack　– スタイルシート —

CSS ハック

ブラウザごとの表示の違いを、ブラウザが持っている「バグ」を逆手に取って利用する方法。

CSSハックと呼ばれているもので、あくまでも応急処置的な意味で使う。

＊The W3C CSS Validationに通らないものもあります

IE6以下

スターハック

* html #contents { margin:0 0 0 10px; }

対応ブラウザ：IE4～6、MacIE4～5

セレクタの前に【* html 】を挿入

アンダースコアハック

#contents { _margin:0 0 0 10px; }

対応ブラウザ：IE4～6

プロパティ前に【_】アンダースコアを挿入

IE6のみ除外

#contents { color /**/:#000000; }

対応ブラウザ：IE7、IE8、Firefox、Safari、Opera

プロパティ後に【/**/】を挿入

IE7用

*:first-child+html #contents { margin:0 0 0 10px; }

対応ブラウザ：IE7

【*:first-child+html】を挿入

IE6/IE7共通

#contents {/margin:0 0 0 10px; }

対応ブラウザ：IE6、IE7

プロパティの前に【/】を挿入

—————————————————————————-

【追記】

IE8
*+html>/**/body ●●●
IE7
*:first-child+html ●●●

PHP redirect　phpリダイレクト方法

phpでのリダイレクト方法

——————————————————–

<?php
header(“Location: http://www.●●●.com”);
?>

——————————————————–

これだけ書いて拡張子をphpで保存。

blogを変更した際に使用しました。

以前のブログが「blog」ディレクトリの中のindex.phpがトップページ

だった為「blog」ディレクトリのindex.phpに

上記をコピペでサイトのトップへリダイレクトさせました。

＊検索でリンク切れになる為の対処です

サイトのルート変更　URL変更　トップディレクトリ変更

WordPress をサイトのルート変更するには

レンタルサーバー:ロリポップ

ロリポップのコントロールパネルの中の、wordpress簡単インストールでwordpressを

インストールすると、「wordpress」というフォルダが出来てしまいます。

http://www.●●.com/wordpress→http://www.●●.com/にする方法

サイトルートを変更する

ドキュメントルート(root)を変更させる手順

1.「管理画面」　→「設定」→「一般設定」で上図を変更します。

ブログのアドレスという所に、変更したいURLを記入します。
http://www.●●●.com/

「変更を保存」

2.wordpressのディレクトリ内の[index.php]をサイトのルートに設置する為

http://www.●●●.com/wordpressにある[index.php]を開く

3.[index.php]のファイル内を変更
require(‘./wp-blog-header.php’);　　↓

require(‘./wordpress/wp-blog-header.php’);
変更して保存する。
4.変更した[index.php]ファイルをhttp://www.●●●.com/に移動。

*設定にもよりますが、ロリポップの場合index.phpよりもindex.htmlの方を
優先して表示するのでhttp://www.●●●.com/にindex.htmlがある場合は削除します。