【THE THOR】の投稿編集画面で使用可能なパーツのうちラベル・ボックス・ボタンは、テーマのCSSで設定されているスタイル属性を組み合わせることにより色々なデザインにカスタマイズすることが可能です。
この記事では、ラベル・ボックス・ボタンパーツをカスタマイズする際の属性の組み合わせ項目とその記述方法について掲載しています。
パーツスタイルの利用方法
スタイル属性を組み合わせたパーツのカスタマイズは、ビジュアルエディタ、テキストエディタのどちらからでも利用可能です。
ビジュアルエディタで利用する場合
「THE THOR」導入時には、ラベル10種、ボタン10種、ボックス10種、ボックス内ボックス10種があらかじめ登録されています。
これらのパーツデザインは、ビジュアルエディタの【スタイル】から呼び出して記事に挿入することが出来ます。
※ 執筆時点(Ver.1.5.1)では、ビジュアルエディタのスタイルセット→ボーダー系から入力した各点線(オール・ボトム・レフト)は、実際の表示とは異なるコードが挿入される不具合があるため、正しく表示されません。
その場合は、テキストエディタからタグを編集して正しいコードに記述変更する、もしくはカスタマイザーのパーツ登録にあらかじめコードを登録しておき、そのパーツを挿入することで点線を表示させることが可能です。
投稿編集中に挿入したパーツのスタイルを変更したい場合には、変更したいパーツ(文字列)を選択している状態で、【スタイル】にある「スタイルセット」または「カラーセット」を選択します。
【オール実線(細)】(borderSolidS) →【オール実線(中)】(borderSolidM) に変えたい等、追加したいスタイルの系統が重複する場合は、既に選択されているスタイルをもう一度選択して(再選択)、そのスタイルを解除してから、変更したいスタイルを選択します。
(現在適用されているスタイルは、スタイル名が青で表示されています)
選択する度に項目が反映されていくので、変更が必要な項目分の選択を繰り返していきます。
新しくパーツのスタイルを作成したい場合には、適用させる文字列を選択した状態で【デフォルトパーツ】から挿入したいパーツタイプを選択すると、記事内にベースとなるパーツが挿入されます。それを選択した状態のまま、「スタイルセット」または「カラーセット」から好きなスタイルを選択していきます。
選択する度に項目が反映されていくので、登録が必要な項目分の選択を繰り返していきます。
もし、【オール実線(細)】(borderSolidS) →【オール実線(中)】(borderSolidM) に変えたい等、別のスタイルへの変更時に変更前とスタイルの系統が重複していた場合は、既に適用されているスタイルをもう一度選択して(再選択)、そのスタイルを解除してから、変更したいスタイルを選択します。
(現在適用されているスタイルは、スタイル名が青で表示されています)
スタイル選択時の注意点
ビジュアルエディタの【スタイル】からパーツデザインを変更する際、適用されていたスタイルを解除してから変更するのを忘れてしまうとスタイル変更をする度にタグ内に新たな属性が挿入され続けます。 系統の同じ属性が新たに挿入されても既に記述されていた分の属性は自動で削除されません。
<div class=”ep-label bgc-black bgc-white”> のようにひとつのタグ内に同じ系統の属性が重複して記述されていた場合、正しく表示されないことがありますのでスタイルを変更する際には注意してください。
※ ビジュアルエディタのスタイルは系統にかかわらず重複していくつでも選択が可能です。
登録されている【スタイル】の変更方法
ビジュアルエディタ編集画面の【スタイル】に登録されているデザインは、【カスタマイザー】 → 【パーツスタイル設定[THE]】 で上書き保存することにより変更が可能です。
【パーツスタイル設定[THE]】でパーツスタイルの登録をする場合は、タグを全て記述するのではなくカスタマイズする組み合わせの属性のみを入力してください。
(記述例)
ラベル見本
上のラベルを登録する際に【スタイル】欄に記述するコードは、
「ep-label bgc-white ftc-DLlime brc-Vlime es-borderSolidM」
になります。
※スタイル設定の見方についてはテキストエディタの項目で説明しています。
ビジュアルエディタ編集画面でのスタイル変更について
ビジュアルエディタを利用したパーツの新規作成およびスタイル変更は、項目をひとつずつ反映させていく必要があり、また、同系統のスタイル変更の際には、解除→登録の二度の選択が必要となるため、編集画面内において多くの項目を変更する場合にはあまり向いていません。
テキストエディタで利用する場合
テキストエディタで利用する場合は、直接タグを入力します。
(記述例)
ラベル見本
上に表示されている【ラベル見本】のソースコードです。
※上の図をクリックすると拡大表示されます。
このラベルで設定しているスタイル属性の内容は下のようになります。
- ep-label
パーツタイプ:ラベル - bgc-white
背景色:白 - ftc-DLlime
文字色:ダルトーンライム - brc-Vlime
枠線色:ヴィヴィッドトーンライム - es-borderSolidM
線装飾:太さが中の実線で囲む
オリジナルボタンをテキストエディタに表示させる方法
【カスタマイザー】 → 【基本設定[THE]】 → 【テキストエディタボタン設定】 でテーマオリジナルのパーツボタンを表示する設定に変えることは出来ますが、登録されている全てのパーツがボタンで表示されるため見づらくなる恐れがあります。
パーツスタイル属性の書式
スタイル属性を指定する際には、分類を示すコードとそのカスタマイズ内容のコードを組み合わせて記述します。
スタイルカスタマイズの基本
カスタマイズする属性を分類別(先頭のコード別)にすると下図のようになります。

- パーツタイプ
ラベル、ボタン、ボックス、ボックス内ボックスのいずれかひとつをタイプに合わせて記述します。
ep-label ラベル
ビジュアルエディタからの挿入時、<span>タグが入ります。
ep-btn ボタン
ビジュアルエディタからの挿入時、<a>タグが入ります。
ep-box ボックス
ビジュアルエディタからの挿入時、<div>タグが入ります。
ep-inbox ボックス内ボックス
ビジュアルエディタからの挿入時、<div>タグが入ります。
-
パーツカラー
書式:適用箇所を指定するコード + カラーコード
bgc- 背景色
brc- 枠線色
ftc- 文字色
※ パーツのカラーコード一覧はこちらから
関連記事この記事では、【THE THOR】で利用可能なラベル、ボックス、ボタン等のパーツスタイルのカスタマイズ時に使用するカラーコード及びWebカラー、RGB値の対照表を掲載しています。 カラーコードの構成[…]
- アイコン
パーツに表示させるアイコンを指定します。
書式:アイコンコード (icon-〇〇)
icon-
※アイコンコードは、編集画面上部にある【アイコンオプション】からコピー&ペーストして下さい。【icon-】はアイコンコードに含まれているのでそのままコピー&ペーストすればOKです。
※下の5で説明している【枠に囲まれたアイコン付きパーツ】以外のアイコンの色は、そのパーツの文字色と同色になります。
- その他のカスタマイズ項目
書式:es- + カスタマイズする属性コード
es-
※【es-】で始まる属性コードについては下の【コード一覧】で説明しています。
- 特定のアイコン付パーツの色指定について
アイコン付パーツのうち、ラベル や ボタン のように「アイコンを枠で囲んである」パーツの場合、アイコンは白抜きになり、アイコン周りの背景色のみ変更が可能です。
しかし、アイコン周りの背景色は、パーツの属性コードを利用して変更することは出来ません。
アイコン周りの背景色は【カスタマイザー】 → 【パーツスタイル設定[THE]】 → 【その他エディタ用パーツ設定】 → 【アイコン系パーツのアイコンカラー】で変更します。設定項目名は「アイコンカラー」となっていますが、それが「アイコン周りの背景色」に該当します。
特定の用途を持つビックリボックスやはてなボックス等のボックスパーツのアイコン背景色はそれぞれに設定可能ですが、他のアイコン系パーツのアイコン背景色は共通設定になっており、ラベル、ボックス、ボタンのパーツの種類にかかわらず同じ背景色で表示されます。
※パーツのカラーコード一覧はこちらから
この記事では、【THE THOR】で利用可能なラベル、ボックス、ボタン等のパーツスタイルのカスタマイズ時に使用するカラーコード及びWebカラー、RGB値の対照表を掲載しています。 カラーコードの構成[…]
パーツスタイル属性のコード一覧
先頭が「es-」で始まる属性のコード一覧です。
外側の余白(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行以上の高さがないとアイコン全部が表示されず見切れる場合があります。 - 【帯】と【コーナー】、【サークル】のアイコンは白抜きになり、その枠内の背景色はカスタマイザーで設定した共通の色になります。
また、文字揃えをしてもアイコン位置に影響はありません。※【帯】のみ、ボックスの枠線もカスタマイザーで設定した背景色と同色になります。
全域タイトルボックスの利用について
全域タイトルボックスは、見出し部分をボックス幅いっぱいに表示したデザインのボックスです。
インボックスと組み合わせて使用します。
全域タイトルボックス表示サンプル
内容
上の全域タイトルボックスのソースコードは下のようになります。
※上の図をクリックすると拡大表示されます。
- 外側のボックス
外側のボックスは、【ep-Box】を指定して記述して下さい。 - 内側のボックス(見出し部分)
内側のボックスが見出しになります。【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>
サブタイトルボックスの利用について
サブタイトルボックスの書式サンプル
サブタイトルボックスの見出し部分に文字を入力するには、テーマ付属の属性コードとは別にタイトル表示用の属性を追加記述する必要があります。
※ 上図は、クリックすると拡大可能です。
- サブタイトルボックス本体の設定
カスタマイズに必要なスタイルの属性コードを記述してください。 - テキストエディタで見出し部分のタイトルを設定する
【title=””】をタグ内に追加し、””の中に見出し部分の文字を入力してください。※ 1の部分のコードの最後は””で閉じてから新しく2を追加してください。1に繋げて書いてしまうと正しく表示されません。
- ビジュアルエディタで見出し部分のタイトルを設定する
該当するボックスを選択している状態(見出しは選択出来ないのでボックスの文字を選択する)で、編集画面の【サブタイトル編集】から入力出来ます。
【サブタイトル編集】に入力する度に内容が上書きされます。既に入っている文字に追加で記述することは出来ません。
入力した内容をリセットしたい場合は、【サブタイトル編集】のダイアログボックスで空白のまま「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を用意しました。
コピー&ペーストで利用可能です。
デフォルト表示サンプル
※ デフォルトでは、「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; }
パーツが正しく表示されない場合
文字スペースは半角で
タグ内に属性を記述する際、文字スペースは全て半角で記述して下さい。 全角のスペースが入っていると表示が乱れる可能性があります。
同じ系統の属性コードを重複して記述しない
タグ内に属性を記述する際、同じ系統の属性コードを重複して記述しないようにして下さい。 表示が乱れる可能性があります。
※プラグインの有無や使用サーバー等の環境によっては、位置がずれる等、掲載したパーツと同じスタイルで表示されない場合があります。