レスポンシブ対応

 

 

YouTube 動画

 

YouTube の iframe ソースを <div class="youtube"> ～ </div> で囲んでください。 画面横幅959px以下からレスポンシブ対応になります。

 

入力例

 

ボタン登録もしています。

  • 新エディタ：クラシックブロック：ビジュアル [ スタイル 2 ＞ その他 ] から選択
  • 旧エディタ：ビジュアル [ スタイル 2 ＞ その他 ] から選択
  • 旧エディタ：テキスト　 [ YouTube ]

 

 

GoogleMap

 

GoogleMap の iframe ソースを <div class="googlemap"> ～ </div> で囲んでください。 画面横幅959px以下からレスポンシブ対応になります。

 

入力例

 

ボタン登録もしています。

  • 新エディタ：クラシックブロック：ビジュアル [ スタイル 2 ＞ その他 ] から選択
  • 旧エディタ：ビジュアル [ スタイル 2 ＞ その他 ] から選択
  • 旧エディタ：テキスト　 [ GoogleMap ]

 

 

その他 iframe

 

スマホではみ出る iframe は <div class="adjust-iframe">～</div> で囲んでください。 画面横幅959px以下からレスポンシブ対応になります。

 

ですが、縦幅の自動調整はできないため、crolling="no" のときは下部分が切れて表示される場合があります。scrolling="auto" に変更すると iframe をスクロールできるようになる場合があります。必要に応じて変更してください。但し、ブラウザによってはスクロールできない場合もあります。

 

入力例

 

ボタン登録もしています。

  • 新エディタ：クラシックブロック：ビジュアル [ スタイル 2 ＞ その他 ] から選択
  • 旧エディタ：ビジュアル [ スタイル 2 ＞ その他 ] から選択
  • 旧エディタ：テキスト　 [ iframe ]

 

 

 

 

CSS 関連

 

 

記事内の画像を影付き・角丸にする

 

.article-body img,.page-body img{
box-shadow:2px 2px 6px #aaa;
border-radius: 6px;
}

 

→　CSS 追加方法

 

 

記事下のカテゴリー・タグ背景帯の色を変更する

 

 

.afttl{
background:#ff6347;
color:#ffffff;
}

 

※ #ff6347 がカラーコードです。お好みで変更してください

※ 白文字にしないときは color:#ffffff; を削除してください

→　CSS 追加方法

 

 

記事装飾パーツを組み合わせてランキングを作る

 

サンプルソース



第１位


商品タイトル

<p>&nbsp;</p>







商品説明文


<p>&nbsp;</p>




説明1テキストテキスト


説明2テキストテキスト




<p>&nbsp;</p>

詳細はこちらから

 

表示例

第１位

カエテンWP-JOY ワードプレステーマ

 

カエテンWP-JOY(ジョイ)はサイト構築とデザインの多彩なカスタマイズが簡単にできるワードプレステーマテンプレートです。内部SEO・閲覧者のユーザビリティ対策済み・分かりやすいテーマ設定マニュアルを完備・レスポンシブデザイン対応。

 

商品内容WordPressテーマテンプレート
ダウンロード版専用サイトよりテンプレートをダウンロードいただきます

 

詳細はこちらから

 

 

 

 

テーブルタグ関連

 

 

テーブルに入れた URL がスマホではみ出るとき

 

CSS の専門的な話になりますが、<table> 内では URL などの長い英数文字列は word-wrap:break-word; の折り返しが効きません。そのため表が横長になりスマホ等ではみ出るときがあります。はみ出るときは URLを <span class="break-all"> ～ </span> で囲んでください。

 

http://aaaaa.com

 

 

テーブルを横スクロールさせる

 

table は表内の文字が多いと縦長の表になりスペースを取りますのでコンパクトに表示したいときにお試しください。CSS の メディアクエリでレスポンシブ時 ( スマホ等 ) だけに適用させることもできます。

 

【 1 】次の CSS を追加してください

 

全デバイスで適用する場合

.table-scroll{overflow:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}

 

レスポンシブ時 ( 画面横幅 799 px 以下のスマホ等 ) で適用する場合

@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> で囲んでください


table の記述