シリウスのエントリーページは、同関連ページを追加しますと、巻末に
関連ページとして案内メニューが一覧表示されますね

 

読者さまが、もっと詳細を知りたい....とすれば関心を示すメニューでしょうか

 

基本、デフォルトで用意されているデザインですが、イメージを変えたいなら
ご参照ください

 

今回のカスタマイズは、サイト、ブログ仕様どちらでも反映は同じです

 

さほどの面倒もなく好みに合わせることができます

 

---

 

デフォルト表示....参照

 

---

 

見出しの見開きブックマークの変更　いろいろ

 

●ブックマークデザインを変更する

 

デザインを変更する、自分なりのマークに変えるとかですね
これは、画像ですので、加工及び入れ替えが可能です
変更は、テンプレートフォルダーへ、次に使用テンプレートを開きます

 

ファイル一覧から　imgを開けますと画像ファイルが確認できますので　entryListーh4を
加工してください...終了後は上書き保存してください　

 

 

 

●ブックマークを削除する、または非表示

 

簡単に、削除するなら上記の画像　entryListーh4を削除すれば可能ですが
スタイルシートでＣＳＳ指定で非表示にするをお勧めします

 

非表示方法　スタイルシート（エントリー項目）
以下コードからimg/entrylist-h4.pngを削除する(読み込み不能にするのです）
background-image: url(img/entrylist-h4.png);

 

変更後　background-image: url();

 

 

ここの項目
#entrylist h4 span {
background-image: url(img/entrylist-h4.png);
background-position: left 2px;
background-repeat: no-repeat;
display: block;
color: #FFF;text-shadow: 0 0 1px rgba(255,255,255,.3);
line-height: 32px;
font-size: 18px;
margin: 2px 8px 2px 0;
padding: 4px 8px 2px 38px;
}

 

 

●見出しの背景カラーを変える　（同エントリー項目）

 

スタイルシート
カラーコードヲ変更します
background-color: #999999;
カラーは、使用するテンプレートのカラーコードになっています

 

#entrylist h4 {
background-image: none;
background-color: #999999;ここです
margin-bottom: 5px;
padding: 5px 0;
}

 

---

やや異なる変更手段もございます
でも、超簡単....?

 

●　カテゴリーページ用の見出しに切り替える

 

ブックマーク付きの見出し全体をカテゴリ見出しと同じデザインにする...です

 

ブックマーク付きの見出しが、いまいちとか、画像編集してもうまく整えられないとか
いう場合の参考

 

エントリーＨＴＭＬの以下位置
<% textTitle10 %>
<% textBody10 %>
<% freeSpace2 %>
<!-- ★コンテンツここまで★ -->
<% entryList_n | tag_replace(h3,h4) %>　この行確認
</div>
<div id="menu">

 

h3をh2に書き直すことで修正完了します...
<% entryList_n | tag_replace(h2,h4) %>

 

 

 

---

 

●　記事枠　ＢＯＸカスタマイズへ

 

ここまでくると変更の方法がある程度ご理解できたと思います

 

ここからは、見出し下の記事枠にすすみますが、変更する箇所を示しますので
ご自身でチャレンジしてください

 

基本がきちんとしているので、あまり細かくは示しませんが、
文字位置を左右にずらすなら　paddingの数値を変えます

 

==================================================
エントリーページ
==================================================
*/
#entrylist {
margin-right: 10px;
margin-bottom: 20px;
background-color: #ebebeb;（記事の背景カラー）
}
#entrylist .inner {
overflow: hidden;
text-align: left;
}
#entrylist h4 {
background-image: none;
background-color: #999999;（見出しの背景ですね）
margin-bottom: 5px;
padding: 5px 0;
}
#entrylist h4 span {
background-image: url(img/entrylist-h4.png);（ブックマークです
background-position: left 2px;（フォントの位置）
background-repeat: no-repeat;
display: block;
color: #FFF;text-shadow: 0 0 1px rgba(255,255,255,.3);
line-height: 32px;
font-size: 18px;（フォントサイズ）
margin: 2px 8px 2px 0;
padding: 4px 8px 2px 38px;
}
#entrylist dl {
overflow: hidden;
position: relative;
top: -1px;
*height: 1%;
}
#entrylist dt {
border-top: 1px dotted #ccc;（横線）
margin: 0 10px;
padding: 15px 5px;
position: relative;
*height: 1%;
}
#entrylist dt:first-child {
border-top: none;
}
#entrylist dt a {
background-image: url(img/entry_title.png);（記事左の右矢印、画像です）
background-position: left 4px;
background-repeat: no-repeat;
display: inline-block;
font-size: 15px;
font-weight: 500;
line-height: 150%;
padding: 1px 0 1px 19px;
*display: inline;
*zoom: 1;
}
#entrylist dd {
font-size: 15px;
line-height: 150%;
margin-top: -10px;
padding: 0 10px 15px 25px;
}
#searchresult {
margin-bottom: 20px;
overflow: hidden;
padding: 10px;
}
#relNavigate {
margin-bottom: 15px;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
}
#relNavigate a {
font-size: 14px;
font-weight: 700;
margin-left: 10px;
margin-right: 10px;
}

 

 

レスポンシブ作動でカスタムを加える場合は、メディアコード内を書き換えてください

 

 

エントリーリストのカスタマイズまとめ
更新履歴や追加記事一覧のカスタマイズまとめ
トップページ

関連ページ

ブログの更新履歴をＢＯＸ枠で囲む

シリウスレスポンシブＨＴＭＬにコードを追加し、更新履歴、関連記事一覧をＢＯＸ枠で囲み視覚効果を高めてみましょう

ブログで更新履歴見出しを表示する

シリウスをブログ仕様にするとトップページの更新履歴、カテゴリー下層エントリーの関連記事見出しが表示されなくなりますが、表示するなら簡単な起債追加で完了します