【8/13】ブログのデザインを設定しよう
ブログを書くにあたり、デザインは非常に重要な要素である。
今回はブログのヘッダーとグローバルメニューの作成を行っていこうと思う。
デザインテーマの選択
デザインテーマはブログの枠組みとなるテンプレートであり、ある程度はカスタマイズが可能である。
僕のようにCSSコードなんて全く分からない初心者には、人気ベスト3のテーマを是非おすすめしたい。
というのも、人気なテーマほどたくさんの人がカスタマイズを行っているため、CSSがまったく分からなくてもコードをコピペするだけで様々なカスタマイズが可能となるからである。
僕は一番最初は「Blooklyn」というテーマを使用していたが、ヘッダーの右側に謎の余白ができてしまい、どれだけ頑張っても消すことができなかったため、「Minmalism」というテーマな切り替えた。このテーマではスムーズにできたため、今後も使い続けようと思う。
またPCとスマホ両方でレイアウトが綺麗になるように、デザイン→(スマホマーク)→詳細設定のレシポンシブ機能にチェックを入れた。
ヘッダー画像の作成
まずヘッダー（ブログの一番上にあるタイトルと画像）に使用する画像を作成することから始めた。
今回は「Canva」というアプリを使用し、1000px × 200px の画像を作成した。
Canvaは画像のサイズを指定できるため、ヘッダー画像作りには是非おすすめしたい。
このような画像が出来上がった。
ヘッダー画像の貼り付け
次は作成した画像を実際にヘッダーに貼り付けていく。
貼り付け方は、デザイン→カスタマイズ(スパナマーク)→ヘッダ→画像をアップロードからできる。
また表示設定は「画像だけを表示」を選択する。
ただし、これだけでは綺麗に貼り付けることはできず、余白ができてしまう。
そのため、デザイン→カスタマイズ→ヘッダ内のタイトル下と書かれたスペースに下記コードをコピペする。
そうすることで、余白をなくすことができる。
/* ヘッダー画像の比率の調整↓ */
.header-image-only #blog-title #blog-title-inner { position: relative; background-size: contain; height: auto; }
.header-image-only #blog-title #blog-title-inner:before { display: block; content: ""; width: 100%; padding-top: 20%; }
.header-image-only #blog-title #blog-title-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
/* ヘッダー上下の余白を取る */
#blog-title { margin: 0 auto; padding: 0; }
/* ヘッダー画像の比率の調整↑ */
また、スマホで開いたときにもヘッダーを上手く機能させるために、デザイン→カスタマイズ→デザインCSS欄に下記コードをコピペする。
そうすることで、スマホで開いても上手く機能するようになる。
/* ヘッダースマホ対策 */
@media (max-width:480px)
{ .header-image-only #blog-title { height: 100px; } .header-image-only #blog-title #blog-title-inner {background-size: cover; height: 100px; } }
グローバルメニュー
グローバルメニューとは、ブログのヘッダーのすぐ下にある主要なコンテンツをまとめたメニューである。
コンテンツの種類が多くなればなるほど、それらを見やすくまとめる必要がでてくる。
現段階ではほとんど必要ないが、将来的には必要となってくるため、早めにテンプレートを作成するのも僕はありだと思っている。
下記のCSSコードをデザインCSSに貼り付けることで、グローバルメニューを作ることが可能となる。
URLと書かれた欄にジャンプ先の記事のURLを貼り付け、TITLEと書かれた欄にメニュー名を書き込むことで、自分好みのグローバルメニューが完成する。
僕はとりあえずテンプレートを貼り付けただけなので、記事が増えてきたら活用していこうと思う。
<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>
<div class="menu"><a href="URL"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</a></div>
<div class="menu"><a href="URL"><i class="fa fa-bolt" aria-hidden="true"></i> TIPS</a></div>
<div class="menu"><a href="URL"><i class="fa fa-graduation-cap" aria-hidden="true"></i> STUDY</a></div>
<div class="menu"><a href="URL"><i class="fa fa-wrench" aria-hidden="true"></i> DESIGN</a></div>
<div class="menu"><a href="URL"><i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div>
</div>
</nav>
最後に
テーマやヘッダーは基本的には同じものを使い続けるため、早めに設定しておいた方がいいだろう。
ただ他のブログを見てみると、見出しや目次などに様々な工夫がなされているので、もっともっと改良が必要だ。
それと、CSSなどについて色々調べたので、メモを残しておこうと思う。
メモ
- HTMLとは
- CSSとは
- 要素
- p:段落
- br:段落内で改行
- hr:横線で区切る
- meta:ページに関する情報を表す
- <meta charset="utf-8">:この文書が UTF-8 という文字コードを使用しているということをブラウザーに伝える
- em:斜体
- strong:太字
- インライン要素(em.strong)とブロックレベル要素(p)
- 空要素:開始タグ、コンテンツ、終了タグとならない
- img:画像を埋め込む(空要素)
- a:アンカー要素、テキストの一部を囲んでハイパーリンクにする
- 属性:要素に持たせる追加情報
- href(属性):飛ぶ場所
- title(属性):何なのかを説明する、タイトル(ブックマークしたときの名前など)
- target(属性):新しいタブで開く
- 属性値は、"か'で囲む
- <!DOCTYPE ～>:HTMLのバージョンによって～の中身が変わるが、基本的に第一文に基本的にいれるもの。なければ過去互換モード。
- html:ページ全体に適用し、この中に他の要素を書き込む
- head:見せたくないもの全て
- body:ホームページに表示させたいもの全て
- h1:メインタイトル、titleとはまた別
- <!--と-->、*/と/*:コメント
- header:ヘッダー
- nav:ナビゲーションバー
- main:メイン
- aside:サイドバー
- footer:フッター
- <style type="～">スタイル言語をMINEタイプ(~)で定義する。
- <style type="text/css">CSS文を書く。<style>と省略するのが一般的。
- margin:領域間のスペース
- padding:領域内のスペース
