Twitter

Twitterがどんなものか、いまさらながら初めてみました。でも、独り言で誰も読んで無い（フォーローされていない）となると少しさびしい．．．

気になるところのフォローしてみよっと。

WindowsLiveWriterもう一つの動画挿入Plugin

もう一つありました。InsertVideoと呼ばれる、Plugin。

英語ですが、こちらがつかいやすかも

WindowsLiveWriterのYouTube動画リンクPlugin

WindowsLiveWriterのPluginに、YouTube動画を貼り付けるものがあります。

ここに、URLを入れるだけで簡単にできます。

YouTube - Windows Live Writerの使い方

Windowst LiveWriter Dynamic Template Plugin

多くのサイトに、MovableTypeのOpenSouce版を入れているが、カスタムフィールド機能が無いのが、残念！！

この機能をもっと簡単にカバーできる方法がありました。HTMLやらMovableTypeから素人さんには記事（ブログ）を書くことさえ難しいが、今は無料で提供されるWindows LiveWriterで、記事を編集投稿してもらっている。
このWindowsLiveWriterには数多くのPluginが用意され、簡単に記事を書く（デザイン）することが可能です。たとえば、YouTubeの動画を貼り付けたり、Amazonの情報をつけたり。

その中で、カスタムフィード機能（定型フォーマット入力画面）のDynamic Template Pluginをあることを知った。これは、単なるテンプレートではなく、いつもテンプレートをつくれば、それを選択することで、同じHTMLで定型句が記述できる。
しかも、カスタムフィード（項目入力）をしてすれば、簡単な入力画面をでき、そこに入力するだけで、定型同じ定型の記事を書くことができるし、これはとても使いこなせば、優れものです。

機能は、

• 定型句　（HTML）　　例：<p>Power By <a herf=”XXXXXXXX.XX.XX”>Blogger</a></p>
• コード（C# コード　　　例： <p>この記事の作成時間は、<%= DateTime.Now.ToString %>です。
• 文章の検索　　　例：<b><%= _selection %></b> ※単語を選択し、本Pluginテンプレートを実行すると強調文字になる。
• 入力画面　　　　例：<p>名前は、<%= name %>です。年齢は、<%= year %>です。住所は、<%= address %>です</p>

があります。テンプレートを数多く準備すれば、わざわざソースでHTMLを各必要がなくなります。

 

次に入力機能の入力項目については、

• １行テキスト
• 複数行テキスト
• １行HTML
• 複数行HTML
• 整数
• 小数
• ブーリアン（定数）
• 日時

が準備されています。項目名には、日本が使えますので、日本語環境でも違和感なく使えます。

各値は、<%= 変数名 %>で参照できる。たとえば、

<p>名前は、<%= name %>です。</p>と書けば、入力に”日本太郎”とすれば、

<p>名前は、日本太郎です。</p>と出力されます。

 

これだけの機能がありますが、他にも関数（HtmlDecode等）が使えるようです。

In Example 4 above, a function called HtmlDecode is used. That’s one of several built-in functions available to templates. The complete list follows:

• HtmlEncode(string)
• HtmlAttributeEncode(string)
• HtmlDecode(string)
• UrlEncode(string)
• UrlPathEncode(string)
• UrlDecode(string)

iGoogleからのBlogger投稿

Bloggerを使っているなかで、iGoogleのガジェットで”Post to Blogger”が便利ツールとしてレポートされるが、インストールしても下記画面から進まない。

iGoogleのガジェットのコメントにも同様な内容が多くみられる。だれかできた方は、方法を教えてください。

BloggerでSyntaxHighlighterの追加

HTMLソースやJavaScriptソースをきれいに見せる、SyntaxHighlighterをBloggerに導入しました。
GoogleからのGoogleコードとして提供されておりますが、バージョンが1.5.1と古く最新のSyntaxHighlighterを使う為にSyntaxHighlighterサイトのバージョンを使うことにします。
記事作成時点の最新のバージョンは、3.0.83です。
下記ソースを、テンプレートの＜/head＞直前に挿入します。HTML的に一番最後となります。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.config.clipboardSwf=&#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>

なお、各種ソースに対応する用、複数のソースが提供されていますので、必要なものだけを使うようにします。全て使用するとそれだけ遅くなる可能性があります。情報は本サイトにあります。

後は、

<pre class="brush: xxxx">
  ソース
</pre>

とすればよいです。

このときの、XXXX（brush Alias）部分は、ソースによって違ってきます。情報は本サイトにあります。

　投稿すればよいのですが、＜や＞をコード変換の必要があります。

Blogger faviconの設置方法

Bloggerに独自のfaviconを表示させる方法です。
通常、favicon.icoファイルをBlogger上に置くことができない。そのため、他のサイトにICOファイルを置いてそこの画像を使う方法が一般である。
なお、Googleから無料のサイト作成”Googleサイト”サービスが提供されているので、そこにfavicon.icoを置いて、そこのアイコンを設定することにより。
（Googleサイトの作成や設定は、割愛します）

<link href="http://sites.google.com/site/自分のサイト名/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"></link>  
<link href="http://sites.google.com/site/自分のサイト名/favicon.ico" rel="icon" type="image/vnd.microsoft.icon"></link>

追加する場所は、テンプレートで、を探し、その直前に挿入すれば良いです。

Bloggerブログ説明の変更

Bloggerのタイトルの変更と同様に、ブログの説明を変更する方法です。

<b:if cond='data:blog.pageType == "index"'> 
  <p class='description'><span><data:description/></span></p> 
<b:else/> 
  <p class='description'><span><data:blog.pageName/></span></p> 
</b:if>

修正場所は、テンプレートの<div class="descriptionwrapper">を検索し直下にある、<div class="description"><data:description></data:description></div>と入れ替えるます。

Bloggerタイトル表示の変更

Bloggerのタイトルは、通常
<title><data:blog.pageTitle/></title>
となるが、記事表示の時に、（記事タイトル ｜ ブログタイトル）にするように、修正する。
なお、ホームの時（ ｜ ブログタイトル）になるので、ページの種類が”index”の時には、ブログタイトルのみにするようにした、

<b:if cond='data:blog.pageType == "index"'>
  <title><data:blog.pageTitle/></title>
<b:else/>
  <title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Bloggerの見出しタグ

Bloggerを使いはじめて、気づいたことがあります。Bloggerだけでは無いかも知れませんが、シンプルスタイルのテンプレートの見出しタグ<h2>や<h3>の使い方が、SEO的にあまり良く無いと感じます。
<h2>タグは、”記事の投稿日付け”や”サイドバーの見出し”になっています。ページのリストを使った時は、ページリストの見出しとして”ページ”が<h2>に挿入されます。
<h3>タグは、”記事のタイトル”と使用されております。

これってとてもSEO的にもったいない。そこで、<h2>タグと<h3>タグをそっくり入れ替えてみました。
方法は、デザインからテンプレートをダウンロードして、”<h2”を”<h3”に、”<h3”を”<h2”に置換してもました。当然、CSSの部分も含めてです。

そうしたところ、全体のデザインは問題がなかったが、”ページリスト”を配置した部分に<h3>タグで”ページ”（タイトル）が表示されてしまいった。通常、ページリスト（グローバルメニュー）には、タイトル必要ないので<div class='widget PageList' id='PageList1'> を検索して、<b:if cond='data:title'><h2><data:title/></h2></b:if>を削除します。

これで、まったく変わりなく変更することができます。