WordPress のテーマに選んだ Simplicity には、様々な機能が盛り込まれています。文字やスタイルの装飾もその一つ。
折角ですので積極的に使っていきたいと思います。
もくじ
Simplicityの文字装飾
文字自体の装飾だけでなく、枠で囲ったり、注釈文用に目立つ記号をつけたりするスタイル要素もたくさんあります。
Simplicity Link
使用方法は、div タグや span タグなどブロック要素のクラスとして使用するものが多いようです。
参考 ちょっとした参考リンクに便利なバッジ
好きな文字 バッジの文字は好きな文字にできる
command + C これなんかもう至高の便利さ
デフォルトでこんなに便利な装飾があるのに、使わないともったいない。
SublimeTextでの使い方
私の現在の執筆環境は、SublimeText3 にOmniMarkupPreViewerを追加して、マークダウン記法を使って書いています。
マークダウン記法でも id や class を使う方法はありますが、div や span は使えません。
スニペットに登録して、キーワードから呼び出す方法を紹介します。
スニペットのユーザー登録
登録の方法は、こちらの記事で以前紹介しました。
Sublime Text3 の便利機能スニペットに自作コードを登録する方法
登録自体はとても簡単ですね。
実際に登録したコードはこちら。
補足情報
<snippet>
<content><![CDATA[
<div class="information>${1}</div>"${0}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>info</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
補足説明や本筋とはちょっと違うけど、こんな情報も知っておくと便利だよ、的な使い方も良いかも。
疑問・質問
<snippet>
<content><![CDATA[
<div class="question">${1}</div>"${0}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>que</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
わかりにくそうなところ、疑問質問が出そうなところに置いておくと、親切ですね。
注意事項
<snippet>
<content><![CDATA[
<div class="alert">${1}</div>"${0}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>chuui</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
誤解を招きそうなところや、特に注意して欲しいところで使うと、とても便利。
バッジ
参考 ← 参考や他の文字でもOKな便利バッジ
<snippet>
<content><![CDATA[
<span class="sankou">${1:参考}</span>"${0}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>sankou</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
tabを押した直後は、デフォルトで”参考”という文字が入っています。選択状態になっているのでそのまま好きな文字に書き換えればOK。
キーボードのキースタイル
command + C ← こんなの
<snippet>
<content><![CDATA[
<span class="keyboard-key">${1}</span>"${0}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>key</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
これはもう至高の装飾ですね。これがあるだけで野暮ったい鍵括弧なんか使わなくても分かりやすく説明できるうえ、なによりブログの見た目レベルが一段上がったような気さえします。
まとめ
非常に完成度の高いテーマ Simplicity 。初めての WordPress には高機能すぎて、勉強にならないかも。
Seesaaブログの頃では、考えられないほどの高機能ぶりです。
あまりにも高機能のため、逆に使い方を覚えるのに、毎回検索しまくるという状況です。
早く使い方を覚えて、徐々に自分好みのカスタマイズができるようにならないと。
