しーまブログ コンピュータ・IT奄美大島 ブログがホームページに!しーま新機能のお知らせ! さばくる~イベント情報受付中!~
はじめに  もくじ  トップ画像を変更する方法  ファビコンを設定する方法  画像一覧

2023年01月20日

関連記事の黒いバーを変更する

自己主張強いなぁ。
この黒いの。↓


しーまブログの個別記事を開いたときに下の方に表示される関連記事のバーが真っ黒で目立ちすぎじゃないですか?
ここが目立ってはしょうがないと思うんですよ。
あくまでもブログ本文に注目してもらいたいので、この黒いのをソフトな表示に変更しませんか?

※ブログの環境設定→関連記事の設定で関連記事を表示するようになっている場合の話ですよ

テンプレートをちょっといじっちゃいますよ。
 しーまブログのスタイルシートを開いてください。

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;}



2. 変更したらプレビューボタンをクリックして確認しましょう!


(プレビューボタンはここのことだよ)

ちょろっと呪文を追加しただけで、黒いバーが自分好みな感じに変わっているハズ。


どうでしたか?
きれいに表示できていればOK、登録ボタンを押してテンプレートを保存します。

今回追加した貼り付けたCSSコードは、テキスト白文字15px、太文字になるように装飾しています。
色々自分好みに変更したい人は、ここのコードをいろいろといじくって遊んでみてください!
心配な方は、パソコンのデスクトップにでもテキストファイルでバックアップを保存しながら作業すれば、CSSが壊れても安心です。

拍子抜けするくらい簡単に変更できちゃった・・・そんなそこのあなた!
知らず知らずのうちに、CSSを身に着けちゃっているんじゃないですか?