2011年5月6日金曜日

Blogger Blogs での Embed.ly の使い方

■ 方法
  1. スクリプトのブログへの埋め込み
    1. ブログの右上の「デザイン」をクリック
    2. 「HTMLの編集」をクリック
    3. 「テンプレートを編集」で HTML の「</head>」前に以下のスクリプトを記述する
    4. <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. ソース
  2. <a class="embedly" href="http://twitter.com/#!/ykchat/status/64504735549493248">つぶやき</a>
    <script type="text/javascript">
      var embedly_cssSelector = 'a.embedly';
    </script>
    
  3. 結果
  4. つぶやき

2011年5月5日木曜日

Twitter のつぶやきの切り出し

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

■参考URL

Blogger Blogs での javascript の使い方

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

2011年4月30日土曜日

Blogger Blogs での脚注の付け方

■ 方法
  1. 脚注番号の挿入
  2. 脚注をつけるテキストの直後に以下を記述
    <a href='#{脚注ID}'><sup>{脚注番号}</sup></a>
    
  3. 注釈文の記述
  4. 投稿の最後に以下を記述
    <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

2011年4月29日金曜日

Blogger Blogs での Syntax Highlighter の使い方

■ 方法
  1. スクリプトの生成
  2. 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」ボタンを押して生成したスクリプトをコピーする
  3. スクリプトのブログへの埋め込み
    1. ブログの右上の「デザイン」をクリック
    2. 「HTMLの編集」をクリック
    3. 「テンプレートを編集」で HTML の「</head>」前にスクリプトをペーストする
  4. コードのポスト
    1. ブログの右上の「投稿」をクリック
    2. 「HTMLの編集」をクリック
    3. 以下のようにコードを埋め込む(HTML のテキストとしてエスケープする必要あり)
    4. <pre class='brush:[言語名];'>
      
      <!--コードを記述-->
      
      </pre>