カテゴリー別アーカイブ: HTML/CSS

良く使うTwitterウィジェットカスタマイズ

コメントをどうぞ

・ベースはダーク。
・ヘッダー/フッターなし。
・背景色なし。
・スクロールバーなし

<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が効かない

コメントをどうぞ

box-shadowを付けたいボックスの下の要素にbackgroundが入っているとbox-shadowが効かない･･･というか見えなくなってしまう。

↓の図でいうと、１番目のDIVは２番目のDIVのbackgroundがnoneなのでシャドウが効いてる。
２番目のDIVは３番目のDIVにbackgroundが入っているため効かなくなっている。
３番目のDIVは下に何もないので効いてる。

2014-06-23_011948

 

解決策

▼効かなくなってしまったボックスにこれをつける

div#box02{
	position:relative;
	z-index:2;
}

z-indexの値は適当に。

2014-06-23_012726

 

 

 

EC-CUBEでスマホ切り替えとかいらない場合

コメントをどうぞ

EC-CUBEはスマホでアクセスした場合自動でテンプレートがスマホ用に切り替わりますが、PCサイトをレスポンシブにしてたり、スマホでもPCサイトで見せたかったりする場合の対処方法。

【data/class/SC_Display.php】を編集

▼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。

 

 

iphone版Chromeだけクリッカブルマップがきかない

コメントをどうぞ

クリッカブルマップでareaをクリックしたらモーダルが開いて･･･てなページを作成し、 各機種で検証したところ、【iphoneのChrome】でのみ！動かない～～～！！！

iPhoneのSafariやAndroidのブラウザではうまくいっているし、PCのChromeでも問題ないのにっ！！

てなことがあり、解決したので残しとく。

ｊQueryの書き方とかいろいろ試したけど、結局原因は以下でした。

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にちゃんと幅と高さを入れるだけで解決
▼以下が正解コード

&lt;img src="/images/areamap.jpg" alt="クリッカブルマップ" usemap="#hoge" width="500" height="600"&gt;
&lt;map id="hoge" name="hoge"&gt;
  &lt;area shape="circle" coords="435,193,39" href="#" alt="りんご"&gt;
  &lt;area shape="circle" coords="369,296,38" href="#" alt="みかん"&gt;
  &lt;area shape="circle" coords="295,337,38" href="#" alt="いちご"&gt;
&lt;/map&gt;<map id="hoge" name="hoge">  </map>

これで解決です！