テーマで用意されているスタイルやショートコードによるタグなどのデザイン確認用ページです。
AFFINGER6の購入手順は「【失敗しない】AFFINGER6を購入する方法【3つの手順】」からどうぞ。
-
【失敗しない】AFFINGER6を購入する3つの手順【アフィンガー6】
続きを見る
※補足:AFFINGER6は、Gutenbergに対応しているので記事装飾が簡単にできるようになりました。
- スタイル
- タグ
- デザイン
- クリップメモ
- ミニふきだし
- 複合
- 複合(アイコンなし)
- まるもじ(小)
- ポイントこれは見出しに使用したサンプル
- まるもじ(大)
- カスタムフォント
- ステップ
- ポイント
- ラベル
- 流れる文字
- バナー風ボックス
- マイボックス
- マイボックス(+CSSクラス)
- 見出し付きフリーボックス
- メモボックス
- スライドボックス
- チェックボックス(番号なしリスト)
- こんな方におすすめ(v)
- こんな方におすすめ[v]
- ガイドマップメニュー
- カスタムボタン
- 会話ふきだし
- レイアウト
- その他パーツ
- 記事一覧
- カテゴリ一覧
- ショートコード補助
- デザイン
- クイックボタン
スタイル
テキスト
これは太字です。
これは赤字です。
これは大文字です。
これは小文字です
これはドット線です。
参考これは参考マークです(例:参考という文字を記入してから使用)
必須これは必須マークです(例:必須という文字を記入してから使用)
これは打消しです。
これはcode
などに使用します
アニメーション
(^ _ ^)45°揺れ
(^ _ ^)ベル揺れ
(^ _ ^)横揺れ
(^ _ ^)縦揺れ
(^ _ ^)点滅
(^ _ ^)バウンド
(^ _ ^)回転
(^ _ ^)ふわふわ
(^ _ ^)大小
(^ _ ^)シェイク
(^ _ ^)シェイク(強)
(^ _ ^)拡大(ゆれ)
(^ _ ^)過ぎる
(^ _ ^)戻る
(^ _ ^)バースト
アイコン
アイコンマークは「カスタマイザー」の「オプション」でカラーを設定できます。※通常エディタ上では表示されません
これは「はてな」マークです
これは「注意」マークです
これは「人物」マークです
これは「チェック」マークです
これは「メモ」マークです
これは「王冠」マークです
これは「初心者」マークです
見出し
キャッチコピー
こんな風にキャッチコピー見出しタグのテキストなど
見出しタグのテキストなどこんな風にキャッチコピー
記事タイトル
記事タイトル、h2〜h5風はPタグに見出しタグと同じデザインを設定します
まとめ
カウント
カウントは設定したテキストや見出し(hタグ)などに自動で番号を振付けます。手動で番号を付けるよりも簡易であるのはもちろん、テキスト自体ではなくCSSで数字を付与するため目次などにも反映されないなどのメリットがあります。
クイックボタンの「CT」でも付与できます。
これはダミーのテキストです
これはダミーのテキストです
これはダミーのテキストです
これは「まとめ」用の見出しです
通常の見出しタグとは別に「まとめ」用のデザインをカスタマイザーの「各テキストとhタグ(見出し)」で設定できます
ランキング(AFFINGER又はEX版のみ)
ランキング1位
ランキング2位
ランキング3位
ランキング4位以下
マーカー
これは黄マーカーです。
これは黄マーカー(細)です。
これは赤マーカーです。
これは赤マーカー(細)です。
これは青マーカーです。
これは青マーカー(細)です。
これは鼠マーカーです。
これは鼠マーカー(細)です。
写真
写真枠
写真に「枠線」を付与します。境界が曖昧な写真などにとくに有効です(クイックボタン「写真枠」でも使用できます)
![](https://uploader.xzy.pw/upload/20180627174715_85e84826_447237556d.jpg)
キャプションあり
![](https://uploader.xzy.pw/upload/20180627174715_85e84826_447237556d.jpg)
ポラロイド風
写真をポラロイド風にデザインします
![](https://uploader.xzy.pw/upload/20180627174715_85e84826_447237556d.jpg)
![](https://uploader.xzy.pw/upload/20180627174715_85e84826_447237556d.jpg)
ボックス
黄色ボックスです
薄赤ボックスです
グレーボックスです
引用風のボックスです
ワイド
幅一杯の背景を設定するEX限定デザインです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
ショートコードタグでは背景色や画像も設定できます
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
リスト
ドット下線(リスト)
- これはダミーのリストです
- これはダミーのリストです
- これはダミーのリストです
マル(リスト)
- これはダミーのリストです
- これはダミーのリストです
- これはダミーのリストです
マル+ドット下線(リスト)
- これはダミーのリストです
- これはダミーのリストです
- これはダミーのリストです
簡易チェック(リスト)
- これはダミーのリストです
- これはダミーのリストです
- これはダミーのリストです
簡易チェック+ドット下線(リスト)
- これはダミーのリストです
- これはダミーのリストです
- これはダミーのリストです
チェックボックス(番号なしリスト)
ulタグの番号なしリストを囲むとチェックボックス風のデザインになります。
- これはダミーのリストです
- これはダミーのリストです
- これはダミーのリストです
チェックリスト(番号なしリスト)
ulタグの番号なしリストを囲むとチェック風のデザインになります。「テキストモード」でするか、「チェック(ulタグ)」を適応してから「番号なしリスト」を適応すると便利です。
※カスタマイザーの「オプション」でカラー変更が可能です
- これはダミーのリストです
- これはダミーのリストです
- これはダミーのリストです
ナンバリング(番号付きリスト)
olタグの番号付きリストを囲むとチェック風のデザインになります。「テキストモード」でするか、「ナンバリング(olタグ)」を適応してから「番号付きリスト」を適応すると便利です。
※カスタマイザーの「オプション」でカラー変更が可能です
- これはダミーのリストです
- これはダミーのリストです
- これはダミーのリストです
ナンバリング四角(リスト)
- これはダミーのリストです
- これはダミーのリストです
- これはダミーのリストです
ナンバリング四角+ドット下線(リスト)
- これはダミーのリストです
- これはダミーのリストです
- これはダミーのリストです
レイアウト
回り込み解除
<div class="clearfix"> </div>
で囲み、float
を解除します
センター寄せ
![](https://uploader.xzy.pw/upload/20180627174715_85e84826_447237556d.jpg)
要素をセンター寄せにします。
下に余白
![](https://uploader.xzy.pw/upload/20180627174715_85e84826_447237556d.jpg)
要素の下に「10px」の余白を付けます
カードスタイル
※記事ID2で設定されています(ない場合は適宜変更して下さい)
ブログカードに別のデザインを設定します(全サイズで縦型)
カードスタイルB
ブログカードに別のデザインを設定します(PC、タブレット閲覧時のみ縦型)
ランキングボックス(AFFINGER又はEX版のみ)
「ランキング一覧背景色」と同じスペースを設定します
width100%リセット
max-width: initial; display: inline;
を設定してmax-width
をリセットします。
imgインラインボックス
display: inline;
を指定します。
テーブル
テーブル(表の作成)には「TinyMCE Advanced」プラグインが便利です。
横スクロール
スマートフォン閲覧時など横幅がはみ出る場合にtableタグを<div class="scroll-box"></div>で囲むことで横スクロールに対応させます。
これはダミーのテキストです | これはダミーのテキストです | これはダミーのテキストです | これはダミーのテキストです |
これはダミーのテキストです | これはダミーのテキストです | これはダミーのテキストです | これはダミーのテキストです |
中央配置
table内のテキストを上下左右の中央に配置します。
テキスト | テキスト | テキスト | テキスト |
テキスト | テキスト | テキスト | テキスト |
装飾なし
テーマで用意されたデフォルトデザインを解除します。
これはダミーのテキストです | これはダミーのテキストです | これはダミーのテキストです | これはダミーのテキストです |
これはダミーのテキストです | これはダミーのテキストです | これはダミーのテキストです | これはダミーのテキストです |
※設定が上手くできない(tableタグを囲めない)場合は「テキストモード」での作業をお勧めします
タグ
デザイン
クリップメモ
ショートコードで作成するデザインです。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。
(メモ)これはダミーです
(外部リンク)ダミーテキストです
(ブックマーク)ダミーテキストです
(おしらせ)ダミーテキストです
(はてな)これはダミーです
(コメント)これはダミーです
(コード)これはダミーです
(ポイント)これはダミーです
(ユーザー)これはダミーです
(初心者)これはダミーです
(注意文グレー)これはダミーです
(注意文)これはダミーです
ミニふきだし
ショートコードで作成するデザインです。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。
(基本)これはダミーです
(オレンジ)これはダミーです
(ピンク)これはダミーです
(ブルー)これはダミーです
(グリーン)これはダミーです
(レッド)これはダミーです
複合
自由なメモ
これはダミーです
ココがポイント
これはダミーです
ココがおすすめ
これはダミーです
ココがダメ
これはダミーです
ココに注意
これはダミーです
さらに詳しく
これはダミーです
◯才女性
これはダミーです
◯才男性
これはダミーです
複合(アイコンなし)
自由なメモ
これはダミーです
ココがポイント
これはダミーです
ココがおすすめ
これはダミーです
ココがダメ
これはダミーです
ココに注意
これはダミーです
もっと詳しく
これはダミーです
つまづきポイント
これはダミーです
まるもじ(小)
丸い背景の文字を作成します。見出しタグの前などに使用するとポイントになりお薦めです。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。
(基本)これはダミーです (オレンジ)これはダミーです (ピンク)これはダミーです (ブルー)これはダミーです (うすい注意)これはダミーです (注意)これはダミーですポイントこれは見出しに使用したサンプル
まるもじ(大)
丸い背景の大きめの文字を作成します。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。
基本:これはダミーです
(オレンジ)これはダミーです
(ピンク)これはダミーです
(ブルー)これはダミーです
(はてな)これはダミーです
(チェック)これはダミーです
(うすい注意)これはダミーです
(注意)これはダミーです
カスタムフォント
カスタムフォントはショートコードでフォントをカスタマイズできます
これはダミーです
これはダミーです
ステップ
「購入の流れ」などステップを使用したい場合のデザインに便利です。カラーなどがカスタマイザーの「オプション」で変更できます
step
1お湯を入れる
これはダミーのテキストです
step
23分待つ
これはダミーのテキストです
step
3完成です
これはダミーのテキストです
ポイント
これはダミーのテキストです
ラベル
PC(960px以上)Tab(955px〜600px)のレスポンシブ表示となります
※コンテンツ内容は「バナーショートコード」で作成しています
流れる文字
これはダミーですこれはダミーですこれはダミーですこれはダミーですこれはダミーですこれはダミーですこれはダミーですこれはダミーですこれはダミーですこれはダミーです
バナー風ボックス
flexボックスを使用した様々なデザインを作成できます。背景画像を指定することでバナーのようなボタンを作成することも可能です。
タイトル
これはダミーのテキストです
サンプル例
詳しい御案内はこちら
料金プランやサービスについてマイボックス
様々なボックスデザインを作成します。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。
ポイント
(基本)これはダミーです
(しかく枠のみ)これはダミーです
(まるみ)これはダミーです
参考
(参考)これはダミーです
関連
(関連)これはダミーです
メモ
(メモ)これはダミーです
ポイント
(ポイント)これはダミーです
注意ポイント
(注意ポイント)これはダミーです
はてな
(はてな)これはダミーです
マイボックス(+CSSクラス)
見出し部分を中に変更したデザインです
メモ
これはダミーです
メモ
これはダミーです
必要なモノ
- ダミーテキスト
- ダミーテキスト
- ダミーテキスト
チェックリスト
- ダミーテキスト
- ダミーテキスト
- ダミーテキスト
簡単な流れ
- ダミーテキスト
- ダミーテキスト
- ダミーテキスト
見出し付きフリーボックス
見出し(全角15文字)
これはダミーのテキストです
見出し(全角15文字)
これはタイトル幅を100%にしたデザインです
メモボックス
メモ
ここに本文を記述
スライドボックス
チェックボックス(番号なしリスト)
- これはダミーのテキストです
- これはダミーのテキストです
- これはダミーのテキストです
こんな方におすすめ(v)
サイトで効果の高い「こんな方におすすめ」リストも簡単に作成できます。カスタマイザーの「オプション」でカラー変更も可能です。
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
- これはダミーのテキストです
<ul class="st-blackboard-list st-no-ck-off">
のst-no-ck-off
をst-no-ck
とすることでアイコンを消せます
本日のメニュー
- これはダミーのテキストです
- これはダミーのテキストです
- これはダミーのテキストです
「番号付きリスト(olタグ)」にも対応
今日のやることリスト
- これはダミーのテキストです
- これはダミーのテキストです
- これはダミーのテキストです
こんな方におすすめ[v]
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
- これはダミーのテキストです
ガイドマップメニュー
カスタムボタン
自由なボタンを作成します。幅や色、アイコンなどボタンごとに自由なカスタマイズが可能です。
ノーマル
基本
詳しくはコチラ(オレンジ)
詳しくはコチラ(レッド)
詳しくはコチラ(グリーン)
詳しくはコチラ(ブルー)
お問合せ
もっと詳しく(オレンジ)
もっと詳しく(ピンク)
もっと詳しく(ブルー)
人気ランキング
ランキングはコチラ(AFFINGER又はEX版のみ)
ミニ
基本
ボタン詳しくはコチラ(オレンジ)
詳しくはコチラ詳しくはコチラ(レッド)
詳しくはコチラ詳しくはコチラ(グリーン)
詳しくはコチラ詳しくはコチラ(ブルー)
詳しくはコチラMCボタン(AFFINGER又はEX版のみ)
会話ふきだし
「会話ふきだし」は最大8つまで設定でき、1クリックで呼び出すことが可能です
![](https://hakobublog.com/wp-content/uploads/2021/06/2D413595-438C-4812-8D7E-1D9705F172C9-e1625647246434.png)
![](https://hakobublog.com/wp-content/uploads/2021/06/2D413595-438C-4812-8D7E-1D9705F172C9-e1625647246434.png)
![](https://hakobublog.com/wp-content/uploads/2021/05/B72EE3C0-C15B-4D73-B3A5-326CF4DD0E59-e1623473981767.png)
![](https://hakobublog.com/wp-content/themes/affinger/images/no-img.png)
![](https://hakobublog.com/wp-content/themes/affinger/images/no-img.png)
![](https://hakobublog.com/wp-content/themes/affinger/images/no-img.png)
![](https://hakobublog.com/wp-content/themes/affinger/images/no-img.png)
![](https://hakobublog.com/wp-content/themes/affinger/images/no-img.png)
ランキング見出し(AFFINGER又はEX版のみ)
ランキング1位
ランキング2位
ランキング3位
ランキング4位以下
レイアウト
PCとTab3分割
![](https://uploader.xzy.pw/upload/20180628141353_1b7545ca_5651624e6b.jpg)
![](https://uploader.xzy.pw/upload/20180628141353_33114736_3731587338.jpg)
![](https://uploader.xzy.pw/upload/20180628141353_4f347301_57706e626c.jpg)
PCとTab左右40:60%
![](https://uploader.xzy.pw/upload/20180628141353_1b7545ca_5651624e6b.jpg)
![](https://uploader.xzy.pw/upload/20180628141353_4f347301_57706e626c.jpg)
PCとTab左右50%
![](https://uploader.xzy.pw/upload/20180628141353_1b7545ca_5651624e6b.jpg)
![](https://uploader.xzy.pw/upload/20180628141353_4f347301_57706e626c.jpg)
PCとTab左右30:70%
![](https://uploader.xzy.pw/upload/20180628141353_1b7545ca_5651624e6b.jpg)
![](https://uploader.xzy.pw/upload/20180628141353_4f347301_57706e626c.jpg)
全サイズ左右50%
![](https://uploader.xzy.pw/upload/20180628141353_1b7545ca_5651624e6b.jpg)
![](https://uploader.xzy.pw/upload/20180628141353_4f347301_57706e626c.jpg)
均等横並び
![](https://uploader.xzy.pw/upload/20180628141353_1b7545ca_5651624e6b.jpg)
![](https://uploader.xzy.pw/upload/20180628141353_33114736_3731587338.jpg)
![](https://uploader.xzy.pw/upload/20180628141353_33114736_3731587338.jpg)
Div
任意のクラスを設定するdivを作成します
マージン
マージンをつける用のボックスを作成します
タブ(AFFINGER又はEX版のみ)
タブ1のコンテンツ
タブ2のコンテンツ
その他パーツ
スター
年月(EX版のみ)
[st-date]
画像付きコメント(AFFINGER又はEX版のみ)
これはダミーのテキストです
![](https://files-uploader.xzy.pw/upload/20190301193148_5966774258.jpg)
タイトル
◯代男性
これはダミーのテキストです
アドセンス
ウィジェット「広告・Googleアドセンスのスマホ用300px」で設定した内容を挿入します
オリジナルショートコード
ウィジェット「オリジナルのショートコード作成ウィジェット」で設定した内容を挿入します
YouTube
YouTube動画の貼り付けは直接URLを貼り付ける方法と、IDを指定して「サムネイル画像」リンクとして表示する方法があります。
URL貼り付け
自動でレスポンシブな動画として表示されます。
IDによるサムネイルリンク
サムネイルリンクとして表示することで複数でも表示が遅くなるのを軽減できます。クリックするとYouTubeに飛んでしまうのが欠点です。
三角(下矢印)
カラーを変更できる三角矢印のショートコードです。
スクロールナビ(AFFINGER又はEX版のみ)
記事一覧
任意の記事の一覧の記事中の好きな位置に表示できます(EX版ではスライドショーにすることも可能)
カテゴリ一覧
任意のカテゴリの一覧を所定内であれば好きな位置に表示できます。表示する記事数やカテゴリの除外、閲覧サイズによる列数の指定(3~1)などが可能です。
-
【無料】Unsplashに動画素材はあるの?【動画素材サイト3選】
2023/9/16
#「Unsplashに動画素材あるの?」「無料で動画素材使いたいんだけど」「でも高額な動画素材は手が出ないよね」# このような疑問に答えます。 @本記事の内容@ Unsplashに動画素材はあるの? ...
-
【注意あり】Unsplashの画像はなぜ無料なの?【3つの理由を解説】
2023/6/15
#「Unsplashの画像って本当に無料で使えるの?」「なんで無料なの?」「使うときに注意すべきことはあるの?」# このような疑問に答えます。 @本記事の内容@ Unsplashの画像はなぜ無料なの? ...
-
【無料トライアル】Shutterstockで中途解約できる?【結論:できる】
2023/9/16
# 「無料トライアル中にShutterstockを解約できるのか?」、「中途解約をする際の注意点は何か?」、「具体的な中途解約の手順を知りたい!」# このような疑問に答えます。 @本記事の内容@ Sh ...
-
【動画あり】アフィリエイトブログを自動生成して稼ぐ3つの方法
2023/6/12
#「ブログ書くのめっちゃ時間かかる…」「毎日投稿するなんて無理だよ…」「せっかくブログ書いてるのに稼げない…」# このような疑問に答えます。 @本記事の内容@ アフィリエイトブログを自動生成して稼ぐ3 ...
-
【完全無料】Bing AIでブログを書かせるときの3つの注意点
2023/5/29
#「Bing AIを使ってブログを書かせたいんだけど、どうしたらいいの?」「Bing AIを使うと何か注意することはあるの?」、「どんな結果が得られるのかな?」# こんな疑問に答えます。 @本記事の内 ...
カテゴリ一覧スライドショー
上記の一覧を簡易にスライドショーに変えることが可能です。
-
【無料】Unsplashに動画素材はあるの?【動画素材サイト3選】
2023/9/16
#「Unsplashに動画素材あるの?」「無料で動画素材使いたいんだけど」「でも高額な動画素材は手が出ないよね」# このような疑問に答えます。 @本記事の内容@ Unsplashに動画素材はあるの? ...
-
【注意あり】Unsplashの画像はなぜ無料なの?【3つの理由を解説】
2023/6/15
#「Unsplashの画像って本当に無料で使えるの?」「なんで無料なの?」「使うときに注意すべきことはあるの?」# このような疑問に答えます。 @本記事の内容@ Unsplashの画像はなぜ無料なの? ...
-
【無料トライアル】Shutterstockで中途解約できる?【結論:できる】
2023/9/16
# 「無料トライアル中にShutterstockを解約できるのか?」、「中途解約をする際の注意点は何か?」、「具体的な中途解約の手順を知りたい!」# このような疑問に答えます。 @本記事の内容@ Sh ...
-
【動画あり】アフィリエイトブログを自動生成して稼ぐ3つの方法
2023/6/12
#「ブログ書くのめっちゃ時間かかる…」「毎日投稿するなんて無理だよ…」「せっかくブログ書いてるのに稼げない…」# このような疑問に答えます。 @本記事の内容@ アフィリエイトブログを自動生成して稼ぐ3 ...
-
【完全無料】Bing AIでブログを書かせるときの3つの注意点
2023/5/29
#「Bing AIを使ってブログを書かせたいんだけど、どうしたらいいの?」「Bing AIを使うと何か注意することはあるの?」、「どんな結果が得られるのかな?」# こんな疑問に答えます。 @本記事の内 ...
ショートコード補助
Webアイコン
ショートコードに挿入するためのWebアイコンです(アイコンが直接表示されるわけではございません。ショートコードの引数に使用して下さい)
アニメーション(クラス)
ショートコードに挿入するためのCSS用のクラスです(ショートコードの引数に使用して下さい)
HTMLカラーモード
ショートコードに挿入するHTMLカラーコードです(カラーが直接表示されるわけではございません。ショートコードの引数に使用して下さい)
#e53935
#f44336
#ffebee
#03A9F4
#03A9F4
#E1F5FE
#43A047
#4CAF50
#E8F5E9
#FFC107
#FFF3E0
#212121
#424242
#FAFAFA
#FFFDE7
クイックボタン
エディタの上に表示されているボタンです。クリックするだけでデザインが適応されるので使用頻度の高いものなどを設定しています。
太字
選択したテキストに太字を適応します。テキスト全体の場合は「スタイル」の「太字」をご利用下さい
太赤
選択したテキストに太赤字を適応します。テキスト全体の場合は「スタイル」の「太字」をご利用下さい
黄細マ
選択したテキストに黄マーカー(細)を適応します
CT
選択したテキストや見出しに自動カウントを設定します
写真枠
写真に枠線をつけます
角丸背景
角丸のマイボックスを設定します。
ボタンA
HTMLでボタンデザインAを挿入します(AFFINGERの場合「ランキング管理」>「CSS」でカラーを変更できます)
ボタンB
HTMLでボタンデザインBを挿入します(AFFINGERの場合「ランキング管理」>「CSS」でカラーを変更できます)
カード
記事IDを設定することで内部リンクをブログカード化します
タイトル
◯代男性