差分

このページの2つのバージョン間の差分を表示します。

--- dokuwiki_stylebox [2018/03/31 17:38] – [デモ] 管理者
+++ dokuwiki_stylebox [2018/04/20 21:05] (現在) – 管理者
@@ 行 1: / 行 1: @@
+[[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]]