ホーム / ブログノウハウ /

Blogger初心者が最初に悩む行間の解決策（2023）

2023/03/17

ブログノウハウ

t f B! P L

 


この記事ではBlogger初心者が最初に悩む
段落の行間（行と行の隙間）について詳しく説明しています

■更新履歴

・2023年3月17日…テンプレ作成

環境

Blogger ブログ
テンプレート：QooQリスト

まず初めに段落とは？

・Bloggerは文章の改行方法が2つあります

　「標準」…HTMLのDIVを使って改行しています

　「段落」…HTMLのPを使って改行しています

・デフォルトは「段落」です

段落だと何か問題なの？

・改行する度に毎回1行分の隙間が出来ます


例）段落だとこうなります

・あああああああああああああああ


・いいいいいいいいいいいいいいい


例）標準だとこうなります

・あああああああああああああああ

・いいいいいいいいいいいいいいい

じゃあ空白を消せば良いのでは？

・残念ながら出来ません
・実際には1行空いているのではなく、
　マージンとして設定されている隙間なので消せないのです

じゃあどうすれば？

1．文章を入力する前に「標準」ボタンを押す
2．段落で書いた文章を後でまとめて「標準」に戻す
　といった手順が必要です

但し、Bloggerは1つ上の文章スタイルを継承する仕様なので
いつの間にか段落になっていたり、標準になっていたりと
訳が分からなくなります

更に付け加えると投稿画面と公開画面では見え方が違うので
ますます混乱します

まずはコメントを入れて整理しよう

文字関連のCSSは一ヶ所にまとまっているので
まとめて変更するのをおススメします

手順

1．左メニューの「テーマ」をクリックします
2．カスタマイズの右にある▼から「HTMLを編集」をクリックします
3．CSS内を一度クリックしてから、Ctrl＋Fを押して
　/* 個別記事本文 */ を探します
4．ここには各文字設定が記載されているので
　コメント（項目名）を入れて分かり易くします
　オレンジ色の部分が追加箇所です

■変更前
/* 個別記事本文 */
#single-content{
margin-top: 1em;
line-height: 1.8;
}
#single-content p{
margin-top: 1.8em;
margin-bottom: 1.8em;
}
#single-content a{
color: $(font.link);
}
#single-content h2{
font-size: 2.26rem;
font-weight: bold;
padding: .8em .5em;
margin-bottom: 1em;
margin-top: 2em;
border-radius: 2px;
line-height: 1.2;
background: $(brand.color);
color: $(brand.font);
}
#single-content h3{
font-size: 2.26rem;
font-weight: bold;
margin-bottom: 1em;
margin-top: 2em;
padding: .5em 0;
line-height: 1.2;
border-bottom: solid 2px $(brand.color);
}
#single-content h4{
display: table;
padding: .5em 2em;
border-radius: 2px;
line-height: 1.2;
background: $(brand.color);
color: $(brand.font);
}
#single-content blockquote{
margin: 1.8rem;
padding-left: 1.8rem;
position: relative;
}
#single-content blockquote:before{
content:'\201D';
font-size: 400%;
position: absolute;
top: -1.8rem;
left: -1.8rem;
line-height: 1;
}

■変更後

/* 個別記事本文 */

/* 標準の行間と文字間 */
#single-content{
margin-top: 1em;
line-height: 1.8;
}

/* 段落 */
#single-content p{
margin-top: 1.8em;
margin-bottom: 1.8em;
}

/* リンク */
#single-content a{
color: $(font.link);
}

/* 見出し */
#single-content h2{
font-size: 2.26rem;
font-weight: bold;
padding: .8em .5em;
margin-bottom: 1em;
margin-top: 2em;
border-radius: 2px;
line-height: 1.2;
background: $(brand.color);
color: $(brand.font);
}

/* 小見出し */
#single-content h3{
font-size: 2.26rem;
font-weight: bold;
margin-bottom: 1em;
margin-top: 2em;
padding: .5em 0;
line-height: 1.2;
border-bottom: solid 2px $(brand.color);
}

/* 準見出し */
#single-content h4{
display: table;
padding: .5em 2em;
border-radius: 2px;
line-height: 1.2;
background: $(brand.color);
color: $(brand.font);
}

/* 引用タグ */
#single-content blockquote{
margin: 1.8rem;
padding-left: 1.8rem;
position: relative;
}

/* 引用タグ */
#single-content blockquote:before{
content:'\201D';
font-size: 400%;
position: absolute;
top: -1.8rem;
left: -1.8rem;
line-height: 1;
}

段落のマージンを変更するには？

段落のマージンを0にすると使い易くなります

手順

・段落のマージンを1.8 →0.0へ変更します

■変更前
/* 段落 */
#single-content p{
margin-top: 1.8em;
margin-bottom: 1.8em;
}

■変更後
/* 段落(変更Ver) */
#single-content p{
margin-top: 0.0em; /* 1.8→0.0へ変更 */
margin-bottom: 0.0em; /* 1.8→0.0へ変更 */
}

小見出しと準見出しのデザインも変更してみましょう

サルワカさんの「デザイン68選」がオススメです

以下の2ヶ所を変更すると当ブログと同じデザインになります

↓↓↓サンプル↓↓↓

h3（小見出し）のデザインはこうなります

h４（準見出し）


↑↑↑サンプル↑↑↑

■変更後
/* 小見出し(変更Ver) */
#single-content h3{
padding: 0.4em 0.5em; /*文字上の余白 左右の余白*/
margin-bottom: 1em; /* 行間の隙間 */
margin-top: 2em; /* 行間の隙間 */
color: #494949; /* 文字色 */
background: #f4f4f4; /* 背景色 */
border-left: solid 5px #7db4e6; /* 左線 */
border-bottom: solid 3px #d7d7d7; /* 下線 */
}

■変更後
/* 準見出し(変更Ver) */
#single-content h4{
display: table;
padding: .5em 2em;
border-radius: 2px;
line-height: 1.2;
color: #494949; /* 文字色 */
background: #f4f4f4; /* 背景色 */
border-left: solid 5px #7db4e6; /* 左線 */
}

ついでに記事内のリンクに下線が出る様にします

■変更前
/* リンク */
#single-content a{
color: $(font.link);
}

■変更後
/* リンク(変更Ver) */
#single-content a{
text-decoration: underline;
}
#single-content a:visited {
text-decoration: underline;
}

以上で文字スタイルのカスタマイズは終了です
お疲れ様でした

QooQ