記事一覧の大きさを調整したいのですが方法はありますでしょうか…?現…

JIN
ユーザー925さん
ユーザー925

記事一覧の大きさを調整したいのですが
方法はありますでしょうか…?

現在、タイトルの欄の部分の横幅が小さく綺麗に表示されていない状態なので、広くして見やすくしたいです。
あと、1記事の縦の長さも少し小さくしてた多く表示させたり
タイトル内の文字を太字にしたいです。

何卒よろしくお願いします。

添付された画像

みんなのコメント 10件

ユーザー694さん
ユーザー694さん

テーマについているカスタマイズ機能で変えられないかどうか確認してください🤗
テーマについているカスタマイズ機能でカスタマイズできない場合はご自身でCSSを変更する必要があります。

ユーザー925さん
ユーザー925さん質問者

カスタマイズ機能では難しそうだったのでCSSを追加しようと思います。
どのようなコードを入れれば改善できるでしょうか?!
また他のCSSもなんですが、”追加CSS”とかかれた部分に入力しても
ブログカード関連に関しては一切反映されません…。
これはテーマが影響しているのでしょうか…?!
というか、そもそもブログカードなどの変更はこちらの
”追加CSS”ではなく別の部分から行うのでしょうか?!

添付された画像

ユーザー660さん
ユーザー660さん

ブログカードはブログカードに対応した CSS タグを用いる必要があります。
テーマは関係ないというか、テーマ固有の CSS タグでカスタマイズしたところで、ブログカードには反映されない場合もあります。

ユーザー660さん
ユーザー660さん

JIN の場合、WordPress 管理画面の[外観]→[カスタマイズ]→[追加 CSS]に対応するコードを追記することで、ブログのデザインをカスタマイズしたり微調整することができます。
ただし初心者では難しいかもしれません。

@sukosuko_saruko さんが求める回答をドンピシャで発信しているブログがなかったですが、比較的以下のブログが参考になるかと思います。
https://hiro07.com/article-width/

このブログを参考に、[追加 CSS]にコードを追記していろいろとトライ & エラーで学んでみてください。

CSS をある程度いじることができるようになると、一般的なテーマであってもオリジナリティあふれるデザインにレベルアップさせることができるので、CSS の勉強はオススメですよ。

ユーザー925さん
ユーザー925さん質問者

アリガトウゴザイマスッ!!
参考にさせていただきますっ!
本当に本当にアリガトウゴザイマスッ!!

現在の私のURLはこちらとなっております。
見栄えをもっとよくしたいのですが、いまいちまだまだなので
ちょっと頑張って改良してみますっ!なんというか…まだパッとしないんですよね…。💦
https://www.totemo-yabai-saru.com/

ユーザー660さん
ユーザー660さん

>見栄えをもっとよくしたいのですが、いまいちまだまだなので

▶さるこちゃんさんが求める「見栄え」というのが一体どの程度のものなのかがわからないので何ともアドバイスすることができないのですが、一つ言えることは、さるこちゃんさんが求める「見栄え」がユーザビリティを下げてしまう内容なのであれば、それはやるべきではありません。

>①タイトルの下の説明を消したい

▶記事抜粋のことですね。消したからといって大きくユーザビリティを下げてしまうとは思いませんが、表示させておくに越したことはないでしょう。
むしろ、記事抜粋のフォントサイズが小さすぎるので、もう少し見やすくなるように大きさを調整すべきですよ。

②下線つけられたので太文字にしてサイズを今より少し大きめにして見やすくしたい

▶これは良いと思います。記事抜粋のフォントも、これに合わせて調整した方が、ユーザビリティを高めるかと思いますよ。

テーマカラー、アクセントカラー、テキストカラーなど、全体的に淡い色合いなので、目には優しいかもしれませんがボヤッとしている印象です。
JIN では簡単にカラー設定を変更できるので、こちらも気にされてみてください。
https://coccoblog.org/jin-manual/color-setting/

このほか、今回のご質問とは関係のない内容にはなりますが、各記事のコンテンツボリュームが極端に少ないと思いました。
文字数が多いことが必ずしも良いとは限りませんが、こちらもユーザーのことを考えて、記事で紹介している商品の特徴や商品価格などの基本情報を記載するなど、少しボリュームを意識されたほうがいいですよ。

現状はボリュームが少ない状態でいきなりアフィリエイト広告が表示されているので、あまり良い印象を受けません。

ユーザー694さん
ユーザー694さん

>どのようなコードを入れれば改善できるでしょうか?!

それは今使っているCSSの状況に依存するのでブログ晒していただかないと答えられないです😅

>ブログカード関連に関しては一切反映されません…。

想像ですがaタグが関係しているのでCSSの指定の仕方がちょっと難しいんじゃないでしょうか。
さしあたって
text-decoration: underline !important;
↑こんな感じで!important指定すれば効くかも。

ユーザー694さん
ユーザー694さん

ブログ見つけました🤗

エントリーカード内部のタイトルの下線については次の指定でうまくいくと思います。

.post-list-title {
text-decoration: underline;
}

たぶん上記でいけると思いますが、もし無理ならこちら↓

.post-list-title {
text-decoration: underline !important;
}

ユーザー925さん
ユーザー925さん質問者

kiryuさんありがとうございました!!
とりあえず、追加CSSを入れると
下線が表示されるようになりました!!

①タイトルの下の説明を消したい
②下線つけられたので太文字にしてサイズを今より少し大きめにして見やすくしたい

です!!

ここらへんは、サイトを参考にしつつやってみたんですが、ちゃんと反映してくれませんでした…。

ユーザー694さん
ユーザー694さん

なぜ自分のやり方だとダメだったのか?
なぜこのKiryuという人のやり方だとうまくいくのか?
そこを考えましょう。
ご自身で調べたり分析したりして、それでもわからなければまた質問してください🤗

あなたの経験や知識を共有しませんか?

ほかのユーザーの相談に、コメントで参加してみましょう。

ログインしてコメントするはじめての方は無料登録