ブロックライブラリの追加方法 - プロゼミユーザーまとめWiki【非公式】【7/5更新】 | 自由なプロゼミWiki

はじめに

これは、プログラムブロックを、テキスト（文字）から画像として生成・表示できるツールです。
いや、厳密に言うとツールではない…
自分の運営するWiki、もしくはブログ等で使ってください。

やり方

Wikiに追加する

【管理画面】＞【デザイン】＞【CSSカスタマイズ】の順にクリックします。
入力欄に、以下のcssコードを貼り付けて、設定を保存します。
ブロックライブラリ一覧のページは、自分のWikiに勝手にコピペしてもらって構いません。

css

...

/* 共通設定 */
.Btega,
.Bnaga,
.Bugo,
.Bmuki,
.Bchara,
.Bkei,
.Bsira,
.Bhen,
.Bpen,
.Bon{
    display: inline-block;
    color: #555 !important;
    font-weight: bold !important;
    background-image: none !important;
    border-radius: 3px !important;
    padding: 5px !important;
    border: 2px solid #555 !important;
}

/* 色だけ指定 */
.Btega  { background-color: #FFA0A0 !important; }
.Bnaga  { background-color: #FFA016 !important; }
.Bugo   { background-color: #FFFF3C !important; }
.Bmuki  { background-color: #CCFF99 !important; }
.Bchara { background-color: #4DAD32 !important; }
.Bkei   { background-color: #FF6060 !important; }
.Bsira  { background-color: #2CDCFF !important; }
.Bhen   { background-color: #DC80FF !important; }
.Bpen   { background-color: #3264FF !important; }
.Bon    { background-color: #12BD8C !important; }

使用例

#divclass(Btega){✉︎ スタートした}

#divclass(Bmuki){→ をむく}

#divclass(Bnaga){
#divclass(Bsira){&image(7BCED0EF-3E2F-4431-8978-B3F753C7017A.png,width=70) とぶつかった} になるまで くりかえす
#divclass(Bugo){&bgcolor(white){３} すすむ}

#divclass(Bugo){ちょっと まつ}
}

#divclass(Bchara){おうちにかえる}

実行結果

✉︎ スタートした

→ をむく

とぶつかった

になるまで くりかえす

３ すすむ

ちょっと まつ

おうちにかえる

コメント