THE THOR よく使うボックス(囲み枠)一覧【A】

【コピペでサクッと使える】THE THOR よく使うボックス(囲み枠)一覧【A】

悩む人のイラスト
THE THORのボックスって種類があり過ぎて、どれを使って良いか分からな〜い。
どうしたらいいの〜
。゚(゚´Д`゚)゚。

そのお悩みを解決いたします。

たけちん
こんにちは。

今回は、WordPressのテーマ【THE THOR(ザ・トール)】のボックスについてです。

【THE THOR】は、気に入って使ってますが、多機能すぎて使いこなせないんですよね。

ラベルもそうですが、ボックスの種類がメチャメチャ豊富。

なので、シンプルでよく使うボックス(囲み枠)だけの一覧を作りました。

サクッとコピペして使えるように、2種類のコードを記述してます。

  • 【パーツスタイル設定】の【ボックス設定】にコピペ出来るコード
  • そのままHTMLを挿入できるようにHTMLコード

気に入ったボックスがあれば、サクッとコピペして使って下さい!



THE THOR よく使うボックス(囲み枠)一覧
【グループA】

【グループA】

【枠線の色:Dgray】・【背景色:指定なし】

実線 波線 点線

囲み枠内のリンクをタップまたはクリックすると、対象ボックスのコード記述へ飛びます。

パターン【1-1】

パターン【1-1】

カスタマイズ入力コード

コード表示
(ここをクリックorタップ)
Copy
ep-box brc-Dgray es-borderSolidS

HTMLコード

コード表示
(ここをクリックorタップ)
Copy
<div class="ep-box brc-Dgray es-borderSolidS">
<p>パターン【1-1】</p>
</div>


パターン【1-2】

パターン【1-2】

カスタマイズ入力コード

【コード表示】
(ここをクリックorタップ)
Copy
ep-box brc-Dgray es-borderSolidM

HTMLコード

【コード表示】
(ここをクリックorタップ)
Copy
<div class="ep-box brc-Dgray es-borderSolidM">
<p>パターン【1-2】</p>
</div>


パターン【1-3】

パターン【1-3】

カスタマイズ入力コード

ep-box brc-Dgray es-borderSolidS es-radiusL

HTMLコード

<div class="ep-box brc-Dgray es-borderSolidS es-radiusL">
<p>パターン【1-3】</p>
</div>


パターン【1-4】

パターン【1-4】

カスタマイズ入力コード

ep-box brc-Dgray es-borderSolidS es-radiusL

HTMLコード

<div class="ep-box brc-Dgray es-borderSolidM es-radiusL">
<p>パターン【1-4】</p>
</div>


パターン【2-1】

パターン【2-1】

カスタマイズ入力コード

ep-box brc-Dgray es-borderDashedS

HTMLコード

<div class="ep-box brc-Dgray es-borderDashedS">
<p>パターン【2-1】</p>
</div>


パターン【2-2】

パターン【2-2】

カスタマイズ入力コード

ep-box brc-Dgray es-borderDashedM

HTMLコード

<div class="ep-box brc-Dgray es-borderDashedM"> 
<p>パターン【2-2】</p>
</div>


パターン【2-3】

パターン【2-3】

カスタマイズ入力コード

ep-box brc-Dgray es-borderDashedS es-radiusL

HTMLコード

<div class="ep-box brc-Dgray es-borderDashedS es-radiusL">
<p>パターン【2-3】</p>
</div>


パターン【2-4】

パターン【2-4】

カスタマイズ入力コード

ep-box brc-Dgray es-borderDashedM es-radiusL

HTMLコード

<div class="ep-box brc-Dgray es-borderDashedM es-radiusL"> 
<p>パターン【2-4】</p>
</div>


パターン【3-1】

パターン【3-1】

カスタマイズ入力コード

ep-box brc-Dgray es-borderDottedS

HTMLコード

<div class="ep-box brc-Dgray es-borderDottedS"> 
<p>パターン【3-1】</p>
</div>


パターン【3-2】

パターン【3-2】

カスタマイズ入力コード

ep-box brc-Dgray es-borderDottedM

HTMLコード

<div class="ep-box brc-Dgray es-borderDottedM"> 
<p>パターン【3-2】</p>
</div>


パターン【3-3】

パターン【3-3】

カスタマイズ入力コード

ep-box brc-Dgray es-borderDottedS es-radiusL

HTMLコード

<div class="ep-box brc-Dgray es-borderDottedS es-radiusL"> 
<p>パターン【3-3】</p>
</div>


パターン【3-4】

パターン【3-4】

カスタマイズ入力コード

ep-box brc-Dgray es-borderDottedM es-radiusL

HTMLコード

<div class="ep-box brc-Dgray es-borderDottedM es-radiusL"> 
<p>パターン【3-4】</p>
</div>




【ownCloudの導入方法】


『ロリポップの無料ownCloudを使って、簡単にファイル共有をする方法』はコチラの記事で解説しています。

大切なPCデータのバックアップにもなりますので、ぜひ導入してみて下さい。

簡単ファイル共有

2台のパソコンから「同じファイル」にアクセスしたいなぁ。 あと、離れた家族やお友達と「プライベートな動画や画像」をシェアしたいんだけど。 簡単にできるのかな? その疑問にお答えします。  この記事[…]

c-eyecat_server-0806-002

『ownCloudでファイルを簡単に受け渡す方法』はコチラの記事で解説しています。

ファイルの受け渡し方法

メールじゃ送れない動画や画像の大きなファイルを受け渡ししたいなぁ。家族やお友達とも、プライベートな動画や画像をたくさんシェアしたい。簡単に出来るのかな? この記事の内容 ownCloudによる[…]

ownCloudファイルの受け渡し方法


たけちん
★無料サポート引き受けます★

【★ブログを始める前も始めた後も、無料サポート致します!★】

  • 分からないこと
  • 不安なこと
  • 心配なこと
  • 頼みたいこと

    などなど。

★まずは、お気軽にお問い合わせください!★

お問い合わせの詳細はコチラから!

【無料サポートを引き受ける理由はコチラ】

THE THOR よく使うボックス(囲み枠)一覧【A】
最新情報をチェックしよう!