typography
ここは旧トップページ＞自分用百科事典｜ここは旧トップページ＞DokuWiki関連
Typographyプラグイン
DokuWikiでフォントサイズ・カラー・背景色を変更できるプラグイン
デモ
120%文字 80%文字 赤文字 青文字 赤背景白文字 青背景白文字
PR
使い方
基本的な使い方
<typo プロパティ:値>テキスト</typo>
プロパティには下記の表にある「CSSプロパティ」または「省略名」が使えます。値はCSSに準拠しています。複数指定する場合は、cssと同様に「;」で区切り追加するかtypoを入れ子にします。
| 省略名 | 対応CSS | 説明 |
|---|---|---|
| fc | color | テキストの色の指定 fc:#ff0000 |
| bg | background-color | 背景色の指定 gg:#ff0000 |
| fs | font-color | フォント色の指定 fs:120% |
| fw | font-weight | フォント太さの指定 fw:bold |
| fv | font-variant | 小さなフォントの使用 fv:small-caps |
| ff | font-family | フォントの種類の指定 ff:“ＭＳ 明朝”,sans-serif; |
| lh | line-height | 行の高さの指定 lh:1.5 |
| ls | letter-spacing | 文字間隔の指定 ls:10px |
| ws | word-spacing | 文字間隔の指定 ws:10px |
| sp | white-space | スペース(タブ改行)の表示方法の指定 sp:nowrap |
| va | vertical-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
リンク
typography.txt · 最終更新: 2018/05/14 19:05 by 管理者