このブログに掲載する基本のソース・CSS系を掲載していきます。AdquickTagで使われているコードやSNS、You Tubeのタグなんかも入っています。
自分がソースコードや枠やボタンなどのCSSの種類を忘れた時の備忘録です。役にたたない自分の都合だけで作成したページですのであしからず。
- CMS:WordPress
- テーマ:SANGO
- 子テーマ:SANGO Child
- ※元子テーマのPOPRIPUは2022年にやめました。理由としてSANGO Landの進化に耐えられなかったから
下記のSANGOのショートコード一覧を参考にしています。
もくじ OPEN
よく使う顔の吹き出し系
こまおの吹き出し
こまお
こまお
こまお
こまお
こまお
こまお
こまお
こまお
こまお
こまお
;lfuki
ウェブ仙人の吹き出し
ウェブ仙人
;lfuki
電話の受け付け担当者の吹き出し
電話担当
電話担当
電話担当
電話担当
;;lfuki
基本のソース
見出し
見出しは内容に反映するのでNG
文字の装飾
太字や強調
太字や強調については、Pタグに入れようが入れまいしようが、見た目は変わらないようです。。。
Pタグにいれた太字と強調タグ
Bタグの太字です
ストロングタグの強調です
Pタグにいれた太字と強調タグ
Bタグの太字です ストロングタグの強調です
さらに強調したい時はこちら
さらに強調したい時にこの「;ssst」を入力して内容を記載します。フォントサイズがデフォルトで1.5em。ウエイトはボールドにして、色は#333にしています。
色付け
下記のソースはULタグにPタグを入れたものと入れていないものです。
圧倒的にPタグを入れていない方が、見た目は良いですね。。。
ULタグにPタグを入れたもの
-
これは蛍光の赤色ですが、わかりますでしょうか。
-
これは蛍光の青色ですが、わかりますでしょうか。
-
これは蛍光の黄色ですが、わかりますでしょうか。
-
これは蛍光の緑色ですが、わかりますでしょうか。
-
これは蛍光の灰色ですが、わかりますでしょうか。
ULタグにPタグを入れていないもの
- これは蛍光の赤色ですが、わかりますでしょうか。
- これは蛍光の青色ですが、わかりますでしょうか。
- これは蛍光の黄色ですが、わかりますでしょうか。
- これは蛍光の緑色ですが、わかりますでしょうか。
- これは蛍光の灰色ですが、わかりますでしょうか。
部分的に赤色(もしくは他の色)を文章に入れたいという時は
たとえば下記の文章のいち部分のみ色をつけたいという場合は。。。
;cc
ここの部分に色をつけたい
水平線と水平点線
これもAdQuickタグはありますが、[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」と入力すると
「<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
隠したいコンテンツをここに記載
ステップアップ系
;sutep
STEP.1タイトル1 中身1
STEP.2タイトル2 中身2
STEP.3タイトル3 中身3
関連リンク系
関連リンク:横タイプ
;kanrenと入力すると下記のソースコードに。
<p style=”margin-bottom:-10px;font-weight:bold;”>【関連記事】</p>おっさん*クエストで使っている基本ソースやコード
関連リンク:縦タイプ
外部リンク
メモと注意系
;memo
;tyuui
;note
ボタン系
影付きボタンのアクセントカラー【ピンク】
;linkred
影付きボタンのメインカラー【青】
;linkblu
影付きボタンのカラー【緑】
;linkgre
ボタンのソースコードの記入で良い例と悪い例
上記の悪い例で作成したリンクが下記の例となります。変な青くて太い線がリンクの上下に出現します。あちゃ~
ボックス系
横並び二列
★1列目の内容★★2列目の内容★
横並び参列
★1列目の内容★★2列目の内容★★3列目の内容★
水色枠のB26
- テスト
- テスト
- テスト
;wakumiz
タイトル
ここにolタグ(ulタグも可)を挿入するだけ
赤色(注意)枠のB27
- テスト
- テスト
- テスト
;wakured
タイトル
ここにolタグ(ulタグも可)を挿入するだけ
ワンポイント的なB28とB29
;pointgreen
タイトルここに文章を入れる
;pointorange
タイトルここに文章を入れる
タイトルチェック青B30
- テスト
- テスト
- テスト
;titleblu
タイトル
ここにolタグ(ulタグも可)を挿入するだけ
タイトルバー赤&ベージュB33
- テスト
- テスト
- テスト
;titlered
タイトルここにolタグ(ulタグも可)を挿入するだけ
リスト系
チェックリスト:メインカラー
- テスト
- テスト
- テスト
;checklist
ここにulタグを挿入するだけ
指差しリスト:メインカラー
- テスト
- テスト
- テスト
;checkyubi
ここにulタグを挿入するだけ
円形ナンバーリスト:アクセントカラー
- テスト
- テスト
- テスト
;circlered
ここにolタグを挿入するだけ
円形ナンバーリスト:メインカラー
- テスト
- テスト
- テスト
;circleblu
ここにolタグを挿入するだけ
ツィッター
ツイートを下記のように埋め込みたい場合は、そのツイートのURLをエディタに貼り付けるだけでOK。何かのタグで囲う必要はありません。
埋め込みたいツィートの右上にある▽印を押して「ツィートを埋め込む」をクリックして、タグをコピーしてエディターに貼り付ければ完了です。
通勤電車の時間をストレスなく有意義に過ごすための5つの考え方! https://t.co/Sf1BajVqhI pic.twitter.com/gSFbFROnCx
— こまお (@webmarketer101) 2018年7月7日
地図を埋め込む系
Google Mapのメニューの「地図を共有または埋め込む」⇒「地図を埋め込む」からコードを取得できます。これを「テキスト」エディタの方へとコピペすればOKです。
動画系
動画(YouTube)用のタグは下記のようなタグを入れています。
;youtube
https://動画のURL
評価BOX
;review
この本の評価
仕事に役立つ (2.5)
わかりやすい (4.0)
おもしろい (1.5)
おすすめ度 (5.0)