闘え!父ちゃん!

双子怪獣、年子怪獣との格闘の日々+α

はてなブログ:素敵なサイトを目指しデザインの勉強中です!

はてなブログproへ移行し

ブログのデザインなど試行錯誤中ですが

こんなデザインにしたい!と思っても

方法が分からず検索の日々です、、

見よう見まねでやってみても

反映されないことも多々あり

それが何故なのかも分からず、、

 

とりあえず2つ変更できたので

紹介しておきます!

 

モバイルフレンドリー

そもそもの始まりはここです

Googlesearchconsoleから

あなたのブログは

モバイルフレンドリーではありません!

とお知らせがありました

 

いや、モバイルフレンドリーって何ですか?

そこからスタートです!

(すいません、ド素人なので、、)

モバイルフレンドリーは

特定のサイトがスマートフォンに適した

状態で表示されているか?

ということらしいです!

 

へー、つまりどういうことですかw?笑

 

さらに調べたらこういうことでしたf:id:tarosanns:20190206172427j:image

父ちゃんのサイトって文字が小さいなーと

前から思っていたのですが

これがスマートフォン用の

表示では無かったみたいで

モバイルフレンドリーではないですよ

と言われていた様です

知らなかったです、、

 

どうしたらよいか調べたら

素晴らしいサイトを発見したので

拝見させて頂きました!

 

www.hatena-memorandum.com

 

ちなみに

他の方のブログを貼り付けるのも

何気に初めてだったので

これにも10分ほど掛かりましたw笑

 

このサイトによると

魔法の言葉を入力するだけで

モバイルフレンドリーになれるそうです!

その魔法の言葉が

/* Responsive: yes */

らしいです、早速デザインcssから

入力してみました!f:id:tarosanns:20190206172258j:image

これでどうなるのだろう?

変更後にもう1度サイトに入ってみましたf:id:tarosanns:20190206202404j:image

全然違いますやん!!

凄く見やすくなりました!

というか皆様、見づらいサイトに

お付き合いして頂いてたのですね、、

すいませんでしたw

早速テストもしてみました!

f:id:tarosanns:20190206180134j:image

f:id:tarosanns:20190206180206j:image

無事フレンドリーになっていました!笑

スマートフォンからでも

記事が読みやすくなり

サイトが1つ進化しました!

 

いやー、いい仕事したー!

(ほぼ他力本願w)

1人ニヤニヤしながら

進化したサイトを見ていたのですが

おかしな点に気づいてしまいました

f:id:tarosanns:20190206180439j:image

父ちゃん!の「ん!」の位置がおかしい、、

なんなら背景も見切れています

 

さーて、第2ラウンド開始です!

 

ブログタイトルの調節

スマートフォンから見やすくなったのに

タイトル文字の配置がおかしい

どうなっているんだ、、

また検索スタートです

しばらく調べたところ

タイトル文字の大きさを

変更すれば改善するみたいでした

今回はこのサイトを

参考にさせて頂きました!

 

matoyomi.hatenablog.com

 

文字の大きさや色を変えられるみたいです!

これもデザインcss

関係しているみたいでした

f:id:tarosanns:20190206195427j:image

赤線がブログタイトル

青線がサブブログタイトルの

色や大きさを変えられるcss見たいです

さっそく上のようにcssを入力してみましたf:id:tarosanns:20190206200805j:image
やったー!綺麗に並びました!

(バイクはまだ若干見切れていますw)

タイトルの文字色も

変えたかったのですが

何故かどの色を試しても白のままでした、、

cssの配置がおかしいのでしょうか?

誰か助けてください!笑

 

終わりに

ド素人の父ちゃんは

やっとの思いで2つ変更できました(泣)

まだまだ勉強不足ですね、、

先人達が、丁寧に記事にしてくれているので

本当に助かりました!

 

急にデザインが変わったり

記事が読みづらくなることも

あるかもしれませんが

遊びに来て下さいね(*^^*)

 

 

終わり