35日目。CSSを覚えたのではてなブログをカスタマイズしてみました。

35日目。

はてなブログのカスタマイズをやってみました。
ワードプレスでかっこよく！と思ったのですが、何かで消えたりしそうな予感がするんです。
その点、ブログサービスなら続く限りほったらかしでもコンテンツが残ります。
何となくその方が安心と思いました。

ブログサービスははてなにしました。
カスタマイズしやすそうだからです。
CSSがわかるようになったらカスタマイズしよーと思いながらほったらかし。
ようやく重い腰があがりました！

はてなブログのカスタマイズをしよう！

参考にした記事はこちらです。
ふむふむ、なるほど。前回は意味不明だったけど、CSSをクリアしたおかげで、読める、読めるぞ！

はてなブログの無料簡単カスタマイズ６つ！初心者おすすめ

カスタマイズ練習用のブログを作る

いつものブログをいきなり修正してぐっちゃぐちゃになったら嫌なので
カスタマイズ練習用のブログを作ります。うまくできたらメインの方にのっけます。

ベースとなるテンプレートを決める

シンプルなデザインを土台にするといいそうです。今回はMinimaristにしました。
PC、タブレット、スマホの３パターンに対応しているからです。

ヘッダー画像を決める

「フリー　風景」で検索して、好きな感じの画像をあつめ、ブログで使って良いか確認します。今回はこちらからいただきました。
よく晴れた青空と少し見切れた観覧車｜フリー写真画像

画像をヘッダーの大きさに加工

もとのままだと大きすぎるので、ヘッダーのサイズに加工します。
はてなは、PC用 1000200、スマホ用 400200　だそうです。

PIXLR MAKE EVERY MOMENT BEAUTIFUL
Web上で使えるフォトショップみたいなサイトで加工しました。便利！

サイドバーをカスタマイズ

これは選ぶだけなので簡単でした。

注目記事
プロフィール
カテゴリ
検索バー

見出しのカスタマイズ

そのままだと太い文字なだけなので、見出しの背景に色をつけます。

色をみる

色は写真加工したサイトのカラーピッカーで拾って集めました。

# 59C7F6;	/*青空*/
# BEDCF4;	/*薄い青空*/
# 068CD7;	/*青い観覧車*/
# EFF3F2;	/*雲の白*/
# CEDEF3;	/*雲の陰*/
# C2A3C8;	/*ピンクの観覧車*/

そしてCSSを作って「カスタマイズ」の下にある「デザインCSS」に貼り付けます。

.entry-content h1 {background: #59C7F6;	/*青空*/ }
.entry-content h2 {background: #BEDCF4;	/*薄い青空*/ }
.entry-content h3 {background: #068CD7;	/*青い観覧車*/ }
.entry-content h4 {background: #EFF3F2;	/*雲の白*/ }
.entry-content h5 {background: #CEDEF3;	/*雲の陰*/ }
.entry-content h6 {background: #C2A3C8;	/*ピンクの観覧車*/ }

タグの使い方を調べるために、テスト用の本文を作ります。

<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３（大見出し）</h3>
<h4>見出し４（中見出し）</h4>
<h5>見出し５（小見出し）</h5>
<h6>見出し６</h6>
<p>本文</p>

ソースを見ると、
h1がブログタイトルとエントリーごとのタイトル、
h2ははてなでは使っていないのかも。

エントリー内の「大見出し」がh3、「中見出し」がh4、「小見出し」がh5、
h6は使っていないかも。本文はpでした。

保存して確認して、色を見ながらCSSを作ります。
色の選び方は適当です。オシャレな人に教わりたい！

観覧車.CSS

.entry-content h3 {
    color: #444444; 		/*グレイ*/
    background: #EFF3F2;	/*雲の白*/ 
    padding: 10px 15px; 
    border-left: 10px solid #59C7F6;	/*青空*/
    }
    
.entry-content h4 {
    color: #444444; 		/*グレイ*/
    background: #EFF3F2;	/*雲の白*/ 
    padding: 10px 15px; 
    border-left: 10px solid #C2A3C8;	/*ピンクの観覧車*/
    }

 .entry-content h5 {
    color: #444444; 		/*グレイ*/
    background: #EFF3F2;	/*雲の白*/ 
    padding: 10px 15px; 
    border-left: 10px solid #068CD7;	/*青い観覧車*/
    }

グローバルメニューバーを作る

タイトル下にざっくり入れます。
ここにリンクさせたいエントリーやカテゴリーのURLを入れます。
一気にプロっぽくなりました。そうだ、中身を・・・作らなくちゃだ！
あとで考えることにしました。

<nav id="gnav">
 <div class="gnav-inner" id="menu-scroll">
    <div class="menu"><a href="URL"> ろばみみって誰？</a></div>
    <div class="menu"><a href="URL"> まずはこちらを！</a></div>
    <div class="menu"><a href="URL"> 発達さん住みよいマップ</a></div>
    <div class="menu"><a href="URL"> 本とまんが</a></div>
　　 <div class="menu"><a href="URL"> 趣味多趣味</a></div>
    <div class="menu"><a href="URL"> 発達さんの働き方</a></div>
    <div class="menu"><a href="URL"> お問い合わせ</a></div>
 </div>
</nav>

こんな感じで様子をみながら、良さそうだったらメインのブログに適用します。

ふー！
ここまで２時間ちょっとかかりました！
デザインって大変ですね。

---

（追記）
やっぱり、大見出しを吹き出しに、中見出し、小見出しを蛍光ペンにしました。
参考にしたのはこちら。おしゃれですね！CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

.entry-content h3 {
  position: relative;
  padding: 0.6em;
  background: #e0edff;
}

.entry-content h3:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
  width: 0;
  height: 0;
}

.entry-content h4 {
  background: linear-gradient(transparent 70%, #a7d6ff 70%);
}


.entry-content h5 {
  background: linear-gradient(transparent 90%, #a7d6ff 90%);
}

(30分）