アメブロの記事本文をカスタマイズする方法

アメブロカスタマイズで自分らしい空間を作る技 アメブロの記事本文をカスタマイズする方法

アメブロカスタマイズのわざめーばです。

こんにちは。

今回は、アメブロのカスタマイズ向けデザインテンプレート『CSS編集用デザイン』を適用した際の、『アメブロの記事本文をカスタマイズする方法』をいくつかまとめてご紹介します。

何れの方法も、CSSの編集でアメブロのカスタマイズ用CSS(=ユーザーCSS/現在使用中のブログデザインCSS)の最後にコードを追加することでカスタマイズできる方法です。

これらを使って、あなたのアメブロの記事本文の体裁を、ある程度好みの状態にカスタマイズできると思います。

まずは初期状態

アメブロカスタマイズで自分らしい空間を作る技 初期状態

上の画像は、『CSS編集用デザイン』を適用したアメブロの初期状態で記事を投稿したイメージです。

アメブロでは、ブラウザや投稿時に利用する記事エディタによって実際に投稿される記事データが違います。

上の画像の記事の中で、前半の4行は『タグ編集エディタ』で特に何のタグ使わずに続けて4行書いた状態で、後半の4行はInternet Explorer 8(IE8)でアメブロの『標準エディタ』を使って続けて4行を書いた場合と同じ状態です。

初期状態では、IEで書いたもののほうが、行間がかなり広くなる設定になっているようです。

他にも違う場合があるかもしれませんが、今回は、この『タグ編集エディタ』の場合と『IE+標準エディタ』の場合の2つを例にカスタマイズ方法をご紹介したいと思います。

行間を狭くする

アメブロカスタマイズで自分らしい空間を作る技 行間を狭くする

まずは、『IE+標準エディタ』で投稿した記事の行間を、『タグ編集エディタ』で投稿した場合と同等程度に狭くする方法です。

以下のコードをCSSに追加して下さい。

.skinArticleBody p{
  margin-top:0px; /* 上余白 */
  margin-bottom:0px; /* 下余白 */
}

もちろん、完全に0にしてしまわなくても、『0px』の部分の数値を変えることで、好みの行間にすることが可能です。

なお、この場合のように、『margin-top』と『margin-bottom』で行間の設定をする場合、両方を足した値が行間の値となりそうに思うかもしれませんが、実はそうはならず、『margin-top』と『margin-bottom』のどちらか大きい方が行間の値となります。

間違えやすいのでご注意下さい。

行間を広くする

アメブロカスタマイズで自分らしい空間を作る技 行間を広くする

今度は逆に、『タグ編集エディタ』で投稿した記事の行間を、『IE+標準エディタ』で投稿した場合と同程度に広くする方法です。
以下のコードをCSSに追加して下さい。

.skinArticleBody{
  line-height:2.5; /* 1行の高さ(何文字分?) */
}

ただしこの場合は、記事本文以外の、『投稿日時』『テーマ』『記事下広告』などにもこの設定の影響が出ますので、ちょっと使いにくいかもしれません。

文字サイズを大きくする

アメブロカスタマイズで自分らしい空間を作る技 文字サイズを大きくする

記事の文字サイズを大きくするには、以下のコードをCSSに追加します。
.skinArticleBody{
  font-size:16px;
}

『16px』の部分が文字サイズになりますので、お好みのサイズに設定して下さい。

ただし、これもやはり『投稿日時』『テーマ』『記事下広告』などにも影響が出てしまいます。

文字サイズを大きくする(IE+標準エディタの場合)

アメブロカスタマイズで自分らしい空間を作る技 文字サイズを大きくする

『IE+標準エディタ』の場合は、記事の文字サイズのみを大きくする事ができます。

以下のコードをCSSに追加してください。
.skinArticleBody p{
  font-size:16px;
}

すべての場合をチェックしたわけではありませんが、僕が試した範囲ではこれで大丈夫なようです。

もし、『タグ編集エディタ』を使っている場合は、記事の文字部分を<p>タグで囲んでおいてから、この方法を使うこともできます。

記事幅を広げる

アメブロカスタマイズで自分らしい空間を作る技 記事幅を広げる

最後に、メインカラムを広げるほどではなさそうだけど、もうちょっとだけ記事幅が広い方がいいと思われる場合は、次のコードをCSSに追加することで、少しだけ記事幅を拡げることができます。

.skinArticleBody2{
  margin-left:15px;
  margin-right:15px;
}

『15px』の部分は、画像の黄色い帯、つまり、記事の両側の余白部分の幅です。

なので、これを更に小さくすることで幅を広げたり、逆に大きくすることで幅を狭くしたりできます。

以上、『アメブロの記事本文をカスタマイズする方法』でした。

今回ご紹介した方法で、記事の体裁をある程度好みの状態にすることができると思いますので、よかったらやってみてくださいね。

アメブロカスタマイズで自分らしい空間を作る技