サイタWeb・デザインスクールホームページ作成講座 東京 自分で作る夢のマイホームページ作り講座 レッスンノート WORDPRESSを用いたホームページ作成:レスポンシブでモバイル用ページのレイアウト調整

WORDPRESSを用いたホームページ作成:レスポンシブでモバイル用ページのレイアウト調整

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

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

まず、これまで作成してきたお客様のページのスマホ版の調整作業を行っていきました。

「美容鍼灸サロン ヴィクトワール お客様の声・口コミ」という見出しが折り返して2行にわたっているので、下線の位置を2行目の下に来るようにタイトル領域の高さを設定して調整しました。

#contents h2.page_title {
height: 50px;
}

それぞれの感想のタイトルは、背景画像を表示しているため、タイトルが長くて折り返すと背景画像の外にはみ出してしまっていました。背景画像を縦方向に繰り返せば広げられますが、アイコンも一緒に出てしまうので、簡単にまとめる方法として、タイトルのフォントを小さくして上限文字数を決めて作成していくことにしました。
文字間隔を0にして詰めて、太字で表示するかたちへと変更しました。

#contents .voicecontents .block1 h3.h3_title {
font-size: 14px;
letter-spacing: 0;
font-weight: 700;
}

次に、受けたコースや気になるところの内容が長いと中途半端なところで折り返して読みにくかったので修正していきました。
PC版では項目と表示内容の間にスペースを入れて調整しているかたちでしたので、スマホの場合はこのスペースを少なくして見やすくしました。

<div id="voice_2">
<p class="underline">日付: <?php echo $date; ?></p>

<p class="underline">お名前:<?php echo $name; ?></p>
<p class="underline">年代: <?php echo $age; ?></p>
<p class="underline">受けたコース:<?php echo $sejyutu; ?></p>
<p class="underline">気になるところ・症状:<?php echo $kininaru; ?></p>
</div>

次に、直筆の感想の写真を満足度画像の横に移動しました。

<div id="manzoku">
<?php
if($manzoku==5){
echo'<img src="http://lavictoire.jp/wp/wp-content/uploads/2016/04/manzoku5-e1464030861427.png"/>';
}else if($manzoku==4){
echo'<img src="http://lavictoire.jp/wp/wp-content/uploads/2016/04/manzoku4-e1464030873716.png"/>';
}else if($manzoku==3){
echo'<img src="http://lavictoire.jp/wp/wp-content/uploads/2016/04/manzoku3-e1464030848567.png"/>';
}else if($manzoku==2){
echo'<img src="http://lavictoire.jp/wp/wp-content/uploads/2016/04/manzoku2-e1464030769892.png"/>';
}else if($manzoku==1){
echo'<img src="http://lavictoire.jp/wp/wp-content/uploads/2016/04/manzoku1-e1464030746665.png"/>';
}
?>
</div>

<div id="voice_5">
<a href="<?php echo $jikihitsu[0]; ?>"><img src="<?php echo $jikihitsu[0]; ?>" width="150" height="150" class="alignnone size-thumbnail wp-image-2070" /></a>
</div>

まきちゃんのイラスト画像は消去しました。
voice-mbの中の以下のコードを削除すること消去できます。

<div id="voice_6">
<img src="http://lavictoire.jp/wp/wp-content/uploads/2015/07/maki1-300x274.png" alt="maki1" width="60" height="55" class="alignleft size-medium wp-image-818" />
</div>

次に、モバイル版のページで本来はリンクが貼られないはずのページ上の説明文にもリンクが貼られちゃっている問題の原因を調べていきました。
問題箇所を把握するために部分的にコードを削除してリンクが貼られないようになるか確認していきました。
PC版のコードを削除したところ、モバイル版の説明文にリンクが貼られないようになりました。
そのコードを細かくみていったところ、ある部分の””が閉じていない箇所があったので閉じたところリンクが貼られないようになりました。

次にトップページのスライドショーにリンクを設定しようとすると表示されなくなってしまうという問題を調べていきました。
試しにこちらでもリンクを貼ってみたところ、同じように表示されなくなりました。
このスライドショーがどういう方法で動かしているか、もともとの作成した方からの情報がないということで、調べていきました。lightbox.jsが入っているところからこれを使っていそうでした。
lightboxを利用したスライドショーの事例ではスライドにリンクを設定しているものもあったので、実現はできそうでしたが、さらに調査が必要そうでした。
別の方法も含めてスライドショーにリンクを貼るテストをして、作り直した方が早そうということで、後日その作業を行うことにしました。
このレッスンノートを書いたコーチ

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

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

新着レッスンノート

引き続き、WORDPRESSを用いたホームページ作成を進めていきました。 投稿者の追加の方法と手順を再確認していきました。 必ず入力する必要があるのは「ユーザー名」と「メールアドレス」です。 ユーザー権限を「購読者」から「投稿者」へと変更する必要があります。 マニュアルにも追記...

引き続き、WORDPRESSを用いたホームページ作製を進めていきました。 最終更新日と投稿者名を消す カスタマイズーLightningデザイン設定 「投稿詳細ページで最終更新日を表示しない」 「投稿詳細ページで投稿者名を表示しない」 をチェックする。 サイト公開 ht...

引き続き、WORDPRESSで作成したホームページの作成・運営を進めていきました。 前回から ユーザー新規作成した パスワードを自己設定した とのことで、ちゃんとできているか確認していきました。 指定したのではなく自動設定されたパスワードになっているかもということでしたが、 ...

引き続き、WORDPRESSを用いたホームページ作成していきました。 歯科クリニックのホームページでサイトタイトルとグローバルメニューが重なっていたので位置調整を行いました CSSで配置や余白を調整 .pc .home.page #global_menu > ul{margin-...

他の方が登録投稿できるように WORDPRESSユーザー登録&投稿の仕方マニュアル作成をしました。 管理者による登録後、登録したアドレスにメールが届きます。 届いたメールを確認します。 メールの「パスワード設定するには以下のアドレスへ移動してください」の下のURLをクリッ...

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

ホームページ作成情報

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

twitter

ホームページ作成の先生

@HomepageCyta