6月8日:WP修正/ブログページ・レスポンシブ画面対応

・ブログページ修正

サイドバーの位置が右に来ない原因が判明

 

検証で見てみると、

f:id:hinairo:20210608223953p:plainblog-innerの上にphp関数が書かれていた為、この箇所が繰り返しになっていて、その流れで、本来ブログ部分とサイドバー部分が兄弟関係になっているのが、親子関係になってしまっていた。

f:id:hinairo:20210608224240p:plain

これを下のように変更

f:id:hinairo:20210608224247p:plain

f:id:hinairo:20210608224405p:plain

やっと解明できた。

 

・レスポンシブの対応修正

f:id:hinairo:20210608010452p:plain

レスポンシブサイズにして修正後、パソコンサイズにするとずれていた件

f:id:hinairo:20210608010458p:plain

これを修正する為に、コメントの白の枠にマージン左右autoをつけてみると思った通りに修正できた。

f:id:hinairo:20210608225003p:plain

f:id:hinairo:20210608225010p:plain

 

ブログ画面をレスポンシブ画面にしたら画像が小さくならない。

f:id:hinairo:20210609012506p:plain

f:id:hinairo:20210609012657p:plain



サイトで調べてみるとレスポンシブ対応できると言うことでCSSに書き込み

.thumb {
text-align: center;
}
.thumb img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}

 

 

これでできると思って確認したところ画像は小さくなったがヘッダーも小さくなった。

f:id:hinairo:20210609012506p:plain

???

なかなかうまくいかないなー。

6月7日:WP:メニューページ訂正・レスポンシブデザインを訂正

メニューページの訂正。

全ての項目をカラムで割っていい感じに訂正できた。

f:id:hinairo:20210608071220p:plain

f:id:hinairo:20210608071225p:plain

f:id:hinairo:20210608071229p:plain

f:id:hinairo:20210608071235p:plain

 

レスポンシブデザインの修正

携帯からサイトを確認し、ずれているところを修正。

f:id:hinairo:20210608010452p:plain

レスポンシブ画面で投稿メッセージ箇所が背景からはみ出していたので修正すると、パソコン画面でズレる。

f:id:hinairo:20210608010458p:plain

ここはうまく修正できない。

 

 

このお知らせの欄は真ん中にできた。

f:id:hinairo:20210608010445p:plain

 

スタイリストの紹介文が全体的に広がって、端の部分が切れていたので、paddingを使って訂正。

f:id:hinairo:20210608072026p:plain



f:id:hinairo:20210608010440p:plain

 

 

6月6日:授業日/WP/バックアップ・サーバーにアップ・インストール、通販サイトBASE

・WPのバックアップを取る

教材に載っているプラグインDuplicaterをダウンロード→有効化。

createnew→

Nameにバックアップファイル名を入力します。ファイル名には日付目的などを記載→

Next→

チェックボックスにチェックを入れて→

Build→

 

「Installer」(installer.php)(インストールするソフト)と「Archive」(Zipファイル)(記録保管)がサーバー上に生成→

両方クリックしてダウンロード→

WordPressuploadsディレクトリに、日付をつけたディレクトリを作成し、ファイルをまとめて保存。

 

・サーバーにアップ

エックスサーバーで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がちゃんとうごかいない件について

何かわからないコードが原因かもしれない。調べて不要なら消す。

 

取扱商品の販売サイトを作るには

thebase.in

 

 

アップされたサイトを携帯で見てみたが思ったよりずれていた。無念。

 

6月5日:WP/メニューページ・スタイルページ・スタイリストページ作成

メニューページを店のメニューに合わせて完成

f:id:hinairo:20210606063933p:plain

f:id:hinairo:20210606064030p:plain

f:id:hinairo:20210606064035p:plain

f:id:hinairo:20210606064035p:plain

スタイルページ作成、まだ画像がないのでこれは未だ未完成

f:id:hinairo:20210606063947p:plain

f:id:hinairo:20210606063956p:plain


スタイリストページ

あとはこのページのみできたらほぼ一応ページは揃う。

f:id:hinairo:20210606064403p:plain

f:id:hinairo:20210606064409p:plain

枠組みだけfrontpageからコピーしてこれから作成。

6月4日:cherimoのオーナーと打ち合わせ

サイトについて要望のヒアリング、してもらいたいこと、ページ構成などについて相談。

 

トップページのメルマガ登録欄については他店サイトのようにレビューを載せることで決定。

f:id:hinairo:20210605081245p:plain

 

取扱商品欄を作ってもらいたいとのことで後々制作で決定。

f:id:hinairo:20210605081411p:plain

 

サイトの文章は早めに考えてくれるとのこと。

 

styleページの写真は新しく撮りたいみたいだが、とりあえず今持ってる写真をもらうことで決定。

 

6月3日 :WP メニューページ作成

メニューページ完成

f:id:hinairo:20210604004208p:plain

background-image: url(../img/store.jpg);
background-size: cover;
 

これ迷ったけど、前に先生から教えてもらってたからできた。

f:id:hinairo:20210604004212p:plain

アンダーラインなどの調整もできた。検証からなぜwidthをPXで指定できなかったのかわからないが、CSSに記述してできたからよかった。

f:id:hinairo:20210604004216p:plain

 

6月2日:wp サイドバーcol修正・メニューリンク修正・メニューページ作成・404ページ修正

サイドバー(col-3)が右に配置されず下に表示されていたので、検証で確認。

左のcol–9の中にcol-3が入ってしまっていたので</div>で調整し、並ぶように修正すると表示できたが、コードを見ると何かがおかしい。

f:id:hinairo:20210603071422p:plain

f:id:hinairo:20210603071640p:plain

 

 

header.phpでnavbarに予約を作成してphpの関数を削除してリンクを貼った。

 

メニューページ作成

まだまだこれから。

 

f:id:hinairo:20210603072129p:plain

f:id:hinairo:20210603072819p:plain


メニューの名のところをdisplay:flexにしたが、メニュー横の線の長さが伸びず。また金額をもっと右に寄せたい。

紫の範囲邪魔。どうしたものか。

 

404ページ表示確認できた。

だいぶ雑。もうちょっと修正しなければ。

f:id:hinairo:20210603073800p:plain