読者です 読者をやめる 読者になる 読者になる

ゆるりまあるく

~ システム管理者で主婦の私の暮らしの工夫 ~

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

 ブログカスタマイズ デジタル生活

<この記事はブログカスタマイズごとに随時加筆しています>

操作はそれ程難しくはないのですが、やり方を調べるのに結構時間がかかりました。

折角なので、備忘録として参考にした記事を書いておきます。

 

<目次>

 

本文

フォントサイズの変更

ブログ本文とサイドバーの文字サイズを小さくしました。

 

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

 

参考記事

【はてなブログカスタマイズ】色々な場所の文字サイズ変更コード一覧 - Backflow

<スポンサーサイト>

 

見出しデザインの変更

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

 

同じくコードを「デザイン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の数字を調整します。
色は#のところで指定します。(色コードは下のサイトを参考にしてください)

 

 

色見本

色のコードのサイトです。

 

<参考サイト>

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>

その他の場所

トップに戻るボタン

右下にうっすら出ているトップに戻るボタンです。Proの方はスマホサイトにも設置できます。

 

▼参考サイト

 

SNSシェアボタンのデザイン変更

こちらのブログでは、様々なシェアボタンやフォローの設置方法が提供されています。

いつもお世話になっているサイトです。ブログ全体のデザインに合わせてボタンが選べます。こちらのブログも枠のみのデザインに変更しました。説明も詳しくて分かりやすかったので、とても簡単にできました。

 

◆ シェアボタンをカスタマイズする時の注意点 

別記事にまとめました。参考にしてください。

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

 

 

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

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

 

 ではまた。