ゆるくはじめるWordPress.

必要な要素だけでミニマルなブログをデザインする【WordPressテーマ作り STEP3】

minimal

レスポンシブな枠組みができたら次はブログとして必要な要素を入れていきます。
まずはブログとして成立させるために必要最低限のパーツだけを配置して、バランスを調整し、基本のデザインを作ってしまいましょう。CSSはWordPressでもそのまま利用するので、ここでしっかり作ってしまって大丈夫。
今回はシンプル・ミニマルなブログデザインの簡単な例を載せました。

必要最低限の要素を配置(例)

required-parts

header

HTMLの<header>~</header>にはまずサイト名、簡単なサイトの説明文、グローバルメニューあたりを入れます。
WordPressでグローバルメニューを表示させる方法はいくつかありますが、リスト形式で組んでおけば大体の方法で対応できるはず。

HTML

<header class="header">
  <div>Sitename</div>
  <p>サイトの説明をここに。</p>
  <nav>
    <ul>
      <li><a href="">menu01</a></li>
      <li><a href="">menu02</a></li>
      <li><a href="">menu03</a></li>
      <li><a href="">menu04</a></li>
    </ul>
  </nav>
</header>

content

コンテンツ部分には投稿した記事をどのように表示するかを考えながらHTMLを組んでいきます。
投稿の日付、カテゴリーやタグを表示させる場所、投稿のタイトル、アイキャッチ画像、そして投稿の本文、その下にページャー(ページ送りのナビ)を入れました。SEOの事なんかも考えて投稿のタイトルは<h1>で、本文中でも<h2><h3>くらいまでは使う事を想定してCSSでデザインしておくとベター。

ページャーについてはこれも色々実装方法があって、まずは簡単にタグを入れて使えるものでと思うのでここでは位置を決める程度で。


アイキャッチ画像:WordPressでは各記事に1つアイキャッチ画像というものを設定できます。記事のイメージを伝えるメインの画像で、プラグインなどでもサムネイル画像として呼び出されて利用されることが多いです。

HTML

<div class="content">
  <div>
    <span>2016-01-01</span>
    <span>Category name</span>
    <span>tag01,tag02</span>
    <h1>記事のタイトル</h1>
    <article>
      <img src="" alt="">
      <section>
      <h2>記事の見出しh2</h2>
      <p>記事の文章。</p>
      <h3>小見出しh3</h3>
      <p>記事の文章。</p>
      </section>
    </article>
  </div>
  <div>ページャー</div>
</div><!--content -->

タイトルの文字数などもある程度想定してデザインしておくと実際投稿した時との印象の差が無くて良いと思います。SEO的には現在のGoogleの検索結果で省略せずに表示されるタイトルの文字数が28文字だそうなので、それに合わせておけば良さげ。
でもこの数字もまたいつ変更されるかもわからないので、目安程度でいいかな。

タイトルについては下記サイトの内容がとても興味深かったので載せておきます。
最近のGoogle検索結果タイトル表示ルール知ってる? #SEO対策 | ねとたす


sidebar

後から色々と付け足す物が多いであろうサイドバー。とりあえず『About Me』とタグクラウドをイン。この段階でサイドバー用の見出しを整えます。
もっと足したいものがあれば、練習用に1つブログが出来上がる頃には後からでも難なくカスタマイズできるくらいにはなってるハズなので、ぜひチャレンジしてみてください。

HTML

<div class="sidebar">
  <h4>About Me</h4>
  <div>
    <p>自己紹介の文章。</p>
  </div>
  <h4>TagCloud</h4>
  <div>TagCloudのタグが入ります</div>
</div><!-- sidebar -->

footer

<footer>~</footer>にはコピーライトを。
『© 2016 名前』こんなシンプルで簡単な表記でOKらしいです。

HTML

<footer class="footer">
  <p>© 2016 Sitename</p>
</footer>
参考:年号と©マークと何が必要?Copyright(コピーライト)表記の正しい書き方

Webフォントで味付けをする

ここまで並べてきた要素を、CSSのmarginpaddingborderなどで見た目を整えたりするのですが、それだけだとやっぱり味気ない。
とは言え、テンプレートには画像を使わない!を目標に掲げている訳で…そんな時に便利なのがWebフォント。数えきれないくらい種類がありますがここでは簡単に、そして商用でも利用できる『Google Fonts』と『Font Awesome』を使ってみました。
<head>~</head><link>コードを入れるだけで使えるようになるのが便利。

required-parts-dsign

サイト名のフォントを変えてみるだけでかなり雰囲気が変わりました。
メニューの頭にアイコンを付けてみたり、後は好きな色を差し色として入れてみたりするとぐっとそれらしくなると思います!
あとはウィンドウサイズをぎゅーっと狭めてモバイル表示にしてみて必要があれば修正。
CSS部分は省きましたが、全体のfont-family指定、記事の行間、パーツごとの余白を見やすいように調整するだけでも見栄えは結構整ってこなれた感じが出ると思います。
あと、注意点としては画面幅によって可変させる部分は%で指定しておく事くらいで、ある程自分が納得できれば一旦作業終了です。

Google Fonts
Font Awesome

関連

簡単!便利!Google Fontsの使い方
数百種類ものWebフォントを無料で利用できるとってもありがたい『Google Fonts』。 ダウンロード不要で利用できる点が何より手軽で嬉しい。しかも商用利用も可能。すばらしい
600種類のアイコンが無料!Font Awesomeの使い方
メニューやボタン部分に文字だけじゃなくてアイコンがあったら、わかりやすくて便利ですよね。 アイコンがあると直感的に操作できて、見る側のストレスもぐんと減らすことができます。 F

スポンサーリンク

公開日:2016-1-19