VIVABlog

文字コードShift-JIS、EUC-JPで運営しているMovableTypeのブログ・サイトを、UFT-8など他の文字コードに変換する手順です。

Continue reading…

主要なソーシャルブックマーク追加ボタンを付けるの方法では、ブックマークに追加する際にページが移動するかtarget=”_blank”でウィンドウが開くので、実際使うと面倒な感じがします。

そこで、LightBoxのようにポップアップで表示してくれるJavascriptの「GreyBox」を使います。GreyBoxは画像だけでなくWEBサイトもポップアップ表示が可能。

これを使って、ブックマーク登録画面をその場でポップアップさせることで、訪問者の人にスマートなブクマ登録をしてもらえます。登録してくれる率が高まるかも？

Continue reading…

各種ブログ（MovableType、WordPress、FC2ブログ・DTIブログ、JUGEM、livedoor Blog、Seesaa）のエントリーをソーシャルブックマークに追加するボタンを付ける方法。

対象ソーシャルブックマーク

• del.icio.us
• はてなブックマーク
• livedoor クリップ
• Saafブックマーク
• POOKMARK Airlines
• newsing

Continue reading…

WordPressとMovableTypeそれぞれの、SEO的に良くて、訪問者的にも運営者的にも構造が分かり易いパーマリンクの設定です。

MovableTypeのパーマリンク・アーカイブマッピングの設定

• 非ニュースサイトの場合：
  category/sub_category/entry_basename/index.html or .php
• ニュースサイトの場合：
  yyy/mm/entry_basename/index.html or .php

ニュースサイトの場合は記事数が多くなるのと、記事の新鮮度が分かり易くなるので年と月を設定した方がいいかもという理由。

どちらも entry_basename/index.html とすることで、ディレクトリで切る形になります。こうすることで、後々拡張子をhtmlからphpにした場合などでもURLが変更しません。

WordPressのパーマリンク設定

WordPressのデフォルトパーマリンクは、http://hogehoge.com/?p=123 のように動的生成ブログ特有のURLになるのでカスタマイズ必須です。

• 基本形： /%category%/%post_id%/
  %post_id%の部分を%postname%にすると記事タイトルにできますが、日本語タイトルの場合エンコードされるためリネームが必要になります。
• html： /%category%/%post_id%.html
• このサイトの場合： /%category%/kiji%post_id%/
  %post_id%だけだとブログっぽさが出てしまうので、postやkijiを付けた方がそれっぽく見えます。
• その他、パーマリンクのカスタマイズについてを見て個人個人でカスタマイズしてください。

< >をそのまま入力するとコードとして認識されるので、 < を &lt; に、> を &gt; にそれぞれ書き換えなければいけません。
基本的にhtmlコードなどをブログなどに記載する場合は、<pre>タグを使うようになっています。

<pre>タグタグを使う場合

<pre><code>
ソースコード
</code><pre>

という風に、<pre>タグで<code>タグを囲って使います。
ただ、このままだと折り返さないコードの場合は、横幅がスゴイことになってしまうのでcssでちゃんと折り返されるようにします。

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

WordPressプラグインを使用してコードを表示する場合

• PHP Hilight Stringインストール方法 | Download
• 使い方は簡単で、コードを専用のタグで囲うだけ。

同梱されているcssはテンプレートcssに入れればOK。
このcssを編集すればフォントの大きさやボーターカラーの変更ができます。

/*
ハイライトする色の指定
*/
.hl-surround{
    -moz-border-radius: 5px;
    background-color: #F9FBFC;
    border: 1px solid #C3CED9;
    padding: 8px;
    margin-bottom: 5px;
    width: 500px;
    overflow: auto;
    text-align: left;
}
 
.hl-surround, .hl-surround pre, .hl-surround span{
    font: normal 10pt 'Courier New', monospace;
}
 
.hl-default{
    color: Black;
}
.hl-code{
    color: Gray;
}
.hl-brackets{
    color: Olive;
}
.hl-comment{
    color: #ffa500;
}
.hl-quotes{
    color: #8b0000;
}
.hl-string{
    color: Red;
}
.hl-identifier{
    color: Blue;
}
.hl-builtin{
    color: Teal;
}
.hl-reserved{
    color: Green;
}
.hl-inlinedoc{
    color: Blue;
}
.hl-var{
    color: #00008b;
}
.hl-url{
    color: Blue;
}
.hl-special{
    color: Navy;
}
.hl-number{
    color: Maroon;
}
.hl-inlinetags{
    color: Blue;
}
.hl-main{
    background-color: transparent;
}
 
.hl-main pre{
    margin: 0; padding: 0;
}

MovableType用プラグインを使用する場合

エントリー投稿画面に追加される「&」ボタンを押すだけで、選択した文字列を実体参照化してくれる便利なプラグイン。

[MovableType用EntityRefButtonプラグイン v0.0.5 ]

MovableTypeでは、Atom/RSS2.0/RSDと複数のRSSフィードを出力しています。

フィードの観覧者数をカウントしたりと、いろいろ便利なFeedBurnerへ乗り換えた際に、今までRSSリーダーでAtomなどを登録していたユーザーも全てFeedBurnerにリダイレクトする事で、今までのRSSフィードの購読者の数も正確に把握できて一括管理が可能になります。

[FeedBurner.JP]
[FeedBurner.com]

手順

1. MT管理画面から、Atom/RSS/RSDのテンプレート内容をコピーして新しくテンプレートファイルを作り再構築。こうすることでリダイレクト処理の無限ループを防ぐ。
   
   （index.xmlならindex2.xmlなど、別名ならなんでも。）
2. FeedBurnerのフィード編集から、出力元フィードのURLを新しく作ったものに変更する。

次に、.htaccessファイルを作り以下を追記してアップロードします。
元々atomなどを出力してない場合は、出力していたファイル名のみ記載してください。

mod_rewriteが使えるサーバー用

RewriteEngine on  
RewriteRule ^index\.xml$ feedburnerのURL [L,R=permanent]
RewriteRule ^atom\.xml$ feedburnerのURL [L,R=permanent]
RewriteRule ^rsd\.xml$ feedburnerのURL [L,R=permanent]

mod_rewriteが使えないサーバー用

RedirectPermanent /rsd.xml feedburnerのURL  
RedirectPermanent /index.xml feedburnerのURL  
RedirectPermanent /atom.xml feedburnerのURL

以前のRSSアドレス（index.xmlなど）にアクセスしてみて、feedburnerにリダイレクトされるかチェックして完了です。

[Feedburner Infomation | リダイレクト設定]