【変更した点と参考資料】
①ラベルを２列に下記のページを参考にさせて頂きました。
・itFun.jpさんのページ
http://itfun.jp/2009/01/blogger-2.htmlサイドバーの幅が違うので少し変更しました。
また、上記サイトで紹介されている方法ではIE6から印刷しようとするとエラーが出てしまいますが、ウィジェットの「ul id="tags"」とCSSの「＃tags li{」の部分の「tags」が原因の様ですので、「tags2」に書き換えたら印刷出来る様になりました。
スタイルシートの下記赤字部分を書き換えます。
<b:widget id='Label1' locked='false' title='サイト内キーワード検索' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul id='tags2'>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
</li>
</b:loop>
</ul>
合わせて、スタイルシートの下記部分も書き換えます。
赤字部分が追加した部分です。
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar #tags2 li {
float:left;
width:95px;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
下記サイトの物を利用させて頂いています。
サイドバーのウィジェットに貼り付けています。
・ＩＴＧｅａｒさんのページ
http://cnt.itgear.jp/③レイアウト崩れ防止＋ソース整形今迄はBloggerのWYSIWYG編集画面で改行を沢山してレイアウトを整えていたのですが、「ＨＴＭＬの編集」から自分でタグを書き込んで整形する様にしました。
改行の変わりに画像の直後に＜div class="clear"＞＜/div＞を挿入して、テキストの回り込みを解除しただけです。
携帯等のフルブラウザでもレイアウトが崩れなくなったと思います。
下記サイトを参考にさせて頂きました。
・ＣＳＳレイアウト実践講座
http://css.uka-p.com/cause/clear.html④画像にモザイクを以前は「ペイント」を使って個人情報を隠してました。
今回から以下のソフトを使わせて頂いています。
下記ページの「ミニアプリ」のリンクからダウンロード出来ます。
・ＭｏＺＡ
http://www.fine-view.com/jp/⑤「続きを読む」ボタンを導入Bloggerには標準ではこの機能がありません。
下記サイトを参考にさせて頂き、スタイルシートを書き換え、各投稿のソースも弄りました。
・クリボウさんのBlogger入門
http://blogger.kuribo.info/2006/02/blogger_20.htmlまず、スタイルシートに下記赤字部分を追加します。
<b:widget id='Header1' locked='true' title='アドエス覚書 ～へなちょこおたくメモ～ (Header)' type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='main'>
<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
.fullpost {display:block;}
.readmore {display:none;}
<b:else/>
.fullpost {display:none;}
.readmore {display:block;}
</b:if>
</style>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
次に、各記事内で下記タグを使って記述します。
見出し
<div class="fullpost">
本文
以上</div><div class="readmore"><a href="この記事のurl">[続きを読む]</a></div>
また、新規投稿作成用のテンプレートも登録しました。
⑥画像の枠を消す下記を参考に「秘密のボタン」の枠を消しました。
・digital Labさん
http://slolab.net/digitallab/2006/05/post_8.html⑦RSSリーダーへのフィードの登録ボタンを追加下記サイトのソースを参考にさせて頂きました。
ボタンは画像ではなくテキストにしてみました。
・ＳＥＯ対策ドットコム
http://www.seotaisaku.com/smoplus/bmplus.html⑧スタイルシートのヘッダー部分弄ってブログの説明（description）を左寄せに「header .description」に「text-align: left;STYLE」を追加しました。
⑨MARQUEEを追加下記ページを参照させて頂きました。
・Tomyさんのページ
http://www5.airnet.ne.jp/tomy/knowhow/tag.htm⑩複数のウィジェットを一つに下記を一つのウィジェットに纏めてみました。
各々のソースを一つのウィジェットにコピー＆ペーストしただけです。
・アクセスカウンタ
・MARQUEE
・フィードの登録ボタン
・自己紹介
この記事ご紹介した内容は「
Blogger覚書 ～へなちょこおたくメモ～」でもご紹介しています。
以上
