このブログに掲載する基本のソース・CSS系を掲載していきます。AdquickTagで使われているコードやSNS、You Tubeのタグなんかも入っています。
自分がソースコードや枠やボタンなどのCSSの種類を忘れた時の備忘録です。役にたたない自分の都合だけで作成したページですのであしからず。
- CMS:WordPress
- テーマ:SANGO
下記のSANGOのショートコード一覧を参考にしています。
読みたい所へジャンプ
PORIPUのソース
ワンポイント吹き出し系
<span class="points p-***">文字を入れる</span>
カスタム版の色を変更したい場合は下記のCSSをstyle.cssに貼り付け
/*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>
色を変更したい場合は下記CSSを修正してstyle.cssに貼り付け
/*PORIPU 関連リンクカスタマイズ用*/
.points.p-custom {background: #CCC;/*吹き出しの色*/}
.points.p-custom:before{border-top: 10px solid #CCC;/*吹き出しの色*/}
吹き出しの中の文字(タイトル)を変更できる関連リンク
リストタグありとなし
リストタグあり
- おすすめしたい記事のページID
- 表示したいタイトル
<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>
他のカラーパターン
赤パターン
- おすすめしたい記事のページID
- リンクはこんな感じ
<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>
オレンジパターン
- おすすめしたい記事のページID
- リンクはこんな感じ
<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>
青パターン
- おすすめしたい記事のページID
- リンクはこんな感じ
<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>
緑パターン
- おすすめしたい記事のページID
- リンクはこんな感じ
<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>
カスタムパターン
- おすすめしたい記事のページID
- リンクはこんな感じ
<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>
カスタムしたい場合は下記CSSをstyle.cssへ貼り付け
/*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;/*チェックの色*/}
基本のソース
見出し
これはH2見出しです
これはH3見出しです
これはH4見出しです
これはH5見出しです
文字の装飾
太字や強調
太字や強調については、Pタグに入れようが入れまいしようが、見た目は変わらないようです。。。
Pタグにいれた太字と強調タグ
Bタグの太字です
ストロングタグの強調です
Pタグにいれた太字と強調タグ
Bタグの太字です ストロングタグの強調ですさらに強調したい時はこちら
さらに強調したい時にこの「;ssst」を入力して内容を記載します。フォントサイズがデフォルトで1.5em。ウエイトはボールドにして、色は#333にしています。
色付け
下記のソースはULタグにPタグを入れたものと入れていないものです。
圧倒的にPタグを入れていない方が、見た目は良いですね。。。
ULタグにPタグを入れたもの
これは蛍光の赤色ですが、わかりますでしょうか。
これは蛍光の青色ですが、わかりますでしょうか。
これは蛍光の黄色ですが、わかりますでしょうか。
これは蛍光の緑色ですが、わかりますでしょうか。
ULタグにPタグを入れていないもの
- これは蛍光の赤色ですが、わかりますでしょうか。
- これは蛍光の青色ですが、わかりますでしょうか。
- これは蛍光の黄色ですが、わかりますでしょうか。
- これは蛍光の緑色ですが、わかりますでしょうか。
部分的に赤色(もしくは他の色)を文章に入れたいという時は
たとえば下記の文章のいち部分のみ色をつけたいという場合は。。。
;cc
ここの部分に色をつけたい
水平線と水平点線
これもAdQuickタグはありますが、[sen][tensen]で入力した方が楽です。※[]は全角です。
[sen]
線の例はこんな感じだよ
↓
↑
[tensen]
線の例はこんな感じだよ
↓
↑
文字の色をつけたい場合
文章のなかで部分的に色を付けたいなと思ったらコチラを使ってください。「;ccc」を入力すれば、部分的に赤色「#f00」になります。
その他の装飾
その他にはコードタグや水平線タグがあります。
コードタグ
ここはコードの挿入をしたことがないと、かなり厄介でした(泣)忘れちゃうので、ここでしっかりと明記していきたい。
HTMLを貼り付ける場合には、HTMLエスケープツールなどでエスケープした上でタグを貼り付けるようにしましょう。
参考サイト:サルワカ
サルワカさんが言っている通りにHTMLエスケープツールでエスケープした上でタグを貼り付けたら、うまく表示されました。
かならずエスケープしてから、コードを貼り付けよう!
ソースコードの表記は<pre><code>と</pre></code>で囲む
上記はさらに[codebox title="HTML"][/codebox]で<pre><code></code></pre>を囲んだ例です。※[]は全角です。
コードタグ系のTextExpanderとHTML
TextExpanderはこんな種類
「;pre」と入力すると
「<pre><code></code></pre>」と出てくる
もしくは
「;cord」と入力すると
「[codebox title="HTML"]<pre><code></code></pre>
ブロックノート
titleを入れる場所です
内容を記載する場所です。ULタグやOLタグが使えます。
参考:価値観 意味 by Google検索
テーブル
;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>部分をすべて削除すれば、上だけに見出しのあるテーブルになります。
上に見出しがあるテーブル
ヘッド1 | ヘッド2 | ヘッド3 |
1 | 69.07 | |
2 | Yahoo | 29.84 |
3 | Baidu | 0.68 |
4 | Bing | 0.19 |
5 | Naver | 0.15 |
ヘッドA | ヘッドB | ヘッドB |
---|---|---|
中身A | 中身B | 中身C |
中身A | 中身B | 中身C |
中身A | 中身B | 中身C |
上と左横に見出しがあるテーブル
タイトルA | タイトルB | タイトルC | |
---|---|---|---|
見出1 | 内容1−1 | 内容1−2 | 内容1−3 |
見出2 | 内容2−1 | 内容2−2 | 内容2−3 |
見出3 | 内容3−1 | 内容3−2 | 内容3−3 |
タイトルA | タイトルB | タイトルC | |
---|---|---|---|
見出1 | 内容1−1 | 内容1−2 | 内容1−3 |
アドクイックタグ
説明する時に役立つコード
アコーディオン系
;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]
水色枠のB26
- テスト
- テスト
- テスト
;wakumiz
[box class="box26" title="タイトル"]
ここにolタグ(ulタグも可)を挿入するだけ
[/box]
赤色(注意)枠のB27
- テスト
- テスト
- テスト
;wakured
[box class="box27" title="タイトル"]
ここにolタグ(ulタグも可)を挿入するだけ
[/box]
ワンポイント的なB28とB29
;pointgreen
[box class="box28" title="タイトル"]ここに文章を入れる[/box]
;pointorange
[box class="box29" title="タイトル"]ここに文章を入れる[/box]
タイトルチェック青B30
- テスト
- テスト
- テスト
;titleblu
[box class="box30" title="タイトル"]
ここにolタグ(ulタグも可)を挿入するだけ
[/box]
タイトルバー赤&ベージュB33
- テスト
- テスト
- テスト
;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]
ツィッター
ツイートを下記のように埋め込みたい場合は、そのツイートのURLをエディタに貼り付けるだけでOK。何かのタグで囲う必要はありません。
埋め込みたいツィートの右上にある▽印を押して「ツィートを埋め込む」をクリックして、タグをコピーしてエディターに貼り付ければ完了です。
通勤電車の時間をストレスなく有意義に過ごすための5つの考え方! https://t.co/Sf1BajVqhI pic.twitter.com/gSFbFROnCx
— ウェブ太 (@webmarketer101) 2018年7月7日
地図を埋め込む系
Google Mapのメニューの「地図を共有または埋め込む」⇒「地図を埋め込む」からコードを取得できます。これを「テキスト」エディタの方へとコピペすればOKです。
動画系
動画(YouTube)用のタグは下記のようなタグを入れています。
;youtube
[youtube]
https://動画のURL
[/youtube]
評価BOX
;review
[rate title="この本の評価"]
[value 2.5]仕事に役立つ[/value]
[value 4.0]わかりやすい[/value]
[value 1.5]おもしろい[/value]
[value 5.0 end]おすすめ度[/value]
[/rate]