知識ベース

文字検索

知識ベース

英雄
全般
クエスト
イベント

英雄データベース

RELEASE NOTE
最新リリースノート

原文：公式サポートサイト　公式フォーラム

Markdownテストページ

↓以下にショートコード

見出し1

見出し2

見出し3

吾輩は猫である。名前はまだ無い。こで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。この書生というのは時々我々を捕つかまえて煮にて食うという話である。

強調したい語
強調したい語
強調したい文字列

これは inline-code のテストです
text
inline-code` のテストです。でも背景かわらないかな

Incline Blaock?

`しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌てのひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始みはじめであろう。

  • Markdownはサイズ指定不可。→ 縮小は「縮小版URL」を使うか、HTMLので指定。
  • ライトボックス（モーダル拡大）にしたい場合だけ、WP側で Simple Lightbox 等を導入（Markdownの書き方は上のまま）。
  • R2運用は「原本1枚 → 表示は /cdn-cgi/image/width=... 付き」の二段構成が楽＆高速。
  • Astro移行後も、この書き方はそのまま流用可能。
属性 レア度 名前
Holy レジェンド Vivica
Ice ★5 Richard
startDate JST endDate JST Days
09-28-2025 7:00 10-01-2025 7:00 3d

UE Markdown Pro（Elementor Widget）

Elementor で Markdown → HTML を安全に描画するウィジェット。
インライン編集と.mdアップロードに対応。画像はエディタから挿入でき、幅・配置・余白を個別指定。表はテーブルごとに幅・位置を指定可能。Cocoon などのテーマ上書きにも強いコントラスト補正を内蔵。

1. 動作環境

  • WordPress 6.0+
  • Elementor（Free 可）
  • PHP 7.4+

2. ファイル構成（主要）

ue-markdown-widget/
├─ ue-markdown-widget.php           … ローダー
├─ assets/
│  ├─ admin.js                      … 画像挿入ボタン/メディア連携
│  ├─ admin.css                     … エディタ用（9pt/ツールバー整形）
│  ├─ frontend.css                  … 表/コード/画像/強制コントラスト
├─ includes/
│  ├─ class-ue-md-widget.php        … ウィジェット定義（UI, レンダリング）
│  ├─ class-ue-md-parser.php        … Markdown→HTML + wp_kses
│  ├─ Parsedown.php                 … Markdown パーサ
│  └─ （※ ParsedownExtra は未使用）

3. 使い方（Elementor）

3.1 ソース種別

  • インライン入力
    サイドバーのエディタで Markdown を直接編集。
    エディタ下に 「画像を挿入」 ボタンが出ます（alt は既定で空）。
  • アップロード(.md)
    メディアから .md を選択。内容を読み込んで表示。

HTML（例：<img width="400">）はそのまま解釈されます。最終的に wp_kses() で許可タグ・属性の範囲で安全化。

3.2 画像の挿入（インライン時）

  1. 画像を挿入 ボタン → 幅（px/%）、高さ（任意）を入力
  2. 配置：L/C/R、余白：0/小/標準/大 を選択
  3. Markdown 内に <img src="…" width="…" class="md-right md-space-sm"> を自動挿入

既定で上下 0.9rem の余白が付きます（後述CSSで変更可）。

3.3 テーブル幅・位置（同一ブロック内で 3 個まで）

  • Table #1〜#3 幅：100/80/60/40/30%/指定なし
  • Table #1〜#3 位置：左 / 中央 / 右 / 指定なし
    → テーブルを順に採番し、<div class="md-table-wrap" style="--md-table-max: 60%;" data-align="left"> でラップして制御。

3.4 スタイルタブ（主な項目）

  • 本文色 / タイポグラフィ / 見出し色（H1〜H3）
  • 表 罫線色 / 枠線（Elementor 標準）
  • 強制コントラスト（テーマ上書き対策）
    • table / pre / code の配色と罫線を高特異性 + !importantで固定
    • 角丸は既定で 0

3.5 キャッシュ

  • 編集中モード（ON）：TTL=0（即時反映）
  • OFF：TTL 既定 360 分（変更可）
  • 手動リフレッシュ：いつでもキャッシュ削除
  • 初回だけ ?ue_md_purge=1 で公開表示をリロードすると確実です

4. CSS カスタマイズ指南

すべて assets/frontend.css。ウィジェットのルートは .elementor-widget-ue_markdown_pro .ue-md。

4.1 色・濃さ（変数）

.elementor-widget-ue_markdown_pro .ue-md{
  --md-text:#e7ebf2;          /* 本文 */
  --md-muted:#b9c2d1;         /* 補助文字/キャプション */
  --md-link:#c9d6ff;          /* リンク */
  --md-link-hover:#e4e9ff;

  --md-border:#9aa4b5;        /* 汎用ボーダー */
  --md-hr:#8590a3;

  /* code/pre */
  --md-code-bg:rgba(255,255,255,.14);
  --md-code-text:#f4f6fa;
  --md-code-border:rgba(255,255,255,.35);
  --md-pre-bg:rgba(255,255,255,.12);
  --md-pre-border:rgba(255,255,255,.36);

  /* table */
  --md-table-border:#a8b1c0;
  --md-table-head-bg:rgba(255,255,255,.18);
  --md-table-stripe:rgba(255,255,255,.10);
  --md-table-cell-bg:transparent;
}

4.2 画像（配置・余白）

/* 既定：ブロック表示 + 上下0.9rem + 中央寄せ */
.elementor-widget-ue_markdown_pro .ue-md img{
  display:block; height:auto; max-width:100%;
  border-radius:0; margin:.9rem auto;
}

/* 配置クラス（挿入時に自動付与） */
.elementor-widget-ue_markdown_pro .ue-md img.md-left   { margin-left:0;   margin-right:auto; }
.elementor-widget-ue_markdown_pro .ue-md img.md-center { margin-left:auto; margin-right:auto; }
.elementor-widget-ue_markdown_pro .ue-md img.md-right  { margin-left:auto; margin-right:0;   }

/* 余白クラス（上下のみ変更） */
.elementor-widget-ue_markdown_pro .ue-md img.md-space-none{ margin-top:0;    margin-bottom:0; }
.elementor-widget-ue_markdown_pro .ue-md img.md-space-sm  { margin-top:.5rem; margin-bottom:.5rem; }
.elementor-widget-ue_markdown_pro .ue-md img.md-space-md  { margin-top:.9rem; margin-bottom:.9rem; }
.elementor-widget-ue_markdown_pro .ue-md img.md-space-lg  { margin-top:1.5rem; margin-bottom:1.5rem; }

4.3 表（幅・位置・見た目）

/* wrapで幅と位置を制御（UIで設定→自動出力） */
.elementor-widget-ue_markdown_pro .ue-md .md-table-wrap{
  max-width:var(--md-table-max,100%);
  margin:1rem auto;
}
.elementor-widget-ue_markdown_pro .ue-md .md-table-wrap[data-align="left"]  { margin-left:0;   margin-right:auto; }
.elementor-widget-ue_markdown_pro .ue-md .md-table-wrap[data-align="center"]{ margin-left:auto; margin-right:auto; }
.elementor-widget-ue_markdown_pro .ue-md .md-table-wrap[data-align="right"] { margin-left:auto; margin-right:0; }

/* 見た目（罫線/背景） */
.elementor-widget-ue_markdown_pro .ue-md table{
  border-collapse:separate; border-spacing:0;
  border:1px solid var(--md-table-border);
  background:var(--md-table-cell-bg);
}
.elementor-widget-ue_markdown_pro .ue-md thead th{
  background:var(--md-table-head-bg);
  border-bottom:1px solid var(--md-table-border);
}
.elementor-widget-ue_markdown_pro .ue-md tbody tr:nth-child(odd){
  background:var(--md-table-stripe);
}

4.4 コード・引用

/* inline code */
.elementor-widget-ue_markdown_pro .ue-md code{
  background:var(--md-code-bg);
  color:var(--md-code-text);
  border:1px solid var(--md-code-border);
  border-radius:0; padding:.12rem .42rem;
}
/* code block */
.elementor-widget-ue_markdown_pro .ue-md pre{
  background:var(--md-pre-bg);
  border:1px solid var(--md-pre-border);
  border-radius:0; padding:.95rem 1.1rem;
}
/* 引用 */
.elementor-widget-ue_markdown_pro .ue-md blockquote{
  border-left:4px solid var(--md-border);
  background:var(--md-table-stripe);
  border-radius:0;
}

4.5 テーマ上書きに勝てない時

  • スタイル > 強制コントラスト を ON
  • ピンポイントで効かせたい場合は、該当セレクタに !important を追加

5. セキュリティとレンダリング

  • パーサ：Parsedown（SafeMode: off / MarkupEscaped: off）
  • 最終的に wp_kses( $html, $allowed ) で許可タグのみ通過
  • 主な許可タグ/属性：img(src|alt|title|width|height|class|style|loading|decoding), table/thead/tbody/tr/th/td/class/style, pre/code, figure/figcaption ほか WordPress “post” 相当

6. 既知の制約・メモ

  • Discord 等、生HTMLが禁止の環境ではサイズ指定は無効（純テキスト扱い）
  • .md の相対画像は ./images/... を推奨（Astro/SSG との相性○）
  • 画像は高解像度 + widthで縮小がクッキリ（アイコン用途に最適）
  • ライトボックスは 未内蔵。必要ならテーマ/プラグイン側で

7. トラブルシュート

  • 画像の左寄せ/余白が無効 → frontend.css の .md-left / .md-space-* が !important 付きか。キャッシュをパージ。
  • HTMLがテキストで出る → class-ue-md-parser.php が SafeMode=false / MarkupEscaped=false、wp_kses 許可属性に width/height/class/style が含まれているか。
  • 画像を挿入ボタンが出ない → wp_enqueue_media() が呼ばれているか、admin.js の ?ver= 更新、最適化プラグインで遅延/結合除外。
  • 反映されない → 編集中モード=ON、公開側は ?ue_md_purge=1 で一度リロード。

8. 将来の拡張（任意）

  • 画像の自動集約（選択URLを /uploads/markdown/images/ へコピー→相対化）
  • .mdエクスポート（インライン内容をそのままダウンロード）
  • 拡張記法 ![...](...){w=480} を前処理で <img width> 化

9. ライセンス

GPLv2 以降

10. 変更履歴（抜粋）

  • 1.1.0：画像挿入（幅/高さ・配置・余白クラス）、表の幅/位置（#1〜#3）、角丸0、強制コントラスト、編集中モード（TTL=0）
  • 1.1.x：画像配置/余白の !important 強化、ボタン描画位置の安定化、HTML許可 + wp_kses 安全化

All right reserved by bbcamp.info and the other third parties include Small Giant Games, Pixabay, SG Official Forum. 

Discord

footer_birksg_right