AFFINGER5

2020年5月7日

  1. HOME >

AFFINGER5

ビジュアル編集のスタイル

WordPressでは、テーマが提供しているスタイルやショートコードを使用すると、楽しくページを作ることができます。

くつろぎブログはWINGのAFFINGER5(Ver.20200514)というテーマを使用していますので、このバージョンでのページ編集方法を紹介します。

やっちん
実例はスタイルを使用したHTML・CSSコードを表示したあと、使用例としてスタイルコードの使用結果を表示しています。

テキスト

AFFINGER5のスタイルタグ_テキスト

赤字
 style
ゴルフスイングのポイントは右腰を支点として、<span class="st-aka">腰の高さを維持したまま</span>ボールを叩くことです!

使用例

ゴルフスイングのポイントは右腰を支点として、腰の高さを維持したままボールを叩くことです!

太字
 style
アドレス時、左右の体重配分は左肩が上がっている分右足より、ただし正面から見て<span class="huto">逆くの字</span>になるのでバランスは左右で4:6くらいです。(右打ち)

使用例

アドレス時、左右の体重配分は左肩が上がっている分右足より、ただし正面から見て逆くの字になるのでバランスは左右で4:6くらいです。(右打ち)

赤字(太字)
 style
アドレス時、前後の体重配分はスイング時のバランスを保つことと、地面からの反力を効率よく利用するため<span class="hutoaka">踵体重</span>です。

使用例

アドレス時、前後の体重配分はスイング時のバランスを保つことと、地面からの反力を効率よく利用するため踵体重です。

大文字
 style
アドレスでは、体のどこの部分にも力が入らず<span class="oomozi">脱力</span>していることが重要です。

使用例

アドレスでは、体のどこの部分にも力が入らず脱力していることが重要です。

小文字
 style
<p class="komozi">アドレス→バックスイング→ダウンスイング→インパクト→フォローのなかで一番ウエイトが小さい動作はフォローです。</p>

使用例

アドレス→バックスイング→ダウンスイング→インパクト→フォローのなかで一番ウエイトが小さい動作はフォローです。

小文字は<p>タグが使用されているので一行全部が小文字です。

ドット線
 style
バックスイングの時、<span class="dotline">両手は体に近づく</span>ように少し引きます。

使用例

バックスイングの時、両手は体に近づくように少し引きます。

参照
 style
<p class="st-share"><a href="https://kokoroyasuku.com/golf/">ゴルフの練習</a></p>

<a>タグで任意のページを表示します。

参考
 style
<span class="sankou">参考</span>バックスイングの手は上げるものではなく上がるもの、勝手に上がるためにはどうすれば良いかを考える。

使用例

参考バックスイングの手は上げるものではなく上がるもの、勝手に上がるためにはどうすれば良いかを考える。

必須
 style
<span class="st-hisu">必須</span>バックスイングでは手につられて右腰の位置が上に上がってはダメ。

使用例

必須バックスイングでは手につられて右腰の位置が上に上がってはダメ。

打消し
 style
バックスイングは思いきり<del>体をねじって</del>力をためます。

使用例

バックスイングは思いきり体をねじって力をためます。

code
 style
<code>&lt;h1&gt;ゴルフの基本&lt;/h1&gt;</code>
HTMLコードをそのまま表示します。

使用例

<h1>ゴルフの基本</h1>

HTMLコードをそのまま表示します。

code風
 style
<span class="st-code">&lt;h2&gt;Golfの究極は自己流です!&lt;/h2&gt;</span>
HTMLコードをそのまま表示します。

使用例

<h2>Golfの究極は自己流です!</h2>

HTMLコードをそのまま表示します。

NoteSans
 style
<span class="st-notosans">GolfSchool</span>

使用例

GolfSchool

RoundedM+1c
 style
<span class="st-m1c">GolfSchool</span>

使用例

GolfSchool

アニメーション

animemenu

45°揺れ
 style
小さい時にはこんなシーソー<span class="fa faa-wrench animated st-animate">〇===〇</span>のある公園で遊びました。
スマホで表示すると振れの中心が右端に寄りますね、肩たたきみたいになった!
パソコンだと中心は真ん中!どんなコードなんでしょう。

使用例

小さい時にはこんなシーソー〇===〇のある公園で遊びました。
スマホで表示すると振れの中心が右端に寄りますね、肩たたきみたいになった!
パソコンだと中心は真ん中!どんなコードなんでしょう。

ベル揺れ
 style
本当に電話のベルが鳴った時のようですね。<span class="fa faa-ring animated st-animate">▼===▼</span>
ムム、こちらは振れの中心がスマホでも真ん中だ!

使用例

本当に電話のベルが鳴った時のようですね。▼===▼

ムム、こちらは振れの中心がスマホでも真ん中だ!

横揺れ
 style
〇〇〇<span class="fa faa-horizontal animated st-animate">横揺れ座席</span>〇〇〇

使用例

〇〇〇横揺れ座席〇〇〇

縦揺れ
 style
〇〇〇<span class="fa faa-vertical animated st-animate">凸凹座席</span>〇〇〇

使用例

〇〇〇凸凹座席〇〇〇

点滅
 style
<p class="fa faa-flash animated st-animate">信号が点滅し始めたのでブレーキを掛けました。</p>
やっぱり行全体が点滅します。ってことは短い文で注意を引きたいときに使用ですね。

使用例

信号が点滅し始めたのでブレーキを掛けました。

やっぱり行全体が点滅します。ってことは短い文で注意を引きたいときに使用ですね。

回転
 style
本当に回転するんだ!すごい。
<p class="fa faa-spin animated st-animate"><a href="https://kokoroyasuku.com/wp-content/uploads/2020/03/jigazou.jpg"><img class="size-thumbnail wp-image-1161 alignnone" src="https://kokoroyasuku.com/wp-content/uploads/2020/03/jigazou-150x150.jpg" alt="jigazou" width="50" height="50" /></a></p>
あやや目が回る! 止めるコードは無いの!

使用例

本当に回転するんだ!すごい。

jigazou

あやや目が回る! 止めるコードは無いの!

ふわふわ
 style
今日のお花見は満開で、桜並木が<span class="fa faa-float animated st-animate">揺れていました</span>

使用例

今日のお花見は満開で、桜並木が揺れていました

大小
 style
まるで文字が <span class="fa faa-pulse animated st-animate">呼吸</span> をしているように見えます。

使用例

まるで文字が 呼吸 をしているように見えます。

シェイクとシェイク(強)
 style
<span class="fa faa-shake animated st-animate">シェイク</span>は<span class="fa faa-wrench animated st-animate">45°揺れ</span>によく似ていますが、シェイク(強)は、めっちゃ寒くて<span class="st-shake st-animate">震えてる</span>感じです。
発見!スマホで見た時に45°揺れは中心が右になりましたが、シェイクでは中心は真ん中のままです、45°揺れはシェイクを使ったほうが良いですね。パソコンでは相違はありません。

使用例

シェイク45°揺れによく似ていますが、シェイク(強)は、めっちゃ寒くて震えてる感じです。
発見!スマホで見た時に45°揺れは中心が右になりましたが、シェイクでは中心は真ん中のままです、45°揺れはシェイクを使ったほうが良いですね。パソコンでは相違はありません。

拡大(ゆれ)
 style
真央ちゃんのとくとく<span class="fa faa-tada animated st-animate">〇===〇</span>とくとくぅって感じです。(中京地区のCMです)

使用例

真央ちゃんのとくとく〇===〇とくとくぅって感じです。(中京地区限定(^^))

過ぎると戻る
 style
通りすぎた<span class="fa faa-passing animated st-animate">過去</span>を渡すと
未来からの<span class="fa faa-passing-reverse animated st-animate">贈り物</span>がもらえます。

使用例

通りすぎた過去を渡すと
未来からの贈り物がもらえます。

バースト
 style
花火が <span class="fa faa-burst animated st-animate">パー</span> と上がりました、これもどんなコードで実現しているのでしょう。

使用例

花火が パー と上がりました、これもどんなコードで実現しているのでしょう。

落ちる
 style
舞台の幕が<span class="fa faa-falling animated st-animate">下りる</span>みたいなイメージでした。

使用例

舞台の幕が下りるみたいなイメージでした。

アイコン

icon

はてな
 style
<span class="hatenamark2 on-color">何故ゴルフは難しいのでしょうか。</span>

使用例

何故ゴルフは難しいのでしょうか。

注意
 style
<span class="attentionmark2 on-color">おうちにいよう! コロナウイルスいつかは消滅。</span>

使用例

おうちにいよう! コロナウイルスいつかは消滅。

人物
 style
<span class="usermark2 on-color">自分はいつでも今を大切にすることを思っています。</span>

使用例

自分はいつでも今を大切にすることを思っています。

チェック
 style
<span class="checkmark2 on-color">忘れ物無し </span> <span class="usermark2 on-color">自分はいつでも今を大切にすることを思っています。 一行に複数書けますね。</span>

使用例

忘れ物無し  自分はいつでも今を大切にすることを思っています。 一行に複数書けますね。

メモ
 style
<span class="memomark2 on-color">大切なことを忘れないためにもメモは役に立ちます。</span>

使用例

大切なことを忘れないためにもメモは役に立ちます。

王冠
 style
<span class="oukanmark on-color">この王冠を得られるまでの経験は宝物です。</span>

使用例

この王冠を得られるまでの経験は宝物です。

初心者マーク
 style
<span class="bigginermark on-color">まさに今の自分です、昨日の自分より今日の自分が成長していますように。</span>

使用例

まさに今の自分です、昨日の自分より今日の自分が成長していますように。

見出し

キャッチコピー
 style
いまだかつてないという<span style="font-size: 9.1px;">キャッチコピー</span>でテクノロジアを学びました。ん!なんだか使い方が違うような(+_+)

使用例

いまだかつてないというキャッチコピーでテクノロジアを学びました。ん!なんだか使い方が違うような(+_+)

キャッチコピー(+目次)
 style
<span class="st-h-copy">キャッチコピー</span><span class="st-h-copy-toc">キャッチコピー(+目次)</span>なにが違うか今の時点ではわかりません。

使用例

キャッチコピーキャッチコピー(+目次)なにが違うか今の時点ではわかりません。

記事タイトル
 style
<p class="entry-title">AFFINGER5の使い方</p>
楽しく覚えよう!

使用例

AFFINGER5の使い方

楽しく覚えよう!

h2風
 style
<p class="h2modoki">ビジュアルとテキストによる編集</p>

使用例

ビジュアルとテキストによる編集

h3風
 style
<p class="h3modoki">各ボタンに割り当てられた豊富な機能</p>

使用例

各ボタンに割り当てられた豊富な機能

h4風
 style
<p class="h4modoki">カテゴリーに分けて説明</p>

使用例

カテゴリーに分けて説明

h5風
 style
<p class="h5modoki">具体的なボタン説明</p>

使用例

具体的なボタン説明

まとめ
 style
<h4 class="st-matome">これらを駆使してシンプルで分かりやすいページを作成しよう
機能のほんの一部を使用しても、わかりやすいページを書くことは可能です。</h4>

使用例

これらを駆使してシンプルで分かりやすいページを作成しよう
機能のほんの一部を使用しても、わかりやすいページを書くことは可能です。

カウント
 style
<div class="st-count-reset">
ゴルフスイング
<span class="st-count">アドレス</span>
<span class="st-count">テイクバック</span>
<span class="st-count">ダウンスイング</span>
<span class="st-count">インパクト</span>
<span class="attentionmark2 on-color">カウントは保持されるため、カウント表示する範囲をテキストタグの「カウントのリセット範囲」で囲う必要があります。</span>
</div>

使用例

ゴルフスイング

アドレス

テイクバック

ダウンスイング

インパクト

カウントは保持されるため、カウント表示する範囲をテキストタグの「カウントのリセット範囲」で囲う必要があります。

ランキング

ranking

ランキング1位(基本)
 style
<h4 class="rankh4 rankno-1">さかな突きドリル</h4>
金色の王冠マークが付きました! 表示はh4タグです。

使用例

さかな突きドリル

金色の王冠マークが付きました! 表示はh4タグです。

ランキング2位
 style
<h4 class="rankh4 rankno-2">脱力</h4>

使用例

脱力

ランキング3位
 style
<h4 class="rankh4 rankno-3">体幹で打つ!</h4>

使用例

体幹で打つ!

ランキング4位以下
 style
<h4 class="rankh4 rankno-4">力いっぱい振る。</h4>

使用例

力いっぱい振る。

マーカ一

mpen

黄マーカーと黄マーカ(細)
 style
ノートの<span class="ymarker">重要なところ</span>にマーカペンで<span class="ymarker-s">線を引いていました</span>

使用例

ノートの重要なところにマーカペンで線を引いていました

赤マーカーと赤マーカ(細)
 style
ノートの重<span class="rmarker">要なところ</span>にマーカペンで<span class="rmarker-s">線を引いていました。</span>

使用例

ノートの重要なところにマーカペンで線を引いていました。

青マーカーと青マーカ(細)
 style
ノートの<span class="bmarker">重要なところ</span>にマーカペンで<span class="bmarker-s">線を引いていました。</span>

使用例

ノートの重要なところにマーカペンで線を引いていました。

鼠マーカーと鼠マーカ(細)
 style
ノートの<span class="gmarker">重要なところ</span>にマーカペンで<span class="gmarker-s">線を引いていました。</span>

使用例

ノートの重要なところにマーカペンで線を引いていました。

写真

枠線
 style
<a href="https://kokoroyasuku.com/wp-content/uploads/2020/03/golf-1.png"><img class="alignnone size-medium wp-image-918" src="https://kokoroyasuku.com/wp-content/uploads/2020/03/golf-1-300x109.png" alt="golf" width="300" height="109" /></a>
<span class="photoline"><a href="https://kokoroyasuku.com/wp-content/uploads/2020/03/golf-1.png"><img class="alignnone size-medium wp-image-918" src="https://kokoroyasuku.com/wp-content/uploads/2020/03/golf-1-300x109.png" alt="golf" width="300" height="109" /></a></span>
線が細くてわかりにくいですが、このショートコードには線の太さを変える項目は見当たりません。

使用例

golf

golf

線が細くてわかりにくいですが、このショートコードには線の太さを変える項目は見当たりません。

ポラロイド風
 style
<a href="https://kokoroyasuku.com/wp-content/uploads/2020/03/golf-1.png"><img class="alignnone size-medium wp-image-918" src="https://kokoroyasuku.com/wp-content/uploads/2020/03/golf-1-300x109.png" alt="golf" width="300" height="109" /></a>
<div class="st-photohu"><a href="https://kokoroyasuku.com/wp-content/uploads/2020/03/golf-1.png"><img src="https://kokoroyasuku.com/wp-content/uploads/2020/03/golf-1-300x109.png" alt="golf" width="300" height="109" /></a></div>
ポラロイド風の表示がされています。

使用例

golf

golf

ポラロイド風の表示がされています。

ワイド
 style
<a href="https://kokoroyasuku.com/wp-content/uploads/2020/03/golf-1.png"><img class="alignnone size-medium wp-image-918" src="https://kokoroyasuku.com/wp-content/uploads/2020/03/golf-1-300x109.png" alt="golf" width="300" height="109" /></a>
<div class="st-eyecatch-width"><a href="https://kokoroyasuku.com/wp-content/uploads/2020/03/golf-1.png"><img class="alignnone size-medium wp-image-918" src="https://kokoroyasuku.com/wp-content/uploads/2020/03/golf-1-300x109.png" alt="golf" width="300" height="109" /></a></div>
画面幅いっぱいを使って表示なので、始まりが画面の左端です。

使用例

golf

golf

画面幅いっぱいを使って表示なので、始まりが画面の左端です。

ボックス

黄色box
 style
<div class="yellowbox">
色が黄色だと目を引きます。注意の色だからでしょうか。
</div>

使用例

色が黄色だと目を引きます。注意の色だからでしょうか。

薄赤box
 style
<div class="redbox">
パソコンの画面表示では薄赤のほうが見やすい!なぜか外枠の線が付いています。
</div>

使用例

パソコンの画面表示では薄赤のほうが見やすい!なぜか外枠の線が付いています。

グレーbox
 style
<div class="graybox">
目立たない色なので、純粋にboxで囲みたい記事を書きます。
</div>

使用例

目立たない色なので、純粋にboxで囲みたい記事を書きます。

引用風box
 style
<div class="inyoumodoki">
参考文献から引用したほうわかりやすい時に使用します。一般的にこのボックスで表示されていれば引用分であることがわかるようです。
</div>

使用例

参考文献から引用したほうわかりやすい時に使用します。一般的にこのボックスで表示されていれば引用分であることがわかるようです。

ワイド背景box
 style
<div class="st-wide-background">
画面の左右を最大限に広げて表示します。
</div>

使用例

画面の左右を最大限に広げて表示します。

ワイド背景(左寄せ)
 style
<div class="st-wide-background-left">
文字通り、左右全体に広がったボックスの右側が少し開いています。
</div>

使用例

文字通り、左右全体に広がったボックスの右側が少し開いています。

ワイド背景(右寄せ)
 style
<div class="st-wide-background-right">
文字通り、左右全体に広がったボックスの左側が少し開いています。
</div>

使用例

文字通り、左右全体に広がったボックスの左側が少し開いています。

リスト

このタグを使うときには先に装飾リストを選んだあと、そのボックスの中に番号なしリストか番号付きリストを選択して記述します。

ドット下線(リスト)
 style
<ul>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ul>
こんな表示になります。
<div class="st-list-border">
<ul>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ul>
</div>

使用例

  • アドレス
  • テイクバック
  • トップ

こんな表示になります。

  • アドレス
  • テイクバック
  • トップ
マル(リスト)
 style
<ul>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ul>
こんな表示になります。
<div class="st-list-circle">
<ul>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ul>
</div>

使用例

  • アドレス
  • テイクバック
  • トップ

こんな表示になります。

  • アドレス
  • テイクバック
  • トップ

マルにテーマの色が反映されました。

マル+ドット下線(リスト)
 style
<ul>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ul>
こんな表示になります。
<div class="st-list-circle st-list-border">
<ul>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ul>
</div>

使用例

  • アドレス
  • テイクバック
  • トップ

こんな表示になります。

  • アドレス
  • テイクバック
  • トップ
簡易チェック(リスト)
 style
<ul>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ul>
こんな表示になります。
<div class="st-list-check">
<ul>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ul>
</div>

使用例

  • アドレス
  • テイクバック
  • トップ

こんな表示になります。

  • アドレス
  • テイクバック
  • トップ
簡易チェック+ドット下線(リスト)
 style
<ul>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ul>
こんな表示になります。
<div class="st-list-check st-list-border">
<ul>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ul>
</div>

使用例

  • アドレス
  • テイクバック
  • トップ

こんな表示になります。

  • アドレス
  • テイクバック
  • トップ
チェックボックス(番号なしリスト)
 style
<ul>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ul>
こんな表示になります。
<div class="st-square-checkbox st-square-checkbox-nobox">
<ul>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ul>
</div>

使用例

  • アドレス
  • テイクバック
  • トップ

こんな表示になります。

  • アドレス
  • テイクバック
  • トップ
チェックリスト(番号なしリスト)
 style
<ul>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ul>
こんな表示になります。
<div class="maruck">
<ul>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ul>
</div>

使用例

  • アドレス
  • テイクバック
  • トップ

こんな表示になります。

  • アドレス
  • テイクバック
  • トップ
ナンバリング(番号付きリスト)
 style
<ol>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ol>
こんな表示になります。
<div class="maruno">
<ol>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ol>
</div>

使用例

  1. アドレス
  2. テイクバック
  3. トップ

こんな表示になります。

  1. アドレス
  2. テイクバック
  3. トップ
ナンバリング四角(リスト)
 style
ul>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ul>
こんな表示になります。
<div class="st-list-no">
<ul>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ul>
</div>

使用例

  • アドレス
  • テイクバック
  • トップ

こんな表示になります。

  • アドレス
  • テイクバック
  • トップ
ナンバリング四角+ドット線
 style
<ul>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ul>
こんな表示になります。
<div class="st-list-no st-list-border">
<ul>
<li>アドレス</li>
<li>テイクバック</li>
<li>トップ</li>
</ul>
</div>

使用例

  • アドレス
  • テイクバック
  • トップ

こんな表示になります。

  • アドレス
  • テイクバック
  • トップ

レイアウト

回り込み解除

<div class="clearfix">floatを使用した記述</div>

回り込み解除
floatを記述した文章に不具合がある場合、その文章を囲むことにより回り込みが解消できるそうです。

センター寄せ
 style
<div class="center">
天気の良い日は外で遊ぶ
</div>

使用例

天気の良い日は外で遊ぶ

センター寄せ(スマホのみ)
 style
<div class="sp-center">
スマホだけセンター表示
</div>

使用例

スマホだけセンター表示

iPhoneで確認すると、センター寄せになっています。

下に余白
 style
<a href="https://kokoroyasuku.com/wp-content/uploads/2020/02/c625ed85adf04ad0d27da964d04e2d54-e1580727904694.jpg"><img class="alignnone size-thumbnail wp-image-184" src="https://kokoroyasuku.com/wp-content/uploads/2020/02/c625ed85adf04ad0d27da964d04e2d54-e1580727904694-150x150.jpg" alt="" width="150" height="150" /></a>
こんな表示になります。
<div class="under-space">
<a href="https://kokoroyasuku.com/wp-content/uploads/2020/02/c625ed85adf04ad0d27da964d04e2d54-e1580727904694.jpg"><img class="alignnone size-thumbnail wp-image-184" src="https://kokoroyasuku.com/wp-content/uploads/2020/02/c625ed85adf04ad0d27da964d04e2d54-e1580727904694-150x150.jpg" alt="" width="150" height="150" /></a>
</div>
こんな表示でわかるかな、上の場合より隙間が多い感じ?。逆に狭くないかな、10ピクセル開いているそうです。

使用例

こんな表示になります。

こんな表示でわかるかな、上の場合より隙間が多い感じ?。逆に狭くないかな、10ピクセル開いているそうです。

カードスタイル
 style
<div class="st-cardstyle">
<div class="clearfix responbox50 smart50">
<div class="lbox">
[st-card id=1754]
</div>
<div class="rbox">
[st-card id=964]
</div>
</div>
</div>
と表示されます。
カードスタイルB
 style
<div class="st-cardstyleb">
<div class="clearfix responbox50 smart50">
<div class="lbox">
[st-card id=1754]
</div>
<div class="rbox">
[st-card id=964]
</div>
</div>
</div>
と表示されます。スマホで確認するとカードスタイルBは文章が右に表示されます。
カードボタンのほうが自由度が高いかもしれません。
ランキングボックス
 style
<div class="rankst-wrap">
ランキングボックス
</div>

使用例

ランキングボックス

width100%解除
 style
<span class="resetwidth">どこで使うのだろう、もう少し使わないとわからない。 </span>

使用例

どこで使うのだろう、もう少し使わないとわからない。 

imgインラインボックス
 style
とてもきれいな<span class="inline-img"><img class="alignnone size-full wp-image-844" src="https://kokoroyasuku.com/wp-content/uploads/2020/03/hibikorekoujitu.jpg" alt="bara" width="100" height="100" /></span>薔薇でした。
行の任意な位置にイメージが貼れます。

使用例

とてもきれいなbara薔薇でした。

行の任意な位置にイメージが貼れます。

テーブル

横スクロール
 style
<div class="scroll-box">
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 12.5%;">アドレス</td>
<td style="width: 12.5%;">テイクバック</td>
<td style="width: 12.5%;">トップ</td>
<td style="width: 12.5%;">ダウンスイング</td>
<td style="width: 12.5%;">インパクト</td>
<td style="width: 12.5%;">フォロースルー</td>
<td style="width: 12.5%;">フィニッシュ</td>
<td style="width: 12.5%;">確認</td>
</tr>
<tr>
<td style="width: 12.5%;">脱力が重要</td>
<td style="width: 12.5%;">自然にクラブが上がる</td>
<td style="width: 12.5%;">クラブのしなりを感じる</td>
<td style="width: 12.5%;">下ろさない</td>
<td style="width: 12.5%;">トゥダウンで打つ</td>
<td style="width: 12.5%;">長く</td>
<td style="width: 12.5%;">バランス</td>
<td style="width: 12.5%;">バランスよく打てたか</td>
</tr>
</tbody>
</table>
</div>

使用例

アドレス テイクバック トップ ダウンスイング インパクト フォロースルー フィニッシュ 確認
脱力が重要 自然にクラブが上がる クラブのしなりを感じる 下ろさない トゥダウンで打つ 長く バランス バランスよく打てたか

iPhoneだとスクロールしますが、パソコンとiPadはスクロールしないのでおかしいなと思ったら、画面の幅を狭くしていったらiPhoneと同じ表示になりました。幅が750px以下でした。

中央配置
 style
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 16.6667%;">アドレス</td>
<td style="width: 16.6667%;">テイクバック</td>
<td style="width: 16.6667%;">トップ</td>
<td style="width: 16.6667%;">ダウンスイング</td>
<td style="width: 16.6667%;">インパクト</td>
<td style="width: 16.6667%;">フィニッシュ</td>
</tr>
<tr>
<td style="width: 16.6667%;">踵体重</td>
<td style="width: 16.6667%;">左肩でブロック</td>
<td style="width: 16.6667%;">あまり意識はない</td>
<td style="width: 16.6667%;">ヘッドを遅らせる</td>
<td style="width: 16.6667%;">一瞬右手を強く握る</td>
<td style="width: 16.6667%;">継続</td>
</tr>
</tbody>
</table>
</div>

使用例

アドレス テイクバック トップ ダウンスイング インパクト フィニッシュ
踵体重 左肩でブロック あまり意識はない ヘッドを遅らせる 一瞬右手を強く握る 継続
装飾なし
 style
<div class="notab">
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 33.3333%;">アドレス</td>
<td style="width: 33.3333%;">テイクバック</td>
<td style="width: 33.3333%;">トップ</td>
</tr>
<tr>
<td style="width: 33.3333%;">右足体重</td>
<td style="width: 33.3333%;">手で上げない</td>
<td style="width: 33.3333%;">一瞬の間が必要</td>
</tr>
</tbody>
</table>
</div>

使用例

アドレス テイクバック トップ
右足体重 手で上げない 一瞬の間が必要

テキスト編集のツールボタン

やっちん
こちらではテキスト入力を支援するツールボタンについて調べます。他と同じ機能のボタンは省略しました、

メディアを追加  ボタン
[/] shortcode
<a href="https://kokoroyasuku.com/wp-content/uploads/2020/03/golf-1.png"><img class="alignnone size-medium wp-image-918" src="https://kokoroyasuku.com/wp-content/uploads/2020/03/golf-1-300x109.png" alt="golf" width="300" height="109" /></a>
[audio mp3="https://kokoroyasuku.com/wp-content/uploads/2020/04/passer-montanus-cry1.mp3"]すずめのさえずり[/audio]

使用例

ボタンを押すとメディア一覧が表示されるので、そこから写真や音楽が追加できます。

golf

お問い合わせフォームを追加 ボタン
[/] shortcode
[contact-form][contact-field label="名前" type="name"  required="true" /][contact-field label="メール" type="email" required="true" /][contact-field label="サイト" type="url" /][contact-field label="メッセージ" type="textarea" /][/contact-form]
記入して送信ボタンを押してみました。

使用例

記入して送信ボタンを押してみました。

こんな画面に変わり。

WordPress管理画面のフィードバックに

が表示されました。たったワンクリックでここまでできるプログラムに感激です。

フォームの編集もショートコードを少し変えるだけで。

[/] shortcode
[contact-form][contact-field label="なまえ" type="name"  required="true" /][contact-field label="めーる" type="email" required="true" /][contact-field label="ぶろぐさいと" type="url" /][contact-field label="でんごん" type="textarea" /][/contact-form]
このように表示を変えたりできます。

使用例

このように表示を変えたりできます。

ここからのボタンは沢山あって、ここにないボタンも追加できたりしますが
今はここにあるボタンについて見てみます。

  b   ボタン
 style
<strong>Bold太文字の頭文字です。</strong>

使用例

Bold太文字の頭文字です。

  i   ボタン
 style
<em>Italicの頭文字ですABCD</em>

使用例

Italicの頭文字ですABCD

  link   ボタン
 style
<a href="https://kokoroyasuku.com/tezukurimasuku/">マスクを手作り記事を表示</a>
任意の記事を表示します、

使用例

マスクを手作り記事を表示

任意の記事を表示します、

  b-quote   ボタン
 style
<blockquote>足るを知る者は富み、強めて行う者は志有り
(引用 老子)</blockquote>

使用例

足るを知る者は富み、強めて行う者は志有り

(引用 老子)

  del   ボタン
 style
<del datetime="2020-03-28T13:31:33+00:00">過去はこのように考えていました</del>

使用例

過去はこのように考えていました

凄い!消した時間もスタンプされています。

  ins   ボタン
 style
<ins datetime="2020-03-28T13:31:33+00:00">補足説明としてあとから挿入した記事です</ins>

使用例

補足説明としてあとから挿入した記事です

アンダーラインが引かれただけでした、HTMLでは記事の意味が読み取れます。

  img   ボタン
 style
<img src="https://kokoroyasuku.com/wp-content/uploads/2020/03/golf-1.png" alt="ゴルフ場" />

使用例

ゴルフ場

イメージを追加できます。終了タグはありません。

  ul   ボタン
 style
<ul>
<li>リスト1</li>
</ul>

使用例

  • リスト1
  ol   ボタン
 style
<ol>
<li>リスト1</li>
</ol>

使用例

  1. リスト1
  li   ボタン
 style
<ul>
<li>リストタグ追加
<li>このタグだけ書くと不具合があるので:ul:タグで囲みました。
</ul>

使用例

  • リストタグ追加
  • このタグだけ書くと不具合があるので:ul:タグで囲みました。
  code   ボタン
 style
<code>&lt;p&gt;コードを実行しない&lt;/p&gt;</code>

使用例

<p>コードを実行しない</p>

HTMLコードを読む人の助けとなりますが、表示としては文字に背景色が付きます。

  more   ボタン
 style
<!--more-->

使用例

もっと読む。機能していないようです。

  タグを閉じる   ボタン
 style
&lt;/開いたタグ名&gt; すべての開始タグに対応した終了タグが生成されます。
&lt;p&gt;文章<span class="rmarker">&lt;/p&gt;</span>
&lt;strong&gt;強調文字<span class="rmarker">&lt;/strong&gt;</span> 赤マーカーのタグが挿入されます。

使用例

</開いたタグ名> すべての開始タグに対応した終了タグが生成されます。

<p>文章</p>
<strong>強調文字</strong> 赤マーカーのタグが挿入されます。

  お問い合わせフォーム   ボタン

お問い合わせフォーム追加ボタンと同じコードでした。

  p   ボタン
 style
<p>文章です。</p>

使用例

文章です。

文章の段落を示すタグです。

  大文字   ボタン
 style
<span class="oomozi">大文字oomoji</span>

使用例

大文字oomoji

  %指定   ボタン
 style
<span style="font-size: 150%;">150%</span>

使用例

150%

  フリーボックス   ボタン
 style
<div style="padding: 10px 0;">
<div class="freebox">
<p class="p-free"><span class="p-entry-f">ゴルフ意識</span></p>
<div class="free-inbox">ゴルフ上達には、バランスが一番大事になります</div>
</div>
</div>

使用例

ゴルフ意識

ゴルフ上達には、バランスが一番大事になります
  マイボックス   ボタン
[/] shortcode
[st-mybox title="" fontawesome="" color="#757575" bordercolor="#f3f3f3" bgcolor="#f3f3f3" borderwidth="0" borderradius="5" titleweight=""]
このページの-使用例-は全てマイボックスを使いました。
[/st-mybox]

このページの-使用例-は全てマイボックスを使いました。
  目次(TOC+)   ボタン
[/] shortcode
[toc]フリープラグインのTable of Contents Plusを使用するときに使います。

使用例

[toc]フリープラグインのTable of Contents Plusを使用するときに使います。

  目次(すごいもくじ)   ボタン
[/] shortcode
[st_toc]目次の表示位置が任意に変えられます。

使用例

目次の表示位置が任意に変えられます。

  目次上書きdata   ボタン
[/] shortcode
 data-st-toc-h="使い方調べています"

使用例

data-st-toc-h="使い方調べています"

  ブログカード風  ボタン
[/] shortcode
[st-card id=1 ] 投稿IDを指定します。
  YouTubeID  ボタン
[/] shortcode
[youtube id=k379X-L383w ] YouTube画面下の共有タブの https://youtu.be/<span style="color: #0000ff;">k379X-L383w</span> 青字部分を指定する。

使用例

 YouTube画面下の共有タブの https://youtu.be/k379X-L383w 青字部分を指定する。

  ボタンA  ボタン
 style
<div class="rankstlink-r2">
<a href="">ボタンA</a>
</div>

使用例

href="" にリンク先を設定できます。

  ボタンB  ボタン
 style
<div class="rankstlink-l2">
<a href="">ボタンB</a>
</div>

使用例

href="" にリンク先を設定できます。

  まとめ  ボタン
 style
<h4 class="st-matome">まとめ</h4>

使用例


まとめ
  ランキング大見出し  ボタン
 style
<h3 class="rankh3"><span class="rankh3-in">ランキング大見出し</span></h3>

使用例

ランキング大見出し

  ランキングエリア背景  ボタン
 style
<div class="rankst-wrap">ランキングエリア背景</div>

使用例

ランキングエリア背景
  タグID  ボタン
[/] shortcode
[st_af id="1"]

使用例

使い方調べています。

  タグSlug  ボタン
[/] shortcode
[st_af name=""]

使用例

使い方調べています。

  CSSNO  ボタン
[/] shortcode
class="st-css-no"

使用例

class="st-css-no"

使い方調べています。

  コメントアウト  ボタン
[/] shortcode
[st-out]コメントアウト[/st-out]

使用例

コメントアウトなので何も表示されません!

  イベント  ボタン
[/] shortcode
onclick="ga('send', 'event', 'linkclick', 'click', 'hoge');"

使用例

onclick="ga('send', 'event', 'linkclick', 'click', 'hoge');"

  nofollow  ボタン
[/] shortcode
rel="nofollow"

使用例

rel="nofollow"

タグ編集 テキストパーツ

やっちん
タグメニューはほとんどショートコードで実装しているので実行結果をみてみます。

テキストパーツのクリップメモ

メニューにガイドがある場合は先にガイドを表示してショートコードの概要を把握します。

クリップメモショートコードのガイド
 カスタマイズ
要素に値を設定すると、見た目を変えることができます!
[st-cmemo クリップメモの開始
fontawesome= "Webアイコン"
iconcolor= "アイコンの色"
bgcolor= "背景色"
color= "文字色"
bordercolor= "ボーダー色"
borderwidth= "枠線の太さ(px)"
iconsize= "アイコンサイズ(%)"]
ここにテキスト
[/st-cmemo] クリップメモの終了
メモのショートコード
[/] shortcode
[st-cmemo fontawesome="fa-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""]YouTubeで学習[/st-cmemo]

使用例

YouTubeで学習

ショートコードのガイドに従って編集してみました。
fontawesome "fa-file-text-o" を
"fa-youtube-play" に変更

iconcolor="#919191" を
”#ffffff" 白に変更 アイコンの色指定

bgcolor="#fafafa"
"#f32c2c" ちょこっと赤っぽい 背景の色指定

color="#000000" を
"#ffffff" 白に変更 文字色指定

bordercolor="" に
"#716310" 枠線の色指定

borderwidth=""に
"3" 枠線の太さ 単位はピクセル

iconsize=""に 単位は%
"250" アイコンのサイズ

[/] shortcode
[st-cmemo fontawesome="fa-youtube-play" iconcolor="#ffffff" bgcolor="#f32c2c" color="#ffffff" bordercolor="#716310" borderwidth="3" iconsize="250"]YouTubeで学習[/st-cmemo]

設定変更後

YouTubeで学習

表現が変わると印象も違ってきますね。

以下はデフォルトで要素の値が設定されているショートコードです。

外部リンクのショートコード
[/] shortcode
[st-cmemo fontawesome="fa-external-link" iconcolor="#BDBDBD" bgcolor="#fafafa" color="#757575" bordercolor="" borderwidth="" iconsize=""]
<a href="https://kokoroyasuku.com/kahun/">花粉症を抑えてくれたもの</a>
[/st-cmemo]
ブックマークのショートコード
[/] shortcode
[st-cmemo fontawesome="fa-bookmark" iconcolor="#BDBDBD" bgcolor="#fafafa" color="#757575" bordercolor="" borderwidth="" iconsize=""]
リンクを設定してお気に入りのページを登録!
[/st-cmemo]

使用例

リンクを設定してお気に入りのページを登録!

お知らせのショートコード
[/] shortcode
[st-cmemo fontawesome="fa-bullhorn" iconcolor="#FFEB3B" bgcolor="#FFFDE7" color="#000000" bordercolor="" borderwidth="" iconsize=""]
最初から数種類のタグが用意されているので編集が短時間でできます。
ちなみにfontawesomeのbullhornは拡声器の意味だそうです。
[/st-cmemo]

使用例

最初から数種類のタグが用意されているので編集が短時間でできます。
ちなみにfontawesomeのbullhornは拡声器の意味だそうです。

はてなのショートコード
[/] shortcode
[st-cmemo fontawesome="fa-question-circle" iconcolor="#4FC3F7" bgcolor="#E1F5FE" color="#000000" bordercolor="" borderwidth="" iconsize=""]
少しづつクリップメモの使い方がわかってきました。
[/st-cmemo]

使用例

少しづつクリップメモの使い方がわかってきました。

コメントのショートコード
[/] shortcode
[st-cmemo fontawesome="fa-comments" iconcolor="#F48FB1" bgcolor="#FCE4EC" color="#000000" bordercolor="" borderwidth="" iconsize=""]
編集で注意することは、読みやすいかを確認します。
[/st-cmemo]

使用例

編集で注意することは、読みやすいかを確認します。

コードのショートコード
[/] shortcode
[st-cmemo fontawesome="fa-code" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize="150"]
<html> 等の特殊記号をそのまま表示してプログラムを紹介します。
[/st-cmemo]

使用例

<html> 等の特殊記号をそのまま表示してプログラムを紹介します。

ポイントのショートコード
[/] shortcode
[st-cmemo fontawesome="fa-lightbulb-o" iconcolor="#FFA726" bgcolor="#FFF3E0" color="#000000" bordercolor="" borderwidth="" iconsize=""]
ゴルフスイングのポイントは手が体の近くを通ること!
[/st-cmemo]

使用例

ゴルフスイングのポイントは手が体の近くを通ること!

ユーザーのショートコード
[/] shortcode
[st-cmemo fontawesome="fa-user" iconcolor="#4FC3F7" bgcolor="#E1F5FE" color="#000000" bordercolor="" borderwidth="" iconsize="150"]
ユーザー名、アイコンが変わってもこの中で様々な処理が可能です。
[/st-cmemo]

使用例

ユーザー名、アイコンが変わってもこの中で様々な処理が可能です。

初心者のショートコード
[/] shortcode
[st-cmemo fontawesome="st-svg-bigginer_l" iconcolor="#9CCC65" bgcolor="#F1F8E9" color="#000000" bordercolor="" borderwidth="" iconsize=""]
初心者のうちはとにかく繰り返しやってみる事が大事!
[/st-cmemo]

使用例

初心者のうちはとにかく繰り返しやってみる事が大事!

注意文のショートコード
[/] shortcode
[st-cmemo fontawesome="fa-exclamation-circle" iconcolor="#ef5350" bgcolor="#ffebee" color="#000000" bordercolor="" borderwidth="" iconsize=""]
コードは1文字の間違いで動かなくなります。
[/st-cmemo]

使用例

コードは1文字の間違いで動かなくなります。

注意文(グレー)のショートコード
[/] shortcode
[st-cmemo fontawesome="fa-exclamation-circle" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""]
背景色を変えて、注意の意味合いを変化させましょう。
[/st-cmemo]

使用例

背景色を変えて、注意の意味合いを変化させましょう。

テキストパーツのクリップメモ(テキスト)

メモのショートコード
[/] shortcode
[st-cmemo myclass="st-text-guide st-text-guide-memo" fontawesome="fa-pencil" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""]
いまだかつてないテーマ
[/st-cmemo]

使用例

いまだかつてないテーマ

アイコンの下にテキストが表示できます。
myclass="st-text-guide
が追加せれていますね。
st-text-guide-memo の部分で実際に表示される文章を指定しているようです。

参考のショートコード
[/] shortcode
[st-cmemo myclass="st-text-guide st-text-guide-sankou" fontawesome="fa-quote-left" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""]
記事の参考になることって多いよね。
[/st-cmemo]

使用例

記事の参考になることって多いよね。

関連のショートコード
[/] shortcode
[st-cmemo myclass="st-text-guide st-text-guide-kanren" fontawesome="fa-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""]
記事の繋がりが分かるようにしておくと理解しやすい。
[/st-cmemo]

使用例

記事の繋がりが分かるようにしておくと理解しやすい。

注意のショートコード
[/] shortcode
[st-cmemo myclass="st-text-guide st-text-guide-attention" fontawesome="fa-exclamation-circle" iconcolor="#ef5350" bgcolor="#ffebee" color="#000000" bordercolor="#ffcdd2" borderwidth="" iconsize=""]
気を付けていないとすぐに忘れてしまいます。
[/st-cmemo]

使用例

気を付けていないとすぐに忘れてしまいます。

Checkのショートコード
[/] shortcode
[st-cmemo myclass="st-text-guide st-text-guide-point" fontawesome="fa-check" iconcolor="#FF8F00" bgcolor="#FFF8E1" color="#000000" bordercolor="#FFE082" borderwidth="" iconsize="150"]
チェックリストは大丈夫?
[/st-cmemo]

使用例

チェックリストは大丈夫?

次へ進むのショートコード
[/] shortcode
[st-cmemo myclass="st-text-guide st-text-guide-next" fontawesome="fa-arrow-right faa-horizontal animated" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize="150"]
アイコンがアニメーションで動いて、いかにも次へ進む感じ。
[/st-cmemo]

使用例

アイコンがアニメーションで動いて、いかにも次へ進む感じ。

前に戻るのショートコード
[/] shortcode
[st-cmemo myclass="st-text-guide st-text-guide-prev" fontawesome="fa-arrow-left" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize="150"]
次に進むの反対矢印。アニメーションしないけど、控えめで良いかも。
[/st-cmemo]

使用例

次に進むの反対矢印。アニメーションしないけど、控えめで良いかも。

質問のショートコード
[/] shortcode
[st-cmemo myclass="st-text-guide st-text-guide-question" fontawesome="fa-quora" iconcolor="#29B6F6" bgcolor="#E1F5FE" color="#000000" bordercolor="#81D4FA" borderwidth="" iconsize=""]
使い方の記事で質問文を表示してみよう。
[/st-cmemo]

使用例

使い方の記事で質問文を表示してみよう。

回答のショートコード
[/] shortcode
[st-cmemo myclass="st-text-guide st-text-guide-answer" fontawesome="fa-font" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""]
質問の回答例、回答は無限にあります。
[/st-cmemo]

使用例

質問の回答例、回答は無限にあります。

テキストパーツのミニふきだし

ミニふきだしショートコードのガイド
[/] shortcode
[st-minihukidashi ミニふきだしの開始
fontawesome="Webアイコン"
fontsize="文字サイズ(%)"
fontweight="文字の太さ(bold)"
bgcolor="背景色"
color="文字色"
margin="余白(上 右 下 左)"
radius="角の丸み"
position="吹き出し位置(on)"
add_boxstyle="全体を囲むdivに追加するCSS"]テキスト[/st-minihukidashi] ミニふきだしの終了
基本のショートコード

テキストはショートコードで隙間なく挟むこと!改行を入れるとうまく表示できません。

[/] shortcode
[st-minihukidashi fontawesome="fa-exclamation-circle" fontsize="100%" fontweight="" bgcolor="#f3f3f3" color="#000000" margin="0 0 20px 0" radius="" position="" add_boxstyle=""]どんな吹き出し?[/st-minihukidashi]

使用例

どんな吹き出し?

fontawesomeに注意マークを100%の大きさで指定しました。

オレンジのショートコード
[/] shortcode
[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#FFB74D" color="#fff" margin="0 0 20px 0" radius="" position="on" add_boxstyle=""]もしかして背景だけがオレンジ?[/st-minihukidashi]

使用例

もしかして背景だけがオレンジ?

position="on"の指定をしたので吹き出しが中央になりました。

ピンクのショートコード
[/] shortcode
[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#F48FB1" color="#fff" margin="0 0 20px 0" radius="0" position="" add_boxstyle=""]ピンク[/st-minihukidashi]

使用例

ピンク

radius="0" にしたのでコーナーのRがなくなりました。

ブルーのショートコード
[/] shortcode
[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#4FC3F7" color="#fff" margin="0 0 20px 0" radius="" position="" add_boxstyle="background:red;"]ブルー[/st-minihukidashi]

使用例

ブルー

boxの背景色を赤にしました。このショートコードが占める範囲が分かります。

グリーンのショートコード
[/] shortcode
[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#7CB342" color="#fff" margin="0 0 20px 0" radius="" position="on" add_boxstyle=""][/st-minihukidashi]

使用例

文字数が少なく幅がないと吹き出しがずれますが、position="on" にして、ずれをなくしました。

レッドのショートコード
[/] shortcode
[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#f44336" color="#fff" margin="0 0 20px 0" radius="" position="" add_boxstyle=""]RED[/st-minihukidashi]

使用例

RED

+マイボックスのショートコード

マイボックスにふきだしを付ける方法です。

[/] shortcode
[st-div class="" margin="0 0 15px 0" padding="0 0 0 0" add_style=""][st-minihukidashi fontawesome="e" fontsize="" fontweight="bold" bgcolor="#f3f3f3" color="" margin="0" radius="" position="" add_boxstyle=""]ポイント[/st-minihukidashi][/st-div][st-mybox title="" fontawesome="" color="" bordercolor="" bgcolor="#f3f3f3" borderwidth="" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="0 0 25px 0"]
ちょこっと入り組んでいますが、ショートコードが組み合わさってできています。ふきだしのショートコードはdivの中に入れられるみたいです(^^)v
[/st-mybox]

使用例

ポイント

ちょこっと入り組んでいますが、ショートコードが組み合わさってできています。ふきだしのショートコードはdivの中に入れられるみたいです(^^)v

使用例をマイボックスで表示しているので、ここでは枠線なしでの説明になりました。

テキストパーツの複合

自由なメモのショートコード
[/] shortcode
[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#FFC107" color="#fff" margin="0 0 0 -6px"]自由なメモ[/st-minihukidashi]
[st-cmemo fontawesome="fa-file-text-o" iconcolor="#FFC107" bgcolor="#FFFDE7" color="#000000" iconsize="200"]吹き出しとの合わせ技、アイコンが分かりやすい。[/st-cmemo]

使用例

自由なメモ

吹き出しとの合わせ技、アイコンが分かりやすい。

ここがポイントのショートコード
[/] shortcode
[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#3F51B5" color="#fff" margin="0 0 15px 70px"]ココがポイント[/st-minihukidashi]
[st-cmemo fontawesome="fa-hand-o-right" iconcolor="#3F51B5" bgcolor="#E8EAF6" color="#000000" iconsize="200"]ポイントは使ってみて確かめる事![/st-cmemo]

使用例

ココがポイント

ポイントは使ってみて確かめる事!

margin="0 0 0 -6px" を margin="0 0 15px 70px"] に変更して吹き出しの位置を離してみました。表示位置を自由に変えられますね。

ここがおすすめのショートコード
[/] shortcode
[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#3F51B5" color="#fff" margin="0 0 0 -6px"]ココがおすすめ[/st-minihukidashi]
[st-cmemo fontawesome="fa-thumbs-o-up" iconcolor="#3F51B5" bgcolor="#E8EAF6" color="#000000" iconsize="200"]無限の可能性がおすすめです。[/st-cmemo]

使用例

ココがおすすめ

無限の可能性がおすすめです。

ここがダメのショートコード
[/] shortcode
[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#3F51B5" color="#fff" margin="0 0 0 -6px"]ココがダメ[/st-minihukidashi]
[st-cmemo fontawesome="fa-thumbs-o-down" iconcolor="#3F51B5" bgcolor="#E8EAF6" color="#000000" iconsize="200"]違う表現ができそうで、記事が書き始められない?[/st-cmemo]

使用例

ココがダメ

違う表現ができそうで、記事が書き始められない?

ここに注意のショートコード
[/] shortcode
[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#ef5350" color="#fff" margin="0 0 0 -6px"]ココに注意[/st-minihukidashi]
[st-cmemo fontawesome="fa-exclamation-circle" iconcolor="#ef5350" bgcolor="#ffebee" color="#000000" iconsize="200"]凝りすぎない、シンプルイズベスト[/st-cmemo]

使用例

ココに注意

凝りすぎない、シンプルイズベスト

もっと詳しくのショートコード
[/] shortcode
[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#66BB6A" color="#fff" margin="0 0 0 -8px"]さらに詳しく[/st-minihukidashi]
[st-cmemo fontawesome="fa-search" iconcolor="#66BB6A" bgcolor="#E8F5E9" color="#000000" iconsize="200"]WordPressを使いこなすために[/st-cmemo]

使用例

さらに詳しく

WordPressを使いこなすために

女性コメントのショートコード
[/] shortcode
[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#F06292" color="#fff" margin="0 0 0 -9px"]20才女性[/st-minihukidashi]
[st-cmemo fontawesome="fa-user" iconcolor="#F06292" bgcolor="#FCE4EC" color="#000000" iconsize="200"]かわいいデザインを探しています[/st-cmemo]

使用例

20才女性

かわいいデザインを探しています

男性コメントのショートコード
[/] shortcode
[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#42A5F5" color="#fff" margin="0 0 0 -9px"]62才男性[/st-minihukidashi]
[st-cmemo fontawesome="fa-user" iconcolor="#42A5F5" bgcolor="#E3F2FD" color="#000000" iconsize="200"]シンプルで読みやすい工夫をしています[/st-cmemo]

使用例

62才男性

シンプルで読みやすい工夫をしています

テキストパーツの複合(アイコンなし)

自由なメモのショートコード
[/] shortcode
[st-minihukidashi fontawesome="fa-file-text-o" fontsize="90" fontweight="bold" bgcolor="#FFC107" color="#fff" margin="0 0 0 0"]自由なメモ[/st-minihukidashi]
[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#FFFDE7" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]アイコンがないのもシンプルで良いですね[/st-mybox]

自由なメモ

アイコンがないのもシンプルで良いですね

マイボックスで作ってあるので使用例の枠が付けられません(^^)

ここがポイントのショートコード
[/] shortcode
[st-minihukidashi fontawesome="fa-hand-o-right" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]ココがポイント[/st-minihukidashi]
[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]ポイントは短く的確に[/st-mybox]

ココがポイント

ポイントは短く的確に
ここがおすすめのショートコード
[/] shortcode
[st-minihukidashi fontawesome="fa-circle-o" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]ココがおすすめ[/st-minihukidashi]
[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]初心者でもホームページができます[/st-mybox]

ココがおすすめ

初心者でもホームページができます
ここがダメのショートコード
[/] shortcode
[st-minihukidashi fontawesome="fa-times" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]ココがダメ[/st-minihukidashi]
[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]はじめは理解に苦しみます[/st-mybox]

ココがダメ

はじめは理解に苦しみます
ここに注意のショートコード
[/] shortcode
[st-minihukidashi fontawesome="fa-exclamation-circle" fontsize="90" fontweight="bold" bgcolor="#ef5350" color="#fff" margin="0 0 0 0"]ココに注意[/st-minihukidashi]
[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#ffebee" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]できたつもりになること[/st-mybox]

ココに注意

できたつもりになること
もっと詳しくのショートコード
[/] shortcode
[st-minihukidashi fontawesome="fa-search" fontsize="90" fontweight="bold" bgcolor="#66BB6A" color="#fff" margin="0 0 0 0"]もっと詳しく[/st-minihukidashi]
[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#E8F5E9" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]ひとつずつ理解しましょう[/st-mybox]

もっと詳しく

ひとつずつ理解しましょう
はてなマークのショートコード
[/] shortcode
[st-minihukidashi fontawesome="fa-question-circle" fontsize="90" fontweight="bold" bgcolor="#03A9F4" color="#fff" margin="0 0 0 0"]つまづきポイント[/st-minihukidashi]
[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#E1F5FE" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]今はここがわかりません[/st-mybox]

つまづきポイント

今はここがわかりません

テキストパーツのまるもじ(小)

まるもじ(小)ショートコードのガイド
[/] shortcode
[st-marumozi まるもじ(小)の開始
fontawesome="Webアイコン"
bgcolor="背景色"
bordercolor="ボーダー色"
color="文字色"
radius="角丸(px)"
margin="余白(上 右 下 左)"]テキスト[/st-marumozi] まるもじ(小)の終了
基本のショートコード
[/] shortcode
[st-marumozi fontawesome="" bgcolor="#f3f3f3" bordercolor="" color="#000000" radius="30" margin="0 10px 0 0"]見出しに使えそう[/st-marumozi]

使用例

見出しに使えそう
オレンジのショートコード
[/] shortcode
[st-marumozi fontawesome="" bgcolor="#FFB74D" bordercolor="" color="#fff" radius="30" margin="0 10px 0 0"]表示までの変換[/st-marumozi]

使用例

表示までの変換
ピンクのショートコード
[/] shortcode
[st-marumozi fontawesome="" bgcolor="#F48FB1" bordercolor="" color="#fff" radius="10" margin="0 10px 0 0"]丸みを少なくしてみました[/st-marumozi]

使用例

丸みを少なくしてみました
ブルーのショートコード
[/] shortcode
[st-marumozi fontawesome="" bgcolor="#4FC3F7" bordercolor="#ffff00" color="#fff" radius="30" margin="0 10px 0 0"]ボーダーカラーを指定しました[/st-marumozi]文の間隔はこれくらい(margin 10px)

使用例

ボーダーカラーを指定しました文の間隔はこれくらい(margin 10px)

薄い注意のショートコード
[/] shortcode
[st-marumozi fontawesome="fa-exclamation-circle" bgcolor="#ffebee" bordercolor="" color="#ef5350" radius="30" margin="0 50px 0 0"]右マージン50pxで[/st-marumozi]間隔変わるかな文の間隔はこれくらい(margin 50px)

使用例

右マージン50pxで間隔変わるかな文の間隔はこれくらい(margin 50px)

注意のショートコード
[/] shortcode
[st-marumozi fontawesome="fa-exclamation-circle" bgcolor="#ef5350" bordercolor="" color="#fff" radius="30" margin="0 10px 0 0"]気をつけて生きる[/st-marumozi]体の動きに気をつける

使用例

気をつけて生きる体の動きに気をつける

テキストパーツのまるもじ(大)

まるもじ(大)ショートコードのガイド
[/] shortcode
[st-marumozi-big まるもじ(大)の開始
fontawesome="Webアイコン"
bgcolor="背景色"
bordercolor="ボーダー色"
color="文字色"
radius="角丸(px)"
margin="余白(上 右 下 左)"]テキスト[/st-marumozi-big] まるもじ(大)の終了
基本のショートコード
[/] shortcode
[st-marumozi-big fontawesome="" bgcolor="#f3f3f3" bordercolor="" color="#000000" radius="30" margin="0 10px 10px 0"]思ったより小さい[/st-marumozi-big]右と下にマージンがあります

使用例

思ったより小さい

右と下にマージンがあります。

オレンジのショートコード
[/] shortcode
[st-marumozi-big fontawesome="" bgcolor="#FFB74D" bordercolor="" color="#fff" radius="30" margin="0 10px 10px 0"]マージンの利き方は[/st-marumozi-big]改行されます

使用例

マージンの利き方は

改行されます

ピンクのショートコード
[/] shortcode
[st-marumozi-big fontawesome="" bgcolor="#F48FB1" bordercolor="" color="#fff" radius="30" margin="0 10px 50px 0"]下のマージンを50pxにしてみました[/st-marumozi-big]どれだけ離れたかな

使用例

下のマージンを50pxにしてみました

どれだけ離れたかな

ブルーのショートコード
[/] shortcode
[st-marumozi-big fontawesome="" bgcolor="#4FC3F7" bordercolor="" color="#fff" radius="30" margin="0 10px 10px 50px"]次は左マージンを50px[/st-marumozi-big]右に寄ったかな

使用例

次は左マージンを50px

右に寄ったかな

はてなのショートコード
[/] shortcode
[st-marumozi-big fontawesome="fa-question-circle" bgcolor="#4FC3F7" bordercolor="" color="#fff" radius="30" margin="50px 10px 10px 0"]上に50pxのマージン[/st-marumozi-big]

使用例

上に50pxのマージン

チェックのショートコード
[/] shortcode
[st-marumozi-big fontawesome="fa-check-circle" bgcolor="#FFB74D" bordercolor="" color="#fff" radius="30" margin="0 10px 10px 0"]歯磨き[/st-marumozi-big]できた!

使用例

歯磨き

できた!

薄い注意のショートコード
[/] shortcode
薄い注意だよ[st-marumozi-big fontawesome="fa-exclamation-circle" bgcolor="#ffebee" bordercolor="" color="#ef5350" radius="30" margin="0 10px 10px 0"]下を見て![/st-marumozi-big]改行されました

使用例

薄い注意だよ

下を見て!

改行されました

注意のショートコード
[/] shortcode
ショートコードの前[st-marumozi-big fontawesome="fa-exclamation-circle" bgcolor="#ef5350" bordercolor="" color="#fff" radius="30" margin="0 10px 10px 0"]まるもじ(大)[/st-marumozi-big]ショートコードの後
ショートコードの前[st-marumozi fontawesome="fa-exclamation-circle" bgcolor="#ef5350" bordercolor="" color="#fff" radius="30" margin="0 10px 0 0"]まるもじ(小)[/st-marumozi]ショートコードの後

使用例

ショートコードの前

まるもじ(大)

ショートコードの後

ショートコードの前まるもじ(小)ショートコードの後

yasuhiro

まるもじ(大)は同じ行に文章を書けないけど、まるもじ(小)だったら同じ行に書けますね!

テキストパーツのHTML(カスタム)

ルビ(ふりがな)のショートコード
[/] shortcode
こんな<ruby>漢字<rt>かんじ</rt></ruby>でルビが付きます!すごくない?

使用例

こんな漢字かんじでルビが付きます!すごくない?

pタグのショートコード
[/] shortcode
[st-p add_style="color:red;"]赤文字にしてみました、何か使い方が違う気がするけど[/st-p]
[st-p add_style=""]テキスト色とタグと比べてみました[/st-p]
<span style="color: #ff0000;">テキスト色ボタンで赤</span>

使用例

赤文字にしてみました、何か使い方が違う気がするけど

テキスト色とタグと比べてみました

テキスト色ボタンで赤

spanタグのショートコード
[/] shortcode
[st-span add_style="font-size:20px;"]フォントサイズを変えてみました[/st-span]
ボタンでフォントサイス指定
<span style="font-size: 200%;">200%で~す。</span>
テキスト編集でピクセル指定もできます。
<span style="font-size: 20px;">20pxです</span>

使用例

フォントサイズを変えてみました

ボタンでフォントサイス指定

200%で~す。 

テキスト編集でピクセル指定もできます。

20pxです

テキストパーツのカスタムフォント

デフォルトのショートコード
[/] shortcode
[st-designfont myclass="" fontawesome="" fontsize="150" fontweight="bold" color="#000" textshadow="" webfont="" margin="0 0 20px 0"]基本のフォント[/st-designfont]

使用例

基本のフォント

白影のショートコード
[/] shortcode
[st-designfont myclass="" fontawesome="" fontsize="150" fontweight="bold" color="#fff" textshadow="#424242" webfont="on" margin="0 0 20px 0"]青い空に真っ白な雲[/st-designfont]

使用例

青い空に真っ白な雲

テキストパーツのステップ

[/] shortcode
[st-step step_no="1"]ショートコードの使い方習得[/st-step]
[st-step step_no="2"]見やすい記事作成[/st-step]

使用例

step
1
ショートコードの使い方習得

step
2
見やすい記事作成

ポイントのショートコード

[/] shortcode
[st-point fontsize="" fontweight="bold" bordercolor=""]ポイントを押さえないと時間ばかりかかります[/st-point]

使用例

ポイントを押さえないと時間ばかりかかります

ラベルのショートコード

[/] shortcode
[st-label label="おすすめ" bgcolor="#FBC02D" color="#FFFFFF"]
<a href="https://kokoroyasuku.com/wp-content/uploads/2020/04/kahun.png"><img class="alignnone size-full wp-image-2144" src="https://kokoroyasuku.com/wp-content/uploads/2020/04/kahun.png" alt="" width="180" height="180" /></a>
[/st-label]

使用例

おすすめ

ショートコードの間にラベルを付けたいメディアを挟みます。

流れる文字のショートコード

[/] shortcode
<div class="st-marquee">
おぉ!どうやってるんだろう!
</div>

使用例

おぉ!どうやってるんだろう!

タグ編集 ボックスデザイン

ボックスデザインのバナー風ボックス

バナー風ボックスショートコードのガイド
 カスタマイズ
[st-flexbox バナー風ボックスの開始
url="リンク先URL"
rel="nofollow"
target="リンクを新しく開く(target)"
fontawesome="Webアイコン"
title="タイトル"
width="幅(%)"
height="高さ(px)"
color="文字色"
fontsize="文字サイズ(%)"
radius="角丸(px)"
shadow="タイトルの影色"
bordercolor="枠線カラー"
borderwidth="枠線の太さ(px)"
bgcolor="背景色"
backgroud_image="背景画像のURL"
blur="背景画像のぼかし"
left="左寄せ(on)"
margin_bottom="下の余白(px)"]
ここに自由なテキスト
[/st-flexbox] バナー風ボックスの終了
基本のショートコード
[/] shortcode
[st-flexbox url="https://kokoroyasuku.com/kahun/" rel="nofollow" target="" fontawesome="" title="花粉症を抑えてくれたもの" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="https://kokoroyasuku.com/wp-content/uploads/2020/04/kahun.png" blur="on" left="" margin_bottom="0"]
[/st-flexbox]

凄く使えそうなボックスです!

背景なし(高さ400px)のショートコード
[/] shortcode
[st-flexbox url="https://kokoroyasuku.com/kahun/" rel="nofollow" target="" fontawesome="" title="花粉症を抑えてくれたもの" width="" height="400" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="" borderwidth="0" bgcolor="" backgroud_image="https://kokoroyasuku.com/wp-content/uploads/2020/04/kahun.png" blur="" left="" margin_bottom="0"]
<span style="font-size: 130%; color: #3366ff;">花粉症の季節を乗り越えられそうですので、今年の使用アイテムを紹介します。</span>
[/st-flexbox]
左寄せのショートコード
[/] shortcode
[st-flexbox url="https://kokoroyasuku.com/kahun/" rel="nofollow" target="" fontawesome="" title="花粉症を抑えてくれたもの" width="" height="" color="#fff" fontsize="120" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#29B6F6" backgroud_image="https://kokoroyasuku.com/wp-content/uploads/2020/04/kahun.png" blur="" left="on" margin_bottom="0"]
花粉症の季節を乗り越えられそうですので、今年の使用アイテムを紹介します。
[/st-flexbox]

背景色とかでも表示イメージは変わりますね。

ボックスデザインのマイボックス

マイボックスショートコードのガイド
 カスタマイズ
[st-mybox
title="見出し"
fontawesome="Webアイコン"
color="見出し色"
bordercolor="枠線カラー"
bgcolor="背景色"
borderwidth="枠線の太さ(px)"
borderradius="角丸(px)"
titleweight="見出しの太さ(bold)"
fontsize="見出しのフォントサイズ"
myclass="オリジナルクラス" margin="マージン"]
ここにテキスト
[/st-mybox]
基本のショートコード
[/] shortcode
[st-mybox title="ポイント" fontawesome="fa-check-circle" color="#757575" bordercolor="#BDBDBD" bgcolor="#ffffff" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
このショートコード解説でずっと使用しているmyboxです。
[/st-mybox]

ポイント

このショートコード解説でずっと使用しているmyboxです。

マイボックスの中にマイボックスは入らないので使用例の案内ボックスはありません。

しかく(枠のみ)のショートコード
[/] shortcode
[st-mybox title="" fontawesome="" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
デザインを変えていますが基本はmyboxのショートコードです。
[/st-mybox]

デザインを変えていますが基本はmyboxのショートコードです。

まるみのショートコード
[/] shortcode
[st-mybox title="" fontawesome="" color="#757575" bordercolor="#BDBDBD" bgcolor="#f3f3f3" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
borderradius="5"で角にまるみがあるので、優しい感じです。
[/st-mybox]

borderradius="5"で角にまるみがあるので、優しい感じです。

参考のショートコード
[/] shortcode
[st-mybox title="参考" fontawesome="fa-file-text-o" color="#757575" bordercolor="" bgcolor="#fafafa" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
参考書はいろいろあるけど、今はWebで参考書の代わりが見つかります。
[/st-mybox]

参考

参考書はいろいろあるけど、今はWebで参考書の代わりが見つかります。

関連のショートコード
[/] shortcode
[st-mybox title="関連" fontawesome="fa-file-text-o" color="#757575" bordercolor="" bgcolor="#fafafa" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
HTMLとCSSの関連について調べています。
[/st-mybox]

関連

HTMLとCSSの関連について調べています。

titleのみ変更でした。

メモのショートコード
[/] shortcode
[st-mybox title="メモ" fontawesome="fa-file-text-o" color="#757575" bordercolor="" bgcolor="#fafafa" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
連休に行う事!
[/st-mybox]

メモ

連休に行う事!

ポイントのショートコード
[/] shortcode
[st-mybox title="ポイント" fontawesome="fa-check-circle" color="#FFD54F" bordercolor="#FFD54F" bgcolor="#FFFDE7" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
連休の予定は余裕を持とう
[/st-mybox]

ポイント

連休の予定は余裕を持とう

注意ポイントのショートコード
[/] shortcode
[st-mybox title="注意ポイント" fontawesome="fa-exclamation-circle" color="#ef5350" bordercolor="#ef9a9a" bgcolor="#ffebee" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
空いている時間に行動すること
[/st-mybox]

注意ポイント

空いている時間に行動すること

はてなのショートコード
[/] shortcode
[st-mybox title="はてな" fontawesome="fa-question-circle" color="#03A9F4" bordercolor="#B3E5FC" bgcolor="#E1F5FE" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
空いている時間の見つけ方
[/st-mybox]

はてな

空いている時間の見つけ方

+ミニふきだしのショートコード
[/] shortcode
[st-div class="" margin="0 0 15px 0" padding="0 0 0 0" add_style=""][st-minihukidashi fontawesome="e" fontsize="" fontweight="bold" bgcolor="#f3f3f3" color="" margin="0" radius="5" position="" add_boxstyle=""]ふきだしテキスト[/st-minihukidashi][/st-div][st-mybox title="" fontawesome="" color="" bordercolor="#f3f3f3" bgcolor="" borderwidth="5" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="0 0 25px 0"]
ボックス合わせ技
[/st-mybox]

ふきだしテキスト

ボックス合わせ技

ShortCodeのショートコード
[/] shortcode
[st-scbox title="" fontawesome="" color="#000" bordercolor="" bgcolor="#fafafa" borderwidth="" borderradius="0" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
[st-cmemo fontawesome="fa-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]
[/st-scbox]

使用例

[st-cmemo fontawesome="fa-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

発見!このショートコードはmyboxでは無いですね。

ShortCodeをそのまま表示します。上の表示のpre:shortcodeと似ています。

ボックスデザインのマイボックス(+CSSクラス)

メモのショートコード
[/] shortcode
[st-mybox title="メモ" fontawesome="fa-file-text-o" color="#727272" bordercolor="#ff0000" bgcolor="#FAFAFA" borderwidth="0" borderradius="5" titleweight="bold" title_bordercolor="" fontsize="" myclass="st-mybox-class st-title-under" margin="25px 0 25px 0"]
marginを使ってタイトルがボックスに取り込まれています。
[/st-mybox]

メモ

marginを使ってタイトルがボックスに取り込まれています。

メモ(下線のみ)のショートコード
[/] shortcode
[st-mybox title="メモ" fontawesome="fa-file-text-o" color="#727272" bordercolor="#ff0000" bgcolor="#FAFAFA" borderwidth="0" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under" margin="25px 0 25px 0"]
下線を引いて少し強調してあります。
[/st-mybox]

メモ

下線を引いて少し強調してあります。

メモ(枠のみ)のショートコード
[/] shortcode
[st-mybox title="メモ" fontawesome="fa-file-text-o" color="#727272" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="" fontsize="" myclass="st-mybox-class st-title-under" margin="25px 0 25px 0"]
枠のみはシンプルで好きかも。
[/st-mybox]

メモ

枠のみはシンプルで好きかも。

メモ(枠・下線あり)のショートコード
[/] shortcode
[st-mybox title="メモ" fontawesome="fa-file-text-o" color="#727272" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under" margin="25px 0 25px 0"]
テーマの数だけデザインがある。
[/st-mybox]

メモ

テーマの数だけデザインがある。

注意(下線のみ)のショートコード
[/] shortcode
[st-mybox title="ここに注意" fontawesome="fa-exclamation-circle" color="#ef5350" bordercolor="#f3f3f3" bgcolor="#ffebee" borderwidth="" borderradius="5" titleweight="bold" title_bordercolor="#ef5350" fontsize="" myclass="st-mybox-class st-title-under" margin="25px 0 25px 0"]
断捨離をするときはしっかり見極めて
[/st-mybox]

ここに注意

断捨離をするときはしっかり見極めて

必要なモノのショートコード
[/] shortcode
[st-mybox title="必要なモノ" fontawesome="fa-file-text-o" color="#757575" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under st-list-circle" margin="25px 0 25px 0"]
  • 財布
  • スマホ
  • 会社の携帯
[/st-mybox]

必要なモノ

  • 財布
  • スマホ
  • 会社の携帯
必要なモノ(ドット下線)のショートコード
[/] shortcode
[st-mybox title="必要なモノ" fontawesome="fa-file-text-o" color="#757575" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under st-list-border st-list-circle" margin="25px 0 25px 0"]
  • WordPress
  • XMIND
  • Evernote
[/st-mybox]

必要なモノ

  • WordPress
  • XMIND
  • Evernote
チェックリストのショートコード
[/] shortcode
[st-mybox title="チェックリスト" fontawesome="fa-file-text-o" color="#757575" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under st-list-check" margin="25px 0 25px 0"]
  • めがね
  • 歯磨きセット
  • タオル
[/st-mybox]

チェックリスト

  • めがね
  • 歯磨きセット
  • タオル
チェックリスト(ドット下線)のショートコード
[/] shortcode
[st-mybox title="チェックリスト" fontawesome="fa-file-text-o" color="#757575" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under st-list-border st-list-check" margin="25px 0 25px 0"]
  • 運転免許
  • ETCカード
  • サングラス
[/st-mybox]

チェックリスト

  • 運転免許
  • ETCカード
  • サングラス
簡単な流れのショートコード
[/] shortcode
[st-mybox title="簡単な流れ" fontawesome="fa-list-ol" color="#757575" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under st-list-no" margin="25px 0 25px 0"]
  • HTML
  • CSS
  • JavaScript
[/st-mybox]

簡単な流れ

  • HTML
  • CSS
  • JavaScript
簡単な流れ(ドット下線)のショートコード
[/] shortcode
[st-mybox title="簡単な流れ" fontawesome="fa-list-ol" color="#757575" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under st-list-no st-list-border" margin="25px 0 25px 0"]
  • jQuery
  • Bootstrap
  • PHP
[/st-mybox]

簡単な流れ

  • jQuery
  • Bootstrap
  • PHP

ボックスデザインの見出し付フリーボックス

基本のショートコード
[/] shortcode
[st-midasibox title="ブログの始め方" fontawesome="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"]
ドメインの取得と、サーバーレンタル
[/st-midasibox]

使用例

ブログの始め方

ドメインの取得と、サーバーレンタル

注意のショートコード
[/] shortcode
[st-midasibox title="注意" fontawesome="fa-exclamation-circle faa-flash animated" bordercolor="#f44336" color="" bgcolor="#ffebee" borderwidth="" borderradius="5" titleweight="bold"]
ドメイン名は後から変えられません。
[/st-midasibox]

使用例

注意

ドメイン名は後から変えられません。

はてなのショートコード
[/] shortcode
[st-midasibox title="サーバーはどこ" fontawesome="fa-question-circle faa-ring animated" bordercolor="#03A9F4" color="#fff" bgcolor="#E1F5FE" borderwidth="" borderradius="5" titleweight="bold"]
エックスサーバーで良いよ。
[/st-midasibox]

使用例

サーバーはどこ

エックスサーバーで良いよ。

ポイントのショートコード
[/] shortcode
[st-midasibox title="ブログ名は" fontawesome="fa-check-circle faa-ring animated" bordercolor="#FFC107" color="" bgcolor="#FFFDE7" borderwidth="" borderradius="5" titleweight="bold"]
くつろぎブログ
[/st-midasibox]

使用例

ブログ名は

くつろぎブログ

メモのショートコード
[/] shortcode
[st-midasibox title="メモ" fontawesome="fa-file-text-o faa-float animated" bordercolor="#757575" color="" bgcolor="#FAFAFA" borderwidth="" borderradius="5" titleweight="bold"]
2020年1月25日にサーバー契約しました!
[/st-midasibox]

使用例

メモ

2020年1月25日にサーバー契約しました!

基本(タイトル幅100%)のショートコード
[/] shortcode
[st-midasibox-intitle title="初めに勉強したのは" fontawesome="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"]
HTML
[/st-midasibox-intitle]

使用例

初めに勉強したのは

HTML

注意(タイトル幅100%)のショートコード
[/] shortcode
[st-midasibox-intitle title="注意" fontawesome="fa-exclamation-circle faa-flash animated" bordercolor="#f44336" color="" bgcolor="#ffebee" borderwidth="" borderradius="5" titleweight="bold"]
基礎ばかりやっても使えません、応用が大事です。
[/st-midasibox-intitle]

使用例

注意

基礎ばかりやっても使えません、応用が大事です。

はてな(タイトル幅100%)のショートコード
[/] shortcode
[st-midasibox-intitle title="覚え方" fontawesome="fa-question-circle faa-ring animated" bordercolor="#03A9F4" color="#fff" bgcolor="#E1F5FE" borderwidth="" borderradius="5" titleweight="bold"]
先にデザインを決めて、それをHTMLで書いてみる
[/st-midasibox-intitle]

使用例

覚え方

先にデザインを決めて、それをHTMLで書いてみる

ポイント(タイトル幅100%)のショートコード
[/] shortcode
[st-midasibox-intitle title="ポイント" fontawesome="fa-check-circle faa-ring animated" bordercolor="#FFC107" color="" bgcolor="#FFFDE7" borderwidth="" borderradius="5" titleweight="bold"]
習うより慣れよう
[/st-midasibox-intitle]

使用例

ポイント

習うより慣れよう

メモ(タイトル幅100%)のショートコード
[/] shortcode
[st-midasibox-intitle title="メモ" fontawesome="fa-file-text-o faa-float animated" bordercolor="#757575" color="" bgcolor="#FAFAFA" borderwidth="" borderradius="5" titleweight="bold"]
継続は力なりは真実だと思う。
[/st-midasibox-intitle]

使用例

メモ

継続は力なりは真実だと思う。

ボックスデザインのメモボックス

[/] shortcode
<div class="st-memobox2">
<p class="st-memobox-title">メモ</p>
日記はEvernote
</div>

使用例

メモ

日記はEvernote

ボックスデザインのスライドボックス

[/] shortcode
[st-slidebox fontawesome="" text="クリックしてください、隠れているものを表示します" bgcolor="" color="#1a1a1a" margin_bottom="20"]
答えは:毎日更新
[/st-slidebox]

使用例

クリックしてください、隠れているものを表示します

答えは:毎日更新

ボックスデザインのチェックボクス(番号なしリスト)

[/] shortcode
[st-square-checkbox bgcolor="" bordercolor="" fontweight="" borderwidth="3"]
<div>時刻表
出発時間
到着時間</div>
[/st-square-checkbox]

使用例

時刻表
出発時間
到着時間

ボックスデザインのこんな方におすすめ(v)

[/] shortcode
<div class="st-blackboard">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ</span></p>
<ul class="st-blackboard-list st-no-ck-off">
<li>Webプログラミングに興味のある人</li>
<li>WordPressのテーマに興味がある人</li>
</ul>
</div>

使用例

こんな方におすすめ

  • Webプログラミングに興味のある人
  • WordPressのテーマに興味がある人

ボックスデザインのこんな方におすすめ [v]

[/] shortcode
<div class="st-blackboard square-checkbox">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ</span></p>
<ul class="st-blackboard-list st-no-ck-off">
<li>なんにでも興味がある人</li>
<li>新しい発見が大好きな人</li>
</ul>
</div>

使用例

こんな方におすすめ

  • なんにでも興味がある人
  • 新しい発見が大好きな人

ガイドマップメニュー

[/] shortcode
<div class="st-link-guide st-link-guide-post">
<ul class="st-link-guide-menu">
<li><a href="https://kokoroyasuku.com/golf/">ゴルフ</a></li>
<li><a href="https://kokoroyasuku.com/programming/">プログラミング</a></li>
<li><a href="https://kokoroyasuku.com/self-introduction/">自己紹介</a></li>
</ul>
</div>

pre

[/] shortcode
[st-pre myclass="" text="html" fontawesome=""]
コードを実行しないで表示
&lt;p&gt;こんにちは&lt;/p&gt;
[/st-pre]

使用例

 html
コードを実行しないで表示
<p>こんにちは</p>

pre:terminal

[/] shortcode
[st-pre myclass="st-terminal" text="command" fontawesome="fa-terminal"]
ディレクトリ: C:\Users\yasub
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2020/03/13 22:58 .atom
d----- 2019/10/27 20:34 .cache
d----- 2019/08/12 9:07 .config
[/st-pre]

使用例

 command
ディレクトリ: C:\Users\yasub
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2020/03/13 22:58 .atom
d----- 2019/10/27 20:34 .cache
d----- 2019/08/12 9:07 .config

pre:shortcode

[/] 
この表示に使っています、入れ子にできないみたいのでコードは非表示です。

使用例

[/] shortcode
ショートコードをそのまま表示

タグ編集 カスタムボタン

カスタムボタンのノーマル

ノーマルショートコードのガイド
 カスタマイズ
[st-mybutton  ノーマルの開始
class="追加クラス"
url="リンク先URL"
title="ボタンテキスト"
rel="nofollow"
fontawesome="Webアイコン(前)"
target="リンク先を新しく開く(blank)"
color="文字色"
bgcolor="背景色(下)"
bgcolor_top="背景色(上)"
bordercolor="枠線カラー"
borderwidth="枠線の太さ(px)"
borderradius="角丸(px)"
fontsize="文字サイズ(%)"
fontweight="文字の太さ(bold)"
width="幅(%)"
fontawesome_after="Webアイコン(後)"
shadow="ボタンの影色"
ref="光る演出(on)"] ノーマルの終了(タグはありません)
基本のショートコード
[/] shortcode
[st-mybutton class="" url="#" title="ボタン" rel="" fontawesome="" target="" color="#000000" bgcolor="#FFF" bgcolor_top="" bordercolor="#CCC" borderwidth="3" borderradius="0" fontsize="" fontweight="" width="100" fontawesome_after="" shadow="" ref=""]

使用例

ボタン

演出項目が多いので、どんなボタンでも作れそう。

詳しくはコチラ(オレンジ)のショートコード
[/] shortcode
[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="" color="#fff" bgcolor="#FFD54F" bgcolor_top="#ffdb69" bordercolor="#FFEB3B" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="80" fontawesome_after="fa-angle-right" shadow="#FFB300" ref="on"]

使用例

詳しくはコチラ

ref="on"でボタンが光ります。幅も80%に変更してみました。

詳しくはコチラ(レッド)のショートコード
[/] shortcode
[st-mybutton url="#" title="秘密" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#e53935" bgcolor_top="#f44336" bordercolor="#e57373" borderwidth="1" borderradius="5" fontsize="" fontweight="" width="" fontawesome_after="fa-angle-right" shadow="#c62828" ref="on"]

使用例

秘密

fontweight="bold"  を fontweight="" に変更しています。

詳しくはコチラ(グリーン)のショートコード
[/] shortcode
[st-mybutton url="#" title="安全対策はコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#43A047" bgcolor_top="#66BB6A" bordercolor="#81C784" borderwidth="1" borderradius="10" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#388E3C" ref="on"]

使用例

安全対策はコチラ

borderradius="5" を borderradius="10" に変更しています。

詳しくはコチラ(ブルー)のショートコード
[/] shortcode
[st-mybutton url="#" title="蒼い海" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#039BE5" bgcolor_top="#29B6F6" bordercolor="#4FC3F7" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#039BE5" ref=""]

使用例

蒼い海

光る演出をoffにしました。

お問い合わせのショートコード
[/] shortcode
[st-mybutton url="#" title="お問合せ" rel="" fontawesome="fa-envelope" target="" color="#fff" bgcolor="#03A9F4" bgcolor_top="#14b4fc" bordercolor="#039BE5" borderwidth="1" borderradius="5" fontsize="" fontweight="" width="90" fontawesome_after="" shadow="#039BE5" ref="on"]

使用例

もっと詳しく(オレンジ)のショートコード
[/] shortcode
[st-mybutton url="#" title="もっと詳しく" rel="" fontawesome="" target="" color="#fff" bgcolor="#FFD54F" bgcolor_top="#ffdb69" bordercolor="#FFEB3B" borderwidth="1" borderradius="30" fontsize="85" fontweight="" width="90" fontawesome_after="fa-angle-right" shadow="" ref="on"]
もっと詳しく(ピンク)のショートコード
[/] shortcode
[st-mybutton url="#" title="もっと詳しく" rel="" fontawesome="" target="" color="#fff" bgcolor="#F48FB1" bgcolor_top="#f6a6c1" bordercolor="#F48FB1" borderwidth="1" borderradius="30" fontsize="85" fontweight="" width="90" fontawesome_after="fa-angle-right" shadow="" ref="on"]
もっと詳しく(ブルー)のショートコード
[/] shortcode
[st-mybutton url="#" title="もっと詳しく" rel="" fontawesome="" target="" color="#fff" bgcolor="#4FC3F7" bgcolor_top="#67cbf8" bordercolor="#4FC3F7" borderwidth="1" borderradius="30" fontsize="85" fontweight="" width="90" fontawesome_after="fa-angle-right" shadow="" ref="on"]
人気ランキングのショートコード
[/] shortcode
[st-mybutton url="#" title="人気ランキング" rel="" fontawesome="st-svg-oukan" target="" color="#fff" bgcolor="#FBC02D" bgcolor_top="#fbc846" bordercolor="#FBC02D" borderwidth="1" borderradius="5" fontsize="110" fontweight="bold" width="90" fontawesome_after="" shadow="" ref="on"]
ランキングはコチラのショートコード
[/] shortcode
[st-mybutton class="" url="#" title="ランキングはコチラ" rel="" fontawesome="fa-angle-double-down" target="" color="#1a1a1a" bgcolor="#fdef4e" bgcolor_top="" bordercolor="#fceb1c" borderwidth="1" borderradius="" fontsize="95" fontweight="" width="" fontawesome_after="" shadow="" ref=""]

使用例

ランキングはコチラ

url="#ranking" がデフォルトですが、今はランキングページが無いので#に変更しています。

カスタムボタンの角丸

基本のショートコード
[/] shortcode
[st-mybutton class="" url="#" title="角丸ボタン" rel="" fontawesome="" target="" color="#424242" bgcolor="" bgcolor_top="" bordercolor="#CCC" borderwidth="5" borderradius="30" fontsize="" fontweight="bold" width="" fontawesome_after="fa-chevron-right" shadow="" ref=""]

使用例

詳しくはコチラ(オレンジ)のショートコード
[/] shortcode
[st-mybutton class="" url="#" title="角丸ボタン" rel="" fontawesome="" target="" color="#FFB74D" bgcolor="" bgcolor_top="" bordercolor="#FFB74D" borderwidth="5" borderradius="30" fontsize="" fontweight="bold" width="" fontawesome_after="fa-chevron-right" shadow="" ref=""]

使用例

詳しくはコチラ(レッド)のショートコード
[/] shortcode
[st-mybutton class="" url="#" title="角丸ボタン" rel="" fontawesome="" target="" color="#ef5350" bgcolor="" bgcolor_top="" bordercolor="#ef5350" borderwidth="5" borderradius="30" fontsize="" fontweight="bold" width="" fontawesome_after="fa-chevron-right" shadow="" ref=""]

使用例

詳しくはコチラ(グリーン)のショートコード
[/] shortcode
[st-mybutton class="" url="#" title="角丸ボタン" rel="" fontawesome="" target="" color="#9CCC65" bgcolor="" bgcolor_top="" bordercolor="#9CCC65" borderwidth="5" borderradius="30" fontsize="" fontweight="bold" width="" fontawesome_after="fa-chevron-right" shadow="" ref=""]

使用例

詳しくはコチラ(ブルー)のショートコード
[/] shortcode
[st-mybutton class="" url="#" title="角丸ボタン" rel="" fontawesome="" target="" color="#4FC3F7" bgcolor="" bgcolor_top="" bordercolor="#4FC3F7" borderwidth="5" borderradius="30" fontsize="" fontweight="bold" width="" fontawesome_after="fa-chevron-right" shadow="" ref=""]

使用例

カスタムボタンのミニ

基本のショートコード
[/] shortcode
[st-mybutton-mini url="#" title="ボタン" rel="" fontawesome="" target="" color="#000000" bgcolor="#f3f3f3" bgcolor_top="" bordercolor="" borderwidth="" borderradius="3" fontsize="" fontweight="" fontawesome_after="" shadow="#BDBDBD" ref=""]

使用例

詳しくはコチラ(オレンジ)のショートコード
[/] shortcode
[st-mybutton-mini url="#" title="詳しくはコチラ" rel="" fontawesome="" target="" color="#fff" bgcolor="#FFB74D" bgcolor_top="" bordercolor="" borderwidth="" borderradius="5" fontsize="" fontweight="" fontawesome_after="fa-angle-right" shadow="#FFB300" ref=""]
詳しくはコチラ(レッド)のショートコード
[/] shortcode
[st-mybutton-mini url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#ef5350" bgcolor_top="" bordercolor="" borderwidth="" borderradius="5" fontsize="" fontweight="" fontawesome_after="fa-angle-right" shadow="#f44336" ref=""]
詳しくはコチラ(グリーン)のショートコード
[/] shortcode
[st-mybutton-mini url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#9CCC65" bgcolor_top="" bordercolor="" borderwidth="" borderradius="5" fontsize="" fontweight="" fontawesome_after="fa-angle-right" shadow="#8BC34A" ref=""]
詳しくはコチラ(ブルー)のショートコード
[/] shortcode
[st-mybutton-mini url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#4FC3F7" bgcolor_top="" bordercolor="" borderwidth="" borderradius="5" fontsize="" fontweight="" fontawesome_after="fa-angle-right" shadow="#03A9F4" ref=""]

カスタムボタンのMCボタン

オレンジのショートコード
[/] shortcode
[st-mcbutton url="#" title="今すぐ申し込む" rel="" fontawesome="" target="" color="#fff" bgcolor="#FFD54F" bgcolor_top="#ffdb69" bordercolor="#FFEB3B" borderwidth="1" borderradius="5" fontweight="bold" fontsize="120" width="90" fontawesome_after="fa-chevron-right" shadow="#FFB300" ref="on" mcbox_bg="#fafafa" mcbox_color="" mcbox_title="太字のテキスト"]※マイクロコピーを書いてみよう[/st-mcbutton]

使用例

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

レッドのショートコード
[/] shortcode
[st-mcbutton url="#" title="今すぐ申し込む" rel="" fontawesome="" target="" color="#fff" bgcolor="#e53935" bgcolor_top="#f44336" bordercolor="#e57373" borderwidth="1" borderradius="5" fontweight="bold" fontsize="120" width="90" fontawesome_after="fa-chevron-right" shadow="#c62828" ref="on" mcbox_bg="#fafafa" mcbox_color="" mcbox_title="決断は今"]いつか必ず役に立つ[/st-mcbutton]

使用例

決断は今

今すぐ申し込む

いつか必ず役に立つ

グリーンのショートコード
[/] shortcode
[st-mcbutton url="#" title="今すぐ申し込む" rel="" fontawesome="" target="" color="#fff" bgcolor="#43A047" bgcolor_top="#66BB6A" bordercolor="#81C784" borderwidth="1" borderradius="5" fontweight="bold" fontsize="120" width="90" fontawesome_after="fa-chevron-right" shadow="#388E3C" ref="on" mcbox_bg="#fafafa" mcbox_color="" mcbox_title="太字のテキスト"]※マイクロコピーを書いてみよう[/st-mcbutton]

使用例

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

ブルーのショートコード
[/] shortcode
[st-mcbutton url="#" title="今すぐ申し込む" rel="" fontawesome="" target="" color="#fff" bgcolor="#039BE5" bgcolor_top="#29B6F6" bordercolor="#4FC3F7" borderwidth="1" borderradius="5" fontweight="bold" fontsize="120" width="90" fontawesome_after="fa-chevron-right" shadow="#039BE5" ref="on" mcbox_bg="#fafafa" mcbox_color="" mcbox_title="太字のテキスト"]※マイクロコピーを書いてみよう[/st-mcbutton]

使用例

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

カスタムボタンのボックスメニュー

基本(4列)のショートコード
[/] shortcode
[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューA" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューB" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューC" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューD" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]
fontawasomeでアイコンゲットして、記事にリンクを張ると
[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="" fontawesome="fa-heart" icon_size="" text="ハート" subtext="" url="https://kokoroyasuku.com/melody/" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-home" icon_size="" text="おうち" subtext="" url="https://kokoroyasuku.com/home-train/" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-diamond" icon_size="" text="ダイヤモンド" subtext="" url="https://kokoroyasuku.com/tezukurimasuku/" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-camera" icon_size="" text="カメラ" subtext="" url="https://kokoroyasuku.com/video-editing/" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]
クリックして指定したページを表示できます。
[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="https://kokoroyasuku.com/wp-content/uploads/2020/04/kahun.png" fontawesome="fa-wordpress" icon_size="" text="花粉症克服" subtext="" url="https://kokoroyasuku.com/kahun/" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューB" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューC" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューD" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]
icon_imageにメディアを指定するとそのメディアがfontawesomeより優先して表示されました。

使用例

fontawasomeでアイコンゲットして、記事にリンクを張ると

クリックして指定したページを表示できます。

icon_imageにメディアを指定するとそのメディアがfontawesomeより優先して表示されました。

サブあり(4列)
[/] shortcode
[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューA" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューB" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューC" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューD" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]
縦並びタイプのショートコード
[/] shortcode
[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type="vertical"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューA" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューB" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューC" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューD" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]

使用例

横並びから、縦並びになりました。

縦並びタイプ(サブあり)のショートコード
[/] shortcode
[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type="vertical"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューA" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューB" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューC" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューD" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]
縦並びタイプ(単品)のショートコード
[/] shortcode
[st-box-btn myclass="" pc_show="1" margin="0 0 10px 0" type="vertical"][st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューA" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"][/st-box-btn]

使用例

1つのリンクのみでした、

カスタムボタンのボタンA

[/] shortcode
<div class="rankstlink-r2">
<a href="#">ボタンA</a>
</div>

使用例

カスタムボタンのボタンB

[/] shortcode
<div class="rankstlink-l2">
<a href="#">ボタンB</a>
</div>

使用例

タグ編集 会話ふきだし

会話1(r]で反対向き)のショートコード

[/] shortcode
[st-kaiwa1]ブログを始めるよ[/st-kaiwa1]
[st-kaiwa2 r]何から始めればいいの?[/st-kaiwa2]
[st-kaiwa3]学校休みだから私もやるよ[/st-kaiwa3]
[st-kaiwa4 r]どうやって遊ぶの[/st-kaiwa4]
[st-kaiwa5]少しずつやっていけばいいからね[/st-kaiwa5]

使用例

yasuhiro
ブログを始めるよ
何から始めればいいの?
やっちん
まころ
学校休みだから私もやるよ
どうやって遊ぶの
なない
ひさくん
少しずつやっていけばいいからね

タグ編集 ランキング

ランキング

ランキングショートコードのガイド
 カスタマイズ
[st-rank
rankno="ランキング(1~3又は空)"
bgcolor="背景色"
color="文字色"
bordercolor="枠線カラー"
radius="角丸(px)"
star="スター(5,4,3,2,1)"]ここにテキスト[/st-rank]

ランキングのランキング1位(基本)

[/] shortcode
[st-rank rankno="1" bgcolor="" color="#000" bordercolor="#ccc" radius="" star="5"]おめでとう[/st-rank]

使用例

おめでとう

ランキングのランキング2位

[/] shortcode
[st-rank rankno="2" bgcolor="" color="#000" bordercolor="#ccc" radius="" star="4"]あと少しだったね[/st-rank]

使用例

あと少しだったね

ランキングのランキング3位

[/] shortcode
[st-rank rankno="3" bgcolor="" color="#000" bordercolor="#ccc" radius="" star="3"]おしい[/st-rank]

使用例

おしい

ランキングのランキング4位以下

[/] shortcode
[st-rank rankno="4" bgcolor="" color="#000" bordercolor="#ccc" radius="" star="2"]次回は上位に行こう[/st-rank]

使用例

次回は上位に行こう

ランキングのID

[/] shortcode
[st_af id=""]

使用例

ランキングのSlug

[/] shortcode
[st_af name=""]

使用例

ランキングのRANK

[/] shortcode
[st-rankgroup id="1" label="" name=""]

使用例

タグ編集 レイアウト

レイアウトの全サイズ

左右30:70%
[/] shortcode
<div class="clearfix responbox30 smart30" >
<div class="lbox" style="border-right:solid;">
このテキストは最後に消して下さい(30%)
</div>
<div class="rbox">
このテキストは最後に消して下さい(70%)
</div>
</div>

使用例

このテキストは最後に消して下さい(30%)

このテキストは最後に消して下さい(70%)

左右50%
[/] shortcode
<div class="clearfix responbox50 smart50">
<div class="lbox" style="border-right:solid;">
このテキストは最後に消して下さい(50%)
</div>
<div class="rbox">
このテキストは最後に消して下さい(50%)
</div>
</div>

使用例

このテキストは最後に消して下さい(50%)

このテキストは最後に消して下さい(50%)

左右free50%
[/] shortcode
<div class="clearfix responboxfree smartfree">
<div class="lbox" style="width: 50%;border-right:solid;">
このテキストは最後に消して下さい(%)
</div>
<div class="rbox" style="width: 50%;">
このテキストは最後に消して下さい(%)
</div>
</div>

使用例

このテキストは最後に消して下さい(%)

このテキストは最後に消して下さい(%)

以下は style="width: 30%;" に 変えてみた表示です。行全体の幅に対する割合指定です。

[/] shortcode
<div class="clearfix responboxfree smartfree">
<div class="lbox" style="width: 30%;border-right:solid;">
このテキストは最後に消して下さい(%)
</div>
<div class="rbox" style="width: 50%;">
このテキストは最後に消して下さい(%)
</div>
</div>

使用例

このテキストは最後に消して下さい(%)

このテキストは最後に消して下さい(%)

均等横並び
[/] shortcode
<div class="kintou">
<ul>
<li>横並びコンテンツ</li>
<li>横並びコンテンツ</li>
<li>横並びコンテンツ</li>
</ul>
</div>

使用例

  • 横並びコンテンツ
  • 横並びコンテンツ
  • 横並びコンテンツ

画面の表示幅が変わっても均等割表示になります。

レイアウトのPCとTab(959px以上)

3分割
[/] shortcode
<div class="clearfix responbox33">
<div class="lbox">
このテキストは最後に消して下さい(33%)
</div>
<div class="lbox">
このテキストは最後に消して下さい(33%)
</div>
<div class="lbox">
このテキストは最後に消して下さい(33%)
</div>
</div>

使用例

このテキストは最後に消して下さい(33%)

このテキストは最後に消して下さい(33%)

このテキストは最後に消して下さい(33%)

表示の横幅が959px以下になると縦に表示されます。

左右 30:70%
[/] shortcode
<div class="clearfix responbox30">
<div class="lbox">
このテキストは最後に消して下さい(30%)
</div>
<div class="rbox">
このテキストは最後に消して下さい(70%)
</div>
</div>

使用例

このテキストは最後に消して下さい(30%)

このテキストは最後に消して下さい(70%)

左右 70:30%
[/] shortcode
<div class="clearfix responbox70">
<div class="lbox">
このテキストは最後に消して下さい(70%)
</div>
<div class="rbox">
このテキストは最後に消して下さい(30%)※モバイル(599px以下)ではこちらが上になります
</div>
</div>

使用例

このテキストは最後に消して下さい(70%)

このテキストは最後に消して下さい(30%)※モバイル(599px以下)ではこちらが上になります

左右 40:60%
[/] shortcode
<div class="clearfix responbox">
<div class="lbox">
このテキストは最後に消して下さい(40%)
</div>
<div class="rbox">
このテキストは最後に消して下さい(60%)
</div>
</div>

使用例

このテキストは最後に消して下さい(40%)

このテキストは最後に消して下さい(60%)

左右 60:40%
[/] shortcode
<div class="clearfix responbox60">
<div class="lbox">
このテキストは最後に消して下さい(60%)
</div>
<div class="rbox">
このテキストは最後に消して下さい(40%)※モバイル(599px以下)ではこちらが上になります
</div>
</div>

使用例

このテキストは最後に消して下さい(60%)

このテキストは最後に消して下さい(40%)※モバイル(599px以下)ではこちらが上になります

左右 50%
[/] shortcode
<div class="clearfix responbox50">
<div class="lbox">
このテキストは最後に消して下さい(50%)
</div>
<div class="rbox">
このテキストは最後に消して下さい(50%)
</div>
</div>

使用例

このテキストは最後に消して下さい(50%)

このテキストは最後に消して下さい(50%)

レイアウトのDIV

メイン
[/] shortcode
[st-div class="" margin="0 0 20px 0" padding="0 0 0 0" add_style=""]
DIV に装飾を付けられる。
[/st-div]

使用例

DIV に装飾を付けられる。

サブ
[/] shortcode
[st-div-a class="" margin="0 0 20px 0" padding="0 0 0 0" add_style=""]
サブはどうやって使うんだろう?
[/st-div-a]

使用例

サブはどうやって使うんだろう?

レイアウトの背景ワイド

[/] shortcode
[st-wide-background myclass="" backgroud_image="" bgcolor="#fafafa" align="" add_style=""]
背景ワイド!行の幅いっぱいが背景になった。
[/st-wide-background]

使用例

背景ワイド!行の幅いっぱいが背景になった。

レイアウトのタブ(切り替えボタン)

2つ
[/] shortcode
[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab fontawesome="fa-heart" text="今の心" bgcolor="" bordercolor="" color="" fontweight="" checked="checked"]
[st-input-tab fontawesome="fa-diamond" text="変わる心" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-tab-main bgcolor="" bordercolor=""]
心はいつも穏やか
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
より心が豊かに!
[/st-tab-main]
[/st-tab-content]

使用例




心はいつも穏やか

より心が豊かに!


3つ
[/] shortcode
[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab fontawesome="" text="タブ1" bgcolor="" bordercolor="" color="" fontweight="" checked="checked"]
[st-input-tab fontawesome="" text="タブ2" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-input-tab fontawesome="" text="タブ3" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-tab-main bgcolor="" bordercolor=""]
タブ1のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
タブ2のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
タブ3のコンテンツ
[/st-tab-main]
[/st-tab-content]

使用例





タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ


4つ
[/] shortcode
[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab fontawesome="" text="タブ1" bgcolor="" bordercolor="" color="" fontweight="" checked="checked"]
[st-input-tab fontawesome="" text="タブ2" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-input-tab fontawesome="" text="タブ3" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-input-tab fontawesome="" text="タブ4" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-tab-main bgcolor="" bordercolor=""]
タブ1のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
タブ2のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
タブ3のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
タブ4のコンテンツ
[/st-tab-main]
[/st-tab-content]

使用例






タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ

タブ4のコンテンツ


レイアウトのタブ

2つ
[/] shortcode
[st-tab-content memo="全体を包むボックスです" myclass=""]
[st-input-tab fontawesome="" text="タブ1" bgcolor="#fff" bordercolor="" color="#1a1a1a" fontweight="" width="45" value="1" checked="checked"]
[st-input-tab fontawesome="" text="タブ2" bgcolor="#fff" bordercolor="" color="#1a1a1a" fontweight="" width="45" value="2" checked=""]
[st-tab-main bgcolor="" bordercolor="" value="1"]
タブ1のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor="" value="2"]
タブ2のコンテンツ
[/st-tab-main]
[/st-tab-content]

使用例




タブ1のコンテンツ

タブ2のコンテンツ


タブの間に隙間があります。

3つ
[/] shortcode
[st-tab-content memo="全体を包むボックスです" myclass=""]
[st-input-tab fontawesome="" text="タブ1" bgcolor="#fff" bordercolor="" color="#1a1a1a" fontweight="" width="30" value="1" checked="checked"]
[st-input-tab fontawesome="" text="タブ2" bgcolor="#fff" bordercolor="" color="#1a1a1a" fontweight="" width="30" value="2" checked=""]
[st-input-tab text="タブ3" bgcolor="#fff" bordercolor="" color="#1a1a1a" fontweight="" width="30" value="3" checked=""]
[st-tab-main bgcolor="" bordercolor="" value="1"]
タブ1のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor="" value="2"]
タブ2のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor="" value="3"]
タブ3のコンテンツ
[/st-tab-main]
[/st-tab-content]

使用例





タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ


レイアウトのタイムライン

基本
[/] shortcode
[st-timeline myclass="" add_style=""]
[st-timeline-list text="HTMLの学習" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]
ドットインストールのビデオ学習
[/st-timeline-list]
[st-timeline-list text="CSSの学習" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]
YouTubeの海外サイトのビデオ学習
[/st-timeline-list]
[st-timeline-list text="組み合わせの学習" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]
YouTubeの国内サイトのビデオ学習
[/st-timeline-list]
[/st-timeline]

使用例


  • HTMLの学習

    ドットインストールのビデオ学習


  • CSSの学習

    YouTubeの海外サイトのビデオ学習


  • 組み合わせの学習

    YouTubeの国内サイトのビデオ学習


時系列での事柄を表現できます。

センター
[/] shortcode
[st-timeline myclass="" add_style=""]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center="on"]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center="on"]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center="on"]
ここにコンテンツ
[/st-timeline-list]
[/st-timeline]

使用例


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


進捗を表示するポインターの位置が記事の中心になります。

基本(ステップ)
[/] shortcode
[st-timeline myclass="" add_style=""]
[st-timeline-list text="step.1" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center=""]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="step.2" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center=""]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="step.3" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center=""]
ここにコンテンツ
[/st-timeline-list]
[/st-timeline]

使用例


  • step.1

    ここにコンテンツ


  • step.2

    ここにコンテンツ


  • step.3

    ここにコンテンツ


テキストがデフォルトでstepになっています、あとは同じコード。

センター(ステップ)
[/] shortcode
[st-timeline myclass="" add_style=""]
[st-timeline-list text="step.1" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center="on"]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="step.2" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center="on"]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="step.3" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center="on"]
ここにコンテンツ
[/st-timeline-list]
[/st-timeline]

使用例


  • step.1

    ここにコンテンツ


  • step.2

    ここにコンテンツ


  • step.3

    ここにコンテンツ


ブログカード
[/] shortcode
[st-timeline myclass="" add_style=""]
[st-timeline-list myclass="" bgcolor="" center="on"][st-card myclass="" id="359" pc_height="" name="" bgcolor="" color="" readmore="on" thumbnail="on"][/st-timeline-list]
[st-timeline-list myclass="" bgcolor="" center="on"][st-card myclass="" id="531" pc_height="" name="" bgcolor="" color="" readmore="on" thumbnail="on"][/st-timeline-list]
[st-timeline-list myclass="" bgcolor="" center="on"][st-card myclass="" id="545" pc_height="" name="" bgcolor="" color="" readmore="on" thumbnail="on"][/st-timeline-list]
[/st-timeline]

レイアウトのタイムライン(カウント)

基本
[/] shortcode
[st-timeline myclass="st-timeline-count" add_style=""]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]
ここにコンテンツ
[/st-timeline-list]
[/st-timeline]

使用例


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


センター
[/] shortcode
[st-timeline myclass="st-timeline-count" add_style=""]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center="on"]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center="on"]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center="on"]
ここにコンテンツ
[/st-timeline-list]
[/st-timeline]

使用例


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


ブログカード
[/] shortcode
[st-timeline myclass="st-timeline-count" add_style=""]
[st-timeline-list myclass="" bgcolor="" center="on"][st-card myclass="" id="359" pc_height="" name="" bgcolor="" color="" readmore="on" thumbnail="on"][/st-timeline-list]
[st-timeline-list myclass="" bgcolor="" center="on"][st-card myclass="" id="531" pc_height="" name="" bgcolor="" color="" readmore="on" thumbnail="on"][/st-timeline-list]
[st-timeline-list myclass="" bgcolor="" center="on"][st-card myclass="" id="545" pc_height="" name="" bgcolor="" color="" readmore="on" thumbnail="on"][/st-timeline-list]
[/st-timeline]

タグ編集 その他パーツ

その他のパーツのGoogleアイコン

Googleアイコン一覧
[/] shortcode
[st-google-icon googleicon="desktop_mac" fontsize="" color=""] Mac
[st-google-icon googleicon="phone_iphone" fontsize="" color=""] iphone
[st-google-icon googleicon="tablet_mac" fontsize="" color=""] tablet
[st-google-icon googleicon="timer" fontsize="" color=""] timer
[st-google-icon googleicon="location_on" fontsize="" color=""] MAP
[st-google-icon googleicon="directions_bike" fontsize="" color=""] 自転車
[st-google-icon googleicon="directions_run" fontsize="" color=""] 走る
[st-google-icon googleicon="directions_car" fontsize="" color=""][st-google-icon googleicon="directions_transit" fontsize="" color=""] 電車
[st-google-icon googleicon="subway" fontsize="" color=""] 地下鉄
[st-google-icon googleicon="flight" fontsize="" color=""] 飛行機
[st-google-icon googleicon="local_parking" fontsize="" color=""] 駐車場
[st-google-icon googleicon="restaurant" fontsize="" color=""] レストラン
[st-google-icon googleicon="store_mall_directory" fontsize="" color=""] ストア
[st-google-icon googleicon="cake" fontsize="" color=""] ケーキ
[st-google-icon googleicon="smoking_rooms" fontsize="" color=""] タバコ
[st-google-icon googleicon="arrow_back" fontsize="" color=""] 矢印(左)
[st-google-icon googleicon="arrow_downward" fontsize="" color=""] 矢印(下)
[st-google-icon googleicon="arrow_forward" fontsize="" color=""] 矢印(右)
[st-google-icon googleicon="arrow_upward" fontsize="" color=""] 矢印(上)
[st-google-icon googleicon="radio_button_unchecked" fontsize="" color=""] マル
[st-google-icon googleicon="close" fontsize="" color=""] バツ
[st-google-icon googleicon="mood" fontsize="" color=""] 顔(笑顔)
[st-google-icon googleicon="mood_bad" fontsize="" color=""] 顔(悪い)
[st-google-icon googleicon="sentiment_satisfied" fontsize="" color=""] 顔(満足)
[st-google-icon googleicon="sentiment_very_dissatisfied" fontsize="" color=""] 顔(不満)
[st-google-icon googleicon="thumb_up_alt" fontsize="" color=""] 手(Like)
[st-google-icon googleicon="thumb_down_alt" fontsize="" color=""] 手(Bad)
[st-google-icon googleicon="error" fontsize="" color=""] !(error)
[st-google-icon googleicon="new_releases" fontsize="" color=""] !(new)

使用例

desktop_mac Mac

phone_iphone iphone

tablet_mac tablet

timer timer

location_on MAP

directions_bike 自転車

directions_run 走る

directions_car

directions_transit 電車

subway 地下鉄

flight 飛行機

local_parking 駐車場

restaurant レストラン

store_mall_directory ストア

cake ケーキ

smoking_rooms タバコ

arrow_back 矢印(左)

arrow_downward 矢印(下)

arrow_forward 矢印(右)

arrow_upward 矢印(上)

radio_button_unchecked マル

close バツ

mood 顔(笑顔)

mood_bad 顔(悪い)

sentiment_satisfied 顔(満足)

sentiment_very_dissatisfied 顔(不満)

thumb_up_alt 手(Like)

thumb_down_alt 手(Bad)

error !(error)

new_releases !(new)

スター 一覧
[/] shortcode
[star5] スター(5)
[star45] スター(4.5)
[star4] スター(4)
[star35] スター(3.5)
[star3] スター(3)
[star2] スター(2)
[star1] スター(1)

使用例

スター(5)

スター(4.5)

スター(4)

スター(3.5)

スター(3)

スター(2)

スター(1)

その他のパーツの画像付きコメント

[/] shortcode
[st-user-comment-box title="最近はスポーツジムも休館していて体が硬くなってきた" user_text="60代男性" color="" star="2"]<a href="https://kokoroyasuku.com/wp-content/uploads/2020/04/kao1-e1588235192816.png"><img class="alignnone size-full wp-image-2686" src="https://kokoroyasuku.com/wp-content/uploads/2020/04/kao1-e1588235192816.png" alt="" width="60" height="60" /></a>[/st-user-comment-box]

使用例

最近はスポーツジムも休館していて体が硬くなってきた。

60代男性

その他のパーツのアドセンス

[/] shortcode
[adsense]

使用例

スポンサーリンク

その他のパーツのオリジナルショートコード

[/] shortcode
[originalsc]

使用例

その他のパーツのYouYube

[/] shortcode
[youtube id=fCWpzRsaQ1w]

使用例

その他のパーツの三角(下矢印)

[/] shortcode
[st-under-t color="#000"]

使用例

その他のパーツのスクロールナビ

[/] shortcode
<div id="st_listnavi_wrapper">
<ul class="st-sc-listnavi-box">
<li class="st-sc-listnavi"><a href="https://kokoroyasuku.com/kahun/">花粉症から守ってくれたアイテムたち</a></li>
<li class="st-sc-listnavi"><a href="https://kokoroyasuku.com/home-train/">おうちで運動、周りを型付けて体をぶつけない。</a></li>
<li class="st-sc-listnavi"><a href="https://kokoroyasuku.com/daijyu20200315/">ゴルフ練習、練習目的をひとつにしぼろう!</a></li>
<li class="st-sc-listnavi"><a href="https://kokoroyasuku.com/tezukurimasuku/">手作りマスク、当分市販のマスクは手に入りません。</a></li>
<li class="st-sc-listnavi"><a href="https://kokoroyasuku.com/video-editing/">動画編集、やってみると面白い。</a></li>
</ul>
</div>

その他のパーツの目次(カスタム)

[/] shortcode
<div id="st_toc_container" class="only-toc">
<p class="st_toc_title">目次</p>
<ul class="st_toc_list">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>

使用例

独自で目次ができますが、くつろぎブログでは専用のプラグインを使用しています。

その他のパーツの目次(TOC+)

[/] shortcode
[toc]

使用例

[toc]

一般の目次プラグイン専用です。

タグ編集 記事一覧/カード

記事一覧/カードの記事一覧

[/] shortcode
[st-postgroup id="359" rank="1"]

使用例

potose1

未分類

ポトス。

2020/3/20    , ,

ポトスがかなり大きく成長しました。植物の成長と強さに いつも凄いなって思います。 部屋の中に植物があると、なぜかはわからないけれど 何となく癒されます。世話をしてくれている妻に感謝。

記事一覧/カードのカテゴリー一覧

[/] shortcode
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"]

使用例

パソコン

windowsで動画編集

デスクトップ画面を動画で記録・編集する方法。 Windowsにパワーポイントがインストールされていれば、デスクトップ画面を動画で記録して編集ができます。 パソコンの操作説明に使えますので、その方法を以 ...

未分類

特別定額給付金申請

特別定額給付金申請 瀬戸市もオンラインの特別給付金申請が始まっていましたので、iPhoneから申請を行いました。 確定申告に続きマイナンバーカードの数少ない活躍の場です。 申請が終わりメールで申請の控 ...

季節

花粉症を抑えてくれたもの

花粉症を抑えてくれたもの 2020/4/24 今日の時点で今年はまだ花粉症の症状がでていません。 今年の花粉症の発症を抑えてくれたものたちです。 目の対策 鼻の対策 顔の対策 いつもの年であれば、鼻が ...

スポーツ

おうちで運動

おうちで運動 運動が足りていません。 新型コロナウイルスを抑えるため、外出の自粛が続いています。 ジムもお休みなので自宅でできる運動動画をYouTubeから探しました。 これが続けられれば、きっと体に ...

masukutezukuri

未分類

マスクを手作り

年の初めから始まったコロナウイルスの感染拡大。 始めは他人事でしたが、なかなか終息する気配もなく日常の生活に支障が出てきています。 諸外国では、外出の自粛を強要しており。日本国内でも不要不急の外出を自 ...

記事一覧/カードのカテゴリー一覧(スライドショー)

[/] shortcode
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,1" slide_date="" slide_more="ReadMore" slide_center="on" fullsize_type=""]

使用例

パソコン

2020/9/2

windowsで動画編集

デスクトップ画面を動画で記録・編集する方法。 Windowsにパワーポイントがインストールされていれば、デスクトップ画面を動画で記録して編集ができます。 パソコンの操作説明に使えますので、その方法を以下の例で解説します。 パソコン起動時、Outlookも自動起動するように設定する説明動画作成。 step1パワーポイントの挿入タブから画面録画を選択して画面を録画 パワーポイントを起動して、新しいプレゼンテーションを作成します。 挿入タブから画面録画を選択。 領域の選択を選んで録画する画面範囲を指定したあと、 ...

ReadMore

未分類

2020/5/13

特別定額給付金申請

特別定額給付金申請 瀬戸市もオンラインの特別給付金申請が始まっていましたので、iPhoneから申請を行いました。 確定申告に続きマイナンバーカードの数少ない活躍の場です。 申請が終わりメールで申請の控えが届きますが、添付のCSVファイルがエクセルで文字化けして見えませんでした。 調べると文字コードがホームページでは一般に使うUTF-8で保存されています。 見えないという人は以下の方法でファイルを開いてみてください。 step1データの読み込み方法を指定 エクセルを新規作成した後、データタブの中にあるテキス ...

ReadMore

季節

2020/4/26

花粉症を抑えてくれたもの

花粉症を抑えてくれたもの 2020/4/24 今日の時点で今年はまだ花粉症の症状がでていません。 今年の花粉症の発症を抑えてくれたものたちです。 目の対策 鼻の対策 顔の対策 いつもの年であれば、鼻が詰まったり目が痒かったりと大変な思いをしつつ のみ薬で頭がぽーっとなっていましたが、今年はほぼ無症状でシーズンを終えられそうです。 もう一つは、コロナウイルス対策でマスクをしていたのも効果があった気がします。  

ReadMore

スポーツ

2020/4/24

おうちで運動

おうちで運動 運動が足りていません。 新型コロナウイルスを抑えるため、外出の自粛が続いています。 ジムもお休みなので自宅でできる運動動画をYouTubeから探しました。 これが続けられれば、きっと体に変化があると信じてやりましょう。 あと1本は japanese Yoga から 免疫力を上げるヨガの紹介です。 この動画とプランクを軸に頑張ろう。 最近肩こりをするようになったので、そんな時は次の動画で解消! スポーツクラブアクトスが休館中なので動画をUPしてくれました。 最低これは毎日やっていこう。

ReadMore

masukutezukuri

未分類

2020/3/31

マスクを手作り

年の初めから始まったコロナウイルスの感染拡大。 始めは他人事でしたが、なかなか終息する気配もなく日常の生活に支障が出てきています。 諸外国では、外出の自粛を強要しており。日本国内でも不要不急の外出を自粛す津ように各都道府県が要請を出しています。 お花見の季節で、一年で一番心が華やぐ時期ではありますが どうやら今年はおとなしく、コロナウイルスとの戦いに勝つため家の中でじっとしているのがよさそうです。

ReadMore

記事一覧/カードのスライドショー(画像のみ)

[/] shortcode
<div class="st-slider-img">画像のみ</div>

使用例

画像のみ

記事一覧/カードのおすすめ記事一覧

[/] shortcode
[st-osusume]

使用例

記事一覧/カードのブログカード

参考のショートコード
[/] shortcode
[st-card myclass="st-no-shadow" id="359" label="参考" pc_height="" name="" bgcolor="#cccccc" color="#ffffff" fontawesome="fa-file-text-o" readmore="on" thumbnail="on" type="text"]
CHECK(ふきだし)のショートコード
[/] shortcode
[st-div class="" margin="0 0 -5px -5px" padding="0 0 0 0" add_style=""][st-minihukidashi fontawesome="fa-check" fontsize="" fontweight="bold" bgcolor="#FFECB3" color="" margin="0 0 0 0" radius="30" position="" add_boxstyle=""]こちらもCHECK[/st-minihukidashi][/st-div][st-card myclass="st-card-minihukidashi" id="359" label="" pc_height="" name="" bgcolor="#cccccc" color="" fontawesome="" readmore="on" thumbnail="on" type=""]

タグ編集 条件表示

条件表示のコメントアウト

[/] shortcode
[st-out]コメントアウト[/st-out]

使用例

何も表示はされません。

条件表示のエディッタ用メモ

[/] shortcode
[st-comment-out memo="メモ"]

使用例

何も表示はされません。

条件表示のPC閲覧時のみ表示

[/] shortcode
[pc]PCでは表示します[/pc]

使用例

PCでは表示します

iPhoneでは何も表示しません。

条件表示のPC閲覧時のみ非表示

[/] shortcode
[nopc]PCでは表示していません[/nopc]

使用例

PCでは何も表示しません。

条件表示のAMPページのみ表示

[/] shortcode
[st-amp]AMPページでは表示[/st-amp]

使用例

AMPページかそうでないのかわかりますね。

条件表示のAMPページのみ非表示

[/] shortcode
[st-no-amp]AMPページでは非表示[/st-no-amp]

使用例

AMPページでは非表示

AMPページかそうでないのかわかりますね。

条件表示のフロントページのみ表示

[/] shortcode
[frontonly]フロントページにのみ表示します。[/frontonly]

使用例

フロントページかかそうでないのかわかりますね。

条件表示のフロントページのみ非表示

[/] shortcode
[no-frontonly]フロントページにのみ非表示します。[/no-frontonly]

使用例

フロントページにのみ非表示します。

フロントページかかそうでないのかわかりますね。

条件表示の指定したカテゴリーIDのみ非表示

[/] shortcode
[catonly cat="1"]未分類を非表示[/catonly]

使用例

タグ編集 ショートコード補助

ショートコード補助のWebアイコン(クラス)

アイコン一覧
[/] shortcode
[st-mybox title="メモ" fontawesome="fa-file-text-o" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="チェック" fontawesome="fa-check" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="チェック(v)" fontawesome="fa-check-circle" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="チェック〔v〕" fontawesome="st-svg-checkbox" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="注意" fontawesome="fa-exclamation-circle" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="はてな" fontawesome="fa-question-circle" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="虫メガネ" fontawesome="fa-search" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="虫メガネ(+)" fontawesome="fa-search-plus" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="矢印右" fontawesome="fa-chevron-right" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="矢印下" fontawesome="fa-chevron-down" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="矢印右2" fontawesome="fa-angle-double-right" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="矢印下2" fontawesome="fa-angle-double-down" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="矢印右3" fontawesome="fa-angle-right" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="矢印下3" fontawesome="fa-angle-down" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="ハート" fontawesome="fa-heart" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="ユーザー" fontawesome="fa-user" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="コメント" fontawesome="fa-comments" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="電球" fontawesome="fa-lightbulb-o" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="お知らせ" fontawesome="fa-bullhorn" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="メール" fontawesome="fa-envelope" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="コード" fontawesome="fa-code" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="ギフト" fontawesome="fa-gift" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="ダイヤモンド" fontawesome="fa-diamond" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="ダウンロード" fontawesome="fa-download" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="Twitter" fontawesome="fa-twitter" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="facebook" fontawesome="fa-facebook-square" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="youtube" fontawesome="fa-youtube-play" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="amazon" fontawesome="fa-amazon" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="王冠" fontawesome="st-svg-oukan" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]
[st-mybox title="初心者" fontawesome="st-svg-bigginer_l" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"][/st-mybox]

メモ

チェック

チェック(v)

チェック〔v〕

注意

はてな

虫メガネ

虫メガネ(+)

矢印右

矢印下

矢印右2

矢印下2

矢印右3

矢印下3

ハート

ユーザー

コメント

電球

お知らせ

メール

コード

ギフト

ダイヤモンド

ダウンロード

Twitter

facebook

youtube

amazon

王冠

初心者

ショートコード補助のアニメーション(クラス)

実際に使用する時にはビジュアル画面でコードを確認、コピーしたものをテキスト画面で貼り付けます。

45°揺れ
[/] shortcode
<span class="fa faa-wrench animated st-animate">45°揺れ</span>

使用例

45°揺れ

ベル揺れ
[/] shortcode
<span class="fa faa-ring animated st-animate">ベル揺れ</span>

使用例

ベル揺れ

横揺れ
[/] shortcode
<span class="fa faa-horizontal animated st-animate">横揺れ</span>

使用例

横揺れ

縦揺れ
[/] shortcode
<span class="fa faa-vertical animated st-animate">縦揺れ</span>

使用例

縦揺れ

点滅
[/] shortcode
<span class="fa faa-flash animated st-animate">点滅</span>

使用例

点滅

バウンド
[/] shortcode
<span class="fa faa-bounce animated st-animate">バウンド</span>

使用例

バウンド

回転
[/] shortcode
<span class="fa faa-spin animated st-animate">回転</span>

使用例

回転

ふわふわ
[/] shortcode
<span class="fa faa-float animated st-animate">ふわふわ</span>

使用例

ふわふわ

大小
[/] shortcode
<span class="fa faa-pulse animated st-animate">大小</span>

使用例

大小

シェイク
[/] shortcode
<span class="fa faa-shake animated st-animate">シェイク</span>

使用例

シェイク

シェイク(大)
[/] shortcode
<span class="fa st-shake st-animate">シェイク(大)</span>

使用例

シェイク(大)

拡大揺れ
[/] shortcode
<span class="fa faa-tada animated st-animate">拡大揺れ</span>

使用例

拡大揺れ

過ぎる
[/] shortcode
<span class="fa faa-passing animated st-animate">過ぎる</span>

使用例

過ぎる

戻る
[/] shortcode
<span class="fa faa-passing-reverse animated st-animate">戻る</span>

使用例

戻る

バースト
[/] shortcode
<span class="fa faa-burst animated st-animate">バースト</span>

使用例

バースト

落ちる
[/] shortcode
<span class="fa faa-falling animated st-animate">落ちる</span>

使用例

落ちる

ショートコード補助のHTMLカラーコード

カラーコード一覧
[/] shortcode
<p style="color: #ffffff; background: #000000;width:50px;">白文字</p>
<p style="color: #e53935; background: #fff;">赤濃</p>
<p style="color: #f44336;"></p>
<p style="color: #ffebee;">赤薄</p>
<p style="color: #039be5;">青濃</p>
<p style="color: #03a9f4;"></p>
<p style="color: #e1f5fe;">青薄</p>
<p style="color: #43a047;">緑濃</p>
<p style="color: #4caf50;"></p>
<p style="color: #e8f5e9;">緑薄</p>
<p style="color: #ffb300;">橙濃</p>
<p style="color: #ffc107;"></p>
<p style="color: #fff3e0;">橙薄</p>
<p style="color: #212121;">黒濃</p>
<p style="color: #424242"></p>
<p style="color: #FAFAFA;">黒薄</p>
<p style="color: #FFFDE7;">黄薄</p>

使用例

白文字

赤濃

赤薄

青濃

青薄

緑濃

緑薄

橙濃

橙薄

黒濃

黒薄

黄薄

ショートコード補助のHTMLカラーコード(ブランド)

カラーコード一覧
[/] shortcode
<p style="color: #40a2f5;">Twitter</p>
<p style="color: #415c9d;">Facebook</p>
<p style="color: #3290e1;">hatena</p>
<p style="color: #2d88c0;">WordPress</p>
<p style="color: #eb9100;">amazon</p>
<p style="color: #39b900;">LINE</p>

使用例

Twitter

Facebook

hatena

WordPress

amazon

LINE

ショートコード補助の定型文

\バンザイ/
[/] shortcode
\ バンザイ /

使用例

\ バンザイ /

詳細は公式サイトにて
[/] shortcode
※時期により内容が異なる場合がございます。詳細は公式サイトにてご確認下さいませ。

使用例

※時期により内容が異なる場合がございます。詳細は公式サイトにてご確認下さいませ。

無断使用禁止
[/] shortcode
※掲載されている文字、写真、イラスト等は著作権の対象となっています。無断利用を固く禁止しております。

使用例

※掲載されている文字、写真、イラスト等は著作権の対象となっています。無断利用を固く禁止しております。

ダミーテキスト
[/] shortcode
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです

使用例

これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです

以上で紹介を終わります、個別に要素が変更できますのでとても自由度が高いテーマです。

編集メニュー

ビジュアル編集画面にあるメニューの使い方を解説します。

WordPressでプラグインを入れていない初期状態の編集メニューはとても少ないです。

 ビジュアル編集画面のメニュー

 テキスト編集画面のメニュー

くつろぎブログでは プラグインの TinyMCE Advanced を導入したりAFFINGER5というテーマを使用しているため以下のようにかなり拡張されています。
追加機能は選択可能です。

この画面について解説します。

ファイル

印刷

使用例

編集している投稿ページをそのまま印刷してくれます。

編集

元に戻す

使用例

操作を間違えた時に、間違える前の状態に戻します。ただし更新をしたら戻りません。

更新してしまった後に以前の状態に戻す方法は、画面右上にある公開ウイジェットのリビジョンで編集前の状態に戻せます。

やり直す

使用例

元に戻すボタンを押したあと、戻しすぎたりしたときに戻した操作を取り消せます。

切り取り

使用例

指定した範囲をクリップボードにコピーした後、指定した範囲を削除します。
編集位置を移動して、クリップボードから張り付けることができます。

コピー

使用例

指定した範囲をクリップボードにコピーします、指定した範囲はそのまま残ります。
編集位置を移動して、クリップボードから張り付けることができます。

張り付け

使用例

クリップボードに記憶された内容を、カーソルの位置に張り付けます。

テキストとしてペースト。

使用例

ビジュアル編集画面でコピーを行ったとき、HTMLタグも一緒に張り付けられてしまうのを防ぎます。

チェックを入れておくとテキストのみ張り付けられます。

すべて選択

使用例

ページ全体を全て選択します。

検索置き換え

使用例

ビジュアル表示されているテキストを置き換える事ができます。
HTMLタグは検索にかからないため置き換えできません。

表示

ソースコード

使用例

編集しているページのHTMLソースコードを表示してくれます。意図しない表示になったら原因を探せます。

ビジュアルエイド

使用例

使用テーマによって補完されているのかもしれませんが、くつろぎブログの環境ではチェックを外しても表示に変化はありませんでした。デフォルトでチェックが入っていたのでそのまま使用しています。

非表示文字を表示

使用例

くつろぎブログの環境ではチェックをしても表示に変化はありませんでした。

ブロックを表示

使用例

チェックを付けると、エディッタが認識している文章のかたまり(ブロック)が意図した通りになっているか確認できます。

フルスクリーン

使用例

編集画面が画面いっぱいに表示されます。

挿入

画像

使用例

設定を変えながら画像を挿入できますが、画像を見ながらの選択ではないので事前に挿入画像のURLを調べておく必要があります。

  の設定で

やっちん このように表示されます。ボーダーの種類が選べます。

こんなコードが作られました。

<img style="border-style: dotted; border-width: 5px; margin: 10px;" src="https://kokoroyasuku.com/wp-content/uploads/2020/04/kao.png" alt="やっちん" width="170" height="170" />

リンクの挿入/編集

使用例

リンクを設定することができます。メニューリボン下のリンクの挿入/編集ボタンと同じ機能です。

メディア

使用例

メディアの詳細を指定して挿入します。

 ここでHTMLの編集ができます。 の設定で

 が挿入されました。

こんなコードが作られました。

<audio src="https://kokoroyasuku.com/wp-content/uploads/2020/04/passer-montanus-cry1.mp3" controls="controls"></audio>

テーブル

[/] shortcode
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 33.3333%;"></td>
<td style="width: 33.3333%;"></td>
<td style="width: 33.3333%;"></td>
</tr>
<tr>
<td style="width: 33.3333%;"></td>
<td style="width: 33.3333%;"></td>
<td style="width: 33.3333%;"></td>
</tr>
</tbody>
</table>
[/st-mybox]

使用例

任意のテーブルが簡単に作成できます。

特殊文字

使用例

♥ 選択した特殊文字が挿入できます。

横ライン

使用例


明らかに文章が変わるときに使用します。単純に<hr>が挿入されました。

改行なしスペース

使用例

1番 2番 3番

普通にスペースが入るだけのようです。

アンカー

使用例

記事内の任意の行に移動することができます。例えばこの記事の 挿入という行をアンカーに設定してIDをjumpに設定しておけば

挿入に移動します。をクリックすれば挿入の説明文に移動します。

アンカーの次の行に移動するようです。

日付/時間

10:50:43

使用例

10:55:27

現在の時刻が挿入されます

2020-05-05

使用例

2020-05-05

現在の日付が挿入されます

10:53:43 AM

使用例

10:58:22 AM

現在時刻がAM PM表記で挿入されます

05/05/2020

使用例

05/05/2020

現在日付が表示の書式で挿入されます

メディアを追加

使用例

通常のメディアを追加と同じ機能でした。

メディアを選んで挿入できます。

「続きを読む」タグを挿入

使用例

続きを読む機能がうまく動いていないようです。

改ページ

ワープロみたいですが改ページを使うことは少ないと思います。

ここに以下のコードが挿入されますが、ぺーじが変わって後の解説が続かなくなるため実行はしません

<!--nextpage-->

この解説の最後に実際に改ページを入れてみます。

フォーマット

太字

[/] shortcode
<strong>太字はいろんな場所から設定できますね。</strong>

使用例

太字はいろんな場所から設定できますね。

イタリック

[/] shortcode
<em>日本語はイタリックにしても変わりません英数字は変わりますpeace of mind</em>

使用例

日本語はイタリックにしても変わりません英数字は変わりますpeace of mind

iPadでは斜体になっています、フォントがそれぞれ違うみたいですね。

下線

[/] shortcode
ここに出てくる<span style="text-decoration: underline;">クイックボタン</span>にもありますが、編集には欠かせません。

使用例

ここに出てくるクイックボタンにもありますが、編集には欠かせません。

取り消し線

[/] shortcode
取り消したことが意味を持つことに使います。<del>以前の解釈等</del>それ以外は消してしまいますよね。

使用例

取り消したことが意味を持つことに使います。以前の解釈等それ以外は消してしまいますよね。

上付き

[/] shortcode
主に計算式を書くのでしょうかx<sup>2</sup>+y<sup>2</sup>=100

使用例

主に計算式を書くのでしょうかx2+y2=100

下付き

[/] shortcode
化学式で使用できそうです。H<sub>2</sub>O

使用例

化学式で使用できそうです。H2O

コード

[/] shortcode
<code>&lt;p&gt;HTML&lt;/p&gt;</code>

使用例

<p>HTML</p>

HTMLのコードを実行することなく表示するときに使用します。

ブロック

段落

使用例

段落もいまいち使い方がわからないタグです。
何か変化がないか文章をかいていますが、囲んでも
なにも変化がないのです。

見出し2

使用例

見出し2です。

見出し3

使用例

見出し3です。

見出し4

使用例

見出し4です。

見出し5

使用例

見出し5です。
見出し6

使用例

見出し6です。

見出しのサンプルを見出しでないところで使用すると。目次がおかしくなります。

Align

[/] shortcode
<p style="text-align: left;">左揃えです。</p>

使用例

左揃えです。

中央
[/] shortcode
<p style="text-align: center;">中央揃え</p>

使用例

中央揃え

[/] shortcode
<p style="text-align: right;">右揃えです。</p>

使用例

右揃えです。

両端揃え
[/] shortcode
<p style="text-align: justify;">両端揃えです</p>

使用例

両端揃えです

どんな表示か期待しましたが、左揃えと変わらないですね。

書式設定をクリア

使用例

なにか新しい装飾を加える前に、前の装飾をクリアしてから行います。見た目は一緒でもタグが隠れていたりします。

Reset table size

[/] shortcode
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 50%;"></td>
<td style="width: 50%;"></td>
</tr>
<tr>
<td style="width: 50%;"></td>
<td style="width: 50%;"></td>
</tr>
</tbody>
</table>
適用すると、width の指定が消えています。
<table style="border-collapse: collapse;">
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>

使用例

適用すると、width の指定が消えています。

Remove table styling

[/] shortcode
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 50%;"></td>
<td style="width: 50%;"></td>
</tr>
<tr>
<td style="width: 50%;"></td>
<td style="width: 50%;"></td>
</tr>
</tbody>
</table>
適用すると、styleの指定が消えています。
<table>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>

使用例

適用すると、styleの指定が消えています。

ツール

ソースコード

使用例

表示メニューのソースコードと同じで、ページのHTMLコードを表示します。

テーブル

テーブル

[/] shortcode
任意のテーブルを作成します。
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 50%;"></td>
<td style="width: 50%;"></td>
</tr>
<tr>
<td style="width: 50%;"></td>
<td style="width: 50%;"></td>
</tr>
</tbody>
</table>

使用例

任意のテーブルを作成します。

表のプロパティ

[/] shortcode
<table style="width: 100%; border-collapse: collapse;">
<tbody>
<tr>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
</tr>
<tr>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
</tr>
<tr>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
</tr>
</tbody>
</table>

使用例

表のプロパティを変更します。

5x3の表を作成、プロパティを確認

 

同じ表をプロパティで変更してみます。

[/] shortcode
<table class="alignright" style="height: 15px; width: 70%; border-collapse: collapse; border-style: dotted; border-color: #fc0a2e; background-color: #e6f7f6;" border="3px" cellspacing="10px" cellpadding="10px">
<tbody>
<tr>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
</tr>
<tr>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
</tr>
<tr>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
</tr>
</tbody>
</table>

使用例

表のプロパティを変更します。

5x3の表を作成、プロパティを変更。

表の表現を変えることができました。

表の削除

使用例

表を選択して削除します。

行の上に挿入

使用例

1
2
3

2列目の行にカーソルを合わせて、行の上に挿入を行いました。

1
2
3
行の下に挿入

使用例

1
2
3

2列目の行にカーソルを合わせて、行の下に挿入を行いました。

1
2
3
行を削除

使用例

1
2
3

2列目の行にカーソルを合わせて、行の削除を行いました。

1
3
行のプロパティ

使用例

1
2
3

1列目の行にカーソルを合わせて、行のプロパティをヘッダに変更しました。

 

1
2
3
行の切り取り・コピー・貼り付け

使用例

1
2
3

2列目の行にカーソルを合わせて、行の切り取りを行いました。

1
3

1列目の行にカーソルを合わせて、行の上に張り付けを行いました。

2
1
2
3

ほぼ直感的に表の操作が可能です。

列を左に挿入

使用例

1 2 3

2列目にカーソルを合わせて列を左に挿入を行いました。

1 2 3
列を右に挿入

使用例

1 2 3

2列目にカーソルを合わせて列を右に挿入を行いました。

1 2 3
列を削除

使用例

1 2 3

2列目にカーソルを合わせて列を削除を行いました

1 3

セル

セルのプロパティ

使用例

1 2 3

セルの2にカーソルを合わせて、以下のプロパティ設定を行いました。

 

1 2 3
セルの結合

使用例

1 2 3

2列目と3列目を選択してセルの結合を行いました。

1 2
3
テーブルセルを分割

使用例

1 2 3

セルをいろいろ選択してみましたが、テーブルセルを分割メニューが有効になりませんでした。

改ページ実施

ワープロみたいですが改ページを使うことは少ないと思います。

以上で解説は終了です。WordPressの豊富な編集機能を使用して自由にページを作成してください。

次のページへ >

2020年5月7日

© 2021 くつろぎブログ