それは、Doctype宣言。
<!DOCTYPE HTML>
これが抜けているだけでtdにdisplay:blockが効かなかったり、他いろいろ不具合が出ちゃいます。。
書きましょう。
<!DOCTYPE HTML>
これが抜けているだけでtdにdisplay:blockが効かなかったり、他いろいろ不具合が出ちゃいます。。
書きましょう。
・ベースはダーク。
・ヘッダー/フッターなし。
・背景色なし。
・スクロールバーなし
<a class="twitter-timeline" data-theme="dark" data-dnt="true" href="https://twitter.com/sampledesuyo" data-widget-id="365155945216614402" data-chrome="noheader nofooter transparent noscrollbar"data-link-color="#CCCCCC">@サンプルですよ からのツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
使うときは↑をコピペして、
href="https://twitter.com/sampledesuyo" data-widget-id="365155945216614402"
の部分を自分のに変更する。
▼実際の表示(親divに背景色#333指定)
幅と高さはスタイルシートで。
iframe{ width:100% !important ; height:200px !important; }
box-shadowを付けたいボックスの下の要素にbackgroundが入っているとbox-shadowが効かない・・・というか見えなくなってしまう。
↓の図でいうと、1番目のDIVは2番目のDIVのbackgroundがnoneなのでシャドウが効いてる。
2番目のDIVは3番目のDIVにbackgroundが入っているため効かなくなっている。
3番目のDIVは下に何もないので効いてる。
▼効かなくなってしまったボックスにこれをつける
div#box02{ position:relative; z-index:2; }
z-indexの値は適当に。
EC-CUBEはスマホでアクセスした場合自動でテンプレートがスマホ用に切り替わりますが、PCサイトをレスポンシブにしてたり、スマホでもPCサイトで見せたかったりする場合の対処方法。
▼140行目あたり
/** * 端末種別を判別する。 * * SC_Display::MOBILE = ガラケー = 1 * SC_Display::SMARTPHONE = スマホ = 2 * SC_Display::PC = PC = 10 * * @static * @param $reset boolean * @return integer 端末種別ID */ public static function detectDevice($reset = FALSE) { if (is_null(SC_Display_Ex::$device) || $reset) { $nu = new Net_UserAgent_Mobile(); $su = new SC_SmartphoneUserAgent_Ex(); if ($nu->isMobile()) { SC_Display_Ex::$device = DEVICE_TYPE_MOBILE; } elseif ($su->isSmartphone()) { SC_Display_Ex::$device = DEVICE_TYPE_SMARTPHONE; } else { SC_Display_Ex::$device = DEVICE_TYPE_PC; } }
↑ここで振り分けが行われているので、全部PC版で見せるなら
▼こんな感じにいらない部分をコメントアウト(//)しちゃう。
/** * 端末種別を判別する。 * * SC_Display::MOBILE = ガラケー = 1 * SC_Display::SMARTPHONE = スマホ = 2 * SC_Display::PC = PC = 10 * * @static * @param $reset boolean * @return integer 端末種別ID */ public static function detectDevice($reset = FALSE) { if (is_null(SC_Display_Ex::$device) || $reset) { $nu = new Net_UserAgent_Mobile(); $su = new SC_SmartphoneUserAgent_Ex(); // if ($nu->isMobile()) { // SC_Display_Ex::$device = DEVICE_TYPE_MOBILE; // } elseif ($su->isSmartphone()) { // SC_Display_Ex::$device = DEVICE_TYPE_SMARTPHONE; // } else { SC_Display_Ex::$device = DEVICE_TYPE_PC; // } }
これでOK。
プラグインの紹介
クリッカブルマップをレスポンシブでも使えるjQueryプラグイン
デモ⇒http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
クリッカブルマップでareaをクリックしたらモーダルが開いて・・・てなページを作成し、 各機種で検証したところ、【iphoneのChrome】でのみ!動かない~~~!!!
iPhoneのSafariやAndroidのブラウザではうまくいっているし、PCのChromeでも問題ないのにっ!!
てなことがあり、解決したので残しとく。
jQueryの書き方とかいろいろ試したけど、結局原因は以下でした。
imgに幅と高さが指定されていない
これだけでした。
レスポンシブでCSSで幅を100%とかにしているため、画像自体には特に幅・高さを入れなかったのが原因。
▼以下がダメコード
<img alt="クリッカブルマップ" src="/images/areamap.jpg" usemap="#hoge" /> <map id="hoge" name="hoge"> <area alt="りんご" coords="435,193,39" shape="circle" href="#" /> <area alt="みかん" coords="369,296,38" shape="circle" href="#" /> <area alt="いちご" coords="295,337,38" shape="circle" href="#" /> </map>
それがimgにちゃんと幅と高さを入れるだけで解決
▼以下が正解コード
<img src="/images/areamap.jpg" alt="クリッカブルマップ" usemap="#hoge" width="500" height="600"> <map id="hoge" name="hoge"> <area shape="circle" coords="435,193,39" href="#" alt="りんご"> <area shape="circle" coords="369,296,38" href="#" alt="みかん"> <area shape="circle" coords="295,337,38" href="#" alt="いちご"> </map><map id="hoge" name="hoge"> </map>
これで解決です!