未分類

WING「記事作成パーツ」確認用ソース

投稿日:

元ソースはこちら→WING「記事作成パーツ」確認用ソース - 【公式】STINGER STORE

スタイル(h2)

テキスト(h3)

これは太字です。

これは赤字です。

これは大文字です。

これは小文字です

これはドット線です。

これは参照リンクです

参考これは参考マークです(例:参考という文字を記入してから使用)

必須これは必須マークです(例:必須という文字を記入してから使用)

これは打消しです。

これはcodeなどに使用します

アイコン

アイコンマークは「カスタマイザー」の「オプション」でカラーを設定できます。※通常エディタ上では表示されません

これは「はてな」マークです

これは「注意」マークです

これは「人物」マークです

これは「チェック」マークです

これは「メモ」マークです

これは「王冠」マークです

これは「初心者」マークです

見出し

カウント(h4)

カウントは設定したテキストや見出し(hタグ)などに自動で番号を振付けます。手動で番号を付けるよりも簡易であるのはもちろん、テキスト自体ではなくCSSで数字を付与するため目次などにも反映されないなどのメリットがあります。

クイックボタンの「CT」でも付与できます。

これはダミーのテキストです

これはダミーのテキストです

これはダミーのテキストです

リセットする方法などマニュアルはコチラ

記事タイトル

記事タイトル、h2〜h5風はPタグに見出しタグと同じデザインを設定します

まとめ

これは「まとめ」用の見出しです

通常の見出しタグとは別に「まとめ」用のデザインをカスタマイザーの「各テキストとhタグ(見出し)」で設定できます

マニュアルはコチラ

マーカー

これは黄マーカーです。

これは黄マーカー(細)です。

これは赤マーカーです。

これは赤マーカー(細)です。

これは青マーカーです。

これは青マーカー(細)です。

これは鼠マーカーです。

これは鼠マーカー(細)です。

写真

写真枠

写真に「枠線」を付与します。境界が曖昧な写真などにとくに有効です(クイックボタン「写真枠」でも使用できます)

キャプションあり(h5)

キャプションを追加できます

ポラロイド風

写真をポラロイド風にデザインします

マニュアルはコチラ

ボックス

黄色ボックスです

薄赤ボックスです

グレーボックスです

引用風のボックスです

チェック(ulタグ)

ulタグの番号なしリストを囲むとチェック風のデザインになります。「テキストモード」でするか、「チェック(ulタグ)」を適応してから「番号なしリスト」を適応すると便利です。

参考:記事パーツについて

※カスタマイザーの「オプション」でカラー変更が可能です

  • これはダミーのリストです
  • これはダミーのリストです
  • これはダミーのリストです

ナンバリング(olタグ)

olタグの番号付きリストを囲むとチェック風のデザインになります。「テキストモード」でするか、「ナンバリング(olタグ)」を適応してから「番号付きリスト」を適応すると便利です。

※カスタマイザーの「オプション」でカラー変更が可能です

  1. これはダミーのリストです
  2. これはダミーのリストです
  3. これはダミーのリストです

レイアウト

PC(960px以上)Tab(955px〜600px)のレスポンシブ表示となります

※コンテンツ内容は「バナーショートコード」で作成しています

PCとTab3分割

PCとTab左右40:60%

PCとTab左右50%

PCとTab左右30:70%

全サイズ左右50%

均等横並び

回り込み解除

<div class="clearfix"> </div>で囲み、floatを解除します

センター寄せ

要素をセンター寄せにします。

下に余白

要素の下に「10px」の余白を付けます

カードスタイル

ブログ風カードの作り方

※記事ID2で設定されています(ない場合は適宜変更して下さい)

ブログカードに別のデザインを設定します(全サイズで縦型)

カードスタイルB

ブログカードに別のデザインを設定します(PC、タブレット閲覧時のみ縦型)

ランキングボックス(AFFINGER版のみ)

「ランキング一覧背景色」と同じスペースを設定します

width100%リセット

max-width: initial; display: inline;を設定してmax-widthをリセットします。

imgインラインボックス

display: inline;を指定します。

テーブル

テーブル(表の作成)には「TinyMCE Advanced」プラグインが便利です。

※新しいバージョンでは自動で幅が挿入されるようになりました。「置換プラグイン」があると一括削除ができます。

横スクロール

スマートフォン閲覧時など横幅がはみ出る場合にtableタグを<div class="scroll-box"></div>で囲むことで横スクロールに対応させます。

これはダミーのテキストです これはダミーのテキストです これはダミーのテキストです これはダミーのテキストです
これはダミーのテキストです これはダミーのテキストです これはダミーのテキストです これはダミーのテキストです

中央配置

table内のテキストを上下左右の中央に配置します。

テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト

装飾なし

テーマで用意されたデフォルトデザインを解除します。

これはダミーのテキストです これはダミーのテキストです これはダミーのテキストです これはダミーのテキストです
これはダミーのテキストです これはダミーのテキストです これはダミーのテキストです これはダミーのテキストです

※設定が上手くできない(tableタグを囲めない)場合は「テキストモード」での作業をお勧めします

関連:tableタグ(表)の挿入

タグ

WordPress4.9.6にて「タグが反応しない」という方はコチラをご参考下さい

デザイン

クリップメモ

ショートコードで作成するデザインです。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。

(メモ)これはダミーです

(おしらせ)ダミーテキストです

(はてな)これはダミーです

(コメント)これはダミーです

(コード)これはダミーです

(ポイント)これはダミーです

(ユーザー)これはダミーです

(初心者)これはダミーです

(注意文)これはダミーです

マニュアルはコチラ

ミニふきだし

ショートコードで作成するデザインです。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。

(基本)これはダミーです

(オレンジ)これはダミーです

(ピンク)これはダミーです

(ブルー)これはダミーです

(グリーン)これはダミーです

(レッド)これはダミーです

マニュアルはコチラ

まるもじ(小)

丸い背景の文字を作成します。見出しタグの前などに使用するとポイントになりお薦めです。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。

(基本)これはダミーです (オレンジ)これはダミーです (ピンク)これはダミーです (ブルー)これはダミーです (うすい注意)これはダミーです (注意)これはダミーです

ポイントこれは見出しに使用したサンプル

マニュアルはコチラ

まるもじ(大)

丸い背景の大きめの文字を作成します。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。

基本:これはダミーです

(オレンジ)これはダミーです

(ピンク)これはダミーです

(ブルー)これはダミーです

(はてな)これはダミーです

(チェック)これはダミーです

(うすい注意)これはダミーです

(注意)これはダミーです

マイボックス

様々なボックスデザインを作成します。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。

ポイント

(基本)これはダミーです

(しかく枠のみ)これはダミーです

(まるみ)これはダミーです

ポイント

(ポイント)これはダミーです

注意ポイント

(注意ポイント)これはダミーです

はてな

(はてな)これはダミーです

マニュアルはコチラ

ステップ

「購入の流れ」などステップを使用したい場合のデザインに便利です。カラーなどがカスタマイザーの「オプション」で変更できます

step
1
お湯を入れる

これはダミーのテキストです

step
2
3分待つ

これはダミーのテキストです

step
3
完成です

これはダミーのテキストです

マニュアルはコチラ

こんな方におすすめ

サイトで効果の高い「こんな方におすすめ」リストも簡単に作成できます。カスタマイザーの「オプション」でカラー変更も可能です。

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです
  • これはダミーのテキストです
  • これはダミーのテキストです

<ul class="st-blackboard-list st-no-ck-off">st-no-ck-offst-no-ckとすることでアイコンを消せます

本日のメニュー

  • これはダミーのテキストです
  • これはダミーのテキストです
  • これはダミーのテキストです
  • これはダミーのテキストです

「番号付きリスト(olタグ)」にも対応

今日のやることリスト

  1. これはダミーのテキストです
  2. これはダミーのテキストです
  3. これはダミーのテキストです
  4. これはダミーのテキストです

マニュアルはコチラ

見出し付きフリーボックス

見出し(全角15文字)

これはダミーのテキストです

マニュアルはコチラ

メモボックス

メモ

ここに本文を記述

スライドボックス

+ クリックして下さい

クリックで開かれる内容です

バナーボックス

バナー風デザインを作成するショートコード

flexボックスを使用した様々なデザインを作成できます。背景画像を指定することでバナーのようなボタンを作成することも可能です。

タイトル

これはダミーのテキストです

サンプル例

詳しい御案内はこちら

料金プランやサービスについて

泣ける!
漫画ランキング

本屋さんが選んだ泣けるマンガランキング1位は?

今すぐCHECK

ラベル

おすすめ

マニュアルはコチラ

レイアウト

その他パーツ

カスタムボタン

自由なボタンを作成します。幅や色、アイコンなどボタンごとに自由なカスタマイズが可能です。

基本(h5)

ボタン

詳しくはコチラ(オレンジ)

詳しくはコチラ

詳しくはコチラ(レッド)

詳しくはコチラ

詳しくはコチラ(グリーン)

詳しくはコチラ

詳しくはコチラ(ブルー)

詳しくはコチラ

お問合せ

お問合せ

もっと詳しく(オレンジ)

もっと詳しく

もっと詳しく(ピンク)

もっと詳しく

もっと詳しく(ブルー)

もっと詳しく

人気ランキング

人気ランキング

マニュアルはコチラ

スター

アドセンス

ウィジェット「広告・Googleアドセンスのスマホ用300px」で設定した内容を挿入します

オリジナルショートコード

ウィジェット「オリジナルのショートコード作成ウィジェット」で設定した内容を挿入します

YouTube

YouTube動画の貼り付けは直接URLを貼り付ける方法と、IDを指定して「サムネイル画像」リンクとして表示する方法があります。

URL貼り付け

自動でレスポンシブな動画として表示されます。

複数設置する場合は「LazyLoad SEO(画像・iframe遅延読み込み)」を使用することで表示速度が改善できる場合があります。

IDによるサムネイルリンク

サムネイルリンクとして表示することで複数でも表示が遅くなるのを軽減できます。クリックするとYouTubeに飛んでしまうのが欠点です。

関連:複数のYouTubeの挿入方法

三角(下矢印)

カラーを変更できる三角矢印のショートコードです。

記事一覧

任意の記事の一覧の記事中の好きな位置に表示できます(EX版ではスライドショーにすることも可能)

マニュアルはコチラ

カテゴリ一覧

任意のカテゴリの一覧を所定内であれば好きな位置に表示できます。表示する記事数やカテゴリの除外、閲覧サイズによる列数の指定(3~1)などが可能です。

no image

未分類

手持ちの本を電子書籍化し始めた理由

最近、手持ちの本を少しづつスキャンして電子書籍化し始めました。 いやー、もうね。 紙の本なんてオワコン! これからは電子書籍ですよ。 …なんて理由ではなく、これには色々と考えるところがありました。 本 ...

no image

未分類

今後のアフィリエイト活動について

こんにちは、とーまです。 私、昨年の12月で44歳になりました。 Twitter上で仲良くさせて頂いてるアフィリエイターさんの中でも年齢は少し上の方だと思います。 いい歳です。立派な中年です。おじさん ...

未分類

アンリミテッドアフィリエイトのこと

こんにちは。早速ですが下の写真、情報商材「アンリミテッドアフィリエイト」を冊子印刷したものです。 作ってからかなり年月が経つこと、本体はバージョンアップされてて内容が古いこと、今から読むならiPadで ...

書籍レビュー

【書評】アドセンスやってないけど「のんくら本」は読む価値アリか?読んでみた

「Google Adsenseマネタイズの教科書[完全版]」、通称「のんくら本」のレビューです。 Googleアドセンスについての解説本といえば、申し込み方法〜基本的な使い方のステージから解説した初心 ...

no image

WordPress

バックアッププラグイン「UpdraftPlus」について

ウェブサイト移転ツールと言えば「All-in-One WP Migration」が有名ですが、UpdraftPlusもプレミアム版にアップグレードするとウェブサイト移行機能が使えるようですね。知りませ ...

マニュアルはコチラ

カテゴリ一覧スライドショー

上記の一覧を簡易にスライドショーに変えることが可能です。

no image

未分類

2020/3/1

手持ちの本を電子書籍化し始めた理由

最近、手持ちの本を少しづつスキャンして電子書籍化し始めました。 いやー、もうね。 紙の本なんてオワコン! これからは電子書籍ですよ。 …なんて理由ではなく、これには色々と考えるところがありました。 本棚を見て思った「これ、いつ読むの?」 2019年末の大掃除中、ふと本棚に目が行きました。 こっから自分の悪い癖。掃除を中断して本の中身を見ちゃったりして、あーこれこれ、面白んだよね!と読み耽ってしまったり。 で、 ふと思ったんです。 こうしてたまにしか開かない本を溜め込んで、何か意味あるの? って。 読むため ...

ReadMore

no image

未分類

2020/2/12

今後のアフィリエイト活動について

こんにちは、とーまです。 私、昨年の12月で44歳になりました。 Twitter上で仲良くさせて頂いてるアフィリエイターさんの中でも年齢は少し上の方だと思います。 いい歳です。立派な中年です。おじさんです。 久々の記事執筆で何とも上手くまとまらず、何が言いたいのかよく分からない記事になりますが、今考えてる事や現在の状況を書き散らします。 私は39歳頃から人生の折り返し地点をかなり意識するようになりました。 実を言うとこの頃から何とも言い知れぬ不安に襲われる毎日を過ごしています。 芸能ニュースなんか見てると ...

ReadMore

未分類

2019/8/27

アンリミテッドアフィリエイトのこと

こんにちは。早速ですが下の写真、情報商材「アンリミテッドアフィリエイト」を冊子印刷したものです。 作ってからかなり年月が経つこと、本体はバージョンアップされてて内容が古いこと、今から読むならiPadで読むなどの理由で廃棄することにしました。 アンリミテッドアフィリエイトは元々、オールジャンルの職業向けに書かれたWEBマーケティングの教材です。 これが何故か情報商材アフィリエイターに重宝されたので、情報商材を売るためのノウハウというイメージを持っている方も多いかと思います。 むかーし、情報商材アフィリエイタ ...

ReadMore

書籍レビュー

2019/4/8

【書評】アドセンスやってないけど「のんくら本」は読む価値アリか?読んでみた

「Google Adsenseマネタイズの教科書[完全版]」、通称「のんくら本」のレビューです。 Googleアドセンスについての解説本といえば、申し込み方法〜基本的な使い方のステージから解説した初心向け寄りの本が多いです。 それらの本の中でアドセンスによる収益を本質的に上げる事、広告を貼った後のサイト運営について語っている本はほとんどなかったように思います。 アドセンスユーザーが知りたいのは、クリック率を上げたい。思ったような広告が出ない、サイトをどのように運営していくのが正解なのか、などの悩みではない ...

ReadMore

no image

WordPress

2019/3/23

バックアッププラグイン「UpdraftPlus」について

ウェブサイト移転ツールと言えば「All-in-One WP Migration」が有名ですが、UpdraftPlusもプレミアム版にアップグレードするとウェブサイト移行機能が使えるようですね。知りませんでした。 「All-in-One WP Migration」はサイト移転機能がデフォルトで使えて、有料版にするとバックアップ機能が使えたんですよね、確か。UpdraftPlusと逆だー(;^_^両者とも、移転機能とバックアップ機能両方使うには有料版にアップグレードする必要があるのは同じですね。 関連記事WP ...

ReadMore

マニュアルはコチラ

会話ふきだし

「会話ふきだし」は最大8つまで設定でき、1クリックで呼び出すことが可能です

これはダミーのテキストですこれはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストです

マニュアルはコチラ

表示を増やしたい場合は専用のプラグインもあります。

Webアイコン

ショートコードに挿入するためのWebアイコンです(アイコンが直接表示されるわけではございません。ショートコードの引数に使用して下さい)

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を設定することで内部リンクをブログカード化します

no image
このサイトについて

このサイトはグラフィックデザイナーの羽寺冬馬が副業のアフィリエイトの事やその他思った事をツラツラと書き連ねるサイトです。 普段はサイトアフィリエイトに精を出しています。 このブログは書きたい事を好きな ...

続きを見る

外部リンクをブログカード化するには専用プラグイン(有料)があります。

マニュアルはコチラ

  • この記事を書いた人
  • 最新記事

とーま

とーま 本業:昼間はデザイナーをやって、副業でサイトアフィリエイトやってます。通勤時間にiPhoneから作業することがほとんど。月収は5万前後ですが、大事な家計の足しになってます。 ⇒もっと詳しく

よんでほしい記事

1

美容ブロガー亀山ルカ(@RUKAv2)さんとブログ飯で有名な染谷昌利(@masatoshisomeya)さんの共著「本気で稼げるアフィリエイトブログ」。 Twitterでフォローしてる方々の間で好評で ...

2

サイトのヘッダーやアイキャッチに不可欠な写真素材。イイ感じの写真が揃ってる写真素材(フォトストック)サービスを厳選して紹介します。 写真AC 国産のフォトストックサービス。いきなりですが本命です。私は ...

-未分類

Copyright© ちょこばこ , 2020 All Rights Reserved Powered by AFFINGER5.