(adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-4486288884285125", enable_page_level_ads: true });

Dear bro

この地球上のどこかにいるわたしと同じことで困っているあなたへ

【2分でできる】はてなブログで記事の両サイドにスペースを作る方法【コピペ一発】

f:id:dearbrother:20181202215742j:plain はてなブログのデフォルトって文字の両サイドが画面いっぱい過ぎるなと感じたことはありませんか?

もう少し記事の両サイド空けたいなというかた向けの記事です。

この記事のテーマ
はてなブログの記事の両サイドにスペースを作る方法

簡単にできます

記事のmarginの数値を指定してやるだけです。

はてなブログの記事は.entry-content。

コピペ一発

以下のコードを[デザイン]→[スパナマーク]→[ヘッダ]→[タイトル下]に貼りつけます。 


<style type="text/css"> 
.entry-content{
margin:0 1em;
}
</style> 

[変更する]を押すのを忘れずに。

以上で記事の両サイドに一文字分のスペースができます。

スペースを広くor狭くしたい

上記のコードの1emの数字を変えるとスペース幅を調整できます。

1emは一文字分なので、2emにするともっと両サイドにスペースができますし、0.5emにすると両サイドに一文字の半分スペースができます。

お好みのサイズに調整してください。

もし反映されなければ

1emのあとに!importantと入れてみてください。

反映されないときはデフォルトの設定が優先されている場合があるのですが、!importantをつけることでこちらを優先させます。  

記事の見やすさに関するその他の調整

先ほどコピーされたコードの<style type="text/css"></style>はここにCSSを書きますよという指定です。

そして.entry-contentはコンテンツ=文章の指定なので、ここで文章中の文字サイズなども変更することができます。

文字サイズの指定はfont-sizeです。Googleの推奨サイズは16pxなので、例としてコピペで変更できるようにコードを載せておきます。

font-size:16px;

これを最初にデザインCSSに貼り付けた.entry-content{}の中に貼り付けるだけです。


以上、はてなブログで記事の両サイドを空ける方法とおまけで文字サイズの変更法でした( ´ ▽ ` )ノ