はてなブログのカスタマイズを早くすべき3つの理由

はてなブログのカスタマイズを早くすべき3つの理由

はてなブログを書き続けていると、「ブログのデザインを綺麗にしてみたい」と誰もが思うようになります。
他人のブログを見ると、綺麗なデザインのものが多くありますよね!

はてなブログを続けていると、カスタマイズしたいという欲望が湧き、いずれ絶対にカスタマイズすることになるはずですが、カスタマイズするなら記事が少ないうちに早くするほうが良いです。

はてなブログのカスタマイズを早くすべき理由は次のとおりです。
1.カスタマイズしたデザインは過去記事にも適用されます。過去記事はデザインを考慮せずに作ってしまっているので、後でカスタマイズすることで逆に見た目のバランスが崩れてしまうものが多数できてしまいます。
2.はてなブログのカスタマイズ方法はネット検索すれば説明サイトが多くあります。基本的なカスタマイズであれば、これら先人の知恵を拝借すれば簡単にできます。
3.基本的なカスタマイズをするだけでも、ブログを書くモチベーションが格段に上がります。

超簡単カスタマイズ手順

ダッシュボード → デザイン → カスタマイズ
で、次の画面を開きます。

「デザインCSS」をクリックすると、入力枠が開きます。

この枠にCSSを埋め込んで、変更を保存すればデザインが変更されます!
なお、上記入力枠のサンプル画像には既にCSSが埋め込まれていますが、初期値であれば入力枠は空欄です。

サンプルCSS

/*フォントサイズ*/
.entry-content p {font-size: 17px;}

/*見出しh3*/
h3 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}

/* box2 */
.box2 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
color: #6091d3;/*文字色*/
background: #FFF;
border: solid 3px #6091d3;/*線*/
border-radius: 10px;/*角の丸み*/
}
.box2 p {
margin: 0;
padding: 0;
}

サンプルCSSを「デザインCSS」の入力枠にコピペして埋め込むと、デザインがカスタマイズされます。
なお、既にCSSコードが入力されている場合は、その次の行以後にコピペする必要があります。
また、慣れないうちは、はてなブログでテストサイトを作り、必ずテストサイト上で試してみてから本番サイトへ適用するようにしてください。

スマートフォン画面

ダッシュボード → デザイン → スマートフォン

で、スマートフォン画面のデザイン変更画面に進みます。
レスポンシブデザイン対応のデザインテーマであれば、この画面の「詳細設定」をクリックし「レスポンシブデザイン」にチェックを入れておけば、先ほどの「デザインCSS」の入力欄に入力するだけで、スマートフォン画面も連動してデザインが変更されます。

サンプルCSSの説明

フォントサイズの変更

/*フォントサイズ*/
.entry-content p {font-size: 17px;}

上記のCSSコードで、記事のフォントサイズが17ピクセルに変更されます。
(aa-blogは17ピクセルにしています。)
なお、「17」の部分を好きな数値に変更可能です。
/* と */ で囲まれた部分はメモ欄で、好きな文字を覚書として入力できます。

見出しの変更

/*見出しh3*/
h3 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}

上記のCSSコードで、記事の見出しデザインが変更されます。
なお、文字色、背景色、左線、下線の部分を自由に変更可能です。
はてなブログでは、大見出しはh3で表されます。

ボックスの作成

/* box2 */
.box2 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
color: #6091d3;/*文字色*/
background: #FFF;
border: solid 3px #6091d3;/*線*/
border-radius: 10px;/*角の丸み*/
}
.box2 p {
margin: 0;
padding: 0;
}

上記のCSSコードで、記事のボックスデザインが作成されます。
なお、文字色、線、角の丸みの部分を自由に変更可能です。
はてなブログでは、HTML編集で次のように入力した部分が、下に表示しているボックスデザインに変わります。
<div class=”box2″>
ここに文章
</div>

ここに文章

もっと詳しく

著名なサイトで、もっと詳しく勉強しましょう。

saruwakakun.com

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です