あちあち情報局

趣味や日曜プログラムなどを書いています

ユーザ用ツール

サイト用ツール

現在位置: トップページ » 📝DokuWiki » 📝Typographyプラグイン (DokuWiki)

サイドバー

メニュー

現在リニューアル中

トップページ

ブログ
コンテンツ
その他
連絡方法
関係者用
旧コンテンツは下部

旧コンテンツ

* ここは旧トップページ

タグ一覧

タグ#
3
1
1
5
3
3
1
1
1
5
2
3
2
1
3
3
12
3
9
5
1
1
4
15
12
4
1
3
3
1
2
1
1
1
1
4
29
8
2
4
3
1
1
8
1
1
1

PV : 2222389

dokuwiki:typography-plugin

目次

📝Typographyプラグイン (DokuWiki)

DokuWiki Typographyプラグイン

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

インストール

「管理者メニュー→拡張機能管理→検索とインストール」からプラグイン名で検索してインストールできます。

使い方

基本的な使い方 

<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:“ＭＳ 明朝”,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>
DokuWiki Typographyプラグイン Webフォント

リンク

dokuwiki/typography-plugin.txt · 最終更新: 2018/11/25 08:01 by 管理者

ページ用ツール

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki