Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】記事ページの「関連記事」(1)サム…

【Seesaaブログ新デザインシステム】記事ページの「関連記事」(1)サムネイル「no-image」の色を変更

Seesaaブログ新デザインシステムの記事ページの「関連記事」を編集
■Seesaaブログの記事ページの下に表示される「関連記事」を編集
■サムネイルに画像が無い場合に表示される「no-image」の色を変更
■CSSの「no-image」を編集  

記事ページの下部に表示される「関連記事」を編集します。
「関連記事」なのか「関連する記事」なのか、はたまた「カテゴリの最新記事」なのか?
呼び方がさっぱりわかりませんが、まあ、どこを指しているのかはおわかりだと思います。サムネイル画像が並んで表示される、アレです。


記事ページの関連記事



「関連記事」にはサムネイル画像と記事タイトルの一部が表示されます。
もしも画像を1枚も掲載していない記事を投稿した場合は、サムネイル画像と同じ大きさの枠が表示されて、その枠の中に「no image」と表示されます。
この「no image」という文字と枠線の色が、デフォルトでは水色です。
紺色っぽい青色を基調としている私のブログに水色はちょっと合わないので、枠線と文字の色を変更したいと思います。



以降、Seesaaブログの記事ページ下部に表示される「関連記事」に関するカスタマイズを連続して掲載していきます。





【注意】
●「no-image」関連はブログ内共通のパーツです。ここで変更したら「非公開」の記事などに影響がありますのでお気を付けください。(とはいえ、この表示が気に入らないから変更するわけですから、どこに影響があっても大丈夫だとは思いますけども)

●ちなみに、「no-image」関連のCSS記述には同じようなclass名「no-image--txt」があります。
「no-image--txt」は関連記事には無関係です。(画像を月ごとに表示させるページで、画像がない月をクリックしたら表示される「表示できる画像がありません。」という文字に対するclassです)
「no-image--txt」はここでは無関係なclassですので、別の記事<■画像一覧ページで表示する画像が無い場合(「非公開」画像の設定と画像一覧ページの構成)>で説明しています。

●このブログでは最終的にはすべてのサムネイル画像に枠線を付けることになります。その結果、ここで設定する「no image」に対する枠線が邪魔になりました。詳細は記事<■記事ページの「関連記事」のサムネイル「no image」の枠線を消す>でご確認ください。
とはいえこのまま、ここで枠線を設定しても何の問題もありません。
class「no-image」の枠線は削除しません。新しくclassを作ることで対処しますので、下記の通りにカスタマイズを、どうぞ。




関連記事のサムネイル「no-image」を編集する


「no image」という文字と枠線の色を水色から変更します。
CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で「no-image」というclassを探します。



下記に「元コード」と「編集後」のコードを掲載しておきます。
CSSの該当部分に「編集後」のコードをコピペ又は該当箇所を直接変更して「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。


<元コード>
.no-image {
border: 1px solid #43bee0;
width: 100%;
height: 100%;
position: relative;
}

.no-image--inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
height: 16px;
line-height: 1;
color: #43bee0;
}


<編集後>
/****** image(関連記事)******/
.no-image {
border: 1px solid #aaa; /* 画像部分の外枠 */
width: 100%;
height: 100%;
position: relative;
}

.no-image--inner { /* no image 文字 */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
height: 16px;
line-height: 1;
color: #314150;
}


●コメントアウトで見出しを付けています。
●外枠を灰色にして、「no image」という文字を紺色で表示するように、カラーコードを変更しました。



コード編集後のCSS(no-image)と実際のページ


no-image部分のスタイルシート

実際の記事ページの関連記事部分


「関連記事」に画像が無い場合の「no-image」部分の色が変更されました。
とりあえず、私のブログに合うような色にすることができたようです。




次の記事の紹介

ところで、この「関連記事」の部分なんですが、いわゆるタイトル部分が気になりませんか?
「関連する記事」と表示されているんですけど、いったい何に対する「関連」なのでしょう?

ということで次の記事では、記事ページ「関連記事」のタイトル部分を変更します。


【Seesaaブログ新デザインシステム】記事ページの「関連記事」(2)タイトル表記を変更
seesaaブログは「管理画面>設定」の「ブログ設定」で関連記事に何を表示させるのかの指定ができます。「ブログ設定」の中の「関連記事ソース」という項目です。関連記事には3つの種類「デフォルト」「関連記事」「カテゴリ」が‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。