レスポンシブ対応
YouTube 動画
YouTube の iframe ソースを <div class="youtube"> ～ </div> で囲んでください。
画面横幅959px以下からレスポンシブ対応になります。
入力例
|
1 2 3 |
<div class="youtube"> <iframe width="560" height="315" src="https://www.youtube.com/embed/tdGmx-UpJTs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> |
ボタン登録もしています。
- 新エディタ：クラシックブロック：ビジュアル [ スタイル 2 ＞ その他 ] から選択
- 旧エディタ：ビジュアル [ スタイル 2 ＞ その他 ] から選択
- 旧エディタ：テキスト [ YouTube ]
GoogleMap
GoogleMap の iframe ソースを <div class="googlemap"> ～ </div> で囲んでください。
画面横幅959px以下からレスポンシブ対応になります。
入力例
|
1 2 3 |
<div class="googlemap"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7477985333117!2d139.74324421557395!3d35.65858483882048!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1525821855924" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div> |
ボタン登録もしています。
- 新エディタ：クラシックブロック：ビジュアル [ スタイル 2 ＞ その他 ] から選択
- 旧エディタ：ビジュアル [ スタイル 2 ＞ その他 ] から選択
- 旧エディタ：テキスト [ GoogleMap ]
その他 iframe
スマホではみ出る iframe は <div class="adjust-iframe"> ～ </div> で囲んでください。
画面横幅959px以下からレスポンシブ対応になります。
- 右側が切れて表示されます
- 横スクロールさせるときは
scrolling="no"→scrolling="auto"に変更してください - ソースによっては横スクロールできない場合があります
- ソースによっては下側が切れて表示される場合があります
入力例
|
1 2 3 |
<div class="adjust-iframe"> <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2F20531316728%2Fposts%2F10154009990506729%2F&width=500&show_text=true&height=290&appId" width="500" height="290" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> </div> |
ボタン登録もしています。
- 新エディタ：クラシックブロック：ビジュアル [ スタイル 2 ＞ その他 ] から選択
- 旧エディタ：ビジュアル [ スタイル 2 ＞ その他 ] から選択
- 旧エディタ：テキスト [ iframe ]
CSS 関連
記事内の画像を影付き・角丸にする
|
1 2 |
/*記事内の画像を影付き・角丸*/ .post-body img{box-shadow:2px 2px 6px #aaa;border-radius:4px;} |
→ CSS 追加方法
リンク画像ホバー時のエフェクト
サンプル
リンク画像をホバーしたときに画像が明るくなるエフェクトです。
但し、ASPによっては 広告ソースの加工と見なされ規約違反になる 場合もありますので 自己責任 で規約を確認した上で設定してください。当方は一切の責任を負いません。
|
1 2 3 4 |
/*リンク画像エフェクト*/ a img{transition:opacity .5s;} a:hover img{opacity:.5;} .postnav a:hover img,.card a:hover img,.kpp a:hover img{opacity:1} |
→ CSS 追加方法
記事装飾パーツを組み合わせてランキングを作る
サンプルソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div class="box-03"> <div class="flexbox2 items-center h3-07-black"> <div class="badge b-red">第<span class="font26">１</span>位</div> <div class="flex-1 center"> <p class="bold font26">商品タイトル</p> <p class="bold">キャッチフレーズテキスト</p> </div> </div> <p> </p> <div class="imgl2"> <img src="画像URL" alt="" /> </div> <div class="clear"> 商品説明文 </div> <p> </p> <table class="table-01 margin-auto width-full"> <tbody> <tr><th>説明1</th><td>テキストテキスト</td></tr> <tr><th>説明2</th><td>テキストテキスト</td></tr> </tbody> </table> <p> </p> <div class="kbtn-navy"><a class="grada radius-4px width-full" ref="http://aaa.com" target="_blank">商品の詳細はこちらから</a></div> </div> |
表示例
| 商品内容 | WordPressテーマテンプレート |
|---|---|
| ダウンロード版 | 専用サイトよりテンプレートをダウンロードいただきます |
テーブルタグ関連
テーブルに入れた URL がはみ出るとき
テーブル内では URL などの長い英数文字は word-wrap:break-word; の折り返しが効きません。そのため表が横長になりはみ出るときがあります。
はみ出るときは URLを <span class="break-all"> ～ </span> で囲んでください。
|
1 |
<span class="break-all"><a href="http://aaaaa.com">http://aaaaa.com</a></span> |
テーブルを横スクロールさせる
テーブルは表内の文字が多いと縦長になり場所を取りますのでコンパクトに表示したいときにお試しください。レスポンシブ時 ( スマホ等 ) だけに適用させることもできます。
【 1 】次の CSS を追加してください
全デバイスで適用する場合
|
1 2 |
/*テーブル横スクロール*/ .table-scroll{overflow:auto;white-space:nowrap;-webkit-overflow-scrolling:touch} |
レスポンシブ時 ( 画面横幅 799 px 以下のスマホ等 ) で適用する場合
|
1 2 3 4 |
/*テーブル横スクロール*/ @media screen and (max-width:799px){ .table-scroll{overflow:auto;white-space:nowrap;-webkit-overflow-scrolling:touch} } |
→ CSS 追加方法
【 2 】table ソースを <div class="table-scroll"> ～ </div> で囲んでください
|
1 2 3 |
<div class="table-scroll"> table ソース </div> |