あちあち情報局

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

ユーザ用ツール

サイト用ツール

現在位置: トップページ » DokuWiki - wrapプラグインを使わず枠を作る

サイドバー

メニュー

現在リニューアル中

トップページ

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

旧コンテンツ

* ここは旧トップページ

タグ一覧

タグ#
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 : 2223258

dokuwiki_stylebox

目次

ここは旧トップページ＞DokuWiki関連

DokuWiki - wrapプラグインを使わず枠を作る

注意点がありますが、htmlを使えばプラグイン無しで実現できます。（HTMLを使用するため、DokuWikiのサイト設定でHTML埋め込みを許可する必要があります）

デモ

黄色い枠

青色のボーダー

マージンとパッディング

改行//や====見出し====タグ以外のWikiタグは使用できます。

PR

サンプル

<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>

説明

下記コードを装飾したい部分に挿入するだけです。装飾方法はスタイルシートに従います。 

<html><div style="枠のスタイルシート設定"></html>
枠内のテキスト
<html></div></html>

注意1：枠内のテキストに一部のWikiタグが使用できないので注意して下さい。使えないタグは見出しタグ=== 見出し ===や改行\\です。

注意2:小文字の<html>を使った場合html文法的に問題がありますが見た目は想定通りになります。大文字の<HTML>を使った場合html文法的には正しくなりますが見た目が想定通りになりません。(次項参照)

動作の違い

小文字の<html>で書いた場合と大文字の<HTML>で書いた場合の動作が違い、それぞれ長所と短所があります。

小文字%%<html>%%で書いた場合

<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要素が追加されます。 

<div style="border:solid 10px #0000ff">青色のボーダー</div>
<p></p><p></p>
<div style="border:solid 10px #00ff00">緑色のボーダー</div>
<p></p>
<p>次の文章</p>

大文字%%<HTML>%%で書いた場合

<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要素は下部マージンが設定されているため文字の下側に空間ができます。 

<div style="border:solid 10px #0000ff"><p>青色のボーダー</p></div>
<div style="border:solid 10px #00ff00"><p>緑色のボーダー</p></div>
<p>次の文、次の文、次の文</p>

ここは旧トップページ＞DokuWiki関連

dokuwiki_stylebox.txt · 最終更新: 2018/04/20 21:05 by 管理者

ページ用ツール

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki