Bloggerのアーカイブ ガジェットに最近の記事 ガジェットを合体させる記述

Blogger の最適化の過程で…アーカイブは不要と判断し…

最近の記事は手動で構築する事にしました…

 Blogger Template Optimization / INDEX


★・。。・゜゜・。。・☆・。。・゜゜・。。・★・。。・゜゜・。。・☆

Blogger でブログを開設すると…

Archive Gadget が漏れなく付いてきます…

しかし…「フラットリスト」や「プルダウンリスト」では…

最近の記事は表示されませんし…

かといって…「階層リスト」では…

ひと月分の記事が全部表示されてしまいますので…

月初にはチョビット…月末にはタイトルが長蛇の列…

なんて事になります…

どれも使い勝手やデザインが今一歩です…

そこで最近の記事・ガジェットである Recent Posts を追加…

ってな事になります…

本来同一のナビゲーションなんだから…

合体させて表示しましょッ…って、話です…

タイトルや枠線を使わずに表示させている方には…

全く必要のない記事です…（￣ー￣）邪笑

カスタマイズするとサイドバーのようになります…

まずは CSS から…

/* Sidebar Widget
------------------------------ */
.sidebar .widget {
margin: 0;
padding: 0;
}
.sidebar .widget-content {
margin-bottom: 2em;
padding: .5em;
border-top: #4D4845 2px solid;
border-left: #4D4845 2px solid;
border-right: #4D4845 2px solid;
border-bottom: #1E90FF 1px solid;
}

/* Sidebar Recent Posts
------------------------------ */
.sidebar .Gadget h2 {
background: url(目覚まし時計画像のURL) no-repeat 15px 0px;
margin: 0 0 5px 0;
border: 0;
color: #4169E1;
text-align: center;
font-size: 14px;
font-weight: bold;
font-style: italic;
letter-spacing: 0;
}
.sidebar .Gadget {
margin-top: -2em;
margin-bottom: 2em;
padding: 5px 5px 0 5px;
border-left: #4D4845 2px solid;
border-right: #4D4845 2px solid;
border-bottom: #1E90FF 1px solid;
}

widget と Gadget…要素名など細かくは書きませんが…

大雑把に言うと…

アーカイブ・ガジェット側（Sidebar Widget）で…

２文字分の下マージンをとっているので…

最近の記事・ガジェット側（Sidebar Recent Posts）で…

２文字分のマイナスの上マージンで…

上の枠線を無くして合体させています…

アーカイブ・ガジェット側のタイトル画像は…

 Bloggerで見出しに文字を表記させずに文字入り画像を使う記述…HTML編

…の、方法で表示させています…

「テンプレートを保存」して…

次に「デザイン」から…

最近の記事・ガジェットを追加します…

複数有りますが…

「注目」の中の…

Bloggerplugins.org のが…

細かく設定できてお奨めです…

設定はこんな感じ…

サムネイルや本文も表示出来ますが…

まぁ…お好みで…

「保存」して完了です…

当サイトでは…

これまでに導入済みのナビゲーションは…

「パンくずリスト」

 Bloggerでパンくずリスト(Bread Crumb/Topic Path)を自動生成させる記述

「関連記事」

 Bloggerの記事フッターに関連記事を自動生成させるスクリプト…jQuery編

 Bloggerの記事フッターに関連記事を自動生成させるスクリプト

そして今回の「最近の記事」と記事にしてきましたが…

「タブメニュー」と「サイトマップ」もそのうちに記事にする予定です…

この五つのナビゲーション以外は…

「タグクラウド」など導入しているサイトを多々見かけますが…

オイラ的には全く使わないので…

導入する気は更々ありません…

Tips Universal Header Main Footer Current-Label : Sidebar