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

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

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

ブログタイトルを右上に表示するには・・・

418 行から
.Header .Header__inner {
padding: 0 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: vertical;
flex-direction: column;
flex-direction: vertical;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
align-items: start;}

ブログタイトルの下の「ブログ名」と「ブログ紹介」・・・

570 行から
.blogProfile {
padding: 15px 20px;
margin: 15px 10px;
border: 0px solid transparent;
font-size: 1.2em; ← 追加した行
}
フォントサイズを指定してやれば大きくできる。

記事本文の文字サイズを大きくするには・・・

785 行から
.Article__content {
line-height: 1.5;
padding: 0;
margin-bottom: 40px;
font-size: 1.2em; ← 追加した行
}
フォントサイズを指定してやれば大きくできる。

コメントアイコンを削除するには・・・

978 行目から
.Posted__item {
border: 1px solid #999;
padding: 10px 15px;
border-radius: 3px;
display: none;
}
.Posted__item に「display: none;」を加えると表示しなくなります。
でも「テーマ」のタグも同時に消えちゃう?

トップページの「エントリ内の本文抜粋」の文字を大きく・・・

1333 行から
.Entry .Entry__text {
line-height: 1.4;
overflow: hidden;
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
font-size: 1.1em; ← 追加した行
color: #000; ← 追加した行
}
「フォントサイズ」は、「font-size: 1.1em;」
「フォントの色」は、 「color: #000;」をいじる。

トップ画面のエントリータイトル色を変えるには・・・

44 行
.Main .Main__contents a {
color: #ee0000; ← 変更する
}
の color プロパティのパラメータを変える。

記事のタイトル色を変えるには・・・

736 行から
.Article__heading {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 0;
margin-bottom: 30px;
color: #cc0; ← 追加した行
}
最後に color プロパポティを付け加えると記事のタイトル色が変化する?

トップのデザインを広げるには・・・

13 行から
.Header {
width: 900px;
padding: 10px;
background: #ffffff url(https://***.jpg) no-repeat center top;
background-size: 1000px 187px; ← 追加した行
}
参照画像を画像処理ソフト(ペイントなど)を使用して大きくして、アップロードして利用してもよいが、より簡単には、「background-size:」プロパティを追加する。
広げたい幅に応じて、パラメータは変化させる必要がある。

「ブログ名・ブログ紹介」の欄を非表示にするには・・・

570 行から
.blogProfile {
padding: 15px 20px 15px 100px;
margin: 5px 10px;
border: 0px solid transparent;
display: none; ← 追加した行
}
「display: none;」を追加すると表示しなくなる。

記事タイトルの下のテーマ表示を小さくする、消すには・・・

765 行から
.Article__tag {
padding: 0;
font-size: 1.6rem;
  ▼
font-size: 1.2rem;
margin-bottom: 15px;
display: none; ← 追加した行
}
・小さくするには、「font-size:」 を小さくする。
・表示しないようにするには、「display: none;」を追加する。


ブログ気持玉

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

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

→ログインへ

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

気持玉数 : 0

この記事へのコメント

もも
2019年07月18日 13:56
事務局から飛んで来ました。助かります、ありがとうございます^^
SRHAD-KNIGHT
2019年07月18日 15:45
ももさま、コメントありがとうございます。
お役に立てたなら幸いです
2019年07月19日 22:01
こんばんは。
旧モデルのままで、表示を色々変更できました、ありがとうございます。

実は、現状のままブログトップの画像の入れ替えができずに四苦八苦していたのですが、これは自力解決できました、一段落と言うところです。
後は「旧デザイン継承のCSS変更・・」を更に参考にさせていただき、少しずついじって見たいです。
 少しは基本を勉強しないと思うようには行きそうも有りませんが。

SRHAD-KNIGHT
2019年07月20日 05:43
>MORINOBUNAさん、コメントありがとうございます。
参考になるところがあったのであれば、嬉しいです。まとめた甲斐があるというものです。私もこれを機会に CSS を少し勉強しつつ、メリハリのある文面にしたいと頑張っています。
2019年07月21日 00:24
MORINOBUNA様から教えて頂いて飛んできました。
私にすべて理解できるかどうかわからないですが、
参考にさせて頂いて頑張ってみます。
助かります。
SRHAD-KNIGHT
2019年07月21日 08:54
>ろこさん、コメントありがとうございます。
旧ウェブリデザインをご使用なら役立つかもしれません。
私も CSS 編集なんてし始めたのは、今回のリニューアル(7月2日)が契機でしたので・・・。頑張ってください。
2019年07月28日 20:51
CSSの変更方法は大変役に立ちました。有難うございました!
私のブログもどうにか以前の状態に近づきました。

現在、1つだけ悩んでいることがあります。
私のブログは、写真画像の右か左に文章を表示していました。
以前は、画像と文章は2mm ほど離れて見やすかったのですが、今回のリニューアル後、画像と文章が完全にくっついていて、見にくくなっています。以前の様な表示は、もう無理なのですかねぇ~?
以前のブログ(見にくくなっています) ↓
https://nikujiru-udon.at.webry.info/201812/article_3.html
SRHAD-KNIGHT
2019年07月29日 17:50
>ほんちゃんさん へ、コメントありがとうございます。

>現在、1つだけ悩んでいることがあります。
>私のブログは、写真画像の右か左に文章を表示していました。
>以前は、画像と文章は2mm ほど離れて見やすかったのですが、今回のリニューアル後、画像と文章が完全にくっついていて、見にくくなっています。以前の様な表示は、もう無理なのですかねぇ~?
CSS 編集で、最後の行に、以下の 3 行を追加してみてください。
~~~~~~~~~~~
.up-image {
padding: 10px 20px 10px 20px;
}
~~~~~~~~~~~
なお、
paddingプロパティは、上下左右のパディングをまとめて指定する際に使用します。 上下左右を異なるパディング幅にしたい場合には、スペースで区切って複数の値を指定します。
値を1つ指定した場合: 指定した値が[上下左右]のパディングになります。
値を2つ指定した場合: 記述した順に[上下][左右]のパディングになります。
値を3つ指定した場合: 記述した順に[上][左右][下]のパディングになります。
値を4つ指定した場合: 記述した順に[上][右][下][左]のパディングになります。