アイコン

Movable Type で使用されているオリジナルアイコン。

  • 様々な解像度に対応するためにアイコンはすべて SVG 形式です。
  • アイコンのディフォルトサイズは横幅24px 高さ24px。
  • アイコンは /images/sprite.svg としてひとつにまとまっています。
  • すべてのアイコンには、.mt-icon を記述します。
  • 個々のアイコンは /images/icons/ に保管されています。
  • SVG には alt 属性がありませんが、代わりに title タグに適切な情報を追加してください。

アイコンセット

ID名を記述することで指定のアイコンを表示させることができます。

Add #ic_add 追加
Add HTML #ic_addhtml HTML追加
Add Page #ic_addpage ページ追加
Align Center #ic_aligncenter 中央配置
Align Left #ic_alignleft 左配置
Align None #ic_alignnone 配置設定なし
Align Right #ic_alignright 右配置
Asset #ic_asset アセット
Audio #ic_audio オーディオ
Background Color #ic_backgroundcolor 背景色
Blank #ic_blank 空白
Bold #ic_bold 太字
Box #ic_box 箱
Build #ic_build 再構築
Category #ic_category カテゴリ
Caution #ic_caution 警告
Checkbox #ic_checkbox チェックボックス
Clock #ic_clock 時間
Code #ic_code コード
Collapse #ic_collapse 開閉
Comment #ic_comment コメント
Content Data #ic_contentdata コンテンツデータ
Content Type #ic_contentstype コンテンツタイプ
Crop #ic_crop 切り取る
Cross off #ic_crossoff 取り消し線
Custom Field #ic_customfield カスタムフィールド
Dashboard #ic_dashboard ダッシュボード
Date #ic_date 日付
Design #ic_design デザイン
Dot #ic_dot ドット
Download #ic_download ダウンロード
Draft #ic_draft 下書き
Duplicate #ic_duplicate 複製
Edit #ic_edit 編集
Eraser #ic_eraser 消去
Error #ic_error エラー
Favorite #ic_fav お気に入り
Feedback #ic_feedback フィードバック
File #ic_file ファイル
Filter #ic_filter フィルター
Flag #ic_flag フラッグ
Flip horizontal #ic_fliph 左右反転
Flip vertical #ic_flipv 上下反転
Full Screen #ic_fullscreen フルスクリーン
Gallery #ic_gallery ギャラリー
Grid #ic_grid グリッド
Group #ic_group グループ
Header #ic_header ヘッダー
Header #ic_htmlmode HTMLモード
HR #ic_hr HR
Image #ic_image 画像
Indent #ic_indent 字下げを増やす
Info #ic_info 情報
Italic #ic_italic 斜体
Link #ic_link リンク追加
List #ic_list リスト
Lock #ic_lock ロック
Mail #ic_mail メール
Member #ic_member メンバー
Menu #ic_menu メニュー
Hamburger menu #ic_menuhamburger ハンバーガーメニュー
Minus #ic_minus マイナス
Remove #ic_remove 減らす
Move #ic_move 移動（UI）
Movie #ic_movie 動画
Movable Type #ic_mt Movable Type
Multilines #ic_multiline 複数行インプット
Ordered List #ic_ol 順序のあるリスト
Permalink #ic_permalink パーマリンク
Plugins #ic_plugin プラグイン
Plus #ic_plus プラス
Preview #ic_preview プレビュー
Publish #ic_publish 公開
Quotation #ic_quotation 引用
Radio button #ic_radio ラジオボタン
Redo #ic_redo やり直す
Reload #ic_reload 再読み込み
Replace #ic_replace 置換
Related #ic_related 関連
Role #ic_role ロール
RSS #ic_rss RSS
Search #ic_search 検索
Select Box #ic_selectbox セレクトボックス
Settings #ic_setting 設定
Single line #ic_singleline 1行インプット
Site #ic_sites サイト
Status Draft #ic_statusdraft 下書きステータス
Stop #ic_stop 停止
Success #ic_success 成功
System #ic_system システム
Tag #ic_tag タグ
Template #ic_template テンプレート
Text Color #ic_textcolor 文字色
Template #ic_textbigger テキスト（大）
Template #ic_textsmaller テキスト（小）
時間 #ic_time 時間
Tool #ic_tool ツール
Trash #ic_trackback トラックバック
Trash #ic_trash ゴミ箱
Down #ic_tri-down 下向き三角
To Left #ic_tri-left 左向き三角
To Right #ic_tri-right 右向き三角
Up #ic_tri-up 上向き三角
Undo #ic_undo 元に戻す
Underline #ic_underline 下線
Unindent #ic_unindent 字下げを減らす
User #ic_user ユーザー
User Authorized #ic_user-auth 承認済みユーザー
Open User Panel #ic_user-open ユーザー情報パネルの開閉
Unlink #ic_unlink リンク削除
Upload #ic_upload アップロード
Upload #ic_wysiwyg WYSIWYGモード 
// 追加アイコン
<svg role="img" class="mt-icon"><title>追加</title><use xlink:href="../images/sprite.svg#ic_add" /></svg>
  
// タグアイコン
<svg role="img" class="mt-icon"><title>タグ</title><use xlink:href="../images/sprite.svg#ic_tag" /></svg>

色バリエーション

ボタンと同じカラーテーマでアイコンの色を変えることができます。
mt-icon--inverse を記述すると白色のアイコンになります。

Favorite Favorite Favorite Favorite Favorite Favorite Favorite Favorite 

<svg role="img" class="mt-icon"><title>Favorite</title><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg role="img" class="mt-icon--primary"><title>Favorite</title><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg role="img" class="mt-icon--secondary"><title>Favorite</title><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg role="img" class="mt-icon--success"><title>Favorite</title><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg role="img" class="mt-icon--info"><title>Favorite</title><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg role="img" class="mt-icon--warning"><title>Favorite</title><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg role="img" class="mt-icon--danger"><title>Favorite</title><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg role="img" class="mt-icon--inverse"><title>Favorite</title><use xlink:href="../images/sprite.svg#ic_fav"/></svg>

サイズバリエーション

アイコンは .mt-icon--sm、.mt-icon--lg、.mt-icon--xlg を追加することで大きさを変更することができます。

Favorite Favorite Favorite Favorite 

<svg role="img" class="mt-icon mt-icon--sm"><title>Favorite</title><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg role="img" class="mt-icon"><title>Favorite</title><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg role="img" class="mt-icon mt-icon--lg"><title>Favorite</title><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg role="img" class="mt-icon mt-icon--xlg"><title>Favorite</title><use xlink:href="../images/sprite.svg#ic_fav"/></svg>

アイコンバッジ

ユーザーアイコンに添えるバッジは .mt-user__badge と記述することで実装できます。バッジの色は用途に合わせて変更することができます。

バッジが画像の場合、サイズを 16x16 にリサイズして、.mt-user__badge--img と記述します。画像背景は白を想定しています。

User
Favorite
User
MT User
User
Checked
User
Stop
User
Stop
User
トフ

// ディフォルト
<div class="mt-user">
  <img src="../images/user-default.svg" alt="User" width="48" height="48">
  <div class="mt-user__badge"><svg role="img" class="mt-icon--inverse mt-icon--sm"><title>Favorite</title><use xlink:href="../images/sprite.svg#ic_fav"/></svg></div>
</div>

// プライマリ
<div class="mt-user">
  <img src="../images/user-default.svg" alt="User" width="48" height="48">
  <div class="mt-user__badge--primary"><svg role="img" class="mt-icon--inverse mt-icon--sm"><title>MT User</title><use xlink:href="../images/sprite.svg#ic_mt"/></svg></div>
</div>

// 成功・承認
<div class="mt-user">
  <img src="../images/user-default.svg" alt="User" width="48" height="48">
  <div class="mt-user__badge--success"><svg role="img" class="mt-icon--inverse mt-icon--sm"><title>Checked</title><use xlink:href="../images/sprite.svg#ic_checkbox"/></svg></div>
</div>

// 注意
<div class="mt-user">
  <img src="../images/user-default.svg" alt="User" width="48" height="48">
  <div class="mt-user__badge--warning"><svg role="img" class="mt-icon--inverse mt-icon--sm"><title>Stop</title><use xlink:href="../images/sprite.svg#ic_error"/></svg></div>
</div>

// 警告・中止
<div class="mt-user">
  <img src="../images/user-default.svg" alt="User" width="48" height="48">
  <div class="mt-user__badge--danger"><svg role="img" class="mt-icon--inverse mt-icon--sm"><title>Stop</title><use xlink:href="../images/sprite.svg#ic_stop"/></svg></div>
</div>

// 画像
<div class="mt-user">
  <img src="../images/user-default.svg" alt="User" width="48" height="48">
  <div class="mt-user__badge--img"><img src="../images/toph.png" alt="トフ" width="16" height="16" class="mt-icon--img"></div>
</div>

コンテンツ追加用

MT7のコンテンツ追加 UI には独自の装飾が付いたアイコンを用意してします。クラス名 .mt-icon--contentblock の中に任意のアイコンを加えます。

ヘッダー
画像
水平線
埋め込み 
<div class="mt-icon--contentblock">
  <svg role="img" class="mt-icon mt-icon--sm"><title>ヘッダー</title><use xlink:href="../images/sprite.svg#ic_header"/></svg>
</div>

コンテンツ ステータス

MT7のコンテンツ追加 UI には独自の装飾が付いたアイコンを用意してします。クラス名 .mt-icon--contentblock の中に任意のアイコンを加えます。

Published Unpublish Review Scheduled Draft 
// 公開
<svg role="img" class="mt-icon--success mt-icon--sm"><title>Published</title><use xlink:href="../images/sprite.svg#ic_checkbox" /></svg>
// 非公開
<svg role="img" class="mt-icon--danger mt-icon--sm"><title>Unpublish</title><use xlink:href="../images/sprite.svg#ic_stop" /></svg>
// レビュー待ち
<svg role="img" class="mt-icon--warning mt-icon--sm"><title>Review</title><use xlink:href="../images/sprite.svg#ic_error" /></svg>
// スケジュール
<svg role="img" class="mt-icon--info mt-icon--sm"><title>Scheduled</title><use xlink:href="../images/sprite.svg#ic_clock" /></svg>
// 下書き
<svg role="img" class="mt-icon mt-icon--sm"><title>Draft</title><use xlink:href="../images/sprite.svg#ic_draft" /></svg>