アメブロdeアクセスアップ

アメブロ姫ブログカスタマイズ 記事の高さを小さくする方法 | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:CSSでカスタマイズ

アメブロ姫ブログのプチカスタマイズです。

 

 

記事幅を大きくしたり、小さくしたりするには、
全体のレイアウトとちょっと関係があります。

 

では、記事の高さを調整するには、どうしたらいいのでしょうか?

 

 

 

 

 

アメブロの記事の表示部分は、全体のレイアウトで決められています。

 

 

 

まず、全体に幅の大きさを決めてから、
サイドバーと記事幅・余白などを計算してから、
それぞれの幅を決めていくんですね。

 

 

記事幅を広げたい場合、一番簡単な方法では、
2カラムにすることです。
なぜならば、2カラムにするとサイドバーが300pxとなり、
記事エリアの幅は、665pxとなります。(余白15pxです。)

 

 

 

全体のレイアウトから算出されているので、レイアウトの幅を簡単に
変更するのも、ちょっと大変です。

 

 

 

 

今回、記事エリアの高さについて、質問を受けました。

 

 

 

 

姫ブログでよく見かけるんですが、記事エリアを小さくして、
画像やアイフレなどをたくさん使うのが、姫ブログの特徴です。

 

 

 

アメブロの場合、中の広告がちょっと多く・大きくなったので、
記事本文の高さを変更すると、ちょっと姫ブログっぽくなるかもですね。

 

 

 

完成は、こんな感じです。

 

ちえぞうの姫系サンプルブログ

 

 

記事本文の高さを狭くして、文字数が多い場合、
スクロールを表示させるようにしました。

 

 

姫ブログだけでなく、他のブログでも使えるかしら?

 

 

 

簡単なCSSの追加でできますので、
やりたい方は、ぜひともチャレンジしてくださいね。

 

 

 

 

 

記事の高さを狭くする方法

※CSS編集可能デザインスキンを使っています。

 

 

 

CSSに下記コードをコピーして、一番下に貼ってください。

 

 

 

記事幅全体は、skinMainAreaなんですが、
記事が書かれている場所は、articleTextAreaなんです。

articleTextは、記事本文のエリアです。

 

 

ここの高さを変えてあげればOK!!です。(好きな高さにどうぞ!!)

 

 

 

ただ、記事を読んでいただくのですから、
普通に設定したら、全文を読むことができませんよね。

 

 

 

ですから、overflow: auto; という設定で
設定した高さを超えたら、スクロールを付けて表示させるという設定を
しています。

 

 

記事の高さ調整

 

 

 

もちろん短い文章ならば、このスクロールは表示されませんが、
長い文章では、上図のように表示されます。

 

 

 

結構簡単ですよね。

 

 

 

 

ただ、記事を読んでいただきたい方は、
全体的なレイアウトと、ブログのテーマを考えて
それぞれの設定値を決めてくださいね。

 

 

 

ビジネスブログやコンテンツブログでは、
標準のレイアウトがいいでしょうし、画像をたくさん見せたい場合や
楽天商品などの商品リンクを貼りたい場合は、
記事幅が広く使えるレイアウトを考えましょう。

 

 

 

それぞれ、基本はブログのテーマによります。

 

 

ベースのテンプレートやレイアウトデザインを整えてから、
カスタマイズを行ってくださいね。
 

 

 

 

テンプレートデザイン・カスタマイズのこと、アクセスアップのこと、
アメブロのことならお任せあれ!

Copyright © アメブロdeアクセスアップ All Rights Reserved.