備忘録5

今回はHTMLとCSSを扱った。HTMLのプログラムの中に<h1></h1>,<h2></h2>のようなものを割り振り、CSS側でh1{}というように書いて直接変更を加えた。文字の色を変更するにはcolorで変更し、16進数のカラーコードから変更できた。また、視覚的に変更ができるように、色の具合を直接指定することで、番号では表現が難しい色も簡単に変更することができた。

フォントサイズを変更する際には、font-size:で変更することができ、medium,largeなどの感覚的なものから数値で大きさを決めることも可能だった。表のタイトルの部分をサイズを30pxとして、表の要素の部分をmediumで設定した。30pxだと、小さな表でちょうど良いぐらいの文字の大きさだった。

画像を貼る際には、背景を切り抜くか、透明にすることが大切になると感じた。背景の色を変更する際に画像の背景も変更する必要がうまれ、作業負担が増えることから、背景を気にしないデザインにすることが、楽になることにつながる。僕は今回の画像の背景を透明にすることで、背景の色を考えながら作業をすることができた。

webサイト本体では、webサイト全体の色合いを変更し、歴史っぽいカラーの深い赤色に変更してみた。ロゴの部分は、和紙のような色に設定した。どちらもCSSでコードを書いて反映させられた。

記事にリンクを貼る方法も学んだ。実際に安土城の記事へ飛ぶと、関連する記事に飛べるようになった。これによって、従来だと、細かく書くほど記事が長くなり、読者も読みたい情報がどこにあるのか探すのが苦労するが、今回の改善によって一つの物事についてこと細かく伝えることが可能になり、読者も読みたい情報だけを読めるからwinwinな関係になれる。

ロゴ、ホームとお城あれこれを含む、上側のバー全体を薄くすることに成功した。また、ロゴの画像をつぶさないようなフォローまでできた。すべて、テーマ側のCSSによって調整することが可能になった。