■Seesaaブログの日付とタグの文字色を変更
■CSSの「meta」を編集
■CSSの「meta」を編集
Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」では、トップページの記事タイトルの下に日付が表示されていますが、もはや薄すぎて何と書いてあるのかわかりません。
青色で表示される「タグ」が隣にあることで、日付の薄さがますます際立っています。(まあ、リンクの色を青色にしたのは私なので、私のせいですけどね)
この記事では、日付とタグの文字色を調整したいと思います。(タグに関してはリンク設定があるため、文字色を変更してもあまり意味はないんですけどね)
ちなみに、前回の記事<■トップページの記事タイトルを調整する>で編集した記事タイトル部分とは異なり、今回編集する日付やタグ部分は、記事ページの日付やタグ部分と共通です。
今回の編集により他のページの日付・タグも同時に変更されます。
Seesaaブログの日付・タグの文字色を変更(「meta」を編集)
CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で「meta」というclassを探します。
テンプレートがデフォルトのままだと520行目ぐらいにあります。
「meta」関連のclassをまとめて表示していますが、実際に変更するのは「meta」だけです。
関連しているのでまとめて表示しているだけです。気にしないでください。
CSSの該当部分に以下の「編集後」のコードをコピーして貼り付けてから「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。
<元コード>
<編集後>
/*** 日付・タグ ***/
.meta {
color: #909090;
font-size: 12px;
margin-bottom: 10px;
}
.meta .date {
display: inline-block;
margin-right: 5px;
}
.meta .tag {
display: inline-block;
}
.meta .tag a {
margin-right: 5px;
}
.meta {
color: #909090;
font-size: 12px;
margin-bottom: 10px;
}
.meta .date {
display: inline-block;
margin-right: 5px;
}
.meta .tag {
display: inline-block;
}
.meta .tag a {
margin-right: 5px;
}
●コメントアウトで見出し「/*** 日付・タグ ***/」を付けました。
●日付・タグ部分の文字色の設定「color」を変更しただけです。少し濃いめの灰色にしました。
●タグの文字色も変更したことになりますが、タグはリンクが設定されますのでリンクの青色で表示されることになり、濃いめの灰色が表に出てくることはありません。
●私は設定していませんが、もしもタグの文字色を変更したいのであれば、「.meta .tag a」に「color: #○○○○○○;」(「○」はお好きなカラーコード)を追加してください。
コード編集後のCSS(meta)と実際のページ
コードの編集後は、こんな感じで日付の文字色が変わります。
濃いめの灰色に設定したので、日付がハッキリと見えていますね。
次の記事の紹介
次の記事では、Seesaaブログのサイドバーのコンテンツにタイトルを表示させる方法を説明します。
■【Seesaaブログ新デザインシステム】サイドバーのコンテンツにタイトルを表示させる(カレンダー、自由形式など)
seesaaブログのコンテンツの1つに「カレンダー」があります。カレンダーはけっこう便利です。カレンダーの日付のリンク部分をクリックすると該当日の記事リストに飛べるし、そのブログが最近記事を更新したかどうかもカレンダーでわかります。‥‥
seesaaブログのコンテンツの1つに「カレンダー」があります。カレンダーはけっこう便利です。カレンダーの日付のリンク部分をクリックすると該当日の記事リストに飛べるし、そのブログが最近記事を更新したかどうかもカレンダーでわかります。‥‥