サイタ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;
}


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

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

目的・種類別にホームページ作成・作り方講座を探す

新着レッスンノート

前回、相談していたレンタルスペースのホームページ作成について引き続き相談していきました。 どういう場所にしていきたいか ターゲットはどんな人か/どんな人にどういうふうに使って欲しいか どんな想いでその場所をやりたいのか 支援したい/助けたいとしたら、どんな人にどんなサポートをし...

これまで作成してきた WORDPRESSを用いたホームページの追加作成など行っていきました。 ・サイドバーにカテゴリーから観るを追加する方法 ダッシュボードー外観ーウィジェット 利用できるウィジェットの中に「カテゴリー」があるのでサイドバーに追加 投稿数を表示をチェック ...

前回、相談していたレンタルスペースのホームページ作成について引き続き相談していきました。 状況も変わっているということでヒアリングしていきました。 支援したい相手がどうしたいのか このスペースを通して 誰の何を助けたいか コロナ後の事業やサービスとして 「オンライン...

まず、管理者以外の場合、作成しているログイン画面が出ないとのことで、確認していきました。 すでに管理者としてログインしていた可能性がありました。 カテゴリーの追加方法 ダッシュボードにて投稿ーカテゴリー新規追加 カテゴリーの新規追加は管理者で行う必要があります。 ...

今回は、集客に困っている飲食店についてのウェブや広報の相談をしていきました。 実店舗があって、既存のお客さん/ファンがいるけど、実店舗に行きたいけどいきづらい場合、オンラインで購入してもらえるようにするのが効果的 新しい集客をする場合は、ブログを書いた方がいいけど、書き続けられるか...

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

ホームページ作成情報

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

twitter

ホームページ作成の先生

@HomepageCyta