スキップしてメイン コンテンツに移動
【ブログの投稿にはアフィリエイト広告、およびアドセンス広告が含まれる場合があります】

Bloggerで投稿のテキスト行間を広げる方法

Bloggerに日本語で書いていると、行間が狭いなーと思うことが多いです。
Bloggerの投稿で文章の行間を広げるCSSを紹介します。



Bloggerで投稿テキストの行間を広げるCSS

Bloggerは日本語に特化されたブログサービスではないので、なにかとむず痒いところが多いですね。

Bloggerで投稿の行間を調節する方法です。
(テンプレートによって、若干異なるかもしれません)

1.カスタマイズしたいブログの管理メニューで「テーマ」を選択し、「カスタマイズ」というオレンジ色のボタンをクリックする。



2.「上級者向け」から「CSSを追加」を選択する。


3.以下のような画面になるので、この下のCSSコードをコピペして貼り付けます。




.post-body {
line-height: 1.6em;
}


4.「1.6em」とある数字を調節して、好みの行間にし、右上の「ブログに適用」というオレンジ色のボタンを押して完成です。



ちなみに、本ブログは1.8emで設定しています(この記事投稿時点)。




コメント

このブログの人気の投稿

BloggerのブログのPing送信を自動化する方法

BloggerにはPing送信先の追加ができないので、ブログランキングとかに更新情報をおくるには手動でPing送信を行わなくてはいけません。 …って、やっぱりめんどうですよね。 それで、自動化できる方法はないかと探してみました。IFTTTというサービス(無料)を使って、Bloggerから自動的にPing送信を行う方法を説明します。

Bloggerのスマホ表示で記事下にラベル(カテゴリー)を表示させる方法

デフォルトのBloggerのスマホ表示は、とってもシンプルで、カテゴリーとして利用する「ラベル」も表示されません。 しかし、これでは、ユーザーが記事を探しにくく、ブログからすぐに離脱してしまいますので、ラベルを有効的に活用したいものです。 テンプレートのHTML編集を行えば、意外と簡単にBloggerのスマホでも記事下のラベル表示が可能になります。 記事下にラベル(カテゴリー)を表示させるには、HTML編集を行います。 HTML編集で、「post-footer-line post-footer-line-2」を検索します。2カ所見つかるはずで、片方がPC用、もう一方がモバイル用となっています。 そのモバイル用の方に、次のコードを挿入するだけです。 <span class='post-labels'>         <b:if cond='data:top.showPostLabels and data:post.labels'>           <data:postLabelsLabel/>           <b:loop values='data:post.labels' var='label'>             <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>           </b:loop>         </b:if>       </span> HTML編集画面は、こんな感じになります。 PC用には、すでにコードが書き込まれているはずなので、それをそのままコピーしてもOKです。 こんなふうに、スマホの記事下にラベルが表示されるようになりました。 ちなみに、モバイルで記事タイトル下にラベルを表示させる方法は、 こちらの記事 で書

nendのオーバーレイ広告やインライン広告をbloggerに貼る方法

スマホで広告を最適化して表示してくれるnendは、アフィリエイトを行うならぜひ有効活用したいASPです。 nendで取得したオーバーレイ広告を、Bloggerに貼る方法を説明しています。