主婦ときどきオタク日記

ゲーム、アニメや漫画の感想、子どもや日常のことなど。

ブログのデザインを変更しました

こんにちは、あさぴょんです。

今日、ブログの改装をしました!

いや~、大変でした(;゚∀゚)

パソコン作業画像
もちろん、全部今日やったわけじゃなくて、少しずつやってきたんですが、なんだかまだ細かいところがいろいろおかしいですけどね・・・(=ω=;)

もういい加減嫌になってしまったので、とりあえず変えてしまえ!!

と一気にデザイン変更してみました。

ちょっと字がずれてたりする場所は、おいおい、直していきたいと思います・・・多分ね・・・。

 

 実は私、パソコンが普及し始めの頃に、素人趣味でホームページを作ってたことがあるんです。

その時はhtmlだけで書いてたんですが、最近は、html5とcss3なるもので作るという・・・。

 

css3とか初耳だし(≧Д≦)!

しかも、html5って、絶対私が知ってるhtmlよりバージョン新しいし、更にむかーし趣味でやってたレベルだから、ほぼ覚えてないし。。。

 

てことで、はてなブログの、いろんな方のブログデザインの記事を参考にさせて頂きました。

 今回は、私がブログ改装でお世話になった記事や、苦労した点などを書いていきたいと思います。

 

 

1.デザイン用のブログを作る

まず始めにやったのは、もうひとつブログを開設することです。

はてなブログでは、1つのアカウントで3つまでブログを開設できるので、自分にのみ公開、という設定でブログを開設します。

ダッシュボードで作れます。

画像を入れたり、いろんな大きさの文字を入れたりして、てきとーに1つ記事をアップします。

 

一気に本ブログのデザインを変えるのは無理なので、新たに開設したブログのデザインを少しずつ試行錯誤で変えていき、だいたいできたら、本ブログにhtml& cssのコードをコピペして出来上がり、という流れです。

 

デザインテーマは、本ブログで使用予定のものと同じにした方がいいです。違うデザインテーマだと、見えない部分(いじれない部分)のCSSの記載が違っていたりして、同じようにコードをコピペしても、反映されないこともあるからです。

 

ちなみに私は、smoothというデフォルトのシンプルなデザインにしました。

なので、本ブログも、デザインテーマをsmoothに設定してからデザインを変更しています。

 

 

2.どんなデザインにするか決める

いろんな方のブログのデザインを見て、どんな風にしたいか、決めます。

私は今回、PCのドロップダウンのグローバルメニュー、スマホのトグルメニュー、プライバシーポリシー、問い合わせフォーム、フッターのメニューを変えました。

 

 

3.HTML とCSSのコードを記入する

記入といっても、所定の場所に、詳しいブロガーさんが記事で公開されているコードをコピペするだけでございますヽ(*゚∀゚*)ノ 

その際、参考にさせて頂いた記事を挙げていきたいと思います。

 

①PCのドロップダウンのグローバルメニュー

www.clrmemory.com

www.bambi.pro

これが一番大変でした(-ω-;)

コピペですぐできる、とあっても、ベースにしてるデザインテーマが違うせいか、なかなか一筋縄ではいきませんでした。

ドロップダウンではない、一次構造のグローバルメニューだったら、比較的簡単だと思います。 

 

 

②スマホのトグルメニュー

www.yukihy.com

 

www.yucblog.net

これもゆきひーさんのコードをコピペしただけだとメニューが開かず、ユウさんの記事を参考にコードを手直しして、うまくいきました(o゚∀゚o)

 

 

③フッターのデザイン

www.itjigoku.com

 この記事で公開されているcssコードを入力すると、フッター部分は書いてある通りにできるのに、なぜかせっかく作ったグローバルメニューが消えるというナゾの現象が・・・(ll゚ω゚)

cssのセレクタを変えたりいろいろやってみて、なんとかできた感じです。。。

 

④問い合わせフォーム

www.form-mailer.jp

ここで会員登録をすると、使えるようになります。

ブログに直接メアドを書いちゃうと、迷惑メールが大量に届く危険があるらしいです。。。 

有料プランにしなくても良さそうなので、無料プランにしました。

 

⑤プライバシーポリシー 

これは、はてなブログのブロガーさんのものでなくてもいいので、

「ブログ プライバシーポリシー ひな形」でググるとたくさん出てきます!

お好みでコピペして、必要な箇所(名前など)を訂正して使いましょう。

 

 

4.色などをカスタマイズする 

上記した、参考にさせて頂いたブログには、カスタマイズできるところを記してくれているブログもあります。

その個所を変更して、背景や文字の色、大きさなどを変えていきます。

色は、このサイトを参考にさせて頂きました。

www.colordic.org

 

 

5.本ブログへ全てコピペ

あとは、htmlとcssを本ブログにコピペするだけ!

 

 

6.追記

今回、こんな流れでデザインの変更をしましたが、ほんと、大変でした(´д`;)

特にCSSは、未知の領域・・・。

うまくいかなくて、コードを入力する順番を入れかえるとできたりとか、意図したのと違う場所がおかしなことになったりとか、いろいろありました。

タイトル画像の高さを変えようとして、うまくいった!と思ったら、なぜかブログタイトルが消えてたり。。。

ブログタイトルないんじゃ、ダメでしょ( ´△`;)

 

見えない部分のcssの記述が分からないので、google chromeでコードを見る必要があるんですが、基礎知識がほとんどないので、四苦八苦してやってます(現在進行形)。

これからカスタマイズする人は、参考にしたいデザイン記事のブロガーさんと同じデザインテーマにした方が、苦労なくできるかもしれません。

 

そんな感じで今後もちょこちょこ手直ししていく予定なので、表示がずれてたり、おかしなかんじになってることもあるかと思いますが、あたたかい目で見守って下さると嬉しいです!