Web・デザインスクールホームページ作成講座レッスンノート wordpressを用いたホームページ制作:スマホで出てきてしまう右側余白の削除など

wordpressを用いたホームページ制作:スマホで出てきてしまう右側余白の削除など

ホームページ作成講座のレッスンノート

レッスンノートって?レッスンノートって?

引き続き、wordpressで構築した、鍼灸サロンのページのリニューアル作業を行いました。

まずトップページに新しく入れた画像に指定したコラムへのリンクが飛ばないということでコードを確認していきました。直前のstyle=の””が閉じていなかったことが原因でした。

さらに、リンク先のアドレスも異なっていたので、column.htmlからcolumn/に変更しました。

次に、スマホで見た場合に、トップページのコンテンツが右側にはみ出して、ページの表示も小さくなってしまっていた問題に取り組みました。
原因は、iframeで読み込んでいるしんきゅうコンパスのツールがPC版を同じく幅が大きくなっていたことでした。
新しく、携帯に表示する幅を指定した上で読み込み用のコードを出力してコピーして入れていきました。
やり方としては、front-page.phpで、それまで使っていたところを<div id="compass_pc”>でくくり、新しく入力した部分を<div id="compass_mb”>でくくった上で、以下のようにCSSを書くことでPCではモバイル用は表示しないようにしました。

#compass_mb {
display: none;
}

さらに、レスポンシブ:スマホ用に書くところで以下のようにCSSを書いていくことで、逆にPC用はスマホでは非表示、モバイル用を表示することができます。

#compass_pc {
display: none;
}

#compass_mb {
display: block;
}

さらに、お知らせのテキストが右側にはみ出している分、右側に余計な余白ができてしまっている状態でした。
marginやwidthなどを調整していきましたら、スクロールできるようにするCSSの影響からか幅を変えると左側の頭が切れてしまう、幅を広くすると今度は右側にはみ出るという状態でした。
ここは手動で改行を入れるなどしてはみ出ささないように対応していくことにしました。


次に、不妊治療など新規で追加したページでも右側に余白ができている

以下のようにすることで、ウィンドウ幅がずれて余計な余白をつくってしまうのを避けることができます。

#contents {
text-align:left;
overflow:hidden;
}
#contentstop {
overflow:hidden;
}


最後に今後の作業の確認をしてレッスンを終了いたしました。
このレッスンノートを書いたコーチ

自身の作品がグッドデザイン賞を受賞!実務・講師経験ともに豊富なので安心

自分で作る夢のマイホームページ作り講座
栗林賢 (ホームページ作成)

高田馬場・池袋・練馬・石神井公園・秋津・小手指・入間市・仏子・所沢・西武新宿

レッスンノート ページ先頭へ

ホームページ作成情報

サイタのホームページ作成講師がブログを通して、ホームページ作成情報を発信。更新情報のチェックはこちらから!

twitter

ホームページ作成の先生

@HomepageCyta