Movable Typeカスタマイズ | 各機能にアイコンをつけてみる

famfamfam.com: Silk Icons

数百種類のシルクアイコンがダウンロードして使うことができます。

famfamfam.com: Silk Icons

http://www.famfamfam.com/lab/icons/silk/

フィードアイコン

RSSやAtomフィードなどのアイコンはこちらからカラーバリエーションが豊富で格好いいです。

feedicons

http://feedicons.com/

アイコン表示のカスタマイズ

上記のアイコンをダウンロードして以下の手順でカスタマイズするとリンク項目の前にアイコンを表示することができます。

コメントリンクにコメントのアイコンを表示する

<MTIfCommentsActive>| <span class="com"><a href="<$MTEntryPermalink$>#comments">コメント (<$MTEntryCommentCount$>)</a></span></MTIfCommentsActive>

上記のように<a href="<$MTEntryPermalink$>#comments">コメント (<$MTEntryCommentCount$>)</a>を<span class="com"></span>で囲います。class指定のcomは、コメントの略です。任意のプロパティを指定することができます。

CSSコード

上記のコードを追加したあとに、CSS（スタイルシート）に以下の設定を追加します。

span.com{
    background-image:url('images/comments.png');
    background-position:left center;
    background-repeat:no-repeat;
    padding: 2px; <!--文字の大きさで数値変更が必要-->
    padding-left:18px;
}

上記のCSS（スタイルシートコード）を追加することで、コメントといった表示になります。

アイコンリスト

ブログの中で表示するアイコンパターンを選出してみます。

• コメント
• トラックバック
• 投稿者
• コメント投稿者
• 投稿日
• 固定リンク
• トラックバックURL
• フォルダ
• フィード
• エントリー
• メール
• タグ
• テクノラティタグ

上記は自分なりにあてはまるアイコンパターンです。人それぞれアイコンの意味付けが異なってくるとおもいますが、こんな感じかと。 以下は他にも当てはまりそうなアイコンパターンです。

• 投稿日
• 投稿日
• トラックバック

上記アイコンのCSSコード

CSSコードのみ表示しておきます。famfamfam.com: Silk Iconsの画像ファイルに合わせてあります。各プロパティは、短縮してあります。

<span class="プロパティ"></span>でテンプレートタグに追加することでアイコン表示されるようになります。

/* アイコン表示 */
/* 投稿者 */
span.user{
    background-image:url('images/user.png');
    background-position:left center;
    background-repeat:no-repeat;
    padding: 2px;
    padding-left:18px;
}
/* コメント投稿者 */
span.comuser{
    background-image:url('images/user_comment.png');
    background-position:left center;
    background-repeat:no-repeat;
    padding: 2px;
    padding-left:18px;
}
/* カテゴリ・フォルダ */
span.cat{
    background-image:url('images/folder.png');
    background-position:left center;
    background-repeat:no-repeat;
    padding: 2px;
    padding-left:18px;
}
/* エントリー */
span.page{
    background-image:url('images/page.png');
    background-position:left center;
    background-repeat:no-repeat;
    padding: 2px;
    padding-left:18px;
}
/* トラックバック */
span.track{
    background-image:url('images/arrow_refresh.png');
    background-position:left center;
    background-repeat:no-repeat;
    padding: 2px;
    padding-left:18px;
}
/* 投稿日 */
span.time{
    background-image:url('images/clock.png');
    background-position:left center;
    background-repeat:no-repeat;
    padding: 2px;
    padding-left:18px;
}
/* タグ */
span.tags{
    background-image:url('images/tag_blue.png');
    background-position:left center;
    background-repeat:no-repeat;
    padding: 2px;
    padding-left:18px;
}
/* テクノラティタグ */
span.techtag{
    background-image:url('images/tag_green.png');
    background-position:left center;
    background-repeat:no-repeat;
    padding: 2px;
    padding-left:18px;
}
/* リンク */
span.link{
    background-image:url('images/link.png');
    background-position:left center;
    background-repeat:no-repeat;
    padding: 2px;
    padding-left:18px;
}
/* フィード */
span.rss{
    background-image:url('images/feed.gif');
    background-position:left center;
    background-repeat:no-repeat;
    padding: 2px;
    padding-left:14px;
}
/* メール */
span.mail{
    background-image:url('images/email.gif');
    background-position:left center;
    background-repeat:no-repeat;
    padding: 2px;
    padding-left:14px;
}

上記の設定は、すべてアイコン画像をimagesフォルダに保存していることが絶対条件です。

いろいろとご自分で好きな設定をしてみるとブログも変わった雰囲気を出すことができると思います。