Last Update : 20/Jun/09
①アクセスカウンタ
下記サイトの物を利用させて頂いています。
サイドバーのウィジェットに貼り付けています。
・ITGearさんのページ
http://cnt.itgear.jp/
②テキストの回り込み
今迄はBloggerのWYSIWYG編集画面で改行を沢山してレイアウトを整えていたのですが、「HTMLの編集」から自分でタグを書き込んで整形する様にしました。
改行の変わりに画像の直後に<div class="clear"></div>を挿入して、テキストの回り込みを解除しただけです。
携帯等のフルブラウザでもレイアウトが崩れなくなったと思います。
下記サイトを参考にさせて頂きました。
・CSSレイアウト実践講座
http://css.uka-p.com/cause/clear.html
③画像にモザイクを
以前は「ペイント」を使って個人情報を隠してました。
今回から以下のソフトを使わせて頂いています。
下記ページの「ミニアプリ」のリンクからダウンロード出来ます。
・MoZA
http://www.fine-view.com/jp/
④画像の枠を消す
下記を参考に「秘密のボタン」の枠を消しました。
・digital Labさん
http://slolab.net/digitallab/2006/05/post_8.html
⑤RSSリーダーへのフィードの登録ボタンを追加
下記サイトのソースを参考にさせて頂きました。
ボタンは画像ではなくテキストにしてみました。
・SEO対策ドットコム
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覚書 ~へなちょこおたくメモ~」でもご紹介しています。
以上
20090620
20090509
ラベルを2列に
Last Update : 12/May/09
サイドバーのラベル表示を2列にしてみました。
下記のページを参考にさせて頂きましたが、サイドバーの幅が違うので少し変更しました。
・itFun.jpさんのページ
http://itfun.jp/2009/01/blogger-2.html
また、上記サイトで紹介されている方法ではIE6から印刷しようとするとエラーが出てしまいますが、ウィジェットの「ul id="tags"」とCSSの「#tags li{」の部分の「tags」が原因の様ですので、「tags2」に書き換えたら印刷出来る様になりました。
【スタイルシートの変更例】
スタイルシートの下記赤字部分を書き換えました。
合わせて、スタイルシートの下記部分も書き換えます。
赤字部分が追加した部分です。
以上
サイドバーのラベル表示を2列にしてみました。
下記のページを参考にさせて頂きましたが、サイドバーの幅が違うので少し変更しました。
・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;
}
以上
「続きを読む」ボタンの導入
Last Update : 12/May/09
Bloggerには「続きを読む」ボタンを記事内に追加する機能が用意されていません。
下記サイトを参考にスタイルシートを書き換え、各投稿のソースも弄りました。
・クリボウさんのBlogger入門http://blogger.kuribo.info/2006/02/blogger_20.html
まず、スタイルシートに下記赤字部分を追加します。
次に、各記事内で下記タグを使って記述します。
新規投稿作成用のテンプレートに上記タグを登録しておくと便利です。
以上
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>
新規投稿作成用のテンプレートに上記タグを登録しておくと便利です。
以上
20090508
表組みの記述方法
Last Update : 12/May/09
タグを直接記述する方法です。
すぐ忘れてしまうので備忘録代わりに。
基本例;
<table border=1 cellspacing=1>
<Tr>
<Th width=130 align=center>Process</Th>
<Th width=130 align=center>Memory Usage</Th>
</Tr>
<Tr>
<Td align=center>tmail</Td>
<Td align=center>41kb</Td>
</Tr>
<Tr>
<Td align=center>lightmail</Td>
<Td align=center>204kb</Td>
</Tr>
</table>
*上記のままだと表の前に空白行が大量に出来ますので、実際には全て前詰めで記述します。
セルを結合させる場合は「rowspan」と「colspan」を使用します。
<table border=1 cellspacing=1>
<Tr>
<Th width=130 rowspan=2 align=center>Process</Th>
<Th width=130 rowspan=2 align=center>Memory Usage</Th>
<Th colspan=2 align=center>CPU Usage</Th>
</Tr>
<Tr>
<Th width=50 align=center>1回目</Th>
<Th width=50 align=center>2回目</Th>
</Tr>
<Tr>
<Td align=center>MortScript</Td>
<Td align=center>17kb</Td>
<Td align=center>1.19</Td>
<Td align=center>1.09</Td>
</Tr>
</table>
以上
タグを直接記述する方法です。
すぐ忘れてしまうので備忘録代わりに。
基本例;
<table border=1 cellspacing=1>
<Tr>
<Th width=130 align=center>Process</Th>
<Th width=130 align=center>Memory Usage</Th>
</Tr>
<Tr>
<Td align=center>tmail</Td>
<Td align=center>41kb</Td>
</Tr>
<Tr>
<Td align=center>lightmail</Td>
<Td align=center>204kb</Td>
</Tr>
</table>
*上記のままだと表の前に空白行が大量に出来ますので、実際には全て前詰めで記述します。
Process | Memory Usage |
---|---|
tmail | 41kb |
lightmail | 204kb |
セルを結合させる場合は「rowspan」と「colspan」を使用します。
<table border=1 cellspacing=1>
<Tr>
<Th width=130 rowspan=2 align=center>Process</Th>
<Th width=130 rowspan=2 align=center>Memory Usage</Th>
<Th colspan=2 align=center>CPU Usage</Th>
</Tr>
<Tr>
<Th width=50 align=center>1回目</Th>
<Th width=50 align=center>2回目</Th>
</Tr>
<Tr>
<Td align=center>MortScript</Td>
<Td align=center>17kb</Td>
<Td align=center>1.19</Td>
<Td align=center>1.09</Td>
</Tr>
</table>
Process | Memory Usage | CPU Usage | |
---|---|---|---|
1回目 | 2回目 | ||
MortScript | 17kb | 1.19 | 1.09 |
以上
20090506
スクリプト・html・CSSのブログ中での引用
Last Update : 12/May/09
記事内でMortScriptのスクリプトやHTMLやCSSの記述例を引用する際には、タグとして認識されない様に、「<」は「&lt;」、「>」は「&gt;」(共に全て半角)と記述します。
エディタ等で一括変換すると簡単です。
<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>
以上
記事内でMortScriptのスクリプトやHTMLやCSSの記述例を引用する際には、タグとして認識されない様に、「<」は「&lt;」、「>」は「&gt;」(共に全て半角)と記述します。
エディタ等で一括変換すると簡単です。
<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>
以上
20090504
スクロールバーの追加
Last Update : 09/May/09
スタイルシートでワードラップを規定している場合は、スクロールバーを適用したい部分のみワードラップを解除してからスクロールを強制的に指定します。
【タグ記述例】
以上
スタイルシートでワードラップを規定している場合は、スクロールバーを適用したい部分のみワードラップを解除してからスクロールを強制的に指定します。
【タグ記述例】
<div style="
word-wrap:normal;
overflow:scroll;
width:400px;
height:200px;
border:solid 1px">
<pre>
ここにスクロールバー内に表示したい内容を張り付けます。一行が長いとスクロールバー(左右)が表示されます。
</pre></div>
以上
登録:
投稿 (Atom)