はたらく秋葉のWeb担当で使っている基本のソースやコードなど

<span class="points p-＊＊＊">文字を入れる</span>

/*PORIPU ワンポイントカスタマイズ用*/
.points.p-custom {background: #CCC;/*吹き出しの色*/}
.points.p-custom:before{border-top: 10px solid #CCC;/*吹き出しの色*/}

<div class="kanren">
<ul>
<li>リストタグを利用したら</li>
<li>チェックアイコンが出てくる</li>
</ul>
</div>

<div class="kanren">リストタグ無しバージョン</div>

<div class="kanren p-red">
<ul>
<li>リストタグを利用したら</li>
<li>チェックアイコンが出てくる</li>
</ul>
</div>

<div class="kanren p-red">リストタグ無しバージョン</div>

<div class="kanren p-orange">
<ul>
<li>リストタグを利用したら</li>
<li>チェックアイコンが出てくる</li>
</ul>
</div>

<div class="kanren p-orange">リストタグ無しバージョン</div>

<div class="kanren p-blue">
<ul>
<li>リストタグを利用したら</li>
<li>チェックアイコンが出てくる</li>
</ul>
</div>

<div class="kanren p-blue">リストタグ無しバージョン</div>

<div class="kanren p-green">
<ul>
<li>リストタグを利用したら</li>
<li>チェックアイコンが出てくる</li>
</ul>
</div>

<div class="kanren p-green">リストタグ無しバージョン</div>

<div class="kanren p-custom">
<ul>
<li>リストタグを利用したら</li>
<li>チェックアイコンが出てくる</li>
</ul>
</div>

<div class="kanren p-custom">リストタグ無しバージョン</div>

/*PORIPU 関連リンクカスタマイズ用*/
.points.p-custom {background: #CCC;/*吹き出しの色*/}
.points.p-custom:before{border-top: 10px solid #CCC;/*吹き出しの色*/}

<div class="p-box">
<span class="p-box-title">タイトル変更OK</span>
<p><ul>
       <li>おすすめしたい記事のページID</li>
       <li>表示したいタイトル</li>
</ul></p>
</div>

<div class="p-box">
<span class="p-box-title">タイトル変更OK</span>
<p>リストタグ無しバージョン</p>
</div>

<div class="p-box p-red">
<span class="p-box-title">タイトル変更OK</span>
<ul>
<li>おすすめしたい記事のページID</li>
<li><a href="#">リンクはこんな感じ<i class="fas fa-external-link-square-alt fa-fw" /></i></a></li>
</ul>
</div>

<div class="p-box p-orange">
<span class="p-box-title">タイトル変更OK</span>
<ul>
<li>おすすめしたい記事のページID</li>
<li><a href="#">リンクはこんな感じ<i class="fas fa-external-link-square-alt fa-fw" /></i></a></li>
</ul>
</div>

<div class="p-box p-blue">
<span class="p-box-title">タイトル変更OK</span>
<ul>
<li>おすすめしたい記事のページID</li>
<li><a href="#">リンクはこんな感じ<i class="fas fa-external-link-square-alt fa-fw" /></i></a></li>
</ul>
</div>

<div class="p-box p-green">
<span class="p-box-title">タイトル変更OK</span>
<ul>
<li>おすすめしたい記事のページID</li>
<li><a href="#">リンクはこんな感じ<i class="fas fa-external-link-square-alt fa-fw" /></i></a></li>
</ul>
</div>

<div class="p-box p-custom">
<span class="p-box-title">タイトル変更OK</span>
<ul>
<li>おすすめしたい記事のページID</li>
<li><a href="#">リンクはこんな感じ<i class="fas fa-external-link-square-alt fa-fw" /></i></a></li>
</ul>
</div>

/*PORIPU 吹き出しタイトルカスタマイズ用*/
.p-box.p-custom{border: 2px solid #CCC;/*枠線の色*/}
div.p-box.p-custom .p-box-title{background-color: #CCC;/*吹き出しの色*/}
div.p-box.p-custom .p-box-title:after{border-top: 12px solid #CE93D8;/*吹き出しの色*/}
.p-box.p-custom ul li:before {color: #CCC;/*チェックの色*/}

;cc

ここの部分に色をつけたい

[sen]

[tensen]

ソースコードの表記は<pre><code>と</pre></code>で囲む

「;pre」と入力すると
「<pre><code></code></pre>」と出てくる

「;cord」と入力すると
「[codebox title="HTML"]<pre><code></code></pre>

;ttaと入力すると上と左に見出しがあるパターンのソースがでてきます。
↓↓↓
<div class="tbl-scroll-box">
<table class="tbl-scroll">
<caption>キャプション部分ということです</caption>
<thead>
<tr>
<th style="background:#ddd;"></th>
<th>タイトルA</th>
<th>タイトルB</th>
<th>タイトルC</th>
</tr>
</thead>
<tbody>
<tr>
<th>見出1</th>
<td>内容1−1</td>
<td>内容1−2</td>
<td>内容1−3</td>
</tr>
</tbody>
</table></div>

左にある見出しが不要だったら<tbody>の<th>見出1</th>部分をすべて削除すれば、上だけに見出しのあるテーブルになります。

；accordion

[open title='タイトル']
隠したいコンテンツをここに記載
[/open]

；sutep

[timeline]
[tl label='STEP.1' title='タイトル1'] 中身1 [/tl]
[tl label='STEP.2' title='タイトル2'] 中身2 [/tl]
[tl label='STEP.3' title='タイトル3'] 中身3 [/tl]
[/timeline]

;kanrenと入力すると下記のソースコードに。
＜p style="margin-bottom:-10px;font-weight:bold;"＞【関連記事】＜/p＞[kanren id="526"]

;memo

;tyuui

;note

;lfuki

;lfuki

;;lfuki

；linkred

[btn href="＊" class="raised red-bc strong"]
ボタンテキスト
[/btn]

；linkblu

[btn href="＊" class="raised blue-bc strong"]
ボタンテキスト
[/btn]

；linkgre

[btn href="＊" class="raised green-bc strong"]
ボタンテキスト
[/btn]

[btn href="https://saruwakakun.com/sango/shortcode-list" class="raised blue-bc strong"]
＼SANGOのショートコード一覧／
[/btn]

[btn href="https://saruwakakun.com/sango/shortcode-list" class="raised blue-bc strong"]

＼SANGOのショートコード一覧／

[/btn]

[yoko2 responsive]
[cell]★1列目の内容★[/cell][cell]★2列目の内容★[/cell]
[/yoko2]

[yoko3 responsive]
[cell]★1列目の内容★[/cell][cell]★2列目の内容★[/cell][cell]★3列目の内容★[/cell]
[/yoko3]

；wakumiz

[box class="box26" title="タイトル"]
ここにolタグ（ulタグも可）を挿入するだけ
[/box]

；wakured

[box class="box27" title="タイトル"]
ここにolタグ（ulタグも可）を挿入するだけ
[/box]

；pointgreen

[box class="box28" title="タイトル"]ここに文章を入れる[/box]

；pointorange

[box class="box29" title="タイトル"]ここに文章を入れる[/box]

；titleblu

[box class="box30" title="タイトル"]
ここにolタグ（ulタグも可）を挿入するだけ
[/box]

；titlered

[box class="box33" title="タイトル"]
ここにolタグ（ulタグも可）を挿入するだけ
[/box]

；checklist

[list class="li-check li-mainbdr main-c-before"]
ここにulタグを挿入するだけ
[/list]

；checkyubi

[list class="li-yubi li-mainbdr main-c-before"]
ここにulタグを挿入するだけ
[/list]

；circlered

[list class="ol-circle li-accentbdr acc-bc-before"]
ここにolタグを挿入するだけ
[/list]

；circleblu

[list class="ol-circle li-mainbdr main-bc-before"]
ここにolタグを挿入するだけ
[/list]

；youtube

[youtube]
https://動画のURL
[/youtube]

；review

[rate title="この本の評価"]
[value 2.5]仕事に役立つ[/value] 
[value 4.0]わかりやすい[/value]
[value 1.5]おもしろい[/value]
[value 5.0 end]おすすめ度[/value]
[/rate]