その他の設定メモ

Last Update : 20/Jun/09
①アクセスカウンタ

下記サイトの物を利用させて頂いています。

サイドバーのウィジェットに貼り付けています。

・ＩＴＧｅａｒさんのページ
http://cnt.itgear.jp/

②テキストの回り込み

今迄はBloggerのWYSIWYG編集画面で改行を沢山してレイアウトを整えていたのですが、「ＨＴＭＬの編集」から自分でタグを書き込んで整形する様にしました。

改行の変わりに画像の直後に＜div class="clear"＞＜/div＞を挿入して、テキストの回り込みを解除しただけです。

携帯等のフルブラウザでもレイアウトが崩れなくなったと思います。

下記サイトを参考にさせて頂きました。

・ＣＳＳレイアウト実践講座
http://css.uka-p.com/cause/clear.html

③画像にモザイクを

以前は「ペイント」を使って個人情報を隠してました。

今回から以下のソフトを使わせて頂いています。

下記ページの「ミニアプリ」のリンクからダウンロード出来ます。

・ＭｏＺＡ
http://www.fine-view.com/jp/

④画像の枠を消す

下記を参考に「秘密のボタン」の枠を消しました。

・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覚書 ～へなちょこおたくメモ～」でもご紹介しています。

以上

ラベルを２列に

Last Update : 12/May/09
サイドバーのラベル表示を２列にしてみました。

下記のページを参考にさせて頂きましたが、サイドバーの幅が違うので少し変更しました。

・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

まず、スタイルシートに下記赤字部分を追加します。

<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>

新規投稿作成用のテンプレートに上記タグを登録しておくと便利です。

以上

[続きを読む]

文字色の設定

Last Update : 09/May/09
基本中の基本ですがHTMLで文字色を直接指定する場合の例です。

<span style="color:#ff0000;">

こんな感じになります

以上

表組みの記述方法

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>

＊上記のままだと表の前に空白行が大量に出来ますので、実際には全て前詰めで記述します。

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>１回目</Th>
<Th width=50 align=center>２回目</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
		１回目	２回目
MortScript	17kb	1.19	1.09

以上

スクリプト・html・CSSのブログ中での引用

Last Update : 12/May/09
記事内でMortScriptのスクリプトやHTMLやCSSの記述例を引用する際には、タグとして認識されない様に、「＜」は「＆ｌｔ；」、「＞」は「＆ｇｔ；」（共に全て半角）と記述します。

エディタ等で一括変換すると簡単です。

<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>

以上

スクロールバーの追加

Last Update : 09/May/09
スタイルシートでワードラップを規定している場合は、スクロールバーを適用したい部分のみワードラップを解除してからスクロールを強制的に指定します。

【タグ記述例】

<div style="
word-wrap:normal;
overflow:scroll;
width:400px;
height:200px;
border:solid 1px">
<pre>
 
ここにスクロールバー内に表示したい内容を張り付けます。一行が長いとスクロールバー（左右）が表示されます。
 
</pre></div> 

以上