どもども、ねこさんです。
昨日の日記で「Githubのアカウントを作ったよ！」って言いましたので、せっかくですし開発の話をしようかと思います。
このブログはあえてブログテーマを用いずに、まっさらなままで作成しました。自分でカスタマイズしたいと思ってね！
なので、「ブログデザイン改善奮闘記」では、CSSやJavaScriptを用いて何を行っているかを備忘録として残していこうと思います。
今までのブログの状態
おーう。真っ白。色味がない。ある意味すがすがしい。
そんな感じのこのブログを、どんどんオシャレに変えて行きましょう！
ヘッダーを変えたい
ヘッダーに画像を設置してみたら、トラブル発生
さあ、いざヘッダーを設置！ ちなみに、絵はうーさんが描いてくれました。私の大好きな神絵師、ありがとう。ありがとう。ありがとう。
……………………
欠けてるじゃないか！！！！
私の大好きな大好きなうーさんの神絵が欠けてるんですよ、許されねぇ！！！
ヘッダーの欠けの原因調査
何はともあれ、どうして欠けているのか、原因を突き止める必要があります。
そこで登場するのが「検証」モードですな。Chromeならば右クリックのメニューから「検証」ボタンを押してもらうと、いろいろ変なもんが出てくると思います。
上の画像のうち、黄緑色の部分が存在しているから悪さをしているわけですな。…………とはちょっとならんのです。
黄緑色の部分は、ヘッダー画像とブログ記事の間にスペースを空けてくれる、大事な大事な存在です。
情報がごちゃごちゃしないようにするためには、適度な隙間が必要なんですよ。
今回、本当に手を加える必要があるのは、実は青色の部分。こいつの表示幅を広げてやるわけです。
開発モードの右側にCSSがあるわけですが、青色の部分に適応されているCSSは以下の通りでした。
.header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner { display: flex; align-items: center; justify-content: center; height: 50vw; max-height: 200px; }
6行目の「max-height: 200px;」ってのがなんともよろしくないわけです。ヘッダー画像の表示する最大の高さが200pxじゃ足りないらしいんですよ。なんでかは知らんけど。
なので、200pxを220pxぐらいに広げてやるとよいんですなぁ。
max-heightに手を加えたら、全部見えるようになった
神絵師の絵が綺麗に表示されるようになったーーーーー！！！ やほーーーーーい♪
文字間隔を変えたい
私は基本的にMarkdownで書いていますが、基本的に改行らしい改行はpタグを使うんですよ。
そして現在の状況がこちら。
色味がないのも相まって、文字が窮屈に詰まってて分かりづらい。せめて段落の間にもう少し空間がほしいところ…… だって話の一区切りで段落つけてるんだもん……
文字間隔のどこを広げたら良いかの調査
さてさて、先程も出てきた「検証」モードでコードの海に潜るお時間です。
今度は素直に見ていいです。オレンジ色の部分を広げれば良いっ！！
そんなオレンジの場所にどんなCSSがあたっているかというと、以下の通り。
.entry-content p { margin: 0 0 0.7em; }
marginが0 0 0.7em反映されているらしいですね。ふむふむ、よくわからん。
marginと似たものにpaddingがありますが、枠で囲われた文字が縦横に複数個並んでいるとして、枠と文字の隙間をpaddingで設定。枠と枠の間隔をmarginで設定している、と思ってもらえれば良いです。
つまり、marginは外側の空間を定めています。
とりあえずmarginを設定すればいいことはわかったが「0 0 0.7em」とはなんぞやという話です。
これは省略された書き方で、本当であれば以下のように書く必要があります。
.entry-content p { margin-top: 0; margin-right: 0; margin-bottom: 0.7em; margin-left: 0; }
上記をいちいち書くのが面倒くさいので、1要素目はtop、2要素目はright、3要素目はbottom、4要素目はleftとして省略して記述しています。4要素目は記載されていないですが「記載がない=0」として処理されます。
1要素目、2要素目は0なのにわざわざ書いているのは、3要素目をいきなり指定ができないからです。
だからぶっちゃけた話、以下のように書いても問題はないです。
.entry-content p { margin-bottom: 0.7em; }
ところで、「em」とは何かといいますと、1文字の大きさが1emらしいです。つまり現在のCSSは、段落と段落の間には0.7文字分の隙間が空くよう設定されていた、ということですね。
そんなわけで、どどんと0.7emを3emぐらいまで広げちゃいましょう！
marginに手を加えたら、かなり見やすくなった
うっし、見やすくなった！
ついでにリスト表示やテーブル表示のmargin-bottomも同じように3emを指定するよう変更しました。
背景を変えたい
背景画像はうーさんが描いてくれます。えぇ、描いてくれます。私、信じて待ってる！！(圧
とはいえ、それまで背景が真っ白けっけというのも味気ない。
うーさんの中のイメージでは、左側にうーさんのイメージカラーのピンクを、右側にねこさんのイメージカラーのオレンジを配置した背景にしたいらしいです。
わくわくわくわくわくわくわくわく。
そのため、ひとまず出来上がるまで、それっぽい感じの背景にしときましょうー！！
というわけで、出来たのがこちら。
綺麗でしょう！？
linear-gradientを使ってグラデーションを表現
image画像を設置できる場所ならば、linear-gradientなる関数を使うことができるらしいです。そのためbackgroundにこの関数を使っています。
どのbackgroundに使うかは検証モードで確認して、CSSを作成しました。それが以下の通り。
#container { background: linear-gradient(to right, rgba(255,163,236,.8), transparent 150px), linear-gradient(to left,rgba(255,182,117,.8), transparent 150px); }
右に向かってピンク(rgba(255,163,236,.8))→透明(transparent)のグラデーションと、左に向かってオレンジ(rgba(255,182,117,.8))→透明(transparent)のグラデーションを重ねて作っています。思ったより簡単でした。
最終的に付け加えたCSSは以下の通り
こうやって一つ一つを自力で考えながら作っていくのは楽しいなぁ、と思いました。
誰かの参考になったら嬉しいなぁ、と思います♪
.header-image-enable #blog-title #blog-title-inner,.header-image-only #blog-title #blog-title-inner { display: flex; align-items: center; justify-content: center; height: 50vw; max-height: 220px } .entry-content p { margin: 0 0 3em; } .entry-content ul, .entry-content ol, .entry-content dd { margin: 0 0 3em 1.5em; padding: 0; line-height: 1.7; } .entry-content table { border-collapse: collapse; border-spacing: 0; border-bottom: 1em; margin-bottom: 3em; width: 100%; overflow: auto; display: block; } #container { background: linear-gradient(to right, rgba(255,163,236,.8), transparent 150px), linear-gradient(to left,rgba(255,182,117,.8), transparent 150px); }