ウェブリブログの旧デザインを継承した CSS を変更する(パート3)

スタイルシート編集.png
7 月 2 日のウェブリブログのリニューアルから、すでに 1 ヵ月を経過しようとしているが、今でも、ブログのデザインが強制的に変更されて崩れてしまって困っている方が多いようです。誰かの役に立てばと、これまでに自分で触ってみて変更できた部分を記録しておきます。

あくまで当ブログが適用している「木漏れ日(記事概要両サイド)」というデザインでの話です。デザインによって、css も全く異なる場合がありますので、その場合には、参考にはならないかもしれません。

CSS 編集のための目次 ~その3~

  1. ヘッダー画像が途中で途切れてしまう場合には・・・
  2. 絵文字が行の上方にずれてしまうのを直すには・・・
  3. プロフィールの項目名と内容の配分(比率)を変えるには・・・
  4. プロフィールの項目名に対する内容を左寄せにするには・・・
  5. プロフィールの項目間の行間を狭くするには・・・・
  6. カレンダーに枠線を付けるには・・・
  7. サイドバーなどに配置したコンテンツを枠囲みにするには・・・
  8. 前後頁リンク文字列(パーマリンク)を小さくするには・・・・
  9. 旧システムで作成したブログ上の画像と文章との間に余白をとるには・・・
  10. ヘッダーに配置したコンテンツの幅を広げるには・・・

ヘッダー画像が途中で途切れてしまう場合には・・・

18行目から
.Header__inner {
height: 300px; ←変更する行
}
・height のパラメータを、画像のサイズに合わせて増やしてやればよい。
※ 関連項目:トップのデザインを広げるには・・・

絵文字が行の上方にずれてしまうのを直すには・・・

以下のいずれかを CSS の最後の行に追加してみる。
(案1)
img.emoji {
margin: 0;
vertical-align: middle;
}

(案2)
img.emoji {
margin: 0px 1px -2px 1px;
}

プロフィールの項目名と内容の配分(比率)を変えるには・・・

1693 行から
.Module .ProfileList .Profile .Profile__heading {
width: 38%;
 ▼
width: 45%;
line-height: 1;
}

.Module .ProfileList .Profile .Profile__body {
width: 62%;
 ▼
width: 55%;
text-align: right;
line-height: 1;
}
・「Profile__heading」がプロフィールの左側の項目名の設定で、「Profile__body」がプロフィールの項目の内容の設定です。
・例えば、項目名の幅を増やしたい場合には、項目名の幅を 38% → 45% に増やす代わりに内容の幅を 62% → 55% に減らします。
・heading を 0% にして、body を 100% にして内容側にだけ入力すればさらに自由度が上がります。

プロフィールの項目名に対する内容を左寄せにするには・・・

1699 行から
Module .ProfileList .Profile .Profile__body {
width: 62%;
text-align: right;
 ▼
text-align: left;
line-height: 1;
}
・内容の書式を右寄せ(text-align: right)から左寄せ(text-align: left)に変更する。

プロフィールの項目間の行間を狭くするには・・・・

・デフォルトでは、行間が広すぎてまとまり感にかけます。
1675 行から
.Module .ProfileList .Profile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 15px;
 ▼
margin-bottom: 5px;
}

カレンダーに枠線を付けるには・・・

1544 行から
.Module .Calendar {
width: 160px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 2px solid #AAA; ← 追加した行
}
・境界線の太さを変えるには 2px を調整する。
・境界線の色を変えるには #AAA を変更する。

サイドバーなどに配置したコンテンツを枠囲みにするには・・・

1439 行から
.Module {
width: 100%;
margin-bottom: 25px;
position: relative;
overflow: hidden;
padding: 2px 2px; ← 追加した行①
border: 1px solid #AAA; ← 追加した行②
}
・囲み線と内容との余白を調節するには①の padding のパラメータを調節します。
・境界線の太さを変えるには②の border の 1px を調整する。
・境界線の色を変えるには②の #AAA を変更する。

前後頁リンク文字列(パーマリンク)のフォントサイズを小さくするには・・・・

2184 行から
.Permalink .Permalink__item .PermalinkTitle {
margin: 0;
width: 100%;
max-height: 80px;
overflow: hidden;
font-size: 1.3rem;
 ▼
font-size: 1rem;
font-weight: normal;
overflow: hidden;
line-height: 1.2;
color: #070F00;
}

旧システムで作成したブログ上の画像と文章との間に余白をとるには・・・

・img タグのクラス(class)に「up-image」が使用されている場合には、CSS 編集の最後に以下の 3 行を追加すると、うまく行く場合があるかもしれません。
.up-image {
padding: 10px 20px 10px 20px;
}

ヘッダーに配置したコンテンツの幅を広げるには・・・

449 行から
.Header__contentsParts {
width: 800px;
margin: 0 auto;
padding: 15px 0 0;
  ▼
padding: 0px 0 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.Header__contentsParts .Module {
width: 220px;
margin-bottom: 15px;
  ▼
width: 800px;
margin-bottom: 0px;
}
・初期設定では、幅が 220px と狭いので、800px まで広げる。
・上下に余白ができるので、これをなくす(padding と margin-bottom)。




ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

2019年08月03日 17:07
初めまして。
私、長年ウェブリブログを利用している者です。
先月のリニューアル以来、自分の思う表示になかなかならずに悩んでいました。
私は昔のHTMLのことは少しは解っているのですが、今主流のCSSとなるとほとんど全く知識がございません。
こちらのCSS変更の記述方法、実に参考になりました。
これほどのまとめた記事、誠に助かりました。ありがとうございます。

ご勤務でお忙しいところ申し訳ないのですが、ひとつお教え願えないでしょうか?

ブログの記事内に画像を挿入した際、画像(写真)を左詰にすると、画像と文字がくっついて見づらく感じました。
私は、記事に画像を挿入する際、昔のHTMLに覚えた、「hspace="○○"」と追加して記事をアップロードしていますが、その度に追加するのが面倒なのです。
CSSのどこかに追加しておけば良いのかどうかも解りません。

お忙しいところ、誠に勝手なお願いで申し訳ございませんが、もしお手が空いた時がございましたら、ご教授のほどお願いいたします。
SRHAD-KNIGHT
2019年08月03日 17:33
>ゲコゲコさん
コメントをありがとうございます。
>これほどのまとめた記事、誠に助かりました。ありがとうございます。
参考になる点があったのであれば幸いです。

>ブログの記事内に画像を挿入した際、画像(写真)を左詰にすると、画像と文字がくっついて見づらく感じました。
その点については私も気になっておりました。
画像を配置した時に本文との間に余白を取るには・・・

136 行から
img {
border-style: none;
margin: 10px; ← 追加した行
}
としてみてください。10px の値は自分で調整してください。
2019年08月03日 21:20
初めまして。
パート1からずっと拝見させていただいております。リニューアル後、最初はがっかりしておりましたが、お陰様でなんとか納得のいくものが出来ました。有難うございました。
SRHAD-KNIGHT
2019年08月03日 22:23
>juechanさん
コメントありがとうございます。
>最初はがっかりしておりましたが、お陰様でなんとか納得のいくものが出来ました。有難うございました。
それはよかったですね。文句ばっかり言ってても仕方ないですからね、何とかしようとすることで、自分も少し成長した気がします。
2019年08月04日 14:40
SRHAD-KNIGHT 様
お忙しいところ、早速教えていただきありがとうございます。
また、パート4で、より詳しい説明の記事までアップしていただき、
勉強になりました。お礼申し上げます。

追記;このコメント欄に入力する際、先のコメントを見ながらできないのですね。
SRHAD-KNIGHT
2019年08月04日 17:22
>ゲコゲコさん
追記;このコメント欄に入力する際、先のコメントを見ながらできないのですね。
コメントを書くときに、[ブログ管理画面トップ]-[コメント]から書くようにすると、読者コメントを参照しながら、コメントを書くことができます。
また、訪問したサイトでコメントする場合は、やや面倒ですが、[コメントを書く]を右クリックメニューから[新しいウィンドウを開く]を選択して、別ウィンドウでコメントを書くようにすれば、先のコメントを参照しながら書くことができます。