Mile Life with Family

Mile Life with My Family

子連れ旅行、子連れお出掛け、マイル、陸マイラー、子育て、FC東京などについてのブログ

ブログデザインをリニューアル!

ブログデザインをリニューアルしました!

f:id:rizmama:20180909094127j:plain

 

独自ドメインを取得し、本格的にブログを運営していこうと決意してから、ずっとずっとやりたかった事。それはブログのデザイン変更。

やっとやっとやっと、できあがりました!!

初心者なので、HTMLやCSSの知識も全くなく、ネットでたくさん勉強しながら、なんとか形になりました。育児家事仕事で毎日多忙の中、睡眠時間を削りながら作業をし、かかった期間はなんと3週間!かなり大変でしたが、コードを入れた時にデザインが変わる瞬間がとても嬉しくて、この作業は結構楽しかったです。

まだまだカスタマイズしたいところはたくさんありますが、とりあえずは完成です。

 

ブログの名前を変更!

ブログの名前を「子供とお出かけMileLife」から「Mile Life with My Family」に変えました。理由はすごく単純で、ヘッダー画像をおしゃれにしたかったからです。

ブログタイトルのフォントを選んでいる時に日本語だとしっくりこないというか、限界があって。英語の方が格段に雰囲気が良くなるので、思い切って変更してしまいました!

変更するにあたっては、実際かなり迷ってます。このブログの対象は、主に子供のいる家族なので、日本語の方が馴染みやすいいかなーと。でもデザインを優先しちゃいました!笑

こんなに悩みましたが、そもそもブログタイトルに注目している人なんて、実際そんなにいないですよね笑。いいんです!自己満でも!笑

 

テーマを「UnderShirt」に変更

いままで使っていたテーマ「innocent」から「UnderShirt」に変更しました。なぜなら、記事一覧を、今流行りのカード型にしたかったからです。

Googleで検索すると、innocentでもカード型にする方法があるようでしたが、私はなんせ初心者。そもそものデザインが、カード型になっているテーマに変えた方が、後々他のカスタマイズをする時に楽だと思ったからです。

テーマを変えたら、一瞬で理想のカード型になりました!嬉しーい♪

また、ブログ全体のカラーを、ピンクに変えました。 

 

トップページのカスタマイズ

まずはトップページでしたカスタマイズです。

ヘッダー画像を変更

ヘッダー画像を、リゾートの画像に変えました。今回も、前回同様フリー画像から頂いています。こだわったところは、家族で旅行しているような画像。本当は自分で撮った写真を、ヘッダー画像にしたかったのですが、例え後姿であっても、自分の家族がヘッダー画像に入るのが恥ずかしくて、やめました笑。

実は、有料の画像サイトで使いたいものがあったのです。でも1画像単位で買えなかったので、諦めました…。

でもまた使いたい願望が再熱したら、変えるかもしれないです笑。

 

グローバルメニューの設置

グローバルメニューを設置しました。参考にした記事はこちらです。

 

こちらのカスタマイズは、スマホやタブレット向けにデザインをしていて、PCで見た時だけ使用を変えるというものでした。が、私は、スマホ向けにはグローバルメニューを設置したくなかったので、スマホ表示にしたら、バーは消えるようにしました。このグローバルメニューの1番の売りを台無しにしています笑。

でも、タブレットで見たときは表示されるようにしたから、少しは意味があるのかな??

 

<スマホ向>画面下にメニューバー設置

どういうものかというと、私が参考にしたこちらの記事を見てください。

こちらの記事にも書いてありますが、このカスタマイズはレスポンシブには対応していません。が、私はレスポンシブです。HTNLとCSSを勉強したので、レスポンシブでもスマホのみに表示するようにできました!もちろんPC画面にも表示できますが、必要ないので消しました。

記事で、「レスポンシブ設定の方はできません」と記載してあるのは、コピペ1発で簡単にできないからかもしれないですね。

※jQueryのHTMLの中で、「http://」を「https://」に変更する必要があります!

 

サイドバーの変更

サイドバーは、初期だとカード型になっていません。せっかく記事がカード型なので、サイドバーもカード風に変えました。

 

フォントを変更

ブログタイトルや、サイドバーのタイトルのフォントを変えました。Googleフォントを使用しています。

 

記事ページのカスタマイズ

記事ページは、そんなに多くは変えてないです。

 

更新日を表示

ずっとやりたかった、更新日の表示。リライトしても古い記事と思われてしまうのが嫌で、ずっと設置したかったのです。

参考にした記事はこちら

※一部、jQueryを「2.2.3」→「3.2.1」に変更する必要があります!

 

記事タイトル、見出しデザインを変更

記事タイトル、見出しのデザインを変更しました。前回は個性的なデザインでしたが、今回は、かなりありきたりなデザインになりました。スッキリしたデザインのほうが、ブログ全体で見たときに、バランスが良いなと思ったからです。

 

これからもカスタマイズは続く

他にも、カードの角を丸くしたり、スマホ表示だけ少し色を変えたり、細かいところもかなり変えてます。余力があったら、また記事にしようと思います。

そして、冒頭でも言いましたが、まだまだカスタマイズしたいところはたくさんあります!なかなか終わりが見えない…

 

あと、この作業をしていてびっくりするのが、カスタマイズをしているとあっという間に時間が過ぎていていくということです。

「暇さえあればブログカスタマイズ!」の生活から、いつもの生活に戻します。またブログについては、しばらくは、ずっとサボっていた、記事を書くことに集中します。(←1番大事)

そして、ゆっくり時間がとれた時に、またカスタマイズしようと思います。

 

新しく変わったブログも、よろしくお願いします!

 

 

スポンサーリンク