こんにちは、三日月です。
昨日パソコン版のブログのデザインを一新しました！ものすごく時間がかかりました…
大昔ですが中学生の頃にホームページを作りたいと思ったことがありまして、その時に独学でHTMLを勉強しました。なのでHTMLの基礎くらいはわかるのですがはてなブログのデザインを変えるために必要な言語はCSS…CSSとは…という状態でした。
そんな初心者でもコピペするだけでデザインを変えられるようにまとめてくれているブログさんがたくさんあったのでなんとかここまで変えることができました！本当に有難いです…
今回参考にさせて頂いたブログ様のまとめ
大元のCSSははてなブログの「boilerplate.css」を使用しました。
カスタマイズしたい項目がほとんど網羅されていて有難さの極みでした…。
見出しはこちらを参考にさせて頂きました、可愛い。
記事のシェアボタンは色々なデザインが公開されていましたがこちらの丸っこいシェアボタンを使用させて頂きました。可愛い。（語彙力）
記事のフォローボタンはこちらのデザインを使用させて頂きました。
そして実は一番作りたかった記事の上の横のボタン！！こちらのブログ様を参考にさせて頂きました。ボタンの名前すら知りませんでしたが「グローバルメニュー」と言うのですね…やっと設置できてとても嬉しいです。記事が増えてきたらドロップダウンメニューもちゃんと作って記事とリンクさせたいところです。
ブログをカスタマイズしてみて
本当にほとんど知識がない状態でしたのでこのデザインに落とし込むまで3時間か4時間くらいかかりました…あれ、なんで反映されないんだろうとか色がおかしいとかうんうん唸りながらもなんとかかんとかここまでできました…！
カスタマイズをしていてCSSの知識があると自分が形にしたいものが作れるのだなぁ…とすごく思いました。勉強したいとは思うのですがコードを見ているだけで頭がパァンとなりそうでしたので道のりは厳しそうです…HTMLは割と単純でわかりやすかったけどCSSは複雑な指令が多そう…。
オマケ・カスタマイズしていてひっかかった超初歩的なところ
最初「記事上」「記事下」のところをいじって作るシェアボタンやフォローボタンがどうしても何をやっても表示されませんでした。記事上にシェアボタンを作りたかったのですがどうしても反映されないのです…。
この状態ですね。なんでだろうとしばらく首をかしげていたのですが、この状態はあくまで自分のブログの「トップページ」を見ている状態でした。
ちゃんとタイトルをクリックして記事そのもののページに行けば表示されていました…お恥ずかしい。。記事上記事下をいじってプレビューする際はお気を付けください。…ここで引っかかる人も少ないかもしれないですが…。
今は何でもインターネットで情報が得られて有難いです。このデザインで運用して不具合があったり何か思いついたらちょこちょこ変更していきます、もしデザインが崩れていたり変なところがあったら教えて頂けると嬉しいです。
ではでは、今日はこの辺りで〆とします。
シェアボタンいい感じですね。動作も軽いのでおすすめです。
>>だいぱんまん (id:donchan922)さん
シェアボタン使わせて頂きました！
コメントも有難う御座います、可愛くてとても気に入っています。