内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
Typographyプラグイン
typography
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
{{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:"MS 明朝",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
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ