CSS超初心者でもできたブログカスタマイズと参考にした記事
一番苦戦したのがブログのカスタマイズでした。
アメブロでは公式のデザインテーマを適応しておけば、
オリジナリティは出せないものの特に不便なく使えていたので…
CSSって何？という超初心者のところからスタートしましたが、
それでも色々調べながらデザインと格闘し、
何とか公開できる状態にできたので、記録のためにまとめておきます。
私が初心者なので初心者向けの内容です。
初心者でもできたブログカスタマイズ
そもそもCSSって何？
お恥ずかしいですが、名前を聞いたことはあったものの、
そもそもCSSが何なのかさっぱりわかりませんでした。
なのでまずそれを調べるところから開始。
こちらの記事が初心者向けでとてもわかりやすかったです。
ちなみに同じくよく聞くHTMLについての記事もありました。
ほんと今更聞けないので助かる！笑
簡単に言うと、HTMLはWebページの文書構造、CSSはデザインを担当しているものだそうです。
HTMLは昔ホームページを持っていた時にちょっと調べたりしたので、
知ってはいましたが、両者で役割分担されているのは知りませんでした。
ざっくり理解できたところでブログカスタマイズに挑戦！
ブログのテーマを変える
カスタマイズするに当たり、使いやすそうなテーマを探して変更。
私は公式テーマではなく、テーマストアからインストールしました。
管理画面＞デザイン＞デザインテーマ＞メニューバーの一番下にあるテーマストアからさがす
でテーマストアにいけます。
私が使っているのは『SOHO』というデザイン。
惹かれたポイントは
・カスタマイズが超簡単
・レスポンシブデザイン※
・シンプルでおしゃれ
という3点。
初心者なのでカスタマイズが簡単なのはとっても重要です。笑
レスポンシブデザインというのは、スマホでブログを見た時にも自動的にPCで見るのと同じように表示されるデザインということ。
スマホ用に別でデザインする必要がないので便利です。
あとはシンプルな方が自由度があって良さそうだなと思ってこちらにしました。
ヘッダーを変える
ヘッダーはブログの上部分。一番最初に目に入るところです。
ひとまず私はタイトルロゴと壁紙を自分で描いて作りました。
それをデザイン画面の
カスタマイズ＞背景色
＞ヘッダ
からそれぞれ画像をアップロードして変更。
これはもともとのメニューにあるので簡単にできます。
文字の色・大きさを変える
ブログの基本の文字色とリンク色、リンクにカーソルを合わせた時の色などを設定。
テーマカラーを3~4色決めておくと統一感が出ていいんじゃないかなと思います。
私は「甘すぎないおしゃれガーリー」を目指していたので、
こげ茶と彩度の低い濃いピンク、薄いピンクの3色を使っています。
参考にしたページはこちら。
画像付きでわかりやすいです。
こちらは記事本文の文字色の変更方法ですが、CSSコードの”｛｝”の前の部分を変更すれば、他の部分の色変更も同じようにできます。
また、記事本文とフッターのリンク色を同じにしたい場合など、複数の箇所を同じ色にしたい場合は、コンマで区切ってまとめて設定することが可能です。
例えば
.entry-content a:hover,.entry-footer a:hover{color: #000000;}
と入れたら、本文中の記事、記事のフッターのリンクにカーソルを合わせた時の色が同じ色に設定できます。
最初どう区切って繋げたら自分が変えたいところが変わるのかわからず、苦労しました。笑
上のコードだと、それぞれから:hoverという部分を除けばリンク色の設定ができます。
見出しのデザインを変える
そもそも見出しって何なのか、どうやったら使えるのかさっぱりわからなかったのですが、ブログの記事を書く画面のメニューバーにあることに気付きました。笑
記事を見やすくするために、本文中のコンテンツなどに使用する装飾ですね。
検索したらたくさん出てくるので色々なページを見ながら変えました。
こちらのデザインも見出しだけに限らず、記事タイトルやサイドバーのデザインにも応用できます。
おしゃれだな、いいな、と思ったデザインのコードを参考に、他の箇所のデザインも変更しました。
しかし、コードを入れてもうまく変わらないことがあり、
そういう時は適応しているテーマの設定が優先されているようです。
こちらでリセット用のコードが紹介されています。
ただリセット用のコードを入れても変わらないこともあり、それがなぜなのかはわかりません。笑
調べていたら!importantというコードを入れると優先順位が上がるという情報を見つけました。
あまり多用するのはよくないようなので、どうにもならない時に入れてみたりしています。
記事タイトルの書式を変える
見出しのデザインと同じような感じで変えられますが、CSSで記事タイトルのことを何て指定するのかわからなかったので、調べながら試行錯誤しました。
上記のページに加え、こちらの記事も参考にさせていただきました。
サイドバーのカスタマイズ
デザイン画面の
カスタマイズ＞サイドバー
からサイドバーに表示したい項目の追加、削除、名前の変更、順序の変更ができます。
デザインの変更については上記の記事プラスこちらの記事も参考にしながら実施。
あとプロフィールの部分をもっと画像を大きくして見やすくしたかったので、こちらを参考にカスタマイズ。
カスタマイズ＞サイドバー＞プロフィールの横の編集ボタンをクリック＞
モジュールの編集＞ブログの説明欄にHTMLタグをコピペすればプロフィールのカスタマイズができます。
プロフィール画像もHTMLで設定するので、プロフィール画像の”表示する”というチェックは外します。
コピペするHTMLはブログの下書き画面で作りたいプロフィールを作って、HTML編集に切り替えて全部コピーすればOK！
他にもコードを入れて設定する方法もあったのですが、試したもののできず。。
その後でこちらの記事を見つけて頭いい！！と思いました。笑
めっちゃ簡単！
これなら初心者でもすぐできます(^^)
カテゴリーを横に並べて表示する
カテゴリーがたくさんあると、どんどん縦に長くなっていってしまうので、
横にも並んで表示されるようにしました。
参考にした記事はこちら。
デザインもいじれますが私はひとまずシンプルにしました。
私がカスタマイズしたのはこんな感じです。
一方で、やろうと思ったけどできなかったこともありました。
できなかったことと今後やりたいと思っていることもまとめておきます。
解消できなかったこと
それは、スマホで開いた時にヘッダー画像の両端が切れてしまうこと。
調べていると解消するためのCSSタグが紹介されている記事がいくつかあり、試したのですが何も変わらず…
ちなみに参考にした記事はこちら。
なぜ私のは直らないの…
こちらの記事でCSSのエラーチェックをするツールも紹介されていたので、それも試しました。
エラーがないか調べましたが問題なし。なのになぜ直らないの…
なぜ解消されないのかさっぱりわからなくて、
スマホで見るとトップ画像は今も両端が切れたままです。笑
かっこ悪いから直したい！
今後やりたいカスタマイズ
・グローバルメニューの設置※
・目次のカスタマイズ
・見出し小の変更
・トップページでの記事の一覧表示
・フォローボタンの設置
今のところデザインに関してやりたいなと思っているのはこの5つです。
グローバルメニューはヘッダーに表示されるメニューバーです。
あった方がわかりやすくていいと思うので早めに設置したい。
目次も長い記事だとあった方が見やすいと思うので、
ブログデザインに合うように設定したいです。
あとトップページが今は記事が全部全文表示されてて見づらいので、
一覧表示にして、個別の記事の内容はクリックして表示させるようにしたい。
フォローボタンはサイドバーに表示させようとして試行錯誤したのですが、
うまくできなかったので、追々やっていきます。
記事表示した時にTOPに戻るボタンもあった方がいいかな。
あまりいじりすぎても重くなってしまうので様子見ながらやってみます。
何かの参考になれば幸いです(*´▽`)
