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

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

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

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

  • CMS:WordPress
  • テーマ:SANGO

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

PORIPUのソース

ワンポイント吹き出し系

〜箇条書き〜 ← このタグは知らなかった(汗)
通常:文字を入れる 赤版:文字を入れる オレンジ版:文字を入れる 緑版:文字を入れる 青版:文字を入れる カスタム版:文字を入れる
HTML
<span class="points p-***">文字を入れる</span>

カスタム版の色を変更したい場合は下記のCSSをstyle.cssに貼り付け

CSSに追記するカスタム用コード
/*PORIPU ワンポイントカスタマイズ用*/
.points.p-custom {background: #CCC;/*吹き出しの色*/}
.points.p-custom:before{border-top: 10px solid #CCC;/*吹き出しの色*/}

関連リンク&顔の吹き出し系

リストタグありとなし

リストタグあり
  • リストタグを利用したら
  • チェックアイコンが出てくる
HTML
<div class="kanren">
<ul>
<li>リストタグを利用したら</li>
<li>チェックアイコンが出てくる</li>
</ul>
</div>
リストタグなし
リストタグ無しバージョン
HTML
<div class="kanren">リストタグ無しバージョン</div>

他のカラーパターン

赤バージョン
  • リストタグを利用したら
  • チェックアイコンが出てくる
HTML
<div class="kanren p-red">
<ul>
<li>リストタグを利用したら</li>
<li>チェックアイコンが出てくる</li>
</ul>
</div>
赤:リストタグ無しバージョン
HTML
<div class="kanren p-red">リストタグ無しバージョン</div>
オレンジバージョン
  • リストタグを利用したら
  • チェックアイコンが出てくる
HTML
<div class="kanren p-orange">
<ul>
<li>リストタグを利用したら</li>
<li>チェックアイコンが出てくる</li>
</ul>
</div>
オレンジ:リストタグ無しバージョン
HTML
<div class="kanren p-orange">リストタグ無しバージョン</div>
青バージョン
  • リストタグを利用したら
  • チェックアイコンが出てくる
HTML
<div class="kanren p-blue">
<ul>
<li>リストタグを利用したら</li>
<li>チェックアイコンが出てくる</li>
</ul>
</div>
青:リストタグ無しバージョン
HTML
<div class="kanren p-blue">リストタグ無しバージョン</div>
緑バージョン
  • リストタグを利用したら
  • チェックアイコンが出てくる
HTML
<div class="kanren p-green">
<ul>
<li>リストタグを利用したら</li>
<li>チェックアイコンが出てくる</li>
</ul>
</div>
緑:リストタグ無しバージョン
HTML
<div class="kanren p-green">リストタグ無しバージョン</div>
カスタムバージョン
  • リストタグを利用したら
  • チェックアイコンが出てくる
HTML
<div class="kanren p-custom">
<ul>
<li>リストタグを利用したら</li>
<li>チェックアイコンが出てくる</li>
</ul>
</div>
カスタム:リストタグ無しバージョン
HTML
<div class="kanren p-custom">リストタグ無しバージョン</div>

色を変更したい場合は下記CSSを修正してstyle.cssに貼り付け

CSSに追記するカスタム用コード
/*PORIPU 関連リンクカスタマイズ用*/
.points.p-custom {background: #CCC;/*吹き出しの色*/}
.points.p-custom:before{border-top: 10px solid #CCC;/*吹き出しの色*/}

吹き出しの中の文字(タイトル)を変更できる関連リンク

リストタグありとなし

リストタグあり
タイトル変更OK
  • おすすめしたい記事のページID
  • 表示したいタイトル
HTML
<div class="p-box">
<span class="p-box-title">タイトル変更OK</span>
<p><ul>
       <li>おすすめしたい記事のページID</li>
       <li>表示したいタイトル</li>
</ul></p>
</div>
リストタグなし
タイトル変更OK リストタグ無しバージョン ※Pタグを入れたらNG リンクはこんな感じ
HTML
<div class="p-box">
<span class="p-box-title">タイトル変更OK</span>
<p>リストタグ無しバージョン</p>
</div>

他のカラーパターン

赤パターン
タイトル変更OK
HTML
<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>
オレンジパターン
タイトル変更OK
HTML
<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>
青パターン
タイトル変更OK
HTML
<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>
緑パターン
タイトル変更OK
HTML
<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>
カスタムパターン
タイトル変更OK
HTML
<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へ貼り付け

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タグを入れていないもの
  • これは蛍光の赤色ですが、わかりますでしょうか。
  • これは蛍光の青色ですが、わかりますでしょうか。
  • これは蛍光の黄色ですが、わかりますでしょうか。
  • これは蛍光の緑色ですが、わかりますでしょうか。
部分的に赤色(もしくは他の色)を文章に入れたいという時は

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

TextExpander
;cc
HTML
ここの部分に色をつけたい
水平線と水平点線

これも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はこんな種類
TextExpander
「;pre」と入力すると
「<pre><code></code></pre>」と出てくる

もしくは

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

ブロックノート

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

アドクイックタグ

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

アコーディオン系

隠したいコンテンツをここに記載
TextExpander
;accordion
ショートコード
[open title='タイトル']
隠したいコンテンツをここに記載
[/open]

ステップアップ系

STEP.1
タイトル1
中身1
STEP.2
タイトル2
中身2
STEP.3
タイトル3
中身3
TextExpander
;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]

関連リンク系

関連リンク:横タイプ

Web担当の基本のソースやコードはたらく秋葉のWeb担当で使っている基本のソースやコードなど
関連リンク:横タイプ

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

<p style="margin-bottom:-10px;font-weight:bold;">【関連記事】</p>[kanren id="526"]

関連リンク:縦タイプ

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

外部リンク

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

メモと注意系

MEMO
ここに文章
TextExpander
;memo
注意
ここに文章
TextExpander
;tyuui
タイトル
ここに文章
TextExpander
;note

顔の吹き出し系

ウェブ太の吹き出し

ウェブ太

普通の顔: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

ボタン系

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

ボタンテキスト

TextExpander
;linkred
ショートコード
[btn href="*" class="raised red-bc strong"]
ボタンテキスト
[/btn]

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

ボタンテキスト

TextExpander
;linkblu
ショートコード
[btn href="*" class="raised blue-bc strong"]
ボタンテキスト
[/btn]

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

ボタンテキスト

TextExpander
;linkgre
ショートコード
[btn href="*" class="raised green-bc strong"]
ボタンテキスト
[/btn]

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

\SANGOのショートコード一覧/

良い例:リンクボタン青

[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]

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

\SANGOのショートコード一覧/

ボックス系

横並び二列

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

横並び参列

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

水色枠のB26

タイトル
  1. テスト
  2. テスト
  3. テスト
TextExpander
;wakumiz
ショートコード
[box class="box26" title="タイトル"]
ここにolタグ(ulタグも可)を挿入するだけ
[/box]

赤色(注意)枠のB27

タイトル
  1. テスト
  2. テスト
  3. テスト
TextExpander
;wakured
ショートコード
[box class="box27" title="タイトル"]
ここにolタグ(ulタグも可)を挿入するだけ
[/box]

ワンポイント的なB28とB29

タイトル
ここに文章を入れる
TextExpander
;pointgreen
ショートコード
[box class="box28" title="タイトル"]ここに文章を入れる[/box]
タイトル
ここに文章を入れる
TextExpander
;pointorange
ショートコード
[box class="box29" title="タイトル"]ここに文章を入れる[/box]

タイトルチェック青B30

タイトル
  1. テスト
  2. テスト
  3. テスト
TextExpander
;titleblu
ショートコード
[box class="box30" title="タイトル"]
ここにolタグ(ulタグも可)を挿入するだけ
[/box]

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

タイトル
  1. テスト
  2. テスト
  3. テスト
TextExpander
;titlered
ショートコード
[box class="box33" title="タイトル"]
ここにolタグ(ulタグも可)を挿入するだけ
[/box]

リスト系

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

  • テスト
  • テスト
  • テスト
TextExpander
;checklist
ショートコード
[list class="li-check li-mainbdr main-c-before"]
ここにulタグを挿入するだけ
[/list]

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

  • テスト
  • テスト
  • テスト
TextExpander
;checkyubi
ショートコード
[list class="li-yubi li-mainbdr main-c-before"]
ここにulタグを挿入するだけ
[/list]

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

  1. テスト
  2. テスト
  3. テスト
TextExpander
;circlered
ショートコード
[list class="ol-circle li-accentbdr acc-bc-before"]
ここにolタグを挿入するだけ
[/list]

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

  1. テスト
  2. テスト
  3. テスト
TextExpander
;circleblu
ショートコード
[list class="ol-circle li-mainbdr main-bc-before"]
ここにolタグを挿入するだけ
[/list]

ツィッター

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

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

地図を埋め込む系

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

動画系

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

TextExpander
;youtube
動画の埋め込み例
[youtube]
https://動画のURL
[/youtube]

評価BOX

この本の評価
仕事に役立つ
(2.5)
わかりやすい
(4.0)
おもしろい
(1.5)
おすすめ度
(5.0)
TextExpander
;review
ショートコード

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください