2018-11-11

ブログの画面レイアウトを変えてみる（html、CSS）

0 Comments

whiskydiary

はじめに

本日も少し真面目な話になりますが、FC2ブログ開始時はなるべくシンプルで要らない情報はなくして画面には必要最低限の機能や情報に使用と思い、ブログをスタートしました。しかし、他のブログを見ていくと個性があったり、見た目や同線を考えているブログも多く、自分のブログを見てみると、ちょっと物足りなさを感じていました。もう10年以上前ですが、少しだけ、htmlとCSSは触っており、多少のタグの意味は分かったのでちょっといじってみようと思い、ブログ画面の修正に向け準備を進めました。

テンプレートの設定

私がFC2で使用している画面テンプレートは「simple_white_resp」を使用しています。スマートフォンの画面テンプレートは「basic_black_st」を使用しています。どちらもシンプルな画面構成なので見た目はぱっとしませんが、最初はシンプルイズベストということでこちらを使用しております。ランキングやアフィリエイトの関係で多少、テンプレートにコードを追記しておりますが、画面は変えずに必要なコードだけコピーして使用しておりました。まずは基本テンプレートに追記/修正する形で画面の見た目を変えてみようと思います。

htmlの変更

今回、変更したい部分はPC版画面の場合、画面左側にある「プロフィール」、「最新記事」、「カテゴリ」などの各項目と「ブログタイトル」について変更しようと考えました。まずはタイトル部分のhtmlソースの場所を調べてみましたが、下記行が該当するようです。

こちらにはh1の見出しタグが使用されておりました。次に画面左側にある各カテゴリを調べてみます。おそらく下記行が該当しそうです。

こちらにはh2の見出しタグが使用されており、他の項目にも多数使用されてそうです。他に影響もありそうなので、こちらは新たにh21というタブを新設して別途、CSSで新規に定義したいと思います。最後に日々のブログタイトルについても見た目を変更したいのでhtmlソースから探していくと下記行が日々のブログタイトルに該当するようです。

<h1 id="comment<%comment_no>" class="sub_contents_title"><%comment_title></h1>

こちらもh1タグでしたのでh3に変更したいと思います。h1からh3へ変更することで文字の大きさも変わってしまいますが文字の大きさはCSS側で設定したいと思います。

CSSの変更

htmlのソースでタグが分かったので該当するタグのCSS定義を追加します。 1例としてですが、h2タグの場合ですと下記のような定義を追加しました。文字の上下に線を追加することにします。

h2 {
color: #364e96;/*文字色*/
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #364e96;/*上線*/
border-bottom: solid 3px #364e96;/*下線*/
}

同様にh1、h2、h21、h3の各定義をGoogle先生から調べたコードを張り付けしております。これで画面左側にある「プロフィール」、「最新記事」、「カテゴリ」などの各項目の文字の上下に青い線が入りました。多少スタイリッシュになった気がします。

まとめ

今回は既存テンプレートのhtmlから必要な場所だけCSSで追加修正してレイアウトを変更してみました。しかし、以前の知識だけでは殆ど役に立たず、タグの意味やCSSの設定の意味を調べながら手探りで修正を進めてみました。まずはやりたいことを実現できたと思っていますが、もう少しWeb技術の勉強が必要そうです。今度はブログ本文も見栄え良く変えていこうと思いますので、やりたいことを明確にしてから変更作業に挑みたいと思います。

関連記事