styleプラグインの使い方について

styleプラグインの使い方について †

style プラグインは、Wikiのページ内でCSSスタイルを適用できるプラグインです。
文字や枠の見た目を自由にデザインでき、情報を見やすく、魅力的に表示することができます。

以下は作成例となります。
ご自由にアレンジしてお使いください。

作成例 †

シンプルな見出しデザイン †

▼ソース

#style(style=padding: 0.5em; color: #494949; background: #f4f4f4; border-left: solid 5px #7db4e6; margin-bottom: 10px; width:85%; max-width:490px;){{
&size(20){''最新ニュース''};
}}
#style(style=clear:both;,end)

上下のボーダーを強調したヘッダー †

▼ソース

#style(style=background: #6b8e23; border-top: solid 3px #556b2f; border-bottom: solid 3px #556b2f; padding: 1em; color: white; width:85%; max-width:490px;){{
CENTER:&size(18){''お知らせ''};
}}
#style(style=clear:both;,end)

注意ボックス †

▼ソース

#style(style=background: #fff3cd; border: solid 2px #ffeeba; border-radius: 8px; padding: 1em; margin: 1em 0; width:85%; max-width:490px;){{
&color(#856404){''⚠ 注意事項''};&br;
重要な情報をここに記載します。
}}
#style(style=clear:both;,end)

警告ボックス †

▼ソース

#style(style=padding: 0.5em 1em; margin: 2em 0; border-left: solid 6px #ff6b6b; background: #fff0f0; width:85%; max-width:490px;){{
&color(#ff0000){''⚠ 警告''};&br;
警告内容をここに記載します。
}}
#style(style=clear:both;,end)

二重線ボックス †

▼ソース

#style(style=border: double 4px #4ec4d3; padding: 1em; margin: 1em 0; width:85%; max-width:490px;){{
&size(16){''イベント情報''};&br;
イベント期間：2025/2/1～2025/2/14
}}
#style(style=clear:both;,end)

影付き風ボックス †

▼ソース

#style(style=background: #ffffff; padding: 1em; border: 1px solid #cccccc; border-bottom: 2px solid #999999; margin: 1em 0; width:85%; max-width:490px;){{
&size(18){''キャラクター紹介''};&br;
キャラクターの説明文をここに記載します。
}}
#style(style=clear:both;,end)

一本線ヘッダー †

▼ソース

#style(style=border-bottom: solid 3px #87ceeb; position: relative; padding: 0.5em; width:85%; max-width:490px;){{
&size(16){''攻略情報''};
}}
#style(style=clear:both;,end)

灰色ボックス †

▼ソース

#style(style=background: #f8f9fa; border: solid 1px #dee2e6; border-radius: 4px; padding: 1em; margin: 1em 0; width:85%; max-width:490px;){{
&size(16){''ステータス''};&br;
HP: 1000/1000&br;
MP: 500/500&br;
攻撃力: 250
}}
#style(style=clear:both;,end)

角丸の強調ボックス †

▼ソース

#style(style=background: #e3f2fd; border-radius: 15px; padding: 1em; margin: 1em 0; width:85%; max-width:490px;){{
&color(#1976d2){''✦ 重要なお知らせ''};&br;
お知らせ内容をここに記載します。
}}
#style(style=clear:both;,end)

破線ボックス †

▼ソース

#style(style=border: dashed 2px #808080; border-radius: 8px; padding: 1em; margin: 1em 0; width:85%; max-width:490px;){{
CENTER:&size(16){''アップデート情報''};
}}
#style(style=clear:both;,end)

テキストエフェクト †

▼ソース

#style(style=font-size: 24px; text-shadow: 2px 2px 4px #888888; color: #333333;){{
シャドウ付きテキスト
}}
#style(style=clear:both;,end)

ナビゲーションメニュー †

▼ソース

#style(style=display: flex; justify-content: space-around; background: #f8f9fa; padding: 10px; width: 100%;){{
[[ホーム>FrontPage]] | [[ニュース>NewsPage]] | [[お問い合わせ>ContactPage]]
}}
#style(style=clear:both;,end)

チケット風デザイン †

▼ソース

#style(style=background: #fff; padding: 1em; border: 3px dashed #ddd; width:85%; max-width:490px;){{
&size(16){''🎫 イベントチケット''};&br;
開催日：2025年2月7日&br;
場所：メインホール
}}
#style(style=clear:both;,end)

看板風デザイン †

▼ソース

#style(style=background: #f9f3e6; padding: 2em; border: 4px double #b89c64; width:85%; max-width:490px;){{
&size(16){''📜 お知らせ''};&br;
重要なお知らせ内容をここに記載します。
}}
#style(style=clear:both;,end)

吹き出し風デザイン †

▼ソース

#style(style=position: relative; padding: 1em; margin: 1em 0; border: solid 3px #95ccff; border-radius: 8px; width:85%; max-width:490px;){{
&size(16){''💭 キャラクターの台詞''};&br;
セリフをここに記載します。
}}
#style(style=clear:both;,end)

タグ風デザイン †

▼ソース

#style(style=display: inline-block; padding: 0.3em 1em; background: #7cb342; color: white; border-radius: 16px; margin: 0.2em;){{
タグ1
}}
#style(style=display: inline-block; padding: 0.3em 1em; background: #ffa726; color: white; border-radius: 16px; margin: 0.2em;){{
タグ2
}}

チェックリスト風デザイン †

▼ソース

#style(style=background: #fff; padding: 1em; border: 1px solid #ddd; width:85%; max-width:490px;){{
☑ 完了したタスク&br;
☐ 未完了のタスク&br;
☐ 次のタスク
}}
#style(style=clear:both;,end)

ノート風デザイン †

▼ソース

#style(style=background: #f7f7f7; padding: 1em; border-top: solid 2px #52616a; border-bottom: solid 2px #52616a; width:85%; max-width:490px;){{
&size(16){''📔 ノート''};&br;
ノート内容をここに記載します。
}}
#style(style=clear:both;,end)

Last-modified: 2025-02-07 (金) 21:34:04

Site admin: wikiru.jp運営チーム

wikiru.jp 利用規約
運営会社

PukiWiki 1.5.2 © 2001-2024 . Powered by PHP 7.4.33. HTML convert time: 0.014 sec.