道化鴉

日々生き方を模索しているアラサー♀のお仕事・心理学に関するブログです。(うつ病完治、ゆるゆると社会人に復帰しました。)

ブログデザインを一新!参考にしたブログ様のまとめ。

こんにちは、三日月です。

昨日パソコン版のブログのデザインを一新しました!ものすごく時間がかかりました…

 

大昔ですが中学生の頃にホームページを作りたいと思ったことがありまして、その時に独学でHTMLを勉強しました。なのでHTMLの基礎くらいはわかるのですがはてなブログのデザインを変えるために必要な言語はCSSCSSとは…という状態でした。

そんな初心者でもコピペするだけでデザインを変えられるようにまとめてくれているブログさんがたくさんあったのでなんとかここまで変えることができました!本当に有難いです…

 

今回参考にさせて頂いたブログ様のまとめ

 

github.com

大元のCSSはてなブログの「boilerplate.css」を使用しました。

 

www.notitle-weblog.com

カスタマイズしたい項目がほとんど網羅されていて有難さの極みでした…。

 

www.notitle-weblog.com

見出しはこちらを参考にさせて頂きました、可愛い。

 

www.daipanman.com

記事のシェアボタンは色々なデザインが公開されていましたがこちらの丸っこいシェアボタンを使用させて頂きました。可愛い。(語彙力)

 

www.ituore.com

記事のフォローボタンはこちらのデザインを使用させて頂きました。

 

www.yukihy.com

そして実は一番作りたかった記事の上の横のボタン!!こちらのブログ様を参考にさせて頂きました。ボタンの名前すら知りませんでしたが「グローバルメニュー」と言うのですね…やっと設置できてとても嬉しいです。記事が増えてきたらドロップダウンメニューもちゃんと作って記事とリンクさせたいところです。

 

ブログをカスタマイズしてみて

本当にほとんど知識がない状態でしたのでこのデザインに落とし込むまで3時間か4時間くらいかかりました…あれ、なんで反映されないんだろうとか色がおかしいとかうんうん唸りながらもなんとかかんとかここまでできました…!

 

カスタマイズをしていてCSSの知識があると自分が形にしたいものが作れるのだなぁ…とすごく思いました。勉強したいとは思うのですがコードを見ているだけで頭がパァンとなりそうでしたので道のりは厳しそうです…HTMLは割と単純でわかりやすかったけどCSSは複雑な指令が多そう…。

 

オマケ・カスタマイズしていてひっかかった超初歩的なところ

 

最初「記事上」「記事下」のところをいじって作るシェアボタンやフォローボタンがどうしても何をやっても表示されませんでした。記事上にシェアボタンを作りたかったのですがどうしても反映されないのです…。

f:id:crescentwolf:20170902133126j:plain

 

この状態ですね。なんでだろうとしばらく首をかしげていたのですが、この状態はあくまで自分のブログの「トップページ」を見ている状態でした。

 

f:id:crescentwolf:20170902133122j:plain

ちゃんとタイトルをクリックして記事そのもののページに行けば表示されていました…お恥ずかしい。。記事上記事下をいじってプレビューする際はお気を付けください。…ここで引っかかる人も少ないかもしれないですが…。

 

 今は何でもインターネットで情報が得られて有難いです。このデザインで運用して不具合があったり何か思いついたらちょこちょこ変更していきます、もしデザインが崩れていたり変なところがあったら教えて頂けると嬉しいです。

 

ではでは、今日はこの辺りで〆とします。