スマホでのみ改行したい
スマホは改行する、PC・タブレットは改行しない
<br class=”br-pc”>
@media screen and (min-width:768px) {.br-pc {display: none !important;}}
.br-pc {display: block;}
スマホとPCで画像を変える・消す
①スマホとpcで画像を変える CSS
/* PCで観ると”pc”のclassがついた画像が表示 */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマホで観ると”sp”のclassがついた画像が表示 */
@media only screen and (max-width: 768px)
.pc { display: none !important; }
.sp { display: block !important; }
②スマホとpcで画像を変える HTML
<Img class=”pc” src=”../img/forPc.png” alt=”PC用の画像”>
<Img class=”sp” src=”../img/forSp.png” alt=”スマホ用の画像”>
ビルダーの場合
同一のページにPC用一行とスマホ用一行の画像をレイアウトする
PC用の行の編集
属性
セルのクラスに pc と入力
終了
スマホ用の行の編集
属性
セルのクラスに sp と入力
終了
更新
ビルダーの場合CSS
/* PC表示 */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマホ表示 */
@media only screen and (max-width: 480px)
.pc { display: none !important; }
.sp { display: block !important; }
/* タブレット表示 */
@media only screen and (max-width: 896px) and (orientation: landscape)
.pc { Display: none !important;
.sp { Display: block !important;
@media only screen and (max-width: 896px) and (min-width: 481px) and (orientation: portrait)
.pc {Display: none !important;
.sp {Display: block !important;
/*ギャラリー画像の線消す*/
#gallery-1 img
border: none !important;
画像ウィジェットの場合
上級者向け設定
画像 CSS クラスにsp又はpcと入力でよい
テキストで入力する場合は（HTML）
PC用
<p><Img class=”pc aligncenter” src=”https://mb0073-osaka.com/wp-content/uploads/2021/04/543d0cf5d43c4c9f01b2015151827a58.png” alt=”” width=”1297″ height=”545″ /></p>
スマホ用
<p><Img class=”sp aligncenter” src=”https://mb0073-osaka.com/wp-content/uploads/2021/04/zz.png” alt=”” width=”653″ height=”812″ /></p>
CSS
ビルダーと同じ
/* PC表示 */
.pc { display: block !important;
.sp { display: none !important;
/* スマホ表示 */
@media only screen and (max-width: 480px)
.pc { display: none !important;
.sp { display: block !important;
/* タブレット表示 */
@media only screen and (max-width: 896px) and (orientation: landscape)
.pc { Display: block !important;
.sp { display: none !important;
スマホ表示で表を左右一杯にする
@media only screen and (max-width: 768px){figure {margin: 0;}}
/* スマホのみ適応*/
@media screen and (max-width: 768px) {
.site-title a img {
max-width: 265px;
又は
@media screen and (max-width: 480px) {
• width=device-width：端末画面の幅に合わせる
• initial-scale：初期のズーム倍率
• minimum-scale：最小倍率
• maximum-scale：最大倍率
user-scalable：ズームの操作（yes or no）
/*タブレットのみ適応*/
@media only screen and (min-width: 481px) and (max-width: 1024px) {
.site-title a img {
max-width: 400px;
/*パソコンのみ適応*/
@media only screen and (min-width: 769px){ }
または
@media only screen and (min-width: 481px){ }