おっさん＊クエストで使っている基本ソースやコード

Web担当の基本のソースやコード

このブログに掲載する基本のソース・CSS系を掲載していきます。AdquickTagで使われているコードやSNS、You Tubeのタグなんかも入っています。

自分がソースコードや枠やボタンなどのCSSの種類を忘れた時の備忘録です。役にたたない自分の都合だけで作成したページですのであしからず。

  • CMS：WordPress
  • テーマ：SANGO
  • 子テーマ：SANGO Child
  • ※元子テーマのPOPRIPUは２０２２年にやめました。理由としてSANGO Landの進化に耐えられなかったから

下記のSANGOのショートコード一覧を参考にしています。

SANGOのショートコード一覧

もくじ OPEN

よく使う顔の吹き出し系

こまおの吹き出し

こまお

普通の顔：webuta.png

こまお

笑顔：webuta_smile.png

こまお

関心した顔：webuta_kansin.png

こまお

真剣な顔：webuta_sinken.png

こまお

嫌々な顔：webuta_iyaiya.png

こまお

無理な顔：webuta_muri.png

こまお

トラブルな顔：webuta_trouble2.png

こまお

白目の顔：webuta_sirome2.png

こまお

苦笑いの顔：webuta_niga.png

こまお

驚きの顔：webuta_odoroki.png
HTML 
;lfuki

ウェブ仙人の吹き出し

ウェブ仙人

ウェブ仙人の顔：websennin.png
HTML 
;lfuki

電話の受け付け担当者の吹き出し

電話担当

普通：opeko.png

電話担当

笑顔：opeko-wara.png

電話担当

駄目顔：opeko-dame.png

電話担当

泣き顔：opeko-naki.png
HTML 
;;lfuki

基本のソース

見出し

見出しは内容に反映するのでNG

文字の装飾

太字や強調

太字や強調については、Pタグに入れようが入れまいしようが、見た目は変わらないようです。。。

Pタグにいれた太字と強調タグ

Bタグの太字です

ストロングタグの強調です

Pタグにいれた太字と強調タグ

Bタグの太字です ストロングタグの強調です

さらに強調したい時はこちら

さらに強調したい時にこの「；ssst」を入力して内容を記載します。フォントサイズがデフォルトで1.5em。ウエイトはボールドにして、色は＃３３３にしています。

色付け

下記のソースはULタグにPタグを入れたものと入れていないものです。

圧倒的にPタグを入れていない方が、見た目は良いですね。。。

ULタグにPタグを入れたもの

  • これは蛍光の赤色ですが、わかりますでしょうか。

  • これは蛍光の青色ですが、わかりますでしょうか。

  • これは蛍光の黄色ですが、わかりますでしょうか。

  • これは蛍光の緑色ですが、わかりますでしょうか。

  • これは蛍光の灰色ですが、わかりますでしょうか。

ULタグにPタグを入れていないもの
  • これは蛍光の赤色ですが、わかりますでしょうか。
  • これは蛍光の青色ですが、わかりますでしょうか。
  • これは蛍光の黄色ですが、わかりますでしょうか。
  • これは蛍光の緑色ですが、わかりますでしょうか。
  • これは蛍光の灰色ですが、わかりますでしょうか。
部分的に赤色（もしくは他の色）を文章に入れたいという時は

たとえば下記の文章のいち部分のみ色をつけたいという場合は。。。

TextExpander 
;cc

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

水平線と水平点線

これもAdQuickタグはありますが、［sen］［tensen］で入力した方が楽です。※［］は全角です。

線の例

線の例はこんな感じだよ

↓

↑

点線の例

線の例はこんな感じだよ

↓

↑

文字の色をつけたい場合

文章のなかで部分的に色を付けたいなと思ったらコチラを使ってください。「；ccc」を入力すれば、部分的に赤色「#f00」になります。

その他の装飾

その他にはコードタグや水平線タグがあります。

コードタグ

ここはコードの挿入をしたことがないと、かなり厄介でした（泣）忘れちゃうので、ここでしっかりと明記していきたい。

HTMLを貼り付ける場合には、HTMLエスケープツールなどでエスケープした上でタグを貼り付けるようにしましょう。

参考サイト：サルワカ

サルワカさんが言っている通りにHTMLエスケープツールでエスケープした上でタグを貼り付けたら、うまく表示されました。

かならずエスケープしてから、コードを貼り付けよう！

ソースコードを貼り付ける 
ソースコードの表記は<pre><code>と</pre></code>で囲む

上記はさらに［codebox title=”HTML”］［/codebox］で<pre><code></code></pre>を囲んだ例です。※［］は全角です。

コードタグ系のTextExpanderとHTML

TextExpanderはこんな種類
TextExpander 
「;pre」と入力すると
「<pre><code></code></pre>」と出てくる

もしくは

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

ブロックノート

titleを入れる場所です

内容を記載する場所です。ULタグやOLタグが使えます。

参考：価値観 意味 by Google検索

テーブル

TextExpander 
;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 Google 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

アドクイックタグ

説明する時に役立つコード

アコーディオン系

隠したいコンテンツをここに記載
TextExpander 
；accordion

ショートコード 

隠したいコンテンツをここに記載

ステップアップ系

STEP.1
タイトル1
中身1
STEP.2
タイトル2
中身2
STEP.3
タイトル3
中身3
TextExpander 
；sutep

ショートコード 


STEP.1
タイトル1
 中身1 


STEP.2
タイトル2
 中身2 


STEP.3
タイトル3
 中身3

関連リンク系

関連リンク：横タイプ

Web担当の基本のソースやコードおっさん＊クエストで使っている基本ソースやコード

関連リンク：横タイプ

;kanrenと入力すると下記のソースコードに。

＜p style=”margin-bottom:-10px;font-weight:bold;”＞【関連記事】＜/p＞Web担当の基本のソースやコードおっさん＊クエストで使っている基本ソースやコード

関連リンク：縦タイプ

Web担当の基本のソースやコード おっさん＊クエストで使っている基本ソースやコード

外部リンク

参考 ページタイトルサイト名

メモと注意系

MEMO
ここに文章
TextExpander 
;memo

注意
ここに文章
TextExpander 
;tyuui

[note title=”タイトル”]ここに文章[/note]
TextExpander 
;note

ボタン系

影付きボタンのアクセントカラー【ピンク】

ボタンテキスト

TextExpander 
；linkred

ショートコード 
  
ボタンテキスト

影付きボタンのメインカラー【青】

ボタンテキスト

TextExpander 
；linkblu

ショートコード 
  
ボタンテキスト

影付きボタンのカラー【緑】

ボタンテキスト

TextExpander 
；linkgre

ショートコード 
  
ボタンテキスト

ボタンのソースコードの記入で良い例と悪い例

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

良い例：リンクボタン青 


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

悪い例：リンクボタン青 


  

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

上記の悪い例で作成したリンクが下記の例となります。変な青くて太い線がリンクの上下に出現します。あちゃ～

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

ボックス系

横並び二列

★1列目の内容★
★2列目の内容★
HTML 


★1列目の内容★
★2列目の内容★

横並び参列

★1列目の内容★
★2列目の内容★
★3列目の内容★
HTML 


★1列目の内容★
★2列目の内容★
★3列目の内容★

水色枠のB26

タイトル
  1. テスト
  2. テスト
  3. テスト

TextExpander 
；wakumiz

ショートコード 
  
タイトル

ここにolタグ（ulタグも可）を挿入するだけ

赤色（注意）枠のB27

タイトル
  1. テスト
  2. テスト
  3. テスト

TextExpander 
；wakured

ショートコード 
  
タイトル

ここにolタグ（ulタグも可）を挿入するだけ

ワンポイント的なB28とB29

タイトル
ここに文章を入れる
TextExpander 
；pointgreen

ショートコード 
  
タイトル
ここに文章を入れる

タイトル
ここに文章を入れる
TextExpander 
；pointorange

ショートコード 
  
タイトル
ここに文章を入れる

タイトルチェック青B30

タイトル
  1. テスト
  2. テスト
  3. テスト

TextExpander 
；titleblu

ショートコード 
  
タイトル

ここにolタグ（ulタグも可）を挿入するだけ

タイトルバー赤＆ベージュB33

タイトル
  1. テスト
  2. テスト
  3. テスト

TextExpander 
；titlered

ショートコード 
  
タイトル
 ここにolタグ（ulタグも可）を挿入するだけ

リスト系

チェックリスト：メインカラー

  • テスト
  • テスト
  • テスト

TextExpander 
；checklist

ショートコード 

ここにulタグを挿入するだけ

指差しリスト：メインカラー

  • テスト
  • テスト
  • テスト

TextExpander 
；checkyubi

ショートコード 

ここにulタグを挿入するだけ

円形ナンバーリスト：アクセントカラー

  1. テスト
  2. テスト
  3. テスト

TextExpander 
；circlered

ショートコード 

ここにolタグを挿入するだけ

円形ナンバーリスト：メインカラー

  1. テスト
  2. テスト
  3. テスト

TextExpander 
；circleblu

ショートコード 

ここにolタグを挿入するだけ

ツィッター

ツイートを下記のように埋め込みたい場合は、そのツイートのURLをエディタに貼り付けるだけでOK。何かのタグで囲う必要はありません。

埋め込みたいツィートの右上にある▽印を押して「ツィートを埋め込む」をクリックして、タグをコピーしてエディターに貼り付ければ完了です。

地図を埋め込む系

Google Mapのメニューの「地図を共有または埋め込む」⇒「地図を埋め込む」からコードを取得できます。これを「テキスト」エディタの方へとコピペすればOKです。

動画系

動画（YouTube）用のタグは下記のようなタグを入れています。

https://www.youtube.com/watch?v=Z2VoEN1iooE
TextExpander 
；youtube

動画の埋め込み例 

https://動画のURL

評価BOX

この本の評価
仕事に役立つ
(2.5)
わかりやすい
(4.0)
おもしろい
(1.5)
おすすめ度
(5.0)
TextExpander 
；review

ショートコード 


この本の評価


仕事に役立つ
 (2.5)
 

わかりやすい
 (4.0)


おもしろい
 (1.5)


おすすめ度
 (5.0)

次の記事

【2018年版】1年の計は元旦にあり！あなたはもう「今年の目標…
【2017年版】1年の計は元旦にあり！あなたはもう「今年の目標」をたてましたか？