ふと、自分のブログをみて気づきました。

ページ送りの部分の記事のタイトルが表示されていない。

 

 

実は前日に気づいたんですが、たまたまのバグかと思っていたんです。

ブログのCSSで触ったのは、タイトル画像と、送りボタンくらいなので、そこは何もやってないはず。

 

 

こちらがPC用の表示です。

送りボタンの色を紺色にして、文字色を白に変更しています。

 

あ!!文字色を白にした部分、ページ送りの色でも適用されるのか!

 

文字色変えよう。

何色がいいかな。

 

chatGPTのデザイン添削くんに考えてもらいます。

ボタンの画像と、ページ送りのテキストの部分のスクリーンショットを添付。

 

ブログのページ送りボタン、文字色が添付の部分、共通になるから、文字色白以外で、配色かんがえて。 CSS設定して。
現在は----

 

(以下、CSSの記述 省略)

ブログのページ送りボタンの文字色を白以外で配色するためのCSSを以下のように提案します。背景色は濃い色を維持しつつ、文字色を薄い色に変更します。

以下は例として、背景色を濃い紫のまま、文字色をライトグレーに変更する設定です。(以下CSSの記述)

 

背景色を濃い紫のまま?

文字がライトグレー?

ちょっと意図と違いますが、もしかしたら、素晴らしい結果がでるかも?

 

とりあえず、適用してみます。

ボタンについては背景色はかわらず、文字色も白からライトグレーに変わっただけなので、見た目では大きな変化はありません。

 

ページ送り部分のテキストはどうでしょうか。

 

ちょっと薄くてみづらいですね。

 

白地の上のグレーの文字が見にくいから
・ボタンの色を薄く
・文字の色を濃く に変更して。 ブログの現在の表示とデザインを添付したのでボタンの色など設定するのに参照してください。

ボタンは、セピア色っぽい色とか、薄いグレーとか。

 

ブログのタイトル画像とボタンのスクリーンショットを添付します。

 

 

ブログのページ送りボタンの色をセピア色や薄いグレーに変更し、文字の色を濃く設定するためのCSSを以下に示します。これにより、背景と文字のコントラストが高まり、読みやすくなります。(以下CSSの記述)

 

適用したらこんな感じです。

 

 

 

ページ送り部分のテキストはこんな感じになりました。

いままで、白文字だったので、記事のテキストの部分がすっぽり空欄になっていたのが、普通に見えるようになりました。

ありがとう、デザイン添削くん。

 

セピアのボタンの色も、クラフト紙みたいに割と好きです。

 

ご参考までに、このアメブロの編集用CSSの変更部分だけ貼っておきます。

こちらの色を変更することで、ボタンの色や、ページ送りのテキストの色が変更できます。

-----------------------------------------------

/* 前後ページ送りボタン */
.skin-btnPaging {
    border-color: #cccccc;
    background-color: #b38867; /* セピア色 */
    color: #333333; /* 濃いグレー */
}

/* 前後ページ送りボタン(マウスオーバー、訪問済み) */
.skin-btnPaging:hover, .skin-btnPaging:visited {
    color: #000000; /* 黒 */
}

/* ページ送りの矢印アイコン */
.skin-btnPagingIcon {
    color: #333333; /* 濃いグレー */
}

/* 記事中ページ送りの次 */
.skin-entryPagingNext, .skin-entryPagingNext:hover, .skin-entryPagingNext:visited {
    color: #333333; /* 濃いグレー */
}

/* 記事中ページ送りの前 */
.skin-entryPagingPrev, .skin-entryPagingPrev:hover, .skin-entryPagingPrev:visited {
    color: #333333; /* 濃いグレー */
}
-----------------------------------------------