【簡単】はてなブログ CSSでデザインカスタマイズ。フォントサイズ・見出しのデザインなど。初心者に役立つ情報をまとめました。

はてなブログで書いていた時のカスタマイズ備忘録です。

2017年9月25日にはてなブログからWordpressへ移転しました。今のブログとはデザインが全く異なりますがご了承ください。

[Sponsor]

 

本文

フォントサイズの変更

記事とサイドバータイトルの文字サイズを小さくしました。

フォントなどスタイルを指定する文字列(コード)を自分のブログの「デザイン」→「カスタマイズ」→「スタイルCSS」に貼ります。

例:

本文の文字サイズ

.entry-content {
font-size:17px;
}

サイドバータイトルの文字サイズ

.hatena-module-title {
font-size: 14pt;
}

記事タイトルのフォントサイズ

.entry-title {
font-size: 18pt;
font-family: Meiryo, メイリオ, sans-serif,”HiraKakuProN-W6″, “ヒラギノ角ゴ ProN W6”,;
}

 

見出しデザインの変更

見出しのデザインはブログ全体の雰囲気を左右します。デフォルトのデザインは、大中小の区別が分かりにくかったので変更しました。帯状にしたりアンダーラインを入れたりしました。

同じくコードを「デザインCSS」に貼ります。

 参考記事

はてなブログを簡単カスタマイズ!②見出しのデザイン変更編 – 無題で行こう

見出し先頭の記号を非表示にするには

以前のテーマのデフォルトでは見出しの先頭に、小さいアイコンが付いていました。これを消すにはタイトルのbackgroundに色を指定しますデザインがすっきりとシンプルになりました。

例)

.entry-content h5{
color: #3f3f3f;
background: white;
padding: 5px 15px;
border-left: 0px solid #ff9999;
border-bottom: 2px solid #ff9999;
}

帯の高さの調整

帯が太かったのでやや細めにしました。上のコードの padding: 5px 15px; の数字を変更しました。数字を小さくすると細くなります。

ラインの太さの調整

左側は border-left 底は border-bottom のpxの数字を調整します。
色は#のところで指定します。(色コードは下のサイトを参考にしてください)

色見本

色選びに役立つサイトです。

color-hex

トップの部分で色を選択すると、合う色をピックアップしてくれます。画面が見やすくて操作も分かりやすいので、私が一番お世話になっているサイトです。

http://www.color-hex.com/

WEB色見本

膨大な色見本です。色の名前を見ているだけでも楽しい。

w.colordic.org

HUE/360

操作がとてもシンプルです。色を選択すると、その色に合うコードをピックアップしてくれます。その色の中から選ぶとカラーバランスの良いサイトが作成できます。

画面イメージ

f:id:yururimaaruku:20160530194719p:plain

▼左下でオレンジの色を選んだらそれに合う色が絞り込まれました。色選びに迷ったらこの中から選ぶのも一つの方法です。

▼サイト

[ HUE / 360 ] The Color Scheme Application

Coolors

スペースキーを押すだけでランダムに色の組み合わせを提示してくれるツールです。インスピレーションがわくかもしれません。固定したい色は鍵マークをクリックすると固定できます。モバイルアプリもあります。

画面イメージ

f:id:yururimaaruku:20160530194600p:plain

▼サイト

coolors.co

リンク文字色の変更

青色+アンダーライン付きに変更しました。読者は青色でアンダーラインがある方が、心理的にリンクだと認識しやすいそうです。

枠で囲む

本文内で大事な場所を囲むコードです。本文のタブをHTMLに切り替えてコードを貼り付けます。

このブログで使用しているコード

サンプル

<div style=”padding: 10px 5px 10px 20px; color: black; background-color: #e5ffcc; border-radius: 10px; border: 2px solid #ceff9e;”>サンプル </div>

その他の場所

トップに戻るボタン

▼関連記事

Twitterのエゴサーチで見落とさない方法。カスタムシェアボタンにブログ名を挿入する。 – ゆるりまあるく

◆カスタマイズ記事まとめ◆

初心者向け:はてなブログの簡単カスタマイズまとめ(はてなブログ デザインCSSなど) – ゆるりまあるく

ではまた。

SNS・ブログアイコンの作成はプロにお任せ。ココナラ500円から良心的な価格で大満足。

2016.08.30

Webライティングと運営に関する本☆実際に読んで自信を持って推薦できる本だけ集めました。

2017.12.30

Udemy始めました。安くても十分学べる。オンラインWEBデザイン講座がおすすめ。

2018.02.18
スポンサーサイト

▼現金でギフト券チャージ、初回購入で1,000ポイント!
さらにチャージするたび最大2.5%ポイント貯まります。