2015/01/13正月休みを利用してこのブログに色々手を加えていました。読みやすいブログを目指したSimplicityのCSSカスタマイズです。何かのご縁で折角ブログに訪れてもらったのに記事を見た瞬間、「見づらっ」なんて思われちゃうと機会損失でしょう。Simplicity標準でもまったく問題ないんですが、自分が見ててもうちょっとどうにかならんかなぁと思っていた箇所がいくつかありました。どれも見やすさ、読みやすさを意識したカスタマイズです。見やすい・読みやすいを目指したカスタマイズSimplicityはそのままでも十分な素晴らしいテーマです。実は以前Simplicity導入当初にこんな記事を書きました。http://oyaji-choice.com/2014/08/1454/当時Simplicityの印象を真っ白なTシャツという言葉で表現したんです、これからどんな色にも柄でも染まる真っ白なテーマだと。親父色に染めてやるわ~!!!最初にツールを紹介します。いうのも人生はじめてCSSの表記を確認しながら子テーマに修正を加えました。どこがどんな風に書かれているかを見るのに使ったツールです。chromeのCSSViewerです。ツールを起動するとあとはカーソル位置のCSS情報が表示されます。修正したい箇所のIDとクラスを知るのに非常に便利でした。それさえ分かればあとは本テーマ内のstyle.cssで表記を探し、その箇所を子テーマのスタイルシートにコピペ、必要に応じて修正と追記をするという手順です。このあたりは素人手順なんだろうなと確信していますが素人親父が一生懸命やったのでウェブに詳しいみなさん、温かい目で見守って下さい。その超便利なCSSViewerはこちらからダウンロードできます。1つずつやったことを書いていきます。スポンサーリンクホーム記事一覧の幅を変更すこし横幅が広いと思っていました。目の横への動作がしんどく感じたんです。これはこのあとにも書く記事幅も同じ理由です。通常Simplicityのホーム記事一覧のボックス幅は680pxですが、これを少し狭めました。95%の646pxです。auto;}これだけ。ここで「#list」がホーム記事一覧のid名です。ホーム記事一覧のサムネイルにエフェクト何か仕掛けがしたかっただけです。「ぽわぁ~ん」となります、気持ちいい感じに。トップページで触ってみて!!スタイルシートの記述です。0.5s;}こちらの記事を参考にさせてもらいました。【CSS】画像をマウスオーバーしたときに効果を与えるメモ4つ記事幅を変更これは最初のホーム記事一覧幅の変更と同じ理由です。親父がおっさんだからなのか分かりませんが、目の横への動きが疲れるんです。auto;}ホーム記事幅と違うのはクラスになったこと。class名「.article」です。詳しいことは不明!今までは横幅一杯に文字表示されてましたがけど、余白が広めになりました。背景の肌色とのあいだに白い部分があって見やすくなりましたよね。記事幅と同じように読みやすくするために変更しました。これはSimplicityのカスタマイズ機能で設定変更です。15pxに設定しました。いくつか試した中で一番読みやすいと感じたサイズです。以前から修正したかった見出し。こちらの記事をこってりと参考にさせていただきました!まことに有難う御座います!!ブログの見出しデザインまとめとCSSカスタマイズで参考にしたサイト参考というか、パクりというか。本当に感謝しております^^。追加したスタイルシートの記述は以下の通り。h2見出しh2はSimplicity標準に少し修正を加えました。左側の縦棒の太さをと色を変更しています。あとは上下のpaddingを狭くしました。引き締まった印象になったと思ってます。font-size:26px;}h3見出しよく使うh3見出しは以下の通りです。背景をつけて長方形で囲み、アンダーバーに色をつけました。1);}h4見出しこれはパソ活ラボさんのが気に入ってしまい、そのまま参考にさせていただきました。色だけはブログカラーに変更しています^^。left:7px}まとめどうでしょうか?読みやすくなったかな?勿論記事が大事なのは承知しております。一方でメラビアンの法則のように見た目も重要だと考えます。ブログでいうと読みやすさかな。今の状態は結構気に入ってます。あとは価値ある記事だな。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。関連記事Simplicityの最新バージョン1.3.6を導入。Simplicityユーザーへ告ぐ、記事下ウィジェット機能には宝が眠っているぞ!!1週間前にさくらインターネットからエックスサーバへの引越しをしました。...ロジカルな思考がとても心地よい!!初めての『IFTTT(イフト)』で早速レシピを作ってみた。IFTTTを使ってみました。...ブログの写真が勝手に回転!調べてわかったEXIF情報と写真の扱いについて猛省。...WordPressとはてなブログの2つもちを決意した理由。...錦織圭敗れてブログの強みがわかった!なんだよぉ、負けちまったじゃん錦織~。準決勝対ラオニッチ、フルセットタイブレークの末敗退。初日注目の顔合わせ、逸ノ城-遠藤。POST粘り勝ちでもなく大逆転でもない、錦織の圧勝。...STINGER7の記事中にアドセンスを配置してみた久しぶりにブログのテーマを変えてみました。...今更ながらアフィロックに参加しました!そして決意したこと。多くの方がご存知だったでしょう、昨年末のアフィロック。大学に進学するなら国立大学に決まってんだろ、って発想は田舎者の考え方だけど何も間違ってないって話し。