内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
DokuWiki - wrapプラグインを使わず枠を作る
dokuwiki_stylebox
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
[[start]]>[[dokuwiki_start]] ====== DokuWiki - wrapプラグインを使わず枠を作る ====== 注意点がありますが、htmlを使えばプラグイン無しで実現できます。(HTMLを使用するため、DokuWikiのサイト設定でHTML埋め込みを許可する必要があります) ---- ===== デモ ===== <html><div style="background-color:#ffff00"></html> 黄色い枠 <html></div></html> <html><div style="border:solid 10px #0000ff"></html> 青色のボーダー <html></div></html> <html><div style="padding:25px;margin:25px;background-color:#eeeeee"></html> マージンとパッディング <html></div></html> <html><div style="background-color:#ffff00"></html> 改行''%%//%%''や''====見出し====''タグ以外の[[Wiki]]タグは**使用**できます。 <html></div></html> ===== 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 html> <html><div style="background-color:#ffff00"></html> 黄色い枠 <html></div></html> <html><div style="border:solid 10px #0000ff"></html> 青色のボーダー <html></div></html> <html><div style="padding:25px;margin:25px;background-color:#eeeeee"></html> マージンとパッディング <html></div></html> <html><div style="background-color:#ffff00"></html> 改行''%%//%%''や''====見出し====''タグ以外の[[Wiki]]タグは**使用**できます。 <html></div></html> </code> ===== 説明 ===== 下記コードを装飾したい部分に挿入するだけです。装飾方法はスタイルシートに従います。 <code html> <html><div style="枠のスタイルシート設定"></html> 枠内のテキスト <html></div></html> </code> 注意1:枠内のテキストに一部のWikiタグが使用できないので注意して下さい。使えないタグは見出しタグ''=== 見出し ===''や改行''%%\\%%''です。 注意2:小文字の%%<html>%%を使った場合html文法的に問題がありますが見た目は想定通りになります。大文字の%%<HTML>%%を使った場合html文法的には正しくなりますが見た目が想定通りになりません。(次項参照) ===== 動作の違い ===== 小文字の%%<html>%%で書いた場合と大文字の%%<HTML>%%で書いた場合の動作が違い、それぞれ長所と短所があります。 ==== 小文字%%<html>%%で書いた場合 ==== <code html> <html><div style="border:solid 10px #0000ff"></html> 青色のボーダー <html></div></html> <html><div style="border:solid 10px #00ff00"></html> 緑色のボーダー <html></div></html> 次の文、次の文、次の文 </code> **見た目は普通**になります。 <html><div style="border:solid 10px #0000ff"></html> 青色のボーダー <html></div></html> <html><div style="border:solid 10px #00ff00"></html> 緑色のボーダー <html></div></html> 次の文、次の文、次の文 **html文法的には正しくなく**、文書がPタグでラップされていませんし、空のP要素が追加されます。 <code html> <div style="border:solid 10px #0000ff">青色のボーダー</div> <p></p><p></p> <div style="border:solid 10px #00ff00">緑色のボーダー</div> <p></p> <p>次の文章</p> </code> ==== 大文字%%<HTML>%%で書いた場合 ==== <code html> <HTML><div style="border:solid 10px #0000ff"></HTML> 青色のボーダー <HTML></div></HTML> <HTML><div style="border:solid 10px #00ff00"></HTML> 緑色のボーダー <HTML></div></HTML> 次の文章 </code> **思ったようになりません**、枠内の下部に空間ができ、上の枠と下の枠の間に空間ができません。また次の文章との間隔が詰まってます。 <HTML><div style="border:solid 10px #0000ff"></HTML> 青色のボーダー <HTML></div></HTML> <HTML><div style="border:solid 10px #00ff00"></HTML> 緑色のボーダー <HTML></div></HTML> 次の文、次の文、次の文 文書がPタグでラップされるので**HTML文法的に正しい**のですが、DokuWikiの標準テンプレートのp要素は下部マージンが設定されているため文字の下側に空間ができます。 <code html> <div style="border:solid 10px #0000ff"><p>青色のボーダー</p></div> <div style="border:solid 10px #00ff00"><p>緑色のボーダー</p></div> <p>次の文、次の文、次の文</p> </code> ---- [[start]]>[[dokuwiki_start]]
dokuwiki_stylebox.txt
· 最終更新: 2018/04/20 21:05 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ