追加タグのコード一覧

ふきだし

追加CSSデザインをまとめます。PORIPUならコードを貼るだけでOKです。

投稿画面のテキストエディタへ、コピペして使いましょう。

AddQuicktagに登録しておけば、ビジュアルエディタに直接入力することもできます。

ワンポイント吹き出し

追加デザインです。ワンポイントの説明に利用するために使っています。デフォルトカラーは青ですがこれはSANGOの箇条書き「シェブロンマーク」の色にあわせています。

  • これがシェブロンのリスト
シェブロンマークのコード
[list class="li-chevron"]
〜箇条書き〜
[/list]

他の色も用意していますので、お好みでボックス用ショートコードや画像と組み合わせて使ってください。

基本カラー

注釈用ふきだし

基本コード
<span class="points">文字を入れる</span>

赤系

注釈用ふきだし

赤系コード
<span class="points p-red">文字を入れる</span>

オレンジ系

注釈用ふきだし

オレンジ系コード
<span class="points p-orange">文字を入れる</span>

緑系

注釈用ふきだし

緑系コード
<span class="points p-green">文字を入れる</span>

青系

注釈用ふきだし

青系コード
<span class="points p-blue">文字を入れる</span>

好きな色に変えられるカスタムクラス

注釈用ふきだし

カスタム用コード
<span class="points p-custom">文字を入れる</span>

自分で色を変更できるようにカスタマイズ用のコードも作っています。
「p-custom」を使ってください。

PORIPUのstyle.cssに好きなカスタム用コードをコピペするだけで修正ができます。色は赤字の部分をお好みで変更してください。

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

関連リンク用吹き出し

関連する記事のリンクを囲うために作ったボックスです。

基本カラー

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

赤系

 

  • リストタグを利用したら
  • チェックアイコンが出てくる
コード
<div class="kanren p-red">
<ul>
 	<li>リストタグを利用したら</li>
 	<li>チェックアイコンが出てくる</li>
</ul>
</div>

オレンジ系

 

  • リストタグを利用したら
  • チェックアイコンが出てくる
コード
<div class="kanren p-orange">
<ul>
 	<li>リストタグを利用したら</li>
 	<li>チェックアイコンが出てくる</li>
</ul>
</div>

緑系

 

  • リストタグを利用したら
  • チェックアイコンが出てくる
コード
<div class="kanren p-green">
<ul>
 	<li>リストタグを利用したら</li>
 	<li>チェックアイコンが出てくる</li>
</ul>
</div>

青系

 

  • リストタグを利用したら
  • チェックアイコンが出てくる
コード
<div class="kanren p-blue">
<ul>
 	<li>リストタグを利用したら</li>
 	<li>チェックアイコンが出てくる</li>
</ul>
</div>

好きな色に変えられるカスタムクラス

  • リストタグを利用したら
  • チェックアイコンが出てくる
コード
<div class="kanren p-custom">
<ul>
 	<li>リストタグを利用したら</li>
 	<li>チェックアイコンが出てくる</li>
</ul>
</div>

カスタマイズ用のコードも作っています。
「p-custom」を使ってください。

PORIPUのstyle.cssに好きなカスタム用コードをコピペするだけで修正ができます。色は赤字の部分をお好みで変更してください。

CSSに追記するカスタム用コード
/*カスタマイズ用*/
.kanren.p-custom{border: 2px solid #E1BEE7;/*枠線の色*/}
.kanren.p-custom:before{background-color: #CE93D8;/*吹き出しの色*/}
.kanren.p-custom:after{border-top: 12px solid #CE93D8;/*吹き出しの色*/}
.kanren.p-custom ul li:before {color: #CE93D8;/*吹き出しの色*/}

文字を変更できる吹き出し

吹き出し内のテキストが変更できる使い勝手の良いボックスです。

基本カラー

 

必要なもの

  • おすすめしたい記事のページID
  • 表示したいタイトル
コード
<div class="p-box">
<span class="p-box-title">必要なもの</span>
<p><ul>
       <li>おすすめしたい記事のページID</li>
       <li>表示したいタイトル</li>
</ul></p>
</div>

必要なもの

リストタグ無しバージョン

コード
<div class="p-box">
<span class="p-box-title">必要なもの</span>
<p>リストタグ無しバージョン</p>
</div>

赤系

 

必要なもの

  • おすすめしたい記事のページID
  • 表示したいタイトル
コード
<div class="p-box p-red">
<span class="p-box-title">必要なもの</span>
<p><ul>
       <li>おすすめしたい記事のページID</li>
       <li>表示したいタイトル</li>
</ul></p>
</div>

オレンジ系

 

必要なもの

  • おすすめしたい記事のページID
  • 表示したいタイトル
コード
<div class="p-box p-orange">
<span class="p-box-title">必要なもの</span>
<p><ul>
       <li>おすすめしたい記事のページID</li>
       <li>表示したいタイトル</li>
</ul></p>
</div>

緑系

必要なもの

  • おすすめしたい記事のページID
  • 表示したいタイトル
コード
<div class="p-box p-green">
<span class="p-box-title">必要なもの</span>
<p><ul>
       <li>おすすめしたい記事のページID</li>
       <li>表示したいタイトル</li>
</ul></p>
</div>

青系

 

必要なもの

  • おすすめしたい記事のページID
  • 表示したいタイトル
コード
<div class="p-box p-blue">
<span class="p-box-title">必要なもの</span>
<p><ul>
       <li>おすすめしたい記事のページID</li>
       <li>表示したいタイトル</li>
</ul></p>
</div>

好きな色に変えられるカスタムクラス

必要なもの

  • おすすめしたい記事のページID
  • 表示したいタイトル
コード
<div class="p-box p-custom">
<span class="p-box-title">必要なもの</span>
<p><ul>
       <li>おすすめしたい記事のページID</li>
       <li>表示したいタイトル</li>
</ul></p>
</div>

カスタマイズ用のコードも作っています。
「p-custom」を使ってください。

PORIPUのstyle.cssに好きなカスタム用コードをコピペするだけで修正ができます。色は赤字の部分をお好みで変更してください。

CSSに追記するカスタム用コード
/*カスタマイズ用*/
.p-box.p-custom{border: 2px solid #E1BEE7;/*枠線の色*/}
div.p-box.p-custom .p-box-title{background-color: #CE93D8;/*吹き出しの色*/}
div.p-box.p-custom .p-box-title:after{border-top: 12px solid #CE93D8;/*吹き出しの色*/}
.p-box.p-custom ul li:before {color: #CE93D8;/*チェックの色*/}

ショートコード

追加ショートコードです。現在は以下の2つを追加しています。メモボックスのデザインを増やしましょう。

タイトル
テキスト
コード
[note title="タイトル"]テキスト[/note]
タイトル
テキスト
コード
[safe title="タイトル"]テキスト[/safe]

3 COMMENTS

西山

購入して利用させていただいています。
[safe title="タイトル"]テキスト[/safe]で利用するとアイコンが表示されません。
sangoがバージョンアップしてfontawesome5(現時点ではバージョン5.7.2)に対応したからでしょうか?
PORIPUは対応していただけないのでしょうか?

返信する

コメントを残す

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