むやミ日記

Muyami Net Watching Diary

スマホ画面カスタマイズ初心者基礎練(その2)

大気の状態が不安定で夕方からカミナリごろごろしています。
雨の降り方は、いまのところそんなに大雨ではありません。

 でも、先のことは何がどうなるか、まーったくわかりません。

スマホ画面カスタマイズ初心者基礎練は、はじめたばっかりです。
きのうは、いきなり「タイトルロゴ」のことから、はいりました。
その「ロゴ」をとりあえず作って、よしできた、あーよかったーで、きのうは、ち か ら つ き、

【つづきます】にしたのでした。

 

さて、それで、この先どうするか? 

 

現状の設定を改変しちゃう前の、とってもだいじなメモ

【あとでぜったい忘れる(←じしんある)】

 

① バックアップをとっておく。

設定→詳細設定→エクスポート(前回2018/7/3(←あたしのばあい))→エクスポートしなおす→完了しました→ダウンロードする。

 

② PCのダウンロードフォルダに入った「サイト名export.txt」を「20180813export.txt」と、名前を変えて保存する。

 

③(前回2018/7/3)前後にカスタマイズ基礎練用に作った「むやミ偽日記」に移動する。

 

④「むやミ偽日記」→デザイン→スマートフォン→詳細設定→レスポンシブデザイン。

f:id:muyamisaki:20180813203715j:plain

↑↑↑の☑を外す→変更を保存する。

 

で事前準備はこれで(たぶん)完了。

 

きょうじっさいに作業したことのメモメモ

きのう↓↓↓

www.canva.com

↑↑↑で、つくってきた「かんたんロゴ」の書体をまねして、

❶ 手書きの「『むやミ日記』ロゴ」作った。

 

❷ 手書き「ロゴ」を「むやミ偽日記」の「記事を書く」→「見たまま編集画面」にドロップした→「ロゴ」画像を右クリック→「リンクのアドレスをコピー」→メモ帳などに「アドレスを貼り付け」した。

 

❸ きのうご紹介したサイト(下にリンクあり)からコピペしてきた「CSS」ファイルの「ロゴ画像がある場合」の指定場所に「リンクのアドレスをコピー」する。

 

❹ 上の「ヘッダ」に投入する一連の「CSS」ファイルを、

「むやミ偽日記」→デザイン→スマートフォン→ヘッダ→タイトル下→「スマートフォン用にHTMLを設定する」に投入する→変更を保存する→ブログを確認する。

 

➎ 変更結果をみにいく→❹をもういちどたどっていくとさっきの上の④のところに貼った画像=「レスポンシブデザイン」☑を外したときの右側の画像がみえた。

 

❻ スマホで、変更前の「レスポンシブ」状態のときと、「レスポンシブ」じゃなくした変更後のアクセススピードが、変化したかどうか見る。

「むやミ偽日記」は通常「非公開=自分だけ」設定なので「公開」に切り替える。

「むやミ偽日記」→「設定」→「公開設定」→「すべての人に公開」→「変更する」。

(以下のかくにん作業がおわったら、また「じぶんだけ」=非公開設定にもどす(←これ、よくわすれて「こうかいしっぱなし」になる)

 

❼ 「むやミ偽日記」の 「URL」をメモして、古iPhone5のサファリか、チョロメの窓に貼り付けて、さっきの「ヘッダ」変更画面とおなじ画面が出てくるか、確認する。

f:id:muyamisaki:20180813204115p:plain

かくにんしました。

(広告でっかいな~~広告の裏側に消し忘れのへんな文字が見える)

 

f:id:muyamisaki:20180813204325p:plain

↑↑↑こちらは「ロゴ画像がない場合」のテスト画像。

(こっちのほうが、スッキリしてていいかもです)


きょうも、たのしく、スマホ画面カスタマイズ初心者基礎練ができました。

↓↓↓ こどみす/codomisu さんに感謝いたします。

hitsuzi.hatenablog.com



 

【つづきます】