目次

,

ここは旧トップページ自分用百科事典ここは旧トップページDokuWiki関連

Typographyプラグイン

DokuWikiでフォントサイズ・カラー・背景色を変更できるプラグイン


デモ

120%文字 80%文字 赤文字 青文字 赤背景白文字 青背景白文字

PR

使い方

基本的な使い方

<typo プロパティ:値>テキスト</typo>

プロパティには下記の表にある「CSSプロパティ」または「省略名」が使えます。値はCSSに準拠しています。複数指定する場合は、cssと同様に「;」で区切り追加するかtypoを入れ子にします。

省略名対応CSS説明
fccolorテキストの色の指定
fc:#ff0000
bgbackground-color背景色の指定
gg:#ff0000
fsfont-colorフォント色の指定
fs:120%
fwfont-weightフォント太さの指定
fw:bold
fvfont-variant小さなフォントの使用
fv:small-caps
fffont-familyフォントの種類の指定
ff:“MS 明朝”,sans-serif;
lhline-height行の高さの指定
lh:1.5
lsletter-spacing文字間隔の指定
ls:10px
wsword-spacing文字間隔の指定
ws:10px
spwhite-spaceスペース(タブ改行)の表示方法の指定
sp:nowrap
vavertical-align縦方向の位置を指定
va=top
wf 「wf-」のウェブフォントクラスを指定(使い方は後述)
text-transformテキストの大文字・小文字変換を指定
text-shadowテキストの影を指定

例文

<typo fc:#ffffff;bg:red>白文字・赤背景</typo>
<typo color:#ffffff;background-color:red>白文字・赤背景</typo>
<typo bg:red>赤背景<typo fc:#ffffff>白文字</typo></typo>・・・入れ子状態

ff fc fs fw の時は省略表記できます。

<fc:#ff0000;>赤文字</fc>
<fs:120%;>120%</fs>

Web Font

wfプロパティの使い方

まずhtmlヘッダにウェブフォントのリンクとスタイルシートを追加する。

※html文法的に正しくないかもしれませんが、DokuWikiのサイト設定で「HTML埋め込み」を許可し<HTML>から</HTML>に下記コードを入れても表示できます。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
.wf-tangerine { font-family: Tangerine, serif; }
</style>

次にWebフォントを使いたい場所に下記のコードを入れると表示できます。

<ff:Tangerine; fs:48px>Web Font Test ff</ff>

<wf:tangerine; fs:48px>Web Font Test wf</wf>

Web Font Test ff

Web Font Test wf

リンク