こどもといっしょに。

こどもといっしょに、体験したり、成長したい母の記録

《ブログ関連》初めてCSSを触ってみた★参考サイト等

こんばんは。

ブログ開始2か月の記事に書いていた、

「ブログを少しカスタマイズしてみる」

をついにやってみました。

 

ブログのカスタマイズ超初心者の私が

参考にしたCSSとHTMLのサイト一覧を記載します。

 

ブログ開始2か月の記事はこちら

 

www.kodomotoisshoni.com

 


 

やってみたかったことは、

ホーム画面にメニューバーをつけること

見出しを囲まれてるタイプにすること、

読者ボタンをカスタマイズすること。

 

CSSってなに、HTMLってなに・・・

というところからやっていたので、

探り探りで、まだまだ理想には程遠いものの

いったんこんな形にまではなりました。

 

じゃん。 

f:id:kurashiiro:20190329213723p:plain

ど、どうでしょうか。。。

メニューバーというより、現状ではもはやカテゴリ一覧になっている。。。

そしてブログの読者になるボタンの主張が激しすぎてうざい。。。

途中であきらめかけたけど、いったんこの形にできてよかったです。

今回はここで力つきましたけど、これからもっと変えていきたいです。

私が利用した参考ページを記録しておこうと思います。

わかりやすいページでかなり助かったので、

初心者の方はぜひ参考にされるといいと思います!!

メニューバーCSS&HTML

seo-analytics.hatenablog.com

まず、この記事を見て、

「CSSはここに貼るのね」

「HTMLはここに書くのね」

というところからわかりました。

ネット検索して

「CSSコピペ可」という記事をみても、

初心者すぎる私には

「どこにコピペするねん」っていうところからのスタートだったので、

かなり助かりました。

見出しのCSS

 見出しのCSSは以下から選びました。

saruwakakun.com

上記で述べた通り、CSSを張り付ける場所をやっと理解した私は

こちらのサイトで選んだデザインで

理想の見出しの囲みができました。

こちらのサイトもわかりやすいサイトで

デザインも豊富で助かりました。

 

読者登録ボタンのCSS&HTML

www.noname-note.com

読者ボタンもカスタマイズしてみようかなと思い、

やってみました。

そして、ヘッダにもHTMLを入れるところがあって、

そこに読者ボタンを張り付けることができるんだ!と

わかった私はうれしくてドンと貼り付けてみました。

その結果、読者になるボタンの主張が激しくなっています(;^ω^)

どういうホーム画面にするかは、今後もっと検討していきます。

色味の変更方法

コピペしたのはいいものの、

「色が思ってたんと違う・・・」となりまして、

色もわかるところは、変更してみました。

www.color-sample.com

こちらのサイトを参考にしました。

どこをどう変えれば、変えたい部分が変わるのか、

CSSを読み取ることができない今の私は、

色を表しているであろう#からはじまる番号を、

好みの色の番号に変えてはプレビューを押して・・・

という感じでやっていきました。

試行錯誤過ぎて時間がかかりましたが(^^;)

でもそれをやりながら、

「ここを変えるとこうなるのね~」

という勉強になりました。

今後やりたいこと

まだまだ理想とする形にはなっていないので、

これからもいじりながら勉強していきたいと思います。

まずは、

メニューバーとカテゴリーの整理

目次を作れるようにする(初歩的~…)

ヘッダ画像のサイズ調整方法確認

インストールした公式テーマで残ってしまっている色味を変える

です。

ヘッダ画像は、いれてみたものの、

スマホ画面だと小さくなってしまったりするので、

どういう風にサイズを調節できるのか、確認したいです。

あとはこのブログに適用している公式テーマのピンク色が

残ってしまっている部分があるので、

(カテゴリー、リンク文字のピンク色など)

それをどうすれば変えられるのか

確認したいです。

 

以上、はじめてCSSを触ってみた。でした。

最後までお読みいただき、ありがとうございます。

おしまい。