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

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

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

ウェブリブログの新しいブログシステムでは、リッチテキスト編集ができて、こんな目次を配置した記事も簡単に作成できるようになった点は評価するべきだと思います。

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

  1. ブログタイトルを左寄せするには・・・
  2. ブログタイトルを右寄せするには・・・
  3. ブログタイトルを左上に表示するには・・・
  4. ブログタイトル文字を大きくするには・・・
  5. ブログタイトル文字の色を変えるには・・・
  6. エントリー画面のサムネイル画像を大きくするには・・・
  7. 「最近の記事」のサムネイル画像をなくして文字だけにするには・・・
  8. 「前頁」「次頁」リンクのサムネイル画像をなくして文字だけにするには・・・
  9. 本文の文字色を変えるには・・・
  10. コメント文字を大きくするには・・・
  11. 記事の幅を広くするには・・・
  12. 本文の行間マージンを変更するには・・・
  13. 「続きを読む」のバーを細くするには・・・
  14. サイドバー(左)を広げるには・・・
  15. テーマ別ページのタイトルバーを細くしたり色を変えるには・・・
  16. CSS のどこを変更すればよいのかを見つけるには・・・

ブログタイトルを左寄せするには・・・

423 行から
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;

flex-direction: vertical;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;

justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

ブログタイトルを右寄せするには・・・

423 行から
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
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;
}

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

423 行から
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;

flex-direction: vertical;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;

justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;

align-items: start;
}
と変更すると、ブログタイトルが左上に表示される。

ブログタイトル文字を大きくするには・・・

435 行から
.Header .Header__inner h1 {
font-size: 1.6rem;

font-size: 3.2rem;
}
と変更すると、ブログタイトルが大きく表示される。

ブログタイトル文字の色を変えるには・・・

439 行からの
.Header .Header__inner h1 a {
color: #000;

color: #FFF;
}
と変更すると、黒から白になる。

エントリー画面のサムネイル画像を大きくするには・・・

1234行辺りからの
.Entry .EntryInnerWrap .EntryInnerWrap__item.-thumbnail {
margin-right: 15px;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 30%;

width: 40%;
}
と変更すると、サムネイル画像幅が広がる。

「最近の記事」のサムネイル画像をなくして文字だけにするには・・・

1481 行から
.Module .RecentEntry .RecentEntryThumbnail {
margin-right: 10px;
width: 44.9%;

width: 0%;
height: 80px;

height: 0px;
overflow: hidden;
position: relative;
}
1492 行から
height: 80px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;

display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
1520 行から
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 55.1%;

width: 100%;
}
1534 行から
.Module .RecentEntry .RecentEntry__body {
line-height: 1.4;
max-height: 31px;

max-height: 33px;
overflow: hidden;
color: #070F00;
}
と変更すると、サムネイルが表示されずに、記事タイトルと文書頭だけが表示される。

「前頁」「次頁」リンクのサムネイル画像をなくして文字だけにするには・・・

2026 行から
.Permalink .Permalink__item.-right .PermalinkThumbnail {
margin-left: 10px;
margin-left: 0px;

2144 行から
.Permalink .Permalink__item .PermalinkThumbnail {
margin-right: 10px;
margin-right: 0px;
width: 45.1%;

width: 0%;
height: 80px;

height: 0px;
overflow: hidden;
position: relative;
}
.PermalinkThumbnail__inner {
width: 100%;

width: 0%;
height: 80px;

height: 0px;
display: -webkit-box;
display: -ms-flexbox;
- display: flex;

display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
2178 行から
.Permalink .Permalink__item .PermalinkTitle {
margin: 0;
width: 54.9%;

width: 100%;
max-height: 80px;
overflow: hidden;
font-size: 1.3rem;
と変更すると、サムネイルが表示されずに、記事タイトルだけになる。
・リニューアル後の旧ウェブリデザインの場合、「前の記事」リンクボタンに、サムネイルが 2 つ表示されてみっともないので、サムネイルを表示しないようにしたほうがまだましだ。
・いずれウェブリブログが HTML のデザインを修正してくれることを期待するのなら、そのままにしておいてもいいかも・・・。
・あるいは、いずれ HTML の編集が可能になれば、その時点で自分で修正することも可能になるかもしれない。

本文の文字色を変えるには・・・

785 行から
.Article__content {
line-height: 1.8;
padding: 0;
margin-bottom: 40px;
color: #000;
}
上記のように、
color: #000; とすると文字色は黒になる。

コメント文字を大きくするには・・・

1162 行から
.Comments__item .Comments__body {
line-height: 1.6;
}
 ▼
.Comments__item .Comments__body {
line-height: 1.6;
font-size: 1.6rem;
}
などとフォントサイズを追加する、

記事の幅を広くするには・・・

例えば記事幅を 100px だけ広げたい場合には
1.66行

body 内
width: 800px;
   ▼
width: 900px;

2.449行

.Header__contentsParts 内
width: 800px;
   ▼
width: 900px;

3.495行

.l-wrapper .l-wrapper__inner 内
width: 800px;
   ▼
width: 900px;

4.531行

.Main .Main__inner 内
width: 400px;
   ▼
width: 500px;

5.557行

.Main .Main__inner .Main__contents 内
width: 400px;
   ▼
width: 500px;

6.723行

.Article 内
width: 400px;
   ▼
width: 500px;


本文の行間マージンを変更するには・・・

785 行目から
Article__content {
line-height: 1.8;
   ▼
line-height: 1.5;
padding: 0;
margin-bottom: 40px;
}
と変更すると、行間が狭くなる。

「続きを読む」のバーを細くするには・・・

1358 行から
.Entry .Entry__readMore .ReadMore {
position: relative;
font-weight: 400;
line-height: 1;
padding: 12px 30px;
    ▼
padding: 2px 30px;
border-radius: 0px;
display: block;
color: #F88;
}
と変更すると「続きを読む」バーを細くすることができる。

サイドバー(左)を広げるには・・・

641行目から
.Side .Side__inner {
width: 160px;
    ▼
width: 240px;
}

テーマ別ページのタイトルバーを細くしたり色を変えるには・・・

598 行から
.ResultHeading {
width: 100%;
background: #E70;
 ▼ / ここで色を変更できます
background: #FCC;
border-radius: 0;
-webkit-box-shadow: 0 0 0 0 #fafafa;
box-shadow: 0 0 0 0 #fafafa;
padding: 20px 15px;
 ▼ / ここで太さを変更できます
padding: 2px 15px;
margin: 0 0 25px;
}

CSS のどこを変更すればよいのかを見つけるには・・・

  1. 自ブログをブラウザで表示。
  2. 右クリックからソース表示。
  3. 変更したい部分の HTMLタグ内の 「class=〇〇」に注目。
  4. css 内で、〇〇を検索する。
  5. 〇〇内のパラメータのどれかをいじればなんとかなる!





ブログ気持玉

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

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

→ログインへ

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

気持玉数 : 0

この記事へのコメント

2019年09月16日 20:24
はじめまして。
リニューアル後の対処法を知っている方を見つけ、
嬉しいです。
私のブログはリニューアル後、ヘッダー画像が消えてしまいました。
ヘッダー画像を挿入する方法を教えてください。
他の記事も見てみます。
SRHAD-KNIGHT
2019年09月19日 07:37
>◆NORI◆さん
コメントありがとうございます。
>ヘッダー画像を挿入する方法を教えてください。
私のブログのCSSでは、15行目が以下のようになっています。
15 行目
background: #68A65F url(https://webryblog.biglobe.ne.jp/images/article/photo_sunlight_bg_title.jpg) no-repeat center top;

◆NORI◆さん の場合は、
background: #68A65F とだけになっていますから、
background の後ろの方に、これに倣って、
「url(画像アドレス) no-repeat center top; 」と加筆すればよいと思います。
なお、画像はファイルは、背景に設定したい画像ファイルをファイルマネージャーでアップロードして、その画像の URL を取得して貼り付けます。
2019年09月20日 18:41
SRHAD-KNIGHTさま

お返事ありがとうございます!
参考になりました。

あと、私のブログではプロフィール画像が表示されません。
ブログ紹介の文を左寄せにしているせいかと思いましたが、
基本に戻しても関係がないようです。
SRHAD-KNIGHTさんのはプロフィール画像はありませんが、
もし分かりましたら教えてくださいm(_ _)m
SRHAD-KNIGHT
2019年09月21日 01:25
>◆NORI◆さん
>あと、私のブログではプロフィール画像が表示されません。
プロフィール画像を表示させるには、ブログ管理画面のホームメニューの
[設定 > ブログ設定 > プロフィール画像:プロフィール画像設定]
から、「ブログのプロフィール画像を設定することができます。ブログにプロフィールコンテンツを追加すると、ここで設定したプロフィール画像がプロフィールコンテンツとともに、ブログに表示されます。」と、ヘルプに書いてあり、そのようにすると、私の場合は表示されました。
ちなみに、私のブログでは、プロフィール画像に「ネコの顔」を設定していますが、表示されていませんんか?
2019年09月21日 18:35
SRHAD-KNIGHTさま

サイドバーに表示されている猫の画像の部分がプロフィール画像なんですね。
私のブログでも設定をしてますが、設定した画像は表示されません。

私のブログでは以前の設定からサイドバーの先頭にはgoogleの広告をフリースペースで表示するようにしていますが、
フリースペースの設定をみてもフリースペース4以降の部分しか設定できないようになってしまっており、変更することができない状況です。フリースペースの1~3までの部分が設定できれば出来るのかもしれないと思います。
SRHAD-KNIGHT
2019年09月22日 07:46
>◆NORI◆さんへ
プロフィール機能は、以前とはまったく異なっていて、プロフィール機能を有効にするためには、ブログ管理画面のホームメニューから、[デザイン >PC >コンテンツ(サイドバー)]で表示される画面内の左側縦に列挙されているパーツのうち「プロフィール」を、右/左サイドバーに D&D することから始めます。
それを行っておられないからプロフィール画像が表示されないのではないのでしょうか?
2019年09月22日 09:39
SRHAD-KNIGHTさま

ありがとうございます。
表示できました。

しかし、今まで私はプロフィール画像に最新記事の画像を毎回貼って使っていたので、
今までとは大幅にデザインが違っている結果になってしまっています。
元のデザインに戻すには画像を以前の仕様と同じ所へ貼り付けるよう、
【ブログ説明】の部分をいじるしかないようですね。
ブログ説明の部分に画像が貼れるかどうか、試してみます。
SRHAD-KNIGHT
2019年09月22日 17:31
◆NORI◆さん へ
>表示できました。
>今までとは大幅にデザインが違っている結果に・・・
>【ブログ説明】の部分をいじるしかないようですね。
>ブログ説明の部分に画像が貼れるかどうか・・・
新しいシステムになってから、最新記事の中で特にエントリー画面で表示したい画像を選択することができるようになっているので、ブログにアクセスしたときに最初に表示されるトップ画面のエントリーにも、サイドバーの「最近の記事」にも表示されるので、あえて「プロフィール」や、「ブログ説明」に入れる必要はないのでは?
リニューアル後に、ウェブリ事務局経由で、多くのウェブリユーザーの方のブログを拝見してきました。多くの方が、「ブログ機能のリニューアルによりデザインが崩れて・・・」とおっしゃってますが、多分に、「自分だけが」そう思っていて、初めてアクセスする訪問者にとっては、それほどでもないです。◆NORI◆さんのブログは、どこがそれほど崩れているのか、少なくとも私には?です。サイドバーに表示されるべき情報が、フッター位置にきてしまったりしていて、確かに大幅に崩れているブログもありますが・・。
頻繁に特定のブログにアクセスするユーザーにとって、ブログトップ画面に長々とブログ説明やプロフィールを毎回のように見せられるのうっとうしい、という意見もあるようです。
そこで、「ブログの詳しい説明」や「ブログ主のプロフィール」は別のページに丁寧に書いて、トップ画面からリンクでジャンプできるようにされているブログもあるようです。
そのような新しいページを作成する場合、「記事の詳細設定 > 公開・予約 > 公開設定」の日時設定を、遠い過去に設定してアップすれば、新着記事としては表面に出てきません。
私のブログは以前とは、かなりレイアウトや見た目は変わりました。以前は文字情報ばかりだったのですが、今回のリニューアルを良い機会と思って、できるだけイラストを取り入れるようにしたり、蛍光マーカーを使うようにしたりしています。
2019年09月23日 10:01
SRHAD-KNIGHTさま

ヘッダー画像が復旧できただけでも助かりました。
そうですね。タイトル画面に最新記事の更新情報まで書くのは必要ないかもしれませんね。
ありがとうございました。
2020年05月04日 11:17
SRHAD-KNIGHTさま

初めまして。minority007と申します。

SRHAD-KNIGHTさまのCSS変更に関しての記事大変参考になりました。貴重な情報をアップして頂きありがとうございました。

昨年夏のブログシステムの変更、新システム用のデザインがしっくりこず、旧デザインに戻したいと思っていました。しかし、文字の位置や色などが変わってしまっていて、文字が見えないなどの不具合があり使用していませんでしたが、本記事の情報をもとに全部ではないですが、何とか思ったものに近づけることができました。

大変感謝しております。

各部の色を変更するのは、今後ゆっくりとやっていきたいなと思います。

誰でも簡単にすぐ使えるのを売りにしているはずなのに、元の状態に戻すのにある種プログラミングのようなことをユーザーに強いる本ブログは、ちょっとあり得ないなと思います。システム移行までの準備期間を十分とっていなかったのかなと思います。

長々と失礼致しました。


SRHAD-KNIGHT
2020年05月04日 19:46
>minority007さん
コメントをありがとうございました。

>SRHAD-KNIGHTさまのCSS変更に関しての記事大変参考になりました。貴重な情報をアップして頂きありがとうございました。
お役に立てたのならば、幸いでした。頑張って記事を書いた甲斐があるというものです。

何事も変わらずにいるのが楽でよいので、私はいまだにガラケーを使っています。

新しいものに慣れるのには努力が必要ですが、その過程で新しい発見や喜びもきっとあるというものです。少しずつでも頑張っていきましょう!