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

「最近の記事」をタイトルだけにするには・・・

最近の記事の変更.png

<1:サムネイルを表示しない>
1483 行から
.Module .RecentEntry .RecentEntryThumbnail {
margin-right: 10px;
width: 44.9%;
height: 80px;
overflow: hidden;
position: relative;
display: none; ← 追加した行
}

<2:文字表示幅を広げる>
1517 行から
.Module .RecentEntry .RecentEntryWrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 55.1%;

width: 100%; ← 変更した行
}

<3:本文を表示しない>
1537 行から
.Module .RecentEntry .RecentEntry__body {
line-height: 1.4;
max-height: 31px;
overflow: hidden;
color: #516275;
display: none; ← 追加した行
}

以上で、「最近の記事」から一応、サムネイル表示と本文の文頭なしで、タイトル表示のみにできます。ただし、文字サイズや行間などの微調整は必要かもしれません。

【新デザインの場合】
最近の記事の変更2.png

<1:サムネイルを表示しない>
622 行から
.module--recent-entry .recent-entry__thumbnail {
margin-right: 10px;
float: left;
width: 70px;
height: 70px;
overflow: hidden;
position: relative;
display: none; ← 追加した行
}


<2:本文を表示しない>
660 行から
.module--recent-entry .recent-entry__body {
line-height: 1.5;
overflow: hidden;
display: none; ← 追加した行
}

選択したデザインによっては該当しないこともありますので、ご了承ください。

ブログ気持玉

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

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

→ログインへ

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

気持玉数 : 0

この記事へのコメント

keiko
2019年08月20日 10:39
はじめまして、ウェブリブログ事務局のブログからこちらにたどり着いた時の喜びをお伝えしたいです!!

今回のリニューアルで私も途方に暮れている一人ですが、事務局に問い合わせても「CSS編集」をご利用ください。しかしサポートはしませんと(T_T)

こちらを読ませていただくと、今回のリニューアルの内容でホントに気になっていたことが、たくさん解説してありました。

早速、使わせてもらっています。

それで、パソコン用ブログは編集できたのですが、スマホ用でどうしても直したいところがあるのです。

ご教示いただけないでしょうか。

スマホはAndroid、ブラウザはchromeを使ってます。

スマホで表示した時、トップ画面にそれぞれの記事の画像サムネイルが表示されるようになりました。私はほとんど記事に画像を入れていないので「no image」という枠が記事タイトルの左側に全部くっついています。このサムネイルを削除?非表示?にしたいのです。

事務局はこれはウェブリブログの仕様でCSS編集してくださいとのことでした。

こちらの記事を参考に何とかできないものかと、スマホ用のCSSから「Thumbnail」を検索しましたが、検索できませんでした。

お忙しいところ申し訳ありませんが、急ぎませんのでよろしくお願いします。長々とすいません。
SRHAD-KNIGHT
2019年08月20日 15:06
>keikoさん
>はじめまして、ウェブリブログ事務局のブログからこちらにたどり着いた時の喜びをお伝えしたいです!!
>早速、使わせてもらっています。
コメントをありがとうございます。お役に立てて幸いです。

>スマホ用で、このサムネイルを削除?非表示?にしたいのです。

ちょっと探ってみましたところ、画像サムネイルや「no image」を非表示にして、タイトルを左寄せにすることができました。ただ、これで他に支障をきたさないのかどうかちょっと分かりません。自分は情けないことにスマホを使用しておりませんので・・・。

(1)まず、サムネイルを表示しないようにする。
768 行から
.article-list li a .article-image,
.category-list li a .article-image {
float: left;
overflow: hidden;
margin-right: 5px;
display: none; ← 追加行
}

(2)タイトル表示などを左寄せで表示するようにする。
850 行から
.article-list li a .article-data,
.category-list li a .article-data {
margin-left: 95px;
▼ 変更する
margin-left: 5px;
}
以上、やってみてください。また、その結果を教えていただければ幸いです。
keiko
2019年08月20日 16:19
感激です!!
早々のお返事ありがとうございます。

(1)のやり方でサムネイルは表示しないようになりました。

ただ(2)の方は変化しません。

サムネイルの枠が消えただけの感じでそのままの幅で空白が残っています。
スイマセン、うまく伝わるかわかりませんが・・・。
keiko
2019年08月20日 16:21
追記

デザインのせいでしょうか。
「てんとう虫」を使っています。
SRHAD-KNIGHT
2019年08月20日 18:06
>keikoさん
再度のコメントをありがとうございます。
>「てんとう虫」を使っています。
「てんとう虫」でやってみましたが、当方(PC上)ではうまく行きますのでちょっと原因が不明です。
「:」と「;」を間違っていたりしませんか?

自動出力してある修正コードを以下に貼り付けておきます。もう一度確認してみてください。

@@ -770,6 +770,7 @@
float: left;
overflow: hidden;
margin-right: 5px;
+ display: none;
}

.article-list li a .article-image img,
@@ -849,7 +850,7 @@

.article-list li a .article-data,
.category-list li a .article-data {
- margin-left: 95px;
+ margin-left: 5px;
}
keiko
2019年08月20日 18:24
お手数かけてスイマセン。

今、もう一度スマホで開いたら、バッチリ左寄せになっていました!!

更新に時間がかかるようですね(^^ゞ

まさに、私が望んでいた表示になりました(^^♪

ほんとにほんとにありがとうございました。

ウェブリブログを当初から使っている私にとって、大切なブログなのでなんとか問題解決することを願っています。
SRHAD-KNIGHT
2019年08月20日 21:16
>keikoさん
>今、もう一度スマホで開いたら、バッチリ左寄せになっていました!!
>まさに、私が望んでいた表示になりました(^^♪
それはそれは、良かったです。
きっと keiko さん以外にも同じようなブロガーの方々がたくさんおられるのではないかと思います。
本コメントの CSS 編集方法を、「ウェブリブログの旧デザインを継承した CSS を変更する(パート6)」として別記事にさせていただきました。ご質問いただきありがとうございました。