【THE THOR】ラベル・ボックス・ボタンのパーツスタイルデザインの設定方法

【THE THOR】の投稿編集画面で使用可能なパーツのうちラベル・ボックス・ボタンは、テーマのCSSで設定されているスタイル属性を組み合わせることにより色々なデザインにカスタマイズすることが可能です。

この記事では、ラベル・ボックス・ボタンパーツをカスタマイズする際の属性の組み合わせ項目とその記述方法について掲載しています。

 

スポンサーリンク

パーツスタイルの利用方法

スタイル属性を組み合わせたパーツのカスタマイズは、ビジュアルエディタ、テキストエディタのどちらからでも利用可能です。

 

ビジュアルエディタで利用する場合

「THE THOR」導入時には、ラベル10種、ボタン10種、ボックス10種、ボックス内ボックス10種があらかじめ登録されています。

これらのパーツデザインは、ビジュアルエディタの【スタイル】から呼び出して記事に挿入することが出来ます。  

※ 執筆時点(Ver.1.5.1)では、ビジュアルエディタのスタイルセット→ボーダー系から入力した各点線(オール・ボトム・レフト)は、実際の表示とは異なるコードが挿入される不具合があるため、正しく表示されません。
その場合は、テキストエディタからタグを編集して正しいコードに記述変更する、もしくはカスタマイザーのパーツ登録にあらかじめコードを登録しておき、そのパーツを挿入することで点線を表示させることが可能です。

 

パーツ選択画面01

 

投稿編集中に挿入したパーツのスタイルを変更したい場合には、変更したいパーツ(文字列)を選択している状態で、【スタイル】にある「スタイルセット」または「カラーセット」を選択します。
【オール実線(細)】(borderSolidS) →【オール実線(中)】(borderSolidM) に変えたい等、追加したいスタイルの系統が重複する場合は、既に選択されているスタイルをもう一度選択して(再選択)、そのスタイルを解除してから、変更したいスタイルを選択します。
(現在適用されているスタイルは、スタイル名が青で表示されています)

選択する度に項目が反映されていくので、変更が必要な項目分の選択を繰り返していきます。

 

新しくパーツのスタイルを作成したい場合には、適用させる文字列を選択した状態で【デフォルトパーツ】から挿入したいパーツタイプを選択すると、記事内にベースとなるパーツが挿入されます。それを選択した状態のまま、「スタイルセット」または「カラーセット」から好きなスタイルを選択していきます。
選択する度に項目が反映されていくので、登録が必要な項目分の選択を繰り返していきます。

もし、【オール実線(細)】(borderSolidS) →【オール実線(中)】(borderSolidM) に変えたい等、別のスタイルへの変更時に変更前とスタイルの系統が重複していた場合は、既に適用されているスタイルをもう一度選択して(再選択)、そのスタイルを解除してから、変更したいスタイルを選択します。
(現在適用されているスタイルは、スタイル名が青で表示されています)

 

スタイル選択時の注意点

ビジュアルエディタの【スタイル】からパーツデザインを変更する際、適用されていたスタイルを解除してから変更するのを忘れてしまうとスタイル変更をする度にタグ内に新たな属性が挿入され続けます。 系統の同じ属性が新たに挿入されても既に記述されていた分の属性は自動で削除されません。

<div class=”ep-label bgc-black bgc-white”> のようにひとつのタグ内に同じ系統の属性が重複して記述されていた場合、正しく表示されないことがありますのでスタイルを変更する際には注意してください。

ビジュアルエディタのスタイルの選択画面

※ ビジュアルエディタのスタイルは系統にかかわらず重複していくつでも選択が可能です。

 

登録されている【スタイル】の変更方法

ビジュアルエディタ編集画面の【スタイル】に登録されているデザインは、【カスタマイザー】 → 【パーツスタイル設定[THE]】 で上書き保存することにより変更が可能です。

カスタマイザー画面

 

【パーツスタイル設定[THE]】でパーツスタイルの登録をする場合は、タグを全て記述するのではなくカスタマイズする組み合わせの属性のみを入力してください。

(記述例)

ラベル見本

上のラベルを登録する際に【スタイル】欄に記述するコードは、

ep-label bgc-white ftc-DLlime brc-Vlime es-borderSolidM

になります。

※スタイル設定の見方についてはテキストエディタの項目で説明しています。

 

ビジュアルエディタ編集画面でのスタイル変更について

ビジュアルエディタを利用したパーツの新規作成およびスタイル変更は、項目をひとつずつ反映させていく必要があり、また、同系統のスタイル変更の際には、解除→登録の二度の選択が必要となるため、編集画面内において多くの項目を変更する場合にはあまり向いていません。

パーツ選択画面02

 

テキストエディタで利用する場合

テキストエディタで利用する場合は、直接タグを入力します。

 

(記述例)

ラベル見本

上に表示されている【ラベル見本】のソースコードです。

parts_syntax

※上の図をクリックすると拡大表示されます。

 

このラベルで設定しているスタイル属性の内容は下のようになります。

  1. ep-label
    パーツタイプ:ラベル

  2. bgc-white
    背景色:白

  3. ftc-DLlime
    文字色:ダルトーンライム

  4. brc-Vlime
    枠線色:ヴィヴィッドトーンライム

  5. es-borderSolidM
    線装飾:太さが中の実線で囲む

 

オリジナルボタンをテキストエディタに表示させる方法

【カスタマイザー】 → 【基本設定[THE]】 → 【テキストエディタボタン設定】 でテーマオリジナルのパーツボタンを表示する設定に変えることは出来ますが、登録されている全てのパーツがボタンで表示されるため見づらくなる恐れがあります。

テキストエディタにパーツボタン

 

パーツスタイル属性の書式

スタイル属性を指定する際には、分類を示すコードとそのカスタマイズ内容のコードを組み合わせて記述します。

 

スタイルカスタマイズの基本

カスタマイズする属性を分類別(先頭のコード別)にすると下図のようになります。

カスタマイズ書式

 

  1. パーツタイプ

    ラベル、ボタン、ボックス、ボックス内ボックスのいずれかひとつをタイプに合わせて記述します。

     

    ep-label ラベル

    ビジュアルエディタからの挿入時、<span>タグが入ります。

     

    ep-btn ボタン

    ビジュアルエディタからの挿入時、<a>タグが入ります。

     

    ep-box ボックス

    ビジュアルエディタからの挿入時、<div>タグが入ります。

     

    ep-inbox ボックス内ボックス

    ビジュアルエディタからの挿入時、<div>タグが入ります。

     
     

  2. パーツカラー

    書式:適用箇所を指定するコード + カラーコード

     

    bgc- 背景色

    brc- 枠線色

    ftc- 文字色

     

    ※ パーツのカラーコード一覧はこちらから

    関連記事

    この記事では、【THE THOR】で利用可能なラベル、ボックス、ボタン等のパーツスタイルのカスタマイズ時に使用するカラーコード及びWebカラー、RGB値の対照表を掲載しています。     カラーコードの構成[…]

    アイキャッチ(THORカラーコード)

     

  3. アイコン

    パーツに表示させるアイコンを指定します。

    書式:アイコンコード (icon-〇〇)

    icon-

    ※アイコンコードは、編集画面上部にある【アイコンオプション】からコピー&ペーストして下さい。【icon-】はアイコンコードに含まれているのでそのままコピー&ペーストすればOKです。

    ※下の5で説明している【枠に囲まれたアイコン付きパーツ】以外のアイコンの色は、そのパーツの文字色と同色になります。

     

  4. その他のカスタマイズ項目

    書式:es- + カスタマイズする属性コード

    es-

    ※【es-】で始まる属性コードについては下の【コード一覧】で説明しています。

     

  5. 特定のアイコン付パーツの色指定について

    アイコン付パーツのうち、ラベル や ボタン のように「アイコンを枠で囲んである」パーツの場合、アイコンは白抜きになり、アイコン周りの背景色のみ変更が可能です。

    しかし、アイコン周りの背景色は、パーツの属性コードを利用して変更することは出来ません。

    アイコン周りの背景色は【カスタマイザー】 → 【パーツスタイル設定[THE]】 → 【その他エディタ用パーツ設定】 → 【アイコン系パーツのアイコンカラー】で変更します。設定項目名は「アイコンカラー」となっていますが、それが「アイコン周りの背景色」に該当します。

    特定の用途を持つビックリボックスやはてなボックス等のボックスパーツのアイコン背景色はそれぞれに設定可能ですが、他のアイコン系パーツのアイコン背景色は共通設定になっており、ラベル、ボックス、ボタンのパーツの種類にかかわらず同じ背景色で表示されます。

     

※パーツのカラーコード一覧はこちらから

関連記事

この記事では、【THE THOR】で利用可能なラベル、ボックス、ボタン等のパーツスタイルのカスタマイズ時に使用するカラーコード及びWebカラー、RGB値の対照表を掲載しています。     カラーコードの構成[…]

アイキャッチ(THORカラーコード)

 
 

パーツスタイル属性のコード一覧

先頭が「es-」で始まる属性のコード一覧です。

 

外側の余白(margin)と内側の余白(padding)

marginとpadding説明

枠(border)が上下左右に各1pxで指定されているコンテンツの図です。

  • 外側の余白(margin)
    枠(border)の外側にある余白です。

  • 内側の余白(padding)
    枠(border)より内側にあるコンテンツ(記事本文)との間の余白です。

 

サイズ(要素の幅)

メインカラムの横幅に対して%で自動調整されます。

コード 効 果
es-size10 メインカラムの幅に対して幅10%
es-size25 メインカラムの幅に対して幅25%
es-size40 メインカラムの幅に対して幅40%
es-size50 メインカラムの幅に対して幅50%
es-size60 メインカラムの幅に対して幅60%
es-size75 メインカラムの幅に対して幅75%
es-size90 メインカラムの幅に対して幅90%
es-size100 メインカラムの幅に対して幅100%

 

内側の余白(padding)

パーツの内側の余白設定

位 置 コード 効 果
余白なし es-padding0 余白なし
余白(上) es-TpaddingSS 上の余白極小(1rem)
es-TpaddingS 上の余白小(1.5rem)
es-TpaddingM 上の余白中(3rem)
es-TpaddingL 上の余白大(4.5em)
余白(右) es-RpaddingSS 右の余白極小(1rem)
es-RpaddingS 右の余白小(1.5rem)
es-RpaddingM 右の余白中(3rem)
es-RpaddingL 右の余白大(4.5em)
余白(下) es-BpaddingSS 下の余白極小(1rem)
es-BpaddingS 下の余白小(1.5rem)
es-BpaddingM 下の余白中(3rem)
es-BpaddingL 下の余白大(4.5em)
余白(左) es-LpaddingSS 左の余白極小(1rem)
es-LpaddingS 左の余白小(1.5rem)
es-LpaddingM 左の余白中(3rem)
es-LpaddingL 左の余白大(4.5em)

 

外側の余白(margin)

パーツの外側の余白設定

位 置 コード 効 果
余白なし es-margin0 余白なし
余白(上) es-TmarginSS 上の余白極小(1rem)
es-TmarginS 上の余白小(1.5rem)
es-TmarginM 上の余白中(3rem)
es-TmarginL 上の余白大(4.5em)
余白(右) es-RmarginSS 右の余白極小(1rem)
es-RmarginS 右の余白小(1.5rem)
es-RmarginM 右の余白中(3rem)
es-RmarginL 右の余白大(4.5em)
余白(下) es-BmarginSS 下の余白極小(1rem)
es-BmarginS 下の余白小(1.5rem)
es-BmarginM 下の余白中(3rem)
es-BmarginL 下の余白大(4.5em)
余白(左) es-LmarginSS 左の余白極小(1rem)
es-LmarginS 左の余白小(1.5rem)
es-LmarginM 左の余白中(3rem)
es-LmarginL 左の余白大(4.5em)

 

枠線(border)

パーツ枠線の種類と太さ

形 状 サンプル コード 効 果
囲み枠 オール実線(細) es-borderSolidS 細線で囲む
オール実線(中) es-borderSolidM 太線で囲む
オール破線(細) es-borderDashedS 細破線で囲む
オール破線(中) es-borderDashedM 太破線で囲む
オール点線(細) es-borderDottedS 細点線で囲む ※
オール点線(中) es-borderDottedM 太点線で囲む ※
下線のみ ボトム実線(細) es-BborderSolidS 細線(下線)
ボトム実線(中) es-BborderSolidM 太線(下線)
ボトム破線(細) es-BborderDashedS 細破線(下線)
ボトム破線(中) es-BborderDashedM 太破線(下線)
ボトム点線(細) es-BborderDottedS 細点線(下線) ※
ボトム点線(中) es-BborderDottedM 太点線(下線) ※
左線のみ レフト実線(細) es-LborderSolidS 左側に細線
レフト実線(中) es-LborderSolidM 左側に太線
レフト破線(細) es-LborderDashedS 左側に細破線
レフト破線(中) es-LborderDashedM 左側に太破線
レフト点線(細) es-LborderDottedS 左側に細点線 ※
レフト点線(中) es-LborderDottedM 左側に太点線 ※

※ 破線及び点線は、ブラウザによって線の間隔や点の細かさ等、見え方が異なる場合があります。

※ 執筆時点(Ver.1.5.1)では、ビジュアルエディタのスタイルセット→ボーダー系から入力した各点線(オール・ボトム・レフト)は、実際の表示とは異なるコードが挿入される不具合があるため、正しく表示されません。

その場合は、テキストエディタからタグを編集して正しいコードに記述変更する、もしくはカスタマイザーのパーツ登録にあらかじめコードを登録しておき、そのパーツを挿入することで点線を表示させることが可能です。

※ Ver.1.6.0にて各点線が表示されるように修正されました。
(2019/8/10追記)

 

文字関連スタイル

文字サイズ、文字装飾、文字揃え(シャドウを除く)

分類 サンプル コード 効果
文字サイズ 文字(小) es-Fsmall 文字サイズ小(1.2rem)
文字(中) es-Fbig 文字サイズ中(1.6rem)
文字(大) es-FbigL 文字サイズ大(2rem)
文字装飾 太 字 es-bold 太字
イタリック es-italic イタリック体
打ち消し線 es-strike 打ち消し線
下 線 es-under 下線
文字揃え 左寄せ es-left 左寄せ
中央寄せ es-center 中央寄せ
右寄せ es-right 右寄せ

 

シャドウ(影)

影を付ける

分 類 サンプル コード 効 果
要素外側 外側(薄い影) es-shadowL 外側に薄い影(ライト)
外側(影) es-shadow 外側に影(ノーマル)
外側(濃い影) es-shadowD 外側に濃い影(ダーク)
要素内側 内側(薄い影) es-shadowInL 内側に薄い影(ライト)
内側(影) es-shadowIn 内側に影(ノーマル)
内側(濃い影) es-shadowInD 内側に濃い影(ダーク)
文字 文字に薄い影 es-TshadowL 文字に薄い影(ライト)
文字に影 es-Tshadow 文字に影(ノーマル)
文字に濃い影 es-TshadowD 文字に濃い影(ダーク)

 

背景装飾

パーツの背景装飾

分 類 サンプル コード 効 果
背景装飾 グ ラ デ 1 es-grada1 グラデーション1
グ ラ デ 2 es-grada2 グラデーション2
 方 眼  es-grid 方眼模様

※ グラデ1は、中心から一直線に横のラインが見えるタイプ
  グラデ2は、境目のない緩やかなタイプ

 

コーナー形状(角の丸み)

パーツのコーナー(角)を丸める

分 類 サンプル コード 効 果
角の丸み 丸み(5px) es-radius 角を丸める(5px)
丸み(10px) es-radiusL 角を丸める(10px)
丸み(50px) es-round 角を丸める(50px)

 

ラベル専用スタイル

ラベルパーツ専用スタイル

分 類 サンプル コード 効 果
パーツ
MIX
コーナー
es-Lcorner コーナータイトル
※1
角の丸み 左50px es-LroundL ラウンド左(50px)
右50px es-LroundR ラウンド右(50px)
アイコン 余 白 es-Licon アイコン(余白)
ボーダー es-LiconBorder アイコン(ボーダー)
ボックス es-LiconBox アイコン(ボックス)
サークル es-LiconCircle アイコン(サークル)

※1 【コーナータイトル】は、ボックスの左上隅にラベルを配置するカスタマイズです。ボックスと組み合わせて使用します。

 

ラベルのアイコンの取扱いについて

  • 【余白】と【ボーダー】のアイコンは、文字と同色になります。
    また、文字揃えをするとアイコン位置に影響があります。

  • 【ボックス】と【サークル】のアイコンは白抜きになり、その枠内の背景色はカスタマイザーで設定した共通の色になります。
    また、位置が固定のため、幅指定や文字揃えの影響を受けません。

 

ボタン専用スタイル

ボタンパーツ専用スタイル

分 類 サンプル コード 効 果
装飾 立体 es-BT3d 3D(立体)
薄影 es-BTshadow 影付き(薄影)
薄影+光 es-BTrich 影付き(薄影+光)
特殊 右矢印 es-BTarrow 右矢印
アイコン 余 白  es-BTicon アイコン(余白)
ボーダー es-BTiconBorder アイコン(ボーダー)
ボックス es-BTiconBox アイコン(ボックス)
サークル es-BTiconCircle アイコン(サークル)
※1

 

ボタンのアイコンの取扱いについて

  • 【余白】と【ボーダー】のアイコンは、文字と同色になります。
    また、文字揃えをするとアイコン位置に影響があります。

  • 【ボックス】と【サークル】のアイコンは白抜きになり、その枠内の背景色はカスタマイザーで設定した共通の色になります。
    また、幅指定や文字揃えをするとアイコン位置に影響があります。

 

ボックス専用スタイル

ボックスパーツ専用スタイル

分 類 サンプル コード 効 果
パーツ
MIX
タイトル

内容

es-Bwhole 全域タイトル ※1
装飾
カギ括弧
es-Bbrackets カギ括弧
めくり左
es-BpaperLeft めくり左
めくり右
es-BpaperRight めくり右
特殊
マーク
es-BmarkHatena はてなマーク
マーク
es-BmarkExcl ビックリマーク
マーク
es-BmarkQ Qマーク
マーク
es-BmarkA Aマーク
ラベル
(外)
ボックス
es-BsubT サブタイトル(シンプル)
ボックス
es-BsubTradi サブタイトル(角丸)
ボックス
es-BsubTround サブタイトル(ラウンド)
アイコン
見本
es-Bicon アイコン(シンプル)
見本
es-BiconBg アイコン(背景)
見本
es-BiconObi アイコン(帯)
見本
es-BiconCorner アイコン(コーナー)
見本
es-BiconCircle アイコン(サークル)

※1 = 【全域タイトルボックス】は、ボックス内上部全幅にボックスを配置するデザインです。インボックスと組み合わせて使用します。

※特殊アイコン付ボックス(はてな・ビックリ・Qマーク・Aマーク)のアイコン周りの背景色、及びサブタイトルボックスの見出し部分の設定は、【カスタマイザー】 → 【パーツスタイル設定[THE]】 → 【その他エディタ用パーツ設定】で設定可能です。

 

ボックスのアイコンの取扱いについて

  • 【シンプル】のアイコンは、文字と同色になります。
    また、文字揃えをしてもアイコン位置に影響はありません。

  • 【背景】のアイコンは、アイコン色、透明度、位置が固定です。
    アイコンの種類によっては2行以上の高さがないとアイコン全部が表示されず見切れる場合があります。

  • 【帯】と【コーナー】、【サークル】のアイコンは白抜きになり、その枠内の背景色はカスタマイザーで設定した共通の色になります。
    また、文字揃えをしてもアイコン位置に影響はありません。

    ※【帯】のみ、ボックスの枠線もカスタマイザーで設定した背景色と同色になります。

 

全域タイトルボックスの利用について

全域タイトルボックスは、見出し部分をボックス幅いっぱいに表示したデザインのボックスです。
インボックスと組み合わせて使用します。

 

全域タイトルボックス表示サンプル

タイトル

内容

 

上の全域タイトルボックスのソースコードは下のようになります。

全域ボックス見本

※上の図をクリックすると拡大表示されます。

 

  1. 外側のボックス
    外側のボックスは、【ep-Box】を指定して記述して下さい。

  2. 内側のボックス(見出し部分)
    内側のボックスが見出しになります。【ep-inbox】を指定して、このタグの中に【es-Bwhole】を記述して下さい。

 
 

カラー設定等を行った表示サンプル

見出し部分のパディング調整やカラー設定を行った場合のサンプルです。

タイトル

内容

 

ソースはコピー&ペーストで使用出来ます。

サンプルと同じ箇所に【タイトル】・【内容】の文字が入力してあります。

<div class="ep-box bgc-VPsky ftc-DLsky">
<div class="ep-inbox es-Bwhole ftc-white es-bold es-TpaddingSS es-BpaddingSS bgc-Lsky">タイトル
</div>内容</div>

 

 

サブタイトルボックスの利用について

サブタイトルボックスの書式サンプル

サブタイトルボックスの見出し部分に文字を入力するには、テーマ付属の属性コードとは別にタイトル表示用の属性を追加記述する必要があります。

parts_syntax_subtitlebox

※ 上図は、クリックすると拡大可能です。

 

  1. サブタイトルボックス本体の設定
    カスタマイズに必要なスタイルの属性コードを記述してください。

     

  2. テキストエディタで見出し部分のタイトルを設定する
    【title=””】をタグ内に追加し、””の中に見出し部分の文字を入力してください。

    ※ 1の部分のコードの最後は””で閉じてから新しく2を追加してください。1に繋げて書いてしまうと正しく表示されません。

     

  3. ビジュアルエディタで見出し部分のタイトルを設定する

    該当するボックスを選択している状態(見出しは選択出来ないのでボックスの文字を選択する)で、編集画面の【サブタイトル編集】から入力出来ます。

    【サブタイトル編集】に入力する度に内容が上書きされます。既に入っている文字に追加で記述することは出来ません。

    入力した内容をリセットしたい場合は、【サブタイトル編集】のダイアログボックスで空白のまま「OK」ボタンを押せば内容が消去されます。

     

見出し部分のカスタマイズ設定について

執筆時点(Ver.1.5.1)では、サブタイトルボックスの設定項目に不具合があります。

本来は全タイプのサブタイトルボックスの見出し部分の文字色・背景色・枠線色がカスタマイザーから設定可能である筈ですが、実際に設定出来るのは【es-BsubTradi】のみで、【es-BsubT】と【es-BsubTround】は、固定(下に値を記載)になっており、カスタマイザーから変更出来ない状況です。

 

デフォルトのスタイル(【es-BsubT】のみ変更しています)

サブタイトルボックスデフォルトビュー

 

カスタマイザーで設定可能な見出し部分の項目

(Ver.1.5.1の時点では【es-BsubT】のみ)

  • 文字色
    見出し部分の文字色
    (ボックス内の文字には影響しません)

    ※【es-BsubT】と【es-BsubTround】は、白固定

     

  • 背景色
    見出し部分の背景色

    ※【es-BsubT】と【es-BsubTround】は、#b60105で固定

     

  • 線色
    見出し部分の枠線色

    ※【es-BsubT】と【es-BsubTround】は、透明な1px幅の線で固定

     

 

※カスタマイザーから設定可能なサブタイトルボックスの見出し部分の設定は共通になります。
ボックス1つずつに異なる設定をすることは出来ません。

 
 

Q&Aボックスの調整について

デフォルトのデザインは、「Q」と「A」の装飾が同一でなく、余白や文字サイズ等が異なっているので、デザインを統一した調整用のCSSを用意しました。
コピー&ペーストで利用可能です。

 

デフォルト表示サンプル

デフォルトQ&Aボックス

※ デフォルトでは、「A」の文字周りに装飾がなく、下線もありません。

 

CSS調整後の表示サンプル

質問文を入力してください
回答を入力してください

※ 「A」の文字周りの装飾を「Q」と同じ形状の色違いにして下線を追加しました。

 

ボックスのカラー設定について

  • Qボックスのアイコン周りの背景色
    【カスタマイザー】 → 【パーツスタイル設定[THE]】 → 【その他エディタ用パーツ設定】 → 【QボックスのQカラー】で変更してください。

     

  • Aボックスのアイコン周りの背景色
    Aボックスのアイコン周りの背景色をCSSで【#dd9999】に設定しています。好きな色に変更して使用してください。

    【#dd9999】が記述されているところが2箇所ありますが、両方変更してください。

     

  • Aボックスのアイコン文字色
    【カスタマイザー】 → 【パーツスタイル設定[THE]】 → 【その他エディタ用パーツ設定】 → 【AボックスのAカラー】で変更してください。

     

 

このスタイルを使用する場合は、【ダッシュボード】 → 【外観】 → 【テーマエディター】 → 【style-user.css】に下のソースコードをコピー&ペーストして下さい。

 CSSは右の「+」をクリック
.content .es-BmarkQ {
	padding-top: 10px;
	padding-left: 50px;
}
.content .es-BmarkQ:before {
	top: 10px;
	left: 10px;
}
.content .es-BmarkQ:after {
	top: 40px;
	left: 20px;
}
.content .es-BmarkA {
	font-size:1.8rem;
	padding-top:10px;
	padding-left:50px;
	padding-bottom:10px;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
.content .es-BmarkA:before {
	top: 10px;
	left: 10px;
	background-color:#dd9999;
}
.content .es-BmarkA:after {
	content: "";
	position: absolute;
	top: 40px;
	left: 20px;
	border: 5px solid transparent;
	border-top: 5px solid #dd9999;
}

 

 
 

パーツが正しく表示されない場合

 

文字スペースは半角で

タグ内に属性を記述する際、文字スペースは全て半角で記述して下さい。 全角のスペースが入っていると表示が乱れる可能性があります。

 

同じ系統の属性コードを重複して記述しない

タグ内に属性を記述する際、同じ系統の属性コードを重複して記述しないようにして下さい。 表示が乱れる可能性があります。

 

※プラグインの有無や使用サーバー等の環境によっては、位置がずれる等、掲載したパーツと同じスタイルで表示されない場合があります。