HTMLとCSSの実践!はてなブログにグローバルナビやその他カスタマイズしてみた

HTMLとCSSのコーディング練習に、こちらのブログをカスタマイズしてみたので備忘録としてメモ投稿です。

 

今回、レスポンシブ対応で、ナビゲーションメニューを設置&ページ上部固定表示をしました。

また、メインコンテンツの横幅やフォントサイズ、大見出しの装飾、細かいところの表示設定等をしましたのでそちらもメモ。

 

この記事では、HTMLとCSSの基本知識があるとスムーズですが、全く知識がなくてもソースのコピペだけで当サイトと同じカスタマイズができます。

 

 

はてなブログのカスタマイズ手順

はてなブログの基本的なカスタマイズ手順は下記のようになります。

  1. デザインテーマを選ぶ(※)
  2. デザインを変更したい箇所を探す
  3. HTMLやCSSを追記

※スマホ時代なのでレスポンシブ対応のものを推奨

※当ブログで使用しているデザインテーマはMinimalismです。

 

デベロッパーツールでカスタマイズしたい箇所を特定

ブログやWEBサイトに共通する、デザインをカスタマイズする基本フローについて書いてみます。

※当ブログで使用しているHTML、CSS記述について手っ取り早く適用したい時はこの章は飛ばして構いません

 

使用するのはデベロッパーツール

ほとんどのブラウザーについて、WindowsはF12キーを押すことで(MacはCommand+Option+Iキーで)、各ブラウザー搭載のデベロッパーツールを利用できます。

うまく立ち上がらない場合は「OS、お使いのブラウザ名、デベロッパーツール、立ち上げ方」などでググって使用してください。

 

ここでは、Google Chromeでのサイト改修手順を記載しておきます。

(下記画像を参照)

 

◆確認手順

  1. 丸で囲った、矢印のアイコンをクリック
  2. 修正したい箇所にカーソルを合わせる
  3. 適応されているCSSを確認

Google Chrome デベロッパーツールでカスタマイズ

 

デベロッパツールの該当CSS内でCSSを追記したり削除して、プレビュー確認ができます。

 

デモ画面ではフォントサイズに当たるCSSを追記。

この画面上では保存されませんので、本体に適用したい場合は該当のCSSページ欄(はてなブログの場合について後述)に記述してください。

Google Chrome デベロッパーツールでカスタマイズ

 

CSSでどのような装飾ができるかは、HTMLクイックリファレンスさんなどのサイトを参照してください。

 

はてなブログのレスポンシブ化は「レスポンシブデザイン」にチェックを入れるだけ

はてなブログでのレスポンシブ化は超簡単で、「デザイン→スマートフォン→レスポンシブデザイン」のチェックボックスにチェック入れるだけでOKです。

はてなブログ レスポンシブデザイン

※ただし、最初に設定するデザインテーマがレスポンシブ対応していないと反映できませんのでご注意ください

 

CSSとHTMLのカスタマイズ・ソースコード

当ブログのデザインでカスタマイズ記述したHTMLとCSSは下記の通りです。

各ソースごとにコメント(※)を付けましたので参照してください。また、「値」を変更することで自己流アレンジが可能です。

 

※HTMLコード内<!-- ●● -->、CSSコード内/* ●● */の●●の部分

 

グローバルメニューのHTML記述

グローバルナビゲーションを設置するため、「デザイン→カスタマイズ→タイトル下」へ下記HTMLを記述します。

<ul id='menu'>

<li><a href='●'>△</a></li><!-- ●にはリンク先URLを、△にはメニュー表示名を記述 -->
<li><a href='●'>△</a></li><!-- 同上 -->
<li><a href='●'>△</a></li><!-- 同上 -->
<li><a href='●'>△</a></li><!-- 同上 -->
</ul>

 

反映されると下記のようにナビゲーションが追加されます。

HTMLだけでも機能しますが少し寂しい感じがします。

はてなブログ ナビゲーションHTML


続いて、上記で記述したHTMLのグローバルナビゲーションをCSSで装飾します。

 

記述したHTMLコードへのCSS適用

「デザイン→カスタマイズ→{}デザインCSS」へ下記CSSを記述

 

※CSSの特性上、後から記述したものを上書き摘要していきます。

※{}デザインCSS内の /* </system> */ より下に記述していきます
※「/*○○○○*/」の部分は「プロパティ」「値」の意味を補足したコメントなので記述しなくて大丈夫です

 

まずは<ul id='menu'>へCSSを適用するための記述です。

#menu {
position: fixed; /*スクロールしても位置固定*/
top: 0; /*上からの配置位置を0に指定*/
z-index: 10; /*重なりの順序を整数で指定→0を基準として、値が大きいものほど上*/
width: 100%; /*横幅を100%(横一杯)に*/
padding-left: 0px; /*左パディングを無しに→画面左に余白なくナビを配置*/
height: 40px; /*メニューの高さを指定*/
margin: 0; /*マージンを無しに*/
opacity: 0.9; /*透過度を指定→0.0(完全に透明)~1.0(完全に不透明)*/
background: #323232; /*ナビゲーションの背景色指定*/
}

 

続いて、<ul id='menu'>内の<li>へCSSを適用する記述です。

#menu li {
list-style-type: none; /*リストの頭の●をとる*/
float: left; /*要素を左寄せ*/
text-align: center; /*ブロックコンテナ内でテキストを中央揃え*/
width: 25%; /*ナビゲーションメニューの数で横幅を分割→今回は100%÷4つ=25%*/
}

 

さらに、<ul id='menu'><li>内の<a>へ下記CSSを適用します。

#menu li a {

display: block; /*各メニューをブロック状に*/
color: #ffffff; /*メニューのテキストカラーを指定*/
font-size: 0.7em; /*文字サイズ指定→1emは別途定義されているフォント100%の大きさ*/
line-height: 40px; /*行の高さをメニューと同じに指定*/
text-decoration: none; /*テキストの装飾を無しに*/
}

 

最後に、グローバルメニューにホバー時の変化(カーソルを上に載せたときの変化)の設定をしておきます。

#menu li:hover a {
color: #00DFFC; /*テキストの色を指定*/
background: #ffffff; /*背景色を指定*/
}

 

#menu、#menu li、#menu li a、#menu li:hover aは全てHTMLで記述したナビゲーションメニューの装飾に関わるCSSです。

 

要素ごとに分解し、装飾を施しているので長くなっておりますが、下記コードをコピペするだけで完了です。

#menu {
position: fixed;
top: 0;
z-index: 10;
width: 100%;

padding-left: 0px;
height: 40px;

margin: 0;
opacity: 0.9;
background: #323232;
}

#menu li {
list-style-type: none;

float: left;
text-align: center;
width: 25%;
}

#menu li a {

display: block;

color: #ffffff;
font-size: 0.7em;
line-height: 40px;

text-decoration: none;

}

#menu li:hover a {
color: #00DFFC;
background: #ffffff;

}

 

グローバルナビゲーションのページ上部固定設置が完成

上記の手順で進めると、下記のようにサイト上部にグローバルメニューが表示できました。

はてなブログ サイト上部にグローバルナビ

 

ナビゲーションへのカーソルホバー時はこんな感じ。

はてなブログ サイト上部にグローバルナビ(ホバー時)

 

ここまでのカスタマイズでナビゲーションメニューの固定設置ができたと思います。

ただ、当ブログのデザインと完全一致ではないはずです。

 

なぜなら、当ブログでは下記CSS記述もしているためです。

下記まで含めて記述いただくと、当ブログと同じサイトデザインに仕上がります。

 

当ブログでその他に適用したCSS

下記に、当ブログで記述しているCSSを全てご紹介しておきます。

必要に応じて利用してください。

 

CSSを追記する場所は、これまでのCSS追加箇所と変わらずの「デザイン→カスタマイズ→{}デザインCSS」です。

 

記事が書かれてからの日付を消す

.entry-footer-time {

display: none;

}

 

記事下のIDを消す

.author.vcard {
display:none;

}

 

タイトルを調整

タイトルの上部の余白調整

#blog-title {

margin-top: 44px;

}

 

記事タイトルの文字サイズを変更

.entry-title {

font-size: 1.5em;

}

 

大見出しに下線をつける

h2 {

border-bottom: solid 0.1em #323232;

}

 ※はてなブログでは「大見出し」はh3扱いですが、当サイトでは自然なHTML構文にすべくHTML編集にて<h3>→<h2>にタグを修正した上で反映しております。<h3>の状態で下線を引く場合は、上記ソースのh2をh3に置き換えてください。

 

ページ幅を調整

#container {

width: 100%;

font-size: 16px;

}

 

コンテンツ幅を調整

#content {
max-width: 1260px;
margin: 0 auto;

padding: 0 0.5em;

}

 

サイドバーの設定

#box2 {

font-size: 0.8em;

width: 360px;

background-color: #f3f3f3;

padding: 0.5em;

}

 

フッターの設定

#footer {

padding: 1em 0;

background: #323232;

font-size: 0.8em;

}

 

#footer p {

display: none;

}

 

おわりに

正直、私自身がHTMLやCSSをはじめたばかりで、まだまだ勉強すべきところが多々あります。

今回、自身のはてなブログカスタマイズにおいて、また、この記事を書くにあたり細心の注意を払ったつもりですが間違いや補足が必要な点等があるかもしれません。

もし間違いに気づいていただけたら、ご指摘いただけますと大変助かります。

最後まで読んでいただきありがとうございました。