ブログ関係

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

記事内に商品プロモーションを含む場合があります

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

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

 

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

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

 

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

 

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

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

 

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

 

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

ABOUT ME
三日月
静岡県在住のフリーライター。サプリメントや動物、オタク業界に強いアラサー♀。お仕事の依頼や問い合わせはお問い合わせフォームからお願いします。
こんな記事もおすすめ

POSTED COMMENT

  1. donchan922 より:

    シェアボタンいい感じですね。動作も軽いのでおすすめです。

  2. crescentwolf より:

    >>だいぱんまん (id:donchan922)さん
    シェアボタン使わせて頂きました!
    コメントも有難う御座います、可愛くてとても気に入っています。

donchan922 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です