[taki]

キタジマさん

お世話になっております。

object-fitで画面いっぱいに全体を表示することができました。

背景画像に色々と付け加えたい場合はカスタムHTMLブロックになるのですね。

勉強になりました。

 

説明不足なところもあり、申し訳ございませんでした。

回答いただきありがとうございました。

♥ 0

いいねをした人: 居ません

[taki]

まーちゅうさん、キタジマさん、ご教示いただきありがとうございます。

あれから試してみて、タブレットはなんとか枠内に見せたい部分は収まったのですが、スマホがどうしても画面に収まりきらない状態です。

セクション（背景）に「top-image」をつけて、cssで「top-image」「top-image img」とで「background-size: cover;」、繰り返し設定にはしていないのですが「background-size: contain;」で試しましたが変わらずでした。

今回のはトップ画像になるのですが、スマホ版で背景画像が縮小されないのは当てているクラスが違っているのでしょうか。

ご教示いただいた内容で追加cssを下記のように記載しましたが、縮小できませんでした。↓↓

/*タブレット*/
@media screen and (max-width:999px){
  /*トップイメージ*/
  .top-image {
    width:100%;
    height:90vh;
    background-size:cover;
  }
}

/*スマホ*/
@media screen and (max-width:599px){
  /*トップイメージ*/
  .top-image {
    width:100%;
    height:auto;
    background-size:cover;
  }
}

♥ 0

いいねをした人: 居ません

[taki]

①Gutenberg(9.8.2) の停止

→　Gutenberg(9.8.2)を停止しましたら、文字サイズのエディターが反映されるようになりました。

 

② WORK1 に文字サイズを設定してページを保存

文字サイズを別途追加cssで指定して書くということでしょうか？

追加cssで指定した場合はサイズを変更することができました。

 

今回、なぜプラグインのエディターで文字サイズのみ反映することができなかったのかが疑問になっておりました。（その他色の変更やアンダーラインなどの装飾はできました。）

snowmonkey含めWordPressのカスタマイズ自体を触るのが初めてだった為、様々なサイトで調べてカスタマイズするにあたってGutenberg(9.8.2)をインストールいたしました。

こちらが原因だったのですね。

 

お忙しいところ、丁寧にご教示いただきありがとうございます。

♥ 0

いいねをした人: 居ません

[taki]

説明が伝わりにくく申し訳ございません。

 

下記画像のように「WORK1」にあてた場合、色やアンダーラインなどのエディター機能は反映されるのですが、文字サイズだけ、「大」「超特大」など変更しても反映されないということです。

同様に下記画像の「会社概要」「採用情報」の文字もサイズを選択しても反映されない状況となっております。

現在導入しているプラグインはGutenberg(9.8.2)、Snow Monkey Blocks(10.2.1)、Snow Monkey Editor(4.0.1)のみとなります。

よろしくお願いします。

♥ 0

いいねをした人: 居ません

[taki]

ご返信ありがとうございます。

度々すみません。

エディターで選択する時は「大中小」などの選択肢から、カスタムする際でも数字のみを入れてもこのような事象はおこりますでしょうか？

また、外観→カスタマイズで、追加のcss、基本のページ設定を見直したのですが、pxpxとなっている

pxと重複設定している部分が見当たらず、どの場所で修正が可能でしょうか。

♥ 0

いいねをした人: 居ません

[taki]

SnowMonkey

WEB系コンシェルジュ

pepelog.com

 

こちらになります。ネットでデモサイトの公開、書き方のご教示をいただいている方のを模写しておりました。

・WORKS内「WORK1」「WORK2」

・ABOUT内画像タイトル

が、文字サイズを大きくする指定をする所が反映されないです。

♥ 0

いいねをした人: 居ません

[投稿者]

投稿