サイドバーメニューをブログイメージにカスタマイズ

サイドバーを完全ブログ化

シリウスをブログ設定にすれば、レイアウトは一応はブログ化しますが、
他サービス（ワールドプレス等）にはまだ及ばない...

でも、やりよう次第では同等のレイアウトにカスタマイズできるのですね

yahoo　ニュースページ

ocn ニュースページ

シリウスのエントリーページは、更新ごとに記事が入れ替わりますね
その作用をシリウスサイドバーで表示させる趣向は、お隣でご案内しておりますが
ここでは、ブログ化へさらにカスタマイズしてまいります

まず、トップページのみブログ化してみます

変更後　サムネイル画像あり、なしで分けてみました

変更手順

以下記載は、カテゴリーページに置いてあるブログモードですが、トップＨＴＭＬ
へ移動します

<h3>最新記事</h3>
<% AQNewEntries %>
<div class="blog">
<% pageThumbnail | tag_insert(div class="thumb") %>
<div class="nmlbox">
<div class="title"><a href="<% permaLink %>"><% pageTitle %></a></div>
<div class="info"><% pagePublicDate | parseDatetime(yyyy/MM/dd HH:mm:dd) %> | <% parentPageList_all | tag_insert(span class="plist") %></div>
<div class="body"><% pageBody | tag_strip | str_replace( ,) | oneline | shorten(300,true) %><div class="more"><a href="<% permaLink %>">≫この記事の続きを読む</a></div></div>
</div>
</div>
<% /AQNewEntries %>

以下の箇所に置きます

<% freeSpace4 %>
</div>
<br class="clear" />
</div>

以下を削除して
<div class="title"><a href="<% permaLink %>"><% pageTitle %></a></div>
<div class="info"><% pagePublicDate | parseDatetime(yyyy/MM/dd HH:mm:dd) %> | <% parentPageList_all | tag_insert(span class="plist") %></div>

以下にっ書き換えます..

<h3>最新記事</h3>
<% AQNewEntries %>
<div class="blog">
<div class="nmlbox">
<% pageThumbnail | tag_insert(div class="thumb") %>
<div class="body"><% pageBody | tag_strip | str_replace( ,) | oneline | shorten(60,true) %><div class="more"><a href="<% permaLink %>">≫この記事の続きを読む</a></div></div>
</div>
</div>
<% /AQNewEntries %>

ＨＴＭＬは、ここで終わり
次は、スタイルシートへ進みます

ブログモードの項目だけを改行します

==================================================
ブログモード
==================================================
*/
.blog {
border-bottom-color: #e6e6e6;
border-bottom-style: solid;
border-bottom-width: 1px;
margin-bottom: 15px;
overflow: hidden;
padding: 10px;
}
.blog .thumb {
float: left;
margin-right: 15px;
}
.blog .thumb img { width: 125px; }　*/数値を80に変更/*
.blog .title {
background-image: url(img/h6.png);
background-position: 10px 1px;
background-repeat: no-repeat;
color: #333333;
text-shadow: 0 0 1px rgba(51,51,51,.1);
font-size: 16px;
margin: 3px auto;
padding-left: 34px;
line-height: 140%;　*/数値を100に変更/*
}
.blog .title a { color: #333; }
.blog .info {
color: #666;
margin-bottom: 10px;
padding: 0 10px;
}
.blog .info a { color: #666; }
.blog .body {
line-height: 150%;
overflow: hidden;
padding: 0 10px;
　　　　font-size: 12px;　*/追加した行/*
}
.blog .more {
font-weight: 700;
margin-bottom: 10px;
margin-top: 10px;
padding-right: 5px;
text-align: right;
}

改行、追加行で指定は終わります

ここで、お詫びがございます
上記例画像は、枠で囲われていますね
デフォルトでは枠無...当サイト関連ではすべて枠付きを追加していたので
勘違いしてました

ここまでのカスタムを施しても枠は、表れませんが、もし枠が必要ななら
こちらページの解説をご覧ください
ブログの更新履歴をＢＯＸ枠で囲む

枠　ボックス枠の囲いラインが太すぎると感じられましたら、細くもできます

comcomstylescssで追加したコードの数値を変更

.nmlbox {
border: 2px solid #CCCCCC;
の、数値を１とか0.5
に書き換えてください

/* ボックス */

.nmlbox,.dottbox,.ylwbox,.graybg{
padding:15px;
margin-top: 10px;
margin-bottom: 10px;
clear:both;
}

.graybg{
background-color:#EBEBEB;
}

.dottbox{
border:dotted 1px #666;
}
.nmlbox {
border: 2px solid #CCCCCC;　数値変更
}
.ylwbox {
background-color: #FFF;
border: 0.1px solid #BBBBBB;
}

ご注意
この書き換え反映は、サイト全体で読む込む際にも連動反映されます

参考

スタイルシートで指定したので、カテゴリーページ巻末の更新でもレイアウトは
反映されますので、できればカテゴリーＨＴＭＬでもmenu内にブログモードを
配置換えしてサイドバーで表示させるスタイルが良いと思います

完全ブログ化とする、カテゴリーなど一切表示せずすべてブログみたいにという場合
やりようはいくつもあり、これが正解とも言えませんが、

例えば、エントリーページファイルですべての記事を書く

ホームとかで一ページのみ運営者情報を表示する...などの場合
そのページだけメニューの非表示設定にして、ナビなど別リンクで読み込ませる

一応の参考です

今回のカスタマイズは、もっと進行することはできますが、一ページで合わすには
長々になってしまい、混乱もしてしまうのでわかりやすいように分別して情報
追加してまいりますので、お待ちください

サイドバーメニューをブログイメージにカスタマイズ
 トップページ

サイドバーを完全ブログ化

関連ページ

スポンサー広告

ＭＥＮＵ一覧

ＣＳＳ追加カスタマイズ

youtube関連

アドセンス

サポート