2023年01月20日
関連記事の黒いバーを変更する
自己主張強いなぁ。
この黒いの。↓
しーまブログの個別記事を開いたときに下の方に表示される関連記事のバーが真っ黒で目立ちすぎじゃないですか?
ここが目立ってはしょうがないと思うんですよ。
あくまでもブログ本文に注目してもらいたいので、この黒いのをソフトな表示に変更しませんか?
※ブログの環境設定→関連記事の設定で関連記事を表示するようになっている場合の話ですよ
テンプレートをちょっといじっちゃいますよ。
しーまブログのスタイルシートを開いてください。
場所はどこでもよいですが、分かりやすく一番最終行に追加しましょうか。
全部コピーして貼り付けてもらってもオーケーです。
マーカーのURLの部分は、タイトルバーも着せ替えの時に作成した画像のURLでも貼り付けてみてください。
後で好きな背景画像に差し替えもできますので、とにかくまずは手持ちのものでやってみると良いですよ。
(プレビューボタンはここのことだよ)
ちょろっと呪文を追加しただけで、黒いバーが自分好みな感じに変わっているハズ。
どうでしたか?
きれいに表示できていればOK、登録ボタンを押してテンプレートを保存します。
今回追加した貼り付けたCSSコードは、テキスト白文字15px、太文字になるように装飾しています。
色々自分好みに変更したい人は、ここのコードをいろいろといじくって遊んでみてください!
心配な方は、パソコンのデスクトップにでもテキストファイルでバックアップを保存しながら作業すれば、CSSが壊れても安心です。
拍子抜けするくらい簡単に変更できちゃった・・・そんなそこのあなた!
知らず知らずのうちに、CSSを身に着けちゃっているんじゃないですか?
この黒いの。↓
しーまブログの個別記事を開いたときに下の方に表示される関連記事のバーが真っ黒で目立ちすぎじゃないですか?
ここが目立ってはしょうがないと思うんですよ。
あくまでもブログ本文に注目してもらいたいので、この黒いのをソフトな表示に変更しませんか?
※ブログの環境設定→関連記事の設定で関連記事を表示するようになっている場合の話ですよ
テンプレートをちょっといじっちゃいますよ。
しーまブログのスタイルシートを開いてください。
1.スタイルシートに次の呪文を追記してください
場所はどこでもよいですが、分かりやすく一番最終行に追加しましょうか。
全部コピーして貼り付けてもらってもオーケーです。
マーカーのURLの部分は、タイトルバーも着せ替えの時に作成した画像のURLでも貼り付けてみてください。
後で好きな背景画像に差し替えもできますので、とにかくまずは手持ちのものでやってみると良いですよ。
/*カテゴリーバー*/
.category-bar{
color:#999999;
font-size:15px;
font-weight:bold;
height:15px;
background:#000000 url("https://XXXXXXXXXX/obj_00.png");
background-repeat: no-repeat;
background-position: bottom left;
padding:10px 10px 10px 15px;
margin:0px 0px 0px 0px;
text-align:left;}
.category-bar{
color:#999999;
font-size:15px;
font-weight:bold;
height:15px;
background:#000000 url("https://XXXXXXXXXX/obj_00.png");
background-repeat: no-repeat;
background-position: bottom left;
padding:10px 10px 10px 15px;
margin:0px 0px 0px 0px;
text-align:left;}
2. 変更したらプレビューボタンをクリックして確認しましょう!
(プレビューボタンはここのことだよ)
ちょろっと呪文を追加しただけで、黒いバーが自分好みな感じに変わっているハズ。
どうでしたか?
きれいに表示できていればOK、登録ボタンを押してテンプレートを保存します。
今回追加した貼り付けたCSSコードは、テキスト白文字15px、太文字になるように装飾しています。
色々自分好みに変更したい人は、ここのコードをいろいろといじくって遊んでみてください!
心配な方は、パソコンのデスクトップにでもテキストファイルでバックアップを保存しながら作業すれば、CSSが壊れても安心です。
拍子抜けするくらい簡単に変更できちゃった・・・そんなそこのあなた!
知らず知らずのうちに、CSSを身に着けちゃっているんじゃないですか?