SIRIUSシリウスのトップページ巻末に掲載される更新履歴は　最新の
エントリー記事を新着順として表示してはおりますが　ラスト位置に
あることからマイナーなおまけ程度の位置図け

 

そんな更新履歴の背景を色彩化することで際立つイメージへと
カスタマイズする手順のご案内です

 

---

 

更新履歴の背景はデフォルト状態では枠のみが表示され
背景は設定されてはおらず透明です

 

前置き
最初にに１６進法のカラーコードを配置したのですけれど　メニュー記事を
押しやってしまい　テキストが乱れる結果になりました

 

そこで　rgbaのカラーコードで設定しましたところ
こちらでは適合いたしました

 

rgbaの透明化カラーコードは当サイトでも以前より　利用しておりますが
今回は非透明のカラーコードも含めての解説です

 

---

 

更新履歴はスタイルシートの以下の項目が指定しています

 

#whatsnew {
border: 1px solid #CCCCCC;
background-image: url(img/whats_top.jpg);
background-repeat: no-repeat;
background-position: left top;
padding-top: 45px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
}
#whatsnew li {
line-height: 25px;
list-style-image: url(img/whats_li.jpg);
margin-right: 10px;
margin-left: 10px;
}

 

/* カテゴリーリスト */

 

 

 

説明

 

 

更新履歴を囲う枠線の太さとカラーを指定してます
指定記述
border: 1px solid #CCCCCC;

 

更新履歴見出し

 

更新履歴の見出しですが画像なので　ここだけは画像入れ替えと
なります
編集ソフトで画像入れ替え
指定は以下記述
background-image: url(img/whats_top.jpg);

 

 

では背景を配置する手順へと進みます

 

背景を色彩化する際は　以下にならい記述を追加します

 

 

 

#whatsnew li {
line-height: 25px;
list-style-image: url(img/whats_li.jpg);
margin-right: 10px;
margin-left: 10px;
　　　　ここに追加例
}

 

/* カテゴリーリスト */

 

 

色彩度合コードをコピーして張り付ければ確認いただけます

 

フォントはシリウスの指定リンクカラーで表示されます
灰色背景非透明コード
background: rgba(170,170,170,1)

 

 

 

こちらの半透明は　後ろ背景が単色の際は　透過度合いが
認識できません
あくまで後ろにデザインイラストや画像があることが条件となります

 

灰色背景半透明４コード
background: rgba(170,170,170,0.7);

 

 

 

 

ブラックフィルター透明度７
background: rgba(0, 0, 0, 0.7);

 

 

rgba(170,170,170,04);

 

(0, 0, 0, 0.4)

 

 

170,170,170カラーコード0.4透明度合い

 

スポンサーリンク

 

 

更新履歴背景を色彩化＆半透明フィルターにカスタマイズ
シリウスでホットなクールテンプレートカスタマイズ
SIRIUSシリウスカスタマイズトップ