Bloggerで記事タイトルの文字が2行で当たるときの直し方｜CSSを入れる場所に注意

Bloggerで記事を書いていて、タイトルが2行になると、1行目と2行目の文字が近すぎて当たることがありました。

最初は「行間の数字が悪いのかな？」と思ったのですが、原因はそこだけではありませんでした。

本当の原因は、CSSを入れる場所が違っていたことです。

どんな状態だったの？

記事タイトルが1行なら大丈夫でした。

でも、2行になると文字と文字が近すぎて、見た目がつまって見えました。

原因はこれでした

CSSを書く場所をまちがえていました。

Bloggerでは、テーマのHTML編集でCSSを入れるとき、<b:skin><![CDATA[ の中に入れないと反映されないことがあります。

私は最初、この外に書いていたので、認識されませんでした。

直し方

手順はこれです。

  1. Bloggerで「テーマ」を開く
  2. 「HTMLを編集」を押す
  3. <b:skin を検索する
  4. <b:skin><![CDATA[ のすぐ下にCSSを書く
  5. 保存する

入れたCSS

.post-title,
.post-title a,
.entry-title,
.entry-title a,
h1 {
  line-height: 1.4 !important;
}

大事なポイント

このCSSは、<b:skin><![CDATA[ の外ではなく、中に入れることです。

ここをまちがえると、コードを書いても反映されません。

どう変わったの？

タイトルが2行になっても、1行目と2行目の間に少し余白ができて、読みやすくなりました。

まとめ

Bloggerで記事タイトルの文字が2行で当たるときは、行間だけではなく、CSSを入れる場所も確認した方がいいです。

今回のポイントはこれです。

  • 行間は line-height: 1.4
  • CSSは <b:skin><![CDATA[ の中に入れる

同じことで困っている人の参考になればうれしいです。

コメント

コメントを投稿

このブログの人気の投稿

テンプレ一覧

このブログでできること 「ブログの崩れ」「CTAの置き方」「見やすさ」を、コピペで整えるテンプレをまとめています。 まずは“貼って使える形”を優先して、短く分かりやすく公開します。 現在の動作確認：Google Blogger（HTMLモード）／他サービスは順次対応（状況により変更あり） 無料テンプレ 無料配布 販売テンプレ 販売テンプレはストアにまとめます。 ストア（BOOTH）→ Web整備室｜テンプレ（BOOTH） ※ダウンロードにはBOOTH（pixiv）へのログインが必要です。 使い方 使いたいテンプレを選んで、HTMLをコピーします。 編集画面で「HTML表示」に切り替えて貼り付けます。 プレビューで崩れがないか確認して、公開します。 FAQ Q1. 貼ったのに見た目が違います テーマや画面幅で見え方が変わることがあります。まずプレビューで確認してください。 Q2. どこに貼ればいいですか？ 基本は記事本文の「HTML表示」です。テンプレによっては「レイアウト（ガジェット）」側に入れる場合もあります。 Q3. 広告やアフィリエイトはありますか？ 当ブログはアフィリエイト／広告を含む場合があります。リンク先の内容は各販売元の表示をご確認ください。 最後に：リンク集 S01：導線セット（BOOTH）→ 商品ページはこちら もしリンクが開けない場合は、BOOTHの「ショップへのお問い合わせ」から連絡ください。 ブログ名：【WEB整備/テンプレ】
続きを読む

ただの文章を見やすい箱にする方法｜初心者向けHTML見本

「ただ文章を書くだけだと、少し見にくいな」と感じることがあります。 今回は、 普通の文章 を 見やすい箱 にすると、どう変わるかを見本でまとめました。 ビフォー まずは、ふつうの文章です。 ▼ 前はこう 無料テンプレはこちらです。使いたい方は下を見てください。 アフター 同じ内容を、箱に入れるとこうなります。 ▼ 後はこう 無料テンプレはこちら 使いたい方は下を見てください。 どう変わったの？ 前：ただの文章 後：箱に入って、少し目立つ 前より「ここが大事」と伝わりやすい 初心者でも見た目の変化がわかりやすい 使うコード 下のコードをコピーして使えます。 ▼ コピーするコード 下の灰色の中を、そのままコピーしてください。 無料テンプレはこちら 使いたい方は下を見てください。 使い方 上の「アフター」の見た目を確認する 下の「使うコード」をコピーする BloggerのHTMLモードに貼る 文字だけ自分の記事に合わせて変える まとめ 今回は、ただの文章を 見やすい箱 にしてみました。 大きく難しいことはしていませんが、前より少し見やすくなります。 初心者向けなら、まずはこういう 見た瞬間に違いがわかる形 から始めるのが分かりやすいです。
続きを読む

比較記事テンプレ 基本編とは？まずはこの形で十分な理由

比較記事を書くとき、いきなりいろいろ足したくなることがあります。 でも、最初から比較表やFAQまで入れようとすると、かえって読みにくくなることがあります。 そこで使いやすいのが、 比較記事テンプレ 基本編 です。 これは、比較記事をわかりやすく始めるための、やさしい土台です。 実際の基本編テンプレも見たい方はこちら → 比較記事テンプレ 基本編 「まず何を書けばいいのか」 「どこをそろえれば見やすいのか」 そこをシンプルに整えるために作りました。 この記事では、この 基本編がどんな役目のテンプレなのか を、初心者にもわかりやすく説明します。 比較記事テンプレ 基本編は、はじめの形を作るためのテンプレです 比較記事は、ただ商品を並べればいいわけではありません。 読む人はまず、 「今日は何をくらべる記事なのか」 を知りたいです。 その次に、 「どこが違うのか」 を知りたくなります。 基本編は、この流れを見やすくするためのテンプレです。 いきなりたくさんの機能を入れるのではなく、まずは 記事の形を整えること を大事にしています。 いきなり全部入れないほうが、かえってわかりやすいです 比較記事というと、比較表や質問コーナーを思い浮かべる人もいるかもしれません。 もちろん、それが役立つ場面もあります。 でも、最初の段階では、そこまで入れなくても大丈夫です。 むしろ、先に入れすぎると、読む人がどこを見ればいいのか迷いやすくなります。 基本編で大事にしていること 何を比べるのか どんな違いがあるのか どんな人に合いそうか まずはこの3つが追いやすいだけでも、記事はかなり読みやすくなります。 このテンプレは、初心者に向いています ...
続きを読む