CSS対応-01

/* スマホはTABLEの上下・左右の隙間padding: 10px 15px;から狭める */
@media screen and (max-width:414px){ .post_content td, .post_content th {padding: 2px;}}

 

CSS対応-011

/* TablePressテーブルのデザイン 罫線の追加　隙間狭める*/
.tablepress td {background: #fff !important;border: 1px solid #bbb;text-align: center;padding: 2px;
vertical-align: middle;}
.tablepress th {border: 1px solid #bbb;background: #ddd !important;text-align: center;padding: 2px;
vertical-align: middle;font-weight: normal;}
.tablepress tbody td { vertical-align: middle; }
.tablepress thead th { border: 1px solid #ddd;}

 

CSS対応-02

/* スマホでは3列目を非表示にする */
@media only screen and (max-width: 767px) {table th:nth-child(3),table td:nth-child(3){display:none;}}

 

CSS対応-03

/* スマホの br は消去する */
@media only screen and (max-width: 500px){br{display: none;}}

 

CSS対応-04

・HTMLの記述

<p class="ind-1">◆ここに左カラムに表示させたい・・・・
<p class="ind-2">◆ここに左カラムに表示させたい・・・・
<p class="ind-3">◆ここに左カラムに表示させたい・・・・

・追加するCSS

/*インデント1em 調整*/
.post_content p.ind-1{text-indent:-1em;margin-left:1em;}

/*インデント2em 調整*/
.post_content p.ind-2{text-indent:-2em;margin-left:2em;}

/*インデント3em 調整*/
.post_content p.ind-3{text-indent:-3em;margin-left:3em;}

 

CSS対応-05

◇パソコンでギャラリー画像を横4枚並べる（デフォルトは横3枚）

/* ギャラリー画像　横に4枚並べるのが可能・画像間を8pxに広げる */
.gallery-item { float:left; margin:0 8px 40px 0; position:relative; min-width:148px; }
.gallery-columns-1 .gallery-item { max-width:100%; }
.gallery-columns-2 .gallery-item { max-width:46%; max-width:-webkit-calc(50% - 8px); max-width:calc(50% - 8px); }
.gallery-columns-3 .gallery-item
{ max-width:30%; max-width:-webkit-calc(33.3% - 8px); max-width:calc(33.3% - 8px); }
.gallery-columns-4 .gallery-item { max-width:21%; max-width:-webkit-calc(25% - 8px); max-width:calc(25% - 8px); }

/*スマホ用に画像横2枚並べる */
@media only screen and (max-width:414px){.gallery-item { margin:0 1% 4px; min-width: 48%; }}

 

---

◇横3枚画像をスマホで横2枚で並べる

/* ギャラリー画像の3カラム or 6カラム用　*/
/* パソコン用に画像を横3枚並べる */
.gallery-item {margin:0 1% 4px; min-width: 31%; }
/*スマホ用に画像横2枚並べる */
@media only screen and (max-width:414px){.gallery-item { margin:0 1% 4px; min-width: 48%; }}

 

CSS対応-06

 

/*スマホ用に画像横2枚並べる */
@media only screen and (max-width:414px){.gallery-item { margin:0 1% 4px; min-width: 48%; }}

 

CSS対応-07

ギャラリー画像でcolumns=”6″にする。

/*スマホ用に画像横2枚並べる */
@media only screen and (max-width:414px){.gallery-item { margin:0 1% 4px; min-width: 48%; }}

 

CSS対応-08

/*ギャラリー画像のキャプションの枠を写真の下に表示*/
.gallery-caption {background-color: transparent; color:#000000; line-height:1.0; margin:0px; max-height: 50%; opacity:0; padding: 3px 0 0; bottom:-14px;}
.gallery-caption {height: 18px; }
.post_content .wp-caption-text { font-size: 14px;}

 

CSS対応-09

<!-- YouTube動画 html -->
<div class="yyytube">
<div class="inner"><iframe src="https://www.youtube.com/embed/keUb8QtufHQ?rel=0" width="500" height="281" frameborder="0"></iframe>
</div>
</div>

/* YouTube動画レスポンシブ対応CSS */
.yyytube {width: 50%; /* パソコン横幅変更 */ padding: 0; box-sizing: border-box;}
.yyytube .inner {padding-top: 56.25%; position: relative; height: 0;overflow: hidden;} /* 56.25%は16:9の画面の場合で、4:3の画面では75%とする */
.yyytube .inner iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
@media only screen and (max-width: 767px) {.yyytube {width: 100%;}} /* スマホは100％ */

 

CSS対応-10-1

/* URLが長い場合に折り返す */
.post_content p{word-break: break-all;}

 

CSS対応-10-2

/* ソースコードが長い場合に折り返す */
code{word-wrap: break-word;overflow: auto;}

 

CSS対応-11

/* 1.縦スマホ用にギャラリー画像を横1枚にして、サイズは100％にする*/
@media screen and (max-width:414px) {.gallery-item {min-width:100%;}}

/* 2.縦スマホ用にギャラリー画像を横1枚にして、サイズは90％にして中央に置く*/
@media screen and (max-width:414px) {.gallery-item { min-width:90%; margin-left: 5%;margin-right: 5%;}}

 

CSS対応-12

/* ギャラリー画像のキャプションの枠を写真の下に表示 */
.gallery-caption {background-color: transparent; color:#000000; line-height:1.0; margin:0px; max-height: 50%; opacity:0; padding: 3px 0 0; bottom:-14px;}
.gallery-caption {height: 18px; }

/* キャプションを左寄せ、文字サイズの変更する */
.post_content .wp-caption-text { text-align: left; font-size: 14px;}

CSS対応-13

・テキストでの記載だが、簡単にできる。

【記述リスト html】


<dl>
<dt class="m">項目1</dt>
<dd class="m">説明1</dd>
<dt class="m">項目2</dt>
<dd class="m">説明2</dd>
<dt class="m">項目3</dt>
<dd class="m">説明3</dd>
</dl>


【記述リスト css 】

/* 記述リスト　スマホ以外は横に並べる 8emは全角8文字*/
@media only screen and (min-width: 500px){
dt.m {clear: left; float: left; width: 8em;line-height: 2;}
dd.m {margin: 0 0 0 8em;line-height: 2;}}
/* 記述リスト　スマホは縦に並べるcss */
@media only screen and (max-width: 499px){
.post_content dt.m{margin: 0;}
.post_content dd.m{margin-left: 1em; margin-top: 0;margin-bottom: 0;}}

注：項目幅の文字数に合わせ、８em(全角８文字)は変更すること。

CSS対応-12

/* ギャラリー画像のキャプションの枠を写真の下に表示 */
.gallery-caption {background-color: transparent; color:#000000; line-height:1.0; margin:0px; max-height: 50%; opacity:0; padding: 3px 0 0; bottom:-14px;}
.gallery-caption {height: 18px; }

/* キャプションを左寄せ、文字サイズの変更する */
.post_content .wp-caption-text { text-align: left; font-size: 14px;}

CSS対応-14

/* メディアの枠線と背景色をなくす */
.post_content .wp-caption {border: none ; background: transparent;}
.post_content .wp-caption-text { font-style: normal; }


 

CSS対応-15


/* タイトル文字の大きさを変更 デフォルトは32px*/
#post_title {font-size: 28px;}
/* タイトル文字を消す */
#post_title {display: none;}


 

記事がよければ「いいね！マーク」のクリックをお願いします