Gistを行番号つきでBloggerに表示

2012.12.28 追記：いつのまにかGistのスニペット自体に行番号が埋め込まれるようになっていたので、下記の設定は解除しました。

このBlog（Blogger）でもGistに登録したスニペットを埋め込んで表示しているが、デフォルトでは行番号が表示されないのが不便。『satomacoto: Gistで書いたコードを行番号つきでBloggerに埋め込む 』を参考に、行番号を表示するよう修正してみた。実際の表示例は、以下の通り。

手順は上記リンクの通りだが、HTML/Javascriptガジェットの登録方法が分からず、少し悩んだのでメモ。（追記：上記リンク内にも下記手順の画像がありましたが、小さくて見逃していました）

• Bloggerの管理画面から「レイアウト」を選択
• レイアウト上の「ガジェットを追加」 をクリック
• ポップアップウインドウが表示される
• 「基本」−「HTML/JavaScript」にある「＋」をクリック
• 「HTML/JavaScriptの設定」−「コンテンツ」に<script>タグで囲まれたJavaScriptを記述して「保存」をクリック

上記手順の後に、「レイアウト」画面で「配置を保存」をクリックすると、保存したJavaScriptが反映される。

Bloggerで小見出し

Bloggerで小見出しをつけるには、h4タグを使えばよい模様。以下、実例。

小見出しの例

上記の小見出しは、h4タグを使用しています。

Bloggerをスマートフォンで表示した時に画面の拡大縮小を許可する方法

このブログをiPadで見た時に画面の拡大縮小ができないのがかなりストレスだったので、拡大縮小が可能なよう設定を変更。Bloggerの新インターフェースでの手順は以下の通り。

「マイブログ」で、編集対象のブログを表示し、「テンプレート」−「HTMLの編集」を選択。

「直接 HTML を編集すると、一部の機能の動作に影響する・・・」うんぬんという画面が表示されるので、「続行」ボタンを押す。

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

上記のように、viewportのminimum-scaleとmaximum-scaleが1.0に固定されているのが原因。下記のように修正する。

<meta content='width=device-width,initial-scale=1.0' name='viewport'/>

これで、iPadでも画面の拡大縮小が可能になる。ちなみに、Bloggerの新インターフェースは以前より統一感があり使いやすくなったと思う。

Bloggerへの投稿をTwitterfeed経由でTwitterにツイート

このブログはBloggerを使っていますが、ブログへの投稿を自動的にTwitterにツイートするためにTwitterfeedを使ってみました。特に問題なさそうなので、このまま使ってみようと思います。

なお、Bloggerユーザなら、Twitterfeedのアカウントを新たに取得する必要はなく、OpenIDを使ってBloggerのアカウントでTwitterfeedにログインできます。Twitterfeedのアカウント取得や設定方法に関しては、以下のリンクが詳しいです。

• kyu3 - twitterfeedを使ったTwitter botの作り方