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

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

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

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

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

MEMO
  • 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

ウェブ仙人の吹き出し

ウェブ仙人

ウェブ仙人の顔：websennin.png

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

電話担当

普通：opeko.png

電話担当

笑顔：opeko-wara.png

電話担当

駄目顔：opeko-dame.png

電話担当

泣き顔：opeko-naki.png

基本のソース

見出し

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

文字の装飾

太字や強調

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

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

Bタグの太字です

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

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

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

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

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

色付け

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

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

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

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

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

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

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

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

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

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

水平線と水平点線

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

線の例はこんな感じだよ

↓

↑

線の例はこんな感じだよ

↓

↑

文字の色をつけたい場合

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

その他の装飾

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

コードタグ

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

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

参考サイト：サルワカ

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

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

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

コードタグ系のTextExpanderとHTML

TextExpanderはこんな種類

もしくは

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

ブロックノート

titleを入れる場所です

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

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

テーブル

;ttaと入力すると上と左に見出しがあるパターンのソースがでてきます。左にある見出しが不要だったら「<tbody>の<th>見出1</th>」部分をすべて削除すれば、上だけに見出しのあるテーブルになります。

上に見出しがあるテーブル

キャプション部分ということです
ヘッド1ヘッド2ヘッド3
1Google69.07
2Yahoo29.84
3Baidu0.68
4Bing0.19
5Naver0.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

アドクイックタグ

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

アコーディオン系

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

ステップアップ系

STEP.1
タイトル1
中身1
STEP.2
タイトル2
中身2
STEP.3
タイトル3
中身3

関連リンク系

関連リンク：横タイプ

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

関連リンク：縦タイプ

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

外部リンク

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

メモと注意系

MEMO
ここに文章
注意
ここに文章
[note title=”タイトル”]ここに文章[/note]

ボタン系

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

ボタンテキスト

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

ボタンテキスト

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

ボタンテキスト

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

ボックス系

横並び二列

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

横並び参列

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

水色枠のB26

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

赤色（注意）枠のB27

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

ワンポイント的なB28とB29

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

タイトルチェック青B30

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

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

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

リスト系

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

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

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

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

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

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

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

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

ツィッター

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

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

地図を埋め込む系

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

動画系

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

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

評価BOX

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

次の記事

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