サイタ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を用いて議員さんのホームページ作りを進めていきました。 トップページ 主な政策 3ポイントとかあげられるといい 旧サイトにある情報で新サイトに入れられる情報を入れていく FACEBOOKを入れる ウィジェットがない Jetpackというプラグインを入れ...

引き続き、WORDPRESSを用いたサイト制作を進めていきました。 新しく作成した投稿編集用のユーザーでログインできない ということでその方法を再確認していきました。 まず別ユーザーでログインしていたらログアウトします。 ログイン画面はこれまでと同じです。 投稿編集用のユ...

引き続き、WORDPRESSを用いたホームページ作成の相談を進めていきました。 歯科クリニックのホームページでは依頼主の感想や要望を聞きながら相談していきました。 その他、いろいろと作成してきたホームページを見ながら、今後も運用を続けるもの、受け渡すもの、閉鎖するものなど検討してい...

引き続き、マッサージサロンのホームページの改善、現在、外部へ依頼しているマッサージサロンのページの内容や構成の検討、素材準備を進めていきました。 ・「予約」ボタンのリンク先の変更 ・各種フォームの自動送信/返信メールの宛先/送信元メールアドレスの変更 ・ホームページで使う画像...

引き続き、WORDPRESSを用いたホームページ作成・改善作業を進めていきました。 カテゴリー記事一覧の上にある「カテゴリー名の記事 *件」というのを非表示にする 外観ーChocolatの設定ー「アーカイブのページに投稿数の見出しを表示する」のチェックを外す 編集者用ユーザーの作...

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

ホームページ作成情報

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

twitter

ホームページ作成の先生

@HomepageCyta