6月9日:WP修正、レスポンシブ対応、その他修正
昨日ブログページの画像がレスポンシブ画面に対応できていなかったが、先生のアドバイスで、参考サイトを教えて頂いた。
【レスポンシブ】PCとスマホで違う画像に切り替える方法!CSSだけで簡単画像切り替え! | FASTCODING BLOG
これをCSSに記述したら一発で解消した。
またheaderのメタタグにview pointは記載されているのを確認。
その他画面を確認していると文字が横いっぱいまで広がってい他ので、スペースを作る為修正。フロント・メニュー・カタログ・フッターをスマホ画面を見ながら確認して修正。
フロントページのみスマホ画面で上から下まで右に白い空白スペースができていたのでタグを確認したが何が作用して空白スペースを生み出しているか不明。他のページは右側にスペース無し。
オーナーとの相談でトップ画像3枚目がやっと決まった。
何枚かのうち選んでもらってこれで決定。
6月8日:WP修正/ブログページ・レスポンシブ画面対応
・ブログページ修正
サイドバーの位置が右に来ない原因が判明
検証で見てみると、
blog-innerの上にphp関数が書かれていた為、この箇所が繰り返しになっていて、その流れで、本来ブログ部分とサイドバー部分が兄弟関係になっているのが、親子関係になってしまっていた。
これを下のように変更
やっと解明できた。
・レスポンシブの対応修正
レスポンシブサイズにして修正後、パソコンサイズにするとずれていた件
これを修正する為に、コメントの白の枠にマージン左右autoをつけてみると思った通りに修正できた。
ブログ画面をレスポンシブ画面にしたら画像が小さくならない。
サイトで調べてみるとレスポンシブ対応できると言うことでCSSに書き込み
これでできると思って確認したところ画像は小さくなったがヘッダーも小さくなった。
???
なかなかうまくいかないなー。
6月7日:WP:メニューページ訂正・レスポンシブデザインを訂正
メニューページの訂正。
全ての項目をカラムで割っていい感じに訂正できた。
レスポンシブデザインの修正
携帯からサイトを確認し、ずれているところを修正。
レスポンシブ画面で投稿メッセージ箇所が背景からはみ出していたので修正すると、パソコン画面でズレる。
ここはうまく修正できない。
このお知らせの欄は真ん中にできた。
スタイリストの紹介文が全体的に広がって、端の部分が切れていたので、paddingを使って訂正。
6月6日:授業日/WP/バックアップ・サーバーにアップ・インストール、通販サイトBASE
・WPのバックアップを取る
教材に載っているプラグインDuplicaterをダウンロード→有効化。
createnew→
Nameにバックアップファイル名を入力します。ファイル名には日付や目的などを記載→
Next→
チェックボックスにチェックを入れて→
Build→
「Installer」(installer.php
)(インストールするソフト)と「Archive」(Zipファイル)(記録保管)がサーバー上に生成→
両方クリックしてダウンロード→
WordPressのuploads
ディレクトリに、日付をつけたディレクトリを作成し、ファイルをまとめて保存。
・サーバーにアップ
エックスサーバーでSHH設定で公開鍵作成、パスワードは忘れる場合があるので、忘れるようなら入力なし。ダウンロードしたファイルをファインダーで表示。
鍵を大事なところに置くため、新規フォルダを作成ccommand+shift+ . で隠しファイル作成してそこにキーを移動。
・SHHキーをサイバーダックへ入力して通信設定。
SFTP通信を選んで、ユーザー名を入力、ポートは10022番、SSHキーを入力。
・エックスサーバーにてWP簡単インストール
1ユーザー名Gmail
2パスワード
3メールアドレスGmail
を入力インストール
緑のWP初期画面が出てきたら成功。
ドメインにインストーラーを置く。サイバーダックのデータpublic htmL欄にアーカイブとインストーラーをファインダーからドラッグして移動
URLの欄にcherimo.net/installer.phpと入力。
ステップ1〜4まで進めていき
今の表示している画面をオーバーライド(上書き)する。
ローカルに入るときと同じでwpに入る。
修正などはまずlocalで修正して確認してサーバーにアップしたら本番公開。
※今後の注意点
ローカルを初期設定でWP始める時にWPEmailを自分のEmaiで設定しとかないと後でめんどくさい。
AOSがちゃんとうごかいない件について
何かわからないコードが原因かもしれない。調べて不要なら消す。
取扱商品の販売サイトを作るには
アップされたサイトを携帯で見てみたが思ったよりずれていた。無念。
6月5日:WP/メニューページ・スタイルページ・スタイリストページ作成
メニューページを店のメニューに合わせて完成
スタイルページ作成、まだ画像がないのでこれは未だ未完成
スタイリストページ
あとはこのページのみできたらほぼ一応ページは揃う。
枠組みだけfrontpageからコピーしてこれから作成。
6月4日:cherimoのオーナーと打ち合わせ
サイトについて要望のヒアリング、してもらいたいこと、ページ構成などについて相談。
トップページのメルマガ登録欄については他店サイトのようにレビューを載せることで決定。
取扱商品欄を作ってもらいたいとのことで後々制作で決定。
サイトの文章は早めに考えてくれるとのこと。
styleページの写真は新しく撮りたいみたいだが、とりあえず今持ってる写真をもらうことで決定。
6月3日 :WP メニューページ作成
メニューページ完成
これ迷ったけど、前に先生から教えてもらってたからできた。
アンダーラインなどの調整もできた。検証からなぜwidthをPXで指定できなかったのかわからないが、CSSに記述してできたからよかった。