Blogger Blogs での Embed.ly の使い方

■ 方法

1. スクリプトのブログへの埋め込み
1. ブログの右上の「デザイン」をクリック
2. 「HTMLの編集」をクリック
3. 「テンプレートを編集」で HTML の「</head>」前に以下のスクリプトを記述する

<script type="text/javascript" src="http://scripts.embed.ly/embedly.js" ></script>

2. コードのポスト
1. Embedly Javascript Tag - Documentation の「Custom Configuration」を参考にパラメータを javascript で設定する
2. 以下に注意して、埋め込み対象のURLをアンカーで記述する
• パラメータ「embedly_cssSelector」で設定したアンカーにURLを記述
• Twitterのつぶやきを埋め込む場合、URLは「http://twitter.com/...」で記述、「https://twitter.com/...」では埋め込まれない

■ 例

1. ソース

<a class="embedly" href="http://twitter.com/#!/ykchat/status/64504735549493248">つぶやき</a>
<script type="text/javascript">
  var embedly_cssSelector = 'a.embedly';
</script>

2. 結果
つぶやき

Twitter のつぶやきの切り出し

つぶやきURLを入力し、「切出」ボタンを押下して下さい。
つぶやきURL:

• 画像の展開は以下のサービスに対応

TwitPic Instagram

• コード
• 表示

■参考URL

• GET statuses/show/:id
• Web Intents
• http://で始まる文字を自動リンクしよう
• Twitpic 等の画像投稿サービスのサムネイル画像の URL
• とほほのスタイルシート入門

Blogger Blogs での javascript の使い方

• ソース

<script type="text/javascript">
function hello(){
  alert('Hello World!');
}
</script>
<input onclick="hello();" type="button" value="Hello World!"/>

• 結果

Blogger Blogs での脚注の付け方

■ 方法

1. 脚注番号の挿入
脚注をつけるテキストの直後に以下を記述

<a href='#{脚注ID}'><sup>{脚注番号}</sup></a>

2. 注釈文の記述
投稿の最後に以下を記述

<a name='{脚注ID}'>{脚注番号}</a>: <!--注釈文を記述-->

■ 例

• ソース

HTML<a href='#fn20110430'><sup>*1</sup></a> は、
Webページを記述するために開発されたマークアップ言語です。</br>
...</br>
<a name='fn20110430'>*1</a>: HTML は HyperText Markup Language の略

• 結果

HTML^*1 は、 Webページを記述するために開発されたマークアップ言語です。
...
*1: HTML は HyperText Markup Language の略

■ 参考URL

• How to Make Footnotes in Blogger?

Blogger Blogs での Syntax Highlighter の使い方

■ 方法

1. スクリプトの生成
How To Add Syntax Highlighter(V3) To Blogger Blogs の「Syntax Highlighter Scripts Generator for Blogger」を使用してスクリプトを生成する
1. 「Select a Theme」で Theme（デモ）を選ぶ
2. 「Select Brushes」でハイライトさせたい言語を選ぶ（複数可）
3. 「Get Code」ボタンを押して生成したスクリプトをコピーする
2. スクリプトのブログへの埋め込み
1. ブログの右上の「デザイン」をクリック
2. 「HTMLの編集」をクリック
3. 「テンプレートを編集」で HTML の「</head>」前にスクリプトをペーストする
3. コードのポスト
1. ブログの右上の「投稿」をクリック
2. 「HTMLの編集」をクリック
3. 以下のようにコードを埋め込む（HTML のテキストとしてエスケープする必要あり）

<pre class='brush:[言語名];'>

<!--コードを記述-->

</pre>