あちあち情報局

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 📝Typographyプラグイン (DokuWiki) ======
|{{:media:201810:20181001-165746.jpg}}|

DokuWikiでフォントサイズ・カラー・文字背景色を変更できるプラグインです。
----
<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>

|{{:media:201810:20181001-165753.jpg}}|


===== リンク =====
  * [[https://www.dokuwiki.org/plugin:typography|Typographyプラグイン]](英語)
あちあち情報局

ユーザ用ツール

サイト用ツール

ページ用ツール
