typography
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン | |||
|
typography [2018/05/14 19:02] 管理者 |
typography [2018/05/14 19:05] (現在) 管理者 |
||
|---|---|---|---|
| ライン 1: | ライン 1: | ||
| + | {{tag>DokuWiki関連 Dokuwikiプラグイン}} | ||
| + | [[start]]＞[[mypedia_start]]｜[[start]]＞[[dokuwiki_start]] | ||
| + | ====== Typographyプラグイン ====== | ||
| + | DokuWikiでフォントサイズ・カラー・背景色を変更できるプラグイン | ||
| + | ---- | ||
| + | ===== デモ ===== | ||
| + | <typo fs:120%>120%文字</typo> <typo fs:80%>80%文字</typo> <typo fc:#ff0000>赤文字</typo> <typo fc:#0000ff>青文字</typo> | ||
| + | <typo bg:#ff0000;fc:#ffffff>赤背景白文字</typo> <typo bg:#0000ff;fc:#ffffff>青背景白文字</typo> | ||
| + | |||
| + | ===== PR ===== | ||
| + | <html> | ||
| + | <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> | ||
| + | <!-- respon_0 --> | ||
| + | <ins class="adsbygoogle" | ||
| + | style="display:block" | ||
| + | data-ad-client="ca-pub-9251612436023685" | ||
| + | data-ad-slot="1409739163" | ||
| + | data-ad-format="auto"></ins> | ||
| + | <script> | ||
| + | (adsbygoogle = window.adsbygoogle || []).push({}); | ||
| + | </script> | ||
| + | </html> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | ===== 使い方 ===== | ||
| + | 基本的な使い方 | ||
| + | <code> | ||
| + | <typo プロパティ:値>テキスト</typo> | ||
| + | </code> | ||
| + | |||
| + | プロパティには下記の表にある「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|テキストの影を指定| | ||
| + | |||
| + | 例文 | ||
| + | |||
| + | <code> | ||
| + | <typo fc:#ffffff;bg:red>白文字・赤背景</typo> | ||
| + | <typo color:#ffffff;background-color:red>白文字・赤背景</typo> | ||
| + | <typo bg:red>赤背景<typo fc:#ffffff>白文字</typo></typo>・・・入れ子状態 | ||
| + | </code> | ||
| + | |||
| + | ff fc fs fw の時は省略表記できます。 | ||
| + | <code> | ||
| + | <fc:#ff0000;>赤文字</fc> | ||
| + | <fs:120%;>120%</fs> | ||
| + | </code> | ||
| + | |||
| + | |||
| + | |||
| + | ==== Web Font ==== | ||
| + | wfプロパティの使い方 | ||
| + | |||
| + | まずhtmlヘッダにウェブフォントのリンクとスタイルシートを追加する。 | ||
| + | |||
| + | ※html文法的に正しくないかもしれませんが、DokuWikiのサイト設定で「HTML埋め込み」を許可し%%<HTML>から</HTML>%%に下記コードを入れても表示できます。 | ||
| + | <code> | ||
| + | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine"> | ||
| + | <style> | ||
| + | .wf-tangerine { font-family: Tangerine, serif; } | ||
| + | </style> | ||
| + | </code> | ||
| + | |||
| + | 次にWebフォントを使いたい場所に下記のコードを入れると表示できます。 | ||
| + | <code> | ||
| + | <ff:Tangerine; fs:48px>Web Font Test ff</ff> | ||
| + | |||
| + | <wf:tangerine; fs:48px>Web Font Test wf</wf> | ||
| + | </code> | ||
| + | |||
| + | <HTML> | ||
| + | <link rel="stylesheet" | ||
| + | href="https://fonts.googleapis.com/css?family=Tangerine"> | ||
| + | <style> | ||
| + | .wf-tangerine { font-family: Tangerine, serif; } | ||
| + | </style> | ||
| + | </HTML> | ||
| + | |||
| + | <ff:Tangerine; fs:48px>Web Font Test ff</ff> | ||
| + | |||
| + | <wf:tangerine; fs:48px>Web Font Test wf</wf> | ||
| + | |||
| + | |||
| + | ===== リンク ===== | ||
| + | * [[https://www.dokuwiki.org/plugin:typography|公式プラグインページ]] | ||
typography.txt · 最終更新: 2018/05/14 19:05 by 管理者
