読みやすさを求めたSimplicityのCSSカスタマイズ

2015/01/11 2015/01/13

正月休みを利用してこのブログに色々手を加えていました。

読みやすいブログを目指したSimplicityのCSSカスタマイズです。

何かのご縁で折角ブログに訪れてもらったのに記事を見た瞬間、「見づらっ」なんて思われちゃうと機会損失でしょう。Simplicity標準でもまったく問題ないんですが、自分が見ててもうちょっとどうにかならんかなぁと思っていた箇所がいくつかありました。どれも見やすさ、読みやすさを意識したカスタマイズです。

credit: manoftaste.de via FindCC

今回やったこと

ホーム記事一覧の幅を変更
ホーム記事一覧のサムネイルにエフェクト
記事幅を変更
記事本文中の文字サイズを変更
記事本文中の見出しを変更

見やすい・読みやすいを目指したカスタマイズ

Simplicityはそのままでも十分な素晴らしいテーマです。実は以前Simplicity導入当初にこんな記事を書きました。

今話題のWordPressテーマSimplicityに衣替え、サムネイルとアドセンスの設置についてやったこと。

当時Simplicityの印象を真っ白なTシャツという言葉で表現したんです、これからどんな色にも柄でも染まる真っ白なテーマだと。

親父色に染めてやるわ～！！！

最初にツールを紹介します。というのも人生はじめてCSSの表記を確認しながら子テーマに修正を加えました。どこがどんな風に書かれているかを見るのに使ったツールです。

Google chromeのCSSViewerです。

ツールを起動するとあとはカーソル位置のCSS情報が表示されます。修正したい箇所のIDとクラスを知るのに非常に便利でした。

それさえ分かればあとは本テーマ内のstyle.cssで表記を探し、その箇所を子テーマのスタイルシートにコピペ、必要に応じて修正と追記をするという手順です。このあたりは素人手順なんだろうなと確信していますが素人親父が一生懸命やったのでウェブに詳しいみなさん、温かい目で見守って下さい。

その超便利なCSSViewerはこちらからダウンロードできます。

では1つずつやったことを書いていきます。

ホーム記事一覧の幅を変更

すこし横幅が広いと思っていました。目の横への動作がしんどく感じたんです。これはこのあとにも書く記事幅も同じ理由です。

通常Simplicityのホーム記事一覧のボックス幅は680pxですが、これを少し狭めました。95％の646pxです。そのcss記述です。

#list {
  width:95%;
  margin: 0 auto;
}

これだけ。ここで「#list」がホーム記事一覧のid名です。

ホーム記事一覧のサムネイルにエフェクト

何か仕掛けがしたかっただけです。「ぽわぁ～ん」となります、気持ちいい感じに。

是非トップページで触ってみて！！

スタイルシートの記述です。

.entry-thumb img{
  transition: 0.5s;
}

.entry-thumb img:hover {
  opacity: 0.6;
  transition: 0.5s;
}

こちらの記事を参考にさせてもらいました。有難う御座いました。

【CSS】画像をマウスオーバーしたときに効果を与えるメモ4つ

記事幅を変更

これは最初のホーム記事一覧幅の変更と同じ理由です。親父がおっさんだからなのか分かりませんが、目の横への動きが疲れるんです。変更しましょう。

.article {
  width:90%;
  margin: 0 auto;
}

ホーム記事幅と違うのはクラスになったこと。class名「.article」です。詳しいことは不明！

今までは横幅一杯に文字表示されてましたがけど、余白が広めになりました。背景の肌色とのあいだに白い部分があって見やすくなりましたよね。

記事本文中の文字サイズを変更

記事幅と同じように読みやすくするために変更しました。これはSimplicityのカスタマイズ機能で設定変更です。

15pxに設定しました。いくつか試した中で一番読みやすいと感じたサイズです。いかがでしょうかね？

記事本文中の見出しを変更

以前から修正したかった見出し。

こちらの記事をこってりと参考にさせていただきました！まことに有難う御座います！！

ブログの見出しデザインまとめとCSSカスタマイズで参考にしたサイト

参考というか、パクりというか。。本当に感謝しております^^。

追加したスタイルシートの記述は以下の通り。

h2見出し

h2はSimplicity標準に少し修正を加えました。左側の縦棒の太さをと色を変更しています。あとは上下のpaddingを狭くしました。ぎゅっと引き締まった印象になったと思ってます。

.article h2 {
  border-left:10px solid #211E55;
  margin: 40px -29px 20px;
  padding:10px 30px;
  font-size:26px;
}

h3見出し

よく使うh3見出しは以下の通りです。背景をつけて長方形で囲み、アンダーバーに色をつけました。

.article h3{
  font-size: 23px;
  border-bottom: 2px solid #211E55;
  margin: 50px -12px 17px -12px;
  padding: 0.5em 12px 0.4em;
  background: #f5f5f5;
  text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);
}

h4見出し

これはパソ活ラボさんのが気に入ってしまい、そのまま参考にさせていただきました。色だけはブログカラーに変更しています^^。

.article h4{
  padding: 9px 0 3px 33px;
  margin: 30px 0 10px 0;
  font-size: 20px;
  font-weight:bold;
 position: relative;
  box-shadow: 0 4px 4px -5px rgba(0,0,0,.3);
  border-bottom:none;
}

.article h4:after, .article h4:before {
  content:'';
  height:18px;
  width:4px;
  display:block;
  background:#211E55;
  position:absolute;
  top:8px;
  left:15px;
  border-radius:10px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
}

.article h4:before{
  height:10px;
  transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  top:16px;
  left:7px
}