タイトル・画像のセンタリング・サイドバーや見出しなどWeb制作スポンサーリンクブログ書いているよりも、ブログカスタマイズをしている方が楽しいゆきひーです。今までいろいろと小出しに記事にしていましたが、デザインCSSに書かれていることの中で、どのテーマでも共通で使える(かもしれない)ものをまとめて書きました。全て書いていくと長くなってしまうので、他の記事で補完できるところはそちらを見ていただければと思います。適当に追加しまくっているので、おそらく最適な状態ではないと思いますが、参考になればと思います。(実際、今までの記事もいろいろと指摘を受け、変更したりしています)ちなみにデフォルトのテーマは「Blank」で、レスポンシブに設定しています。はてなブログこの記事も後半の部分はレスポンシブの方向けになっています。フォント正直フォントはころころ変えています。現在は数字がおしゃえだと感じたのでこのフォントにしています。あとは行間と、文字の色も濃い目の灰色にしています。文章系のブロガーさんは薄い色にした方が良いのかもしれません。#333333;}トップ画面でのフッターを消去トップ画面は「続きを読む」タグを入れて、5つの記事が並ぶようにしているのですが、その際、記事のフッター部分が一つ一つついてしまうので、それを消去します。スターも5記事分もついていると遅くなりそうだし、コメントがあるとトップ画面が長くなってしまうので、それを防ぐ意味もあります。none;}画像をセンタリングして線でくくる画像をセンタリングして、外側を線でくくると若干見やすくなるかなあと。#202f55;}ただ下線を入れるようにするだけですが、見栄えは結構変わります。www.yukihy.comの{}の中を入れていただくと、他にもいろいろとできそうです。タイトル付近の色を変えるブログタイトル付近の色を変更できます。上から、「タイトルの背景色」「タイトルの文字色」「ブログ説明の文字色」です。www.yukihy.com上の記事に書きましたが、僕の見出しと記事タイトルはこんな感じです。上から大見出し・中見出し・小見出し・記事タイトルです。#2a2a2a;}リンク色の変更Blankではリンク色のデフォルトが黒のままですが、リンク色が青かどうかでクリック率は大きく変わるそう。これはやっといた方が良い気がします。ホバー色がなぜこの色なのかは特に意味はないです。}「続きを読む」の文字を横に広くするもともとのデザインも十分おしゃれですが、横幅を広げました。50%;}【PC1カラム版】ブラウザの横幅が縮んだ際のみに適応される部分です。CSSは下に書いたものが優先されるため、変更がある部分のみを修正していく感じです。}の間に書き込んでいきます。上のだと「横幅が968px以下になったらこの中のを反映するよ」という意味になります。サイドバーのカスタムHTMLのモジュールを消去1カラムになるとサイドバーが下に回り込みます。するとアドセンスの表示が、「記事下アドセンス」→「シェアボタン」→「サイドバーアドセンス」としつこくなってしまいます。1カラムになったときのみ、この「カスタムHTML」で指定したものが消えるようにしました。同時にフォローボタンやHuluの広告も消えるのですが、フォローボタンは最初から記事下にありますし、Huluに関しては最深部になるのでもはや効果はないかなあと思って妥協しています。}下に回り込んだサイドバーを2分割に下に回り込んだサイドバーの横幅を680pxに指定し、それぞれのモジュールを336pxと絶妙なサイズ感にして「左!」「お前は右!」と左右に振っていきます(leftが左、rightが右です。横幅いっぱいに広がるようになっていると思うのですが、半分のサイズにするとタブレットなんかで見たときに、見やすくなるかなあと。下に書いた「2分割解除」とセットでどうぞ。right;}【スマホ版】このあたりからスマホの横持ち以下のサイズになります。}の中に書き込んでいきます。アイフォン6とかの横持ちを考えるとこんくらいかなあと。全体的な文字を小さくスマホでは文字の大きさが17pxのままだと、スクロール量が多くなってしまうので縮めます。15px;}余白や文字の大きさの調整テーマによって大きく変わる部分かと思います。PC版だと違和感がないのですが、スマホで見る際にはいろいろと調整が必要となります。図の方が早そうなので図を貼ります。上の図のように、スマホ版では見出しの文字を小さくしないと圧迫感がありますし、逆に無駄な余白をせまくしてスクロール量を減らしたり、逆に誤タップを誘発しそうなところには余白を作った方がよいかなあと。実際にしたのようにします。するために調整をします。10px;}2分割サイドバーを解除PC1カラムのところで2分割スタイルにした場合、解除する必要があります。サイドバーを1列に直します。100%;}まとめ以上が共通でできる(かもしれない)カスタマイズです。何となくコードを書いたらすぐに反映されるのが楽しくて、いじりまくっています。はてなブログPro都内に住む大学5年生だったのがこの春から社会人一年目になりました。データ分析職として働いております。Googleアナリティクス※メールでのブログカスタマイズのご依頼は現在受けておりません。@ftmaccho詳しいプロフィールはこちらから。広告依頼など重要っぽい連絡はこちらからお願いします。Life引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。