タグ「CSS」が付けられているもの

外部リンクにFont Awesomeのfa-external-linkを付ける【覚書】

以前はimg要素で外部リンク用の画像を挿入していた。CSSでFont Awesomeのfa-external-linkアイコンを簡単に挿入できる。

.exampleとexample.comは適宜変更の事

.example a[href^="http://"]:after,
.example a[href^="https://"]:after,
.example a[target="_blank"]:after {
content: "\f08e";
display: inline-block;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
margin: 0 .3em;
text-decoration: none;
}
.example a[href*="example.com"]:after {
content: "";
}

特定のウェブページにstyle要素などを追加する

特定のウェブページのみで利用するCSSなどは、他のページで利用することはない。特定ウェブページにstyle要素で指定すれば他のページに影響することがなく、僅かであるが読み込みも速くなるだろう。

例えば、サイトマップのページが格納されているフォルダ名「サイトマップ」の場合だけに使用する背景画像を、Base64でstyle要素に追加する。

予めsitemap_folderを指定し、mt:FolderLabelの値と比較する。

<mt:SetVar name="sitemap_folder" value="サイトマップ">
<mt:SetVarBlock name="Folder"><$mt:FolderLabel$></mt:SetVarBlock>
<mt:If name="sitemap_folder" like="$Folder">
<style>
.main-unit  ul.tree li {
    background: url(data:image/png;base64,エンコードした文字列);
}
</style>
</mt:If>

この例では、アーカイブパスを%c/%iにしている。（その他の設定の場合は変更が必要。適用できないこともあります。）

Movable Type 6 無料テーマ Bootstrap 01にBootswatchのCSSを適用する

Movable Type 6 無料テーマ Bootstrap 01にフラットでシンプルなデザインが美しいBootswatchのスタイルシートを適用する方法をご紹介します。

Bootswatch

Bootswatchのスタイルシートを利用するには、予めナビゲーションバーをFixed navbarなどに変更します。

Fixed navbar

ダッシュボードを開き、Bootswatchよりダウンロードしたbootstrap.min.cssをbootstrap_min_css（bootstrap_min_css.mtml）にペーストします。ファイルサイズが大きいために上手くペースト出来ない事があります。その場合はテーマのbootstrap_min_css.mtmlに上書きアップロードし、bootstrap_min_cssを初期化して下さい。

Cosmoを適用したブログ

テーマによってはページャーなどがうまく表示されないものもあるようです。多少カスタマイズの必要な場合があります。