【ヘッダー】
・functions.php で、ヘッダーウイジェットエリア(ヘッダー右ウィジェット)を追加し、TEL と お問い合わせボタン を設置
当初、only_pc と only_mb で、表示・非表示を設定していた(PCでのみ、ウィジェットを表示)
→ タブレットでは表示させたい → タブレットのサイズにより「お問い合わせボタン」が切れてしまう
→ サイズにより表示情報を変更するCSSを設置
スマホ〜タブレット小 (W = 767px 以下) 両方非表示
タブレット (W = 768px 〜 1099px) TEL のみ表示
それ以上 (W = 1100px 以上) 両方表示
【トップページ】
心理学の視点 ✕ 教育の視点
心理学の視点BoxにIDを設置(strength-left) 、教育の視点BoxにIDを設置(strength-right)
W = 780px までは、上下に分かれて表示される(テーマの表示サイズによる自動振り分け)
W = 781px 〜 1199px は、中央側のマージンを-70oxとし、中央の隙間を調整。
W = 1200px 〜 は、中央(-130px)だけでなく外側のマージンも 100px 縮める。
✕ のサイズの変更
only_pc クラスと only_mbクラスで、サイズを切り替えていたが、テーマでの「PC.スマホ・タブレット」の切り替えサイズと合致しておらず、縦組み_横組みの切り替わるサイズタイミングに併せて、とりあえずpc1 mb1 の2つのクラスを設定した
町田校の特徴
当初、3列のブロックを2段設置し、PCでは3列スマホでは1列で表示されていた。
→ タブレットだと、サイズにより2列表示になり、2段めの第一ブロック(4番目のブロック)が、繰り上がらず表示がずれるため修正。
→ 当初の3列2段のブロックを、タブレットサイズ(sm md サイズ)を非表示にし、
このサイズのみ表示させる 2列3段ブロックを作成した。