css初心者でもここまでできた!を4つ紹介。ブログのカスタマイズに挑戦した結果

16821448686_b1d3594f4a_k

どうも、たか丸です。

ブログのデザインを読みやすく変更してみました。

2015年5月にライブドアブログからWordPressに引越してきました。まずは簡単に始められそうなテーマ「Simplicity」を使ってきましたが、コードを触らない範囲でのカスタマイズではなかなか思い通りにできない部分も多く「WordPressってもっとかっこいいサイト作れるんじゃなかったの・・・?」とがっかりしていました。

今回は簡単ではありますがcssに変更を加えてみました。

やったこと

  • ヘッダーデザインの変更
  • 記事タイトルの文字サイズ調整
  • 見出しタグを変更
  • サイドバーを左から右へ

ヘッダーデザイン変更

これまではブログタイトルを文字列で表示していました。正直味気なかったです。

というわけで「Squarespace Logo」というサイトを使ってロゴを作ってみました。

bokuraku.com

ちょっとしたイラストと文字列のシンプルな組み合わせだけでもかなり印象が変わりますね。改めて見ると横に長すぎるな、と思ったりしますが簡単に作り直せるのでまたそのときにということで。

Simplicityであれば「外観」→「カスタマイズ」→「ヘッダー画像」で簡単に変更できます。

記事タイトルの文字サイズ調整

「ジャンプ率」に注目すると読みやすいデザインができます。

ジャンプ率というのは見出しと本文のフォントサイズの差のことです。フォントサイズにしっかりと差をつけておくと文字列の役割が一瞬でわかります。よく見る技術系ニュースサイトでは記事タイトルが大きく、インパクトがあると同時に非常に見やすいです。

参考:レイアウト|伝わるデザイン

こんな感じで設定しました。

/* 記事タイトルの文字サイズを大きく */
.article h1 {
  margin-top:30px;
  margin-bottom:20px;
  font-size: 38px;
  line-height:117%;
}

/* 記事下日付の背景色 */
.post-meta{
  margin-bottom: 0.5em;
  text-align:right;
  background-color:#9abca4;
  color:#fff;
  font-size:16px;
}

ついでに記事タイトル下の日付表示に色を付けてみました。

20151227_012427000_iOS

参考:子テーマを利用してサイトデザインをカスタマイズする方法 | ブログ工房

見出しタグを変更

ぱっとしなかった見出しのタグも、記事タイトルのフォントサイズ変更と同様の方法で、以下のように変更してみました。

↓↓↓↓

大見出し

大きな見出しです。

小見出し

小さな見出しです。

ジャンプ率も意識しつつ、塗りつぶしや下線をいれることで文章の区切りが視覚的によく分かるようにしてみました。

/* 見だしタグのデザイン */
.article h3{
  font-size:25px;
  border-bottom:0px solid #9abca4;
  background-color:#9abca4;
  padding:10px 15px;
  color:#ffffff;
}

.article  h4{
  border-bottom:2px dashed #9abca4;
}

サイドバーを左から右へ

顔を売るためにサイドバーを左に配置してプロフィールを見やすくしていました。人は画面を左上から見るという法則があるからです。

でも、当ブログの半分以上はサイドバーがページ下へ追いやられるスマホで見られています。サイドバーが上手く機能していませんでした。

ということで、サイドバーは記事を読みやすくするため右へ、プロフィールは記事下にも表示するようにしてみました。

サイドバーの位置は「外観」→「カスタマイズ」→「レイアウト(全体・リスト)」→「サイドバーを左側に表示」のチェックの有無で変更できます。

まとめ

簡単な変更だけだったけれど、ひとつひとつ調べながらだったのでかなり時間がかりました。でも調べればcss初心者でもここまでできるんですね。情報をまとめてくれてるサイトには感謝しかないです。

ずっともやもやしていたことが解決できてスッキリ!2015年も残り僅かです。新年は気持よく迎えたいです。

これからもbokuraku.comをよろしくお願いします。

====================

これまでは好きなことを好きなときに記事にしてきましたが、これからはアクセスアップも狙っていこうと思っています。役に立った!という記事はSNSでシェアしてもらえるとありがたいです。