WordPress装飾マニュアル

★マークは、記事作成に必須の作業、もしくは頻繁に利用する作業なので、
必ずご確認をお願いいたします。

★吹き出しキャラの使用

各見出しの最後に、吹き出しを使用して記事を読みやすくする工夫をします。

吹き出しキャラの画像を右側と左側のどちらかに表示できるのですが、以下の通りルールに沿って設定をお願いします。

キャラアイコンが右側

教える立場、詳しい人からのアドバイス、補足など

キャラアイコンが左側

初心者、質問する人、わからない、悩んだり困ったりするなど

見出し内の情報をユーザーにより理解してもらうための工夫として吹き出しを利用します。

本文に対しての補足や注意事項、注意喚起、アドバイスといった使い方をすると記事を読みやすくなり、わかりやすく伝わりやすい記事になります。

吹き出しの文章は短い文章でまとめるようにしてください。多くても30~40文字程度としてください。

吹き出しの使い方は以下の通りです。

吹き出しにしたい文章を選択し、上の図の場所をクリックします。

吹き出しを選択すると、吹き出しが使えるようになります。

吹き出しのバリエーションや種類は、右側から選ぶことができます。クリックするとすぐに反映され、変更も簡単にできます。

別の方法からも吹き出しにアクセスできます。編集画面左上の＋マークをクリックします。

ブロックメニューがたくさん出てくるので、スクロールしていき、吹き出しをクリックします。

吹き出しを複数回使用すると、履歴に記録され簡単にアクセスできるようになります。

吹き出しの形や向き、色なども編集できますので、ご自由に活用ください。

※吹き出しのデザインや色を変更しても、公開される記事には反映されません。システム担当者によりデザインを一括で管理しております。吹き出しの設定は、どちらの向きにするかどうかを選択いただければ、あとは自動的にデザインが統一されたものに反映されます。

★スクリーンショット画像の準備方法、撮影方法

windowsのかたは、こちらのフリーソフトが便利なのでぜひお使いください。
https://www.screenpresso.com/

macの方はこちらのページを参考にスクリーンショット画像を撮影できます。
https://weekly.ascii.jp/elem/000/002/624/2624182/

公式で配信されている動画の一部分をスクリーンショットで撮影し、その画像を引用で使っていただくこともOKです。

★YouTube動画から動画を静止画として書き出す場合

YouTube動画をスクリーンショットしてトリミングが面倒という方は、下記のchrome拡張子を入れることによって、簡単にYouTube動画の1コマを静止画としてスクリーンショットすることができます。お試しください。
https://chrome.google.com/webstore/detail/screenshot-youtube/gjoijpfmdhbjkkgnmahganhoinjjpohk

★改行のレイアウトについて

NG

OK

NGとOKの違いがわかりますでしょうか？

改行する場所に違いがあります。なるべく文章は途中で改行せずに１つの塊でまとめるようにしてください。中途半端に改行すると印象が悪くデザインが崩れて読みにくくなります。※特にスマホでの表示時

ワードプレス編集画面で、シフトキーを押しながらエンターキーを押すと、余白を作らずに改行できます。シフトキーを押さずにそのままエンターキーを押すと、余白を作って段落を分けることができます。

改行は使わず、段落を使って行間を作るようにしてください。

★文字の強調（赤＋太文字、青マーカー＋太文字）

各見出しの中で特に重要な情報、特に伝えたい目立たせたい情報に文字は、赤文字＋太文字や、青マーカー＋太文字を使って目立たせてください。

赤文字＋太文字
・ポジティブやメリットの情報
・金額、割引、キャンペーン、速度などの数字部分

青マーカー＋太文字
・ネガティブやデメリットの情報

１つの見出しの中で必ず1回以上は文字強調のデザインを使ってください。

※指定された以外の装飾を使わないでください。必ず赤文字＋太文字に統一をしてください。

文字を選択し、まずは太文字の設定をします。

続いて文字を選択したまま、エディタを展開し、「テキスト色」を選択します。

赤色を選択します。これで完了です。

続いて、黄色マーカーの使い方です。

文字を選択した状態で、鳥マークの「SWELL装飾」を選択します。

青色を選択して青色マーカーになるようにお願いします。

※マーカーの色を変えても、実際に公開される記事では全て同じ色の青色に統一されています。記事のデザインは全てシステム担当者と管理して決定しております。

★リストタグの使い方

箇条書きで一覧で情報をまとめる際、リストタグを使って頂いております。

リストタグの設定方法は、こちらの記事の内容をご参考ください。
https://swell-theme.com/function/80/

★手順説明デザイン

お問い合わせの手順や解約方法の手順、接続の手順や設定方法の手順など、手順を説明する際に使えるデザインをご紹介します。

このようなデザインでわかりやすく記事で伝えることができます。

左上の「＋」マークをクリックし、検索窓で「ステップ」と検索し、「ステップ」を選択すれば投稿に埋め込まれます。

表の設定とデザインについて

表を作成する際、デザインの整え方について解説します。

表を追加したい場所で「ブロックを追加」をクリックします。

「テーブル」と検索して、テーブルを選択します。

ここで列と行を指定します。後から自由に列や行の追加や削除ができるので、適当な数字を入れて作成します。

エディタの表マークをクリックすると、追加や削除の設定ができます。

表を設置したら、「ヘッダーセクション」と「１列目のtdをthに」のチェックをONに設定お願いします。

ヘッダーラベルが表示されるので、「項目」「内容」といった感じで、入力をお願いします。

キャプションボックス（スタイル枠上2）

記事で必ず1回以上はキャプションボックスの背景デザインを使用してください。

「キャプションボックス」のスタイルは「枠上2」に統一します。それ以外は使わないでください。色はデフォルトを利用するようにしてください。

色はオレンジ、ブルー、グリーンの3パターンありますが、基本的にデフォルトの色を使ってください。
※ご利用のブログデザインによって色は異なります

キャプションボックスのタイトルは必ず入力をしてください。

キャプションボックスをクリックします。

右側のメニューから、デザインの種類や色を選ぶことができます。

タイトルに使用するアイコンも選べます。スタイルを「枠上2」に統一してください。

色はオレンジ、ブルー、グリーンの3パターンありますが、基本的にデフォルトの色を使ってください。
※ご利用のブログデザインによって色は異なります

★口コミの引用方法

Twitterのツイートの埋め込み、YouTubeの動画の埋め込み
こちらの記事を参考に引用してください。
https://more-field.co.jp/web/wordpress-twitter-youtube/

公式サイト、他サイト、知恵袋、価格コム、みん評といった口コミサイトから文章引用
こちらの記事を参考に引用してください。
https://l.pg1x.com/pXjEDUNTqzax1AcP9

説明リスト

こういった単語の意味や商品やブランドなどを解説や説明をする際、こういったデザインを使ってみやすくわかりやすくまとめることができます。

左上の「＋」マークをクリックして、検索窓に「説明」と検索し、説明リストを選択すると挿入されます。右側のメニュー欄からデザインを選ぶこともできます。

Q&Aのデザインの使い方

こういったQ&Aコンテンツを綺麗でみやすいデザインで作ることができます。

左上の「＋」マークをクリックし「FAQ」を選択すると挿入されます。ただしデフォルトのデザインでは色が反映されておりません。

右側のメニューバーをスクロールすると、Q&Aの部分の色を変更できる項目があります。こちらで設定をお願いします。

文字数について

記事編集画面の左上にある「i」マークをクリックすると、文字数が表示されます。
ここに表示される文字数を基準といたします。

画像引用について

※公式サイト以外の、個人ブログなどで掲載されている画像は使用しないでください。個人の方が編集した画像の使用はNGとし、公式サイトや企業サイトで掲載されている画像のみ引用可能とします。

フリー素材画像の使用は原則として設置しなくてOKです。使用していい画像は、自分で撮影した画像もしくはこちらで用意した画像のみを基本とします。

「こういう画像を掲載したい」などご相談があれば遠慮なくお申し付けください。こちらで準備いたします。（場合によってはこちらで後ほど掲載いたします）

使って良いかどうか判断する裏技

エンターテイメント関連をお願いしている方は、公式などなく画像設置が難しい！や、個人サイトで使っている画像がどうしても使いたい！けどこれは使えるのか？といったケースがあります。

その際、下記の方法によって使えそうかどうか一つの判断基準として活用できますので、活用してみてください。
※あくまで一つの方法となり必ず使えるといったわけではないので予めご了承ください

例えば「てんちむ」さんの記事より、下記画像をどうしても使いたい！でもこれは使えるのか？といった場合、

まず、該当の画像を保存します。
下記URLへアクセス
https://www.google.co.jp/imghp?hl=ja

画像アイコンをクリック

「ここに画像をドラッグするか」の部分に、先ほどダウンロードした画像をドラッグアンドドロップ。

「この画像を検索」をクリック

こんな感じで同一の画像がどのサイトで使われているかが検索結果に表示されます。今回のケースですと、4サイトで利用されてますが、こちらは恐らく1サイトが画像を作成し、他の運営者が画像を使い回したことが予想されます。

今回のケースですと、作成者は個人が予想されますので、利用は控えることが望ましいです。逆に、企業サイトなど全く別会社やメディアサイトが利用している場合は、使ってしまって良いと判断して大丈夫です。

★リンク設定について

参考サイトや関連記事などにリンクを設置する際、必ず以下2つの設定を行ってください。

• 「新しいタブで開く」
• 「nofollw」属性の追加

「新しタブで開く」について

「新しいタブで開く」にチェックを付けないと、全く別のサイトにもそのまま画面が切り替わりリンクしてしまいます。そのため、サイトから離脱を促してしまうことになりますので、リンクを貼る際は「新しいタブで開く」にonを付けてください。

「nofollw」属性の追加

「nofollw」にチェックを付けないとSEOのパワーをリンク先に振り分けてしまい、関連性が低い記事などに付けてしまうと、ペナルティを受ける可能性があります。そのため、「nofollw」も必ずonにしてください。

onの仕方としては、リンクを貼ったテキストにカーソルを合わせてクリックすると下記のようにポップアップ表示されるので、「新しいタブで開く」と「nofollow」をonにしてください。

サイト内のリンクを設置する場合は全てoffで良いです。また、当方運営のサイトにリンク付ける際は「新しいタブで開く」のみonでお願いします。

★広告の設置

当方のサイト運営は広告収益を得て運営させていただいてます。そのため、執筆いただいた記事には下記のルールに沿って、広告の設置をお願いしております。

広告の設置方法

広告タグのルールについて

タイトル直下

タイトル直下【ad】

1つ目見出し（見出し上）

h2タグ1つ目上設置用 kimマガジン_記事内_ハイブリッド

1つ目見出し（見出し下）

h2タグ1つ目下設置用【ad】

2つ目見出し※以降見出し上に設置

h2タグ2つ目上設置用【ad】

3つ目見出し

h2タグ3つ目・6つ目・9つ目上設置用 kimマガジン_記事内2×2タイル表示_インフィード小

4つ目見出し

h2タグ4つ目上設置用【ad】

5つ目見出し

h2タグ5つ目上設置用【ad】

6つ目見出し

h2タグ3つ目・6つ目・9つ目上設置用 kimマガジン_記事内2×2タイル表示_インフィード小

7つ目以降は「1つ目見出し（見出し下）」からループ

まとめエリア

最後尾1つ目設置用 Kimマガジン_記事下インフィード5連_インフィード小

最後尾2つ目設置用

★関連記事の挿入について

記事ごとにSEOを強くするために、関連記事へのリンクもお願いしています。

• 関連記事がある場合
• 関連記事がない場合（関連記事があるのかわからない等）
• 複数の関連記事がある場合

関連記事がある場合

① 挿入する段落をクリックします
② ブロック挿入ツールに切り替えます

③ カーソルを下にスクロールします

④ 「関連記事」を選択します

⑤ 選択した段落に「関連記事」が挿入されます
⑥ 入力欄にキーワードを入力すると、キーワードが含まれる記事が表示されるので、関連しそうなキーワードを入力します
⑦ 記事内より候補記事が表示されるので、該当の記事を選択します

⑧ 該当の記事が関連記事として設置されます

一つの記事に最低3つ関連記事の設置をお願い致します。基本的には「リード文の終わり（広告手前）」、「中間地点の広告手前」、「まとめエリアの広告の手前」。記事によっては、関連のキーワードが出た場合は、その段落終わりに設置いただいて大丈夫です。

例）●●●●との対戦が発表されました
「関連記事」●●●●に関連する記事を設置

関連記事がない場合（関連記事があるのかわからない等）

関連する記事が思いつかないや、記事内に関連キーワードがない場合は、直近に公開された記事をランダムに設置してください。直近の公開記事の確認方法は、各サイトのトップページを開き、下記赤枠内が新着順となります。その中からランダムで選んでいただき、「関連記事がある場合」で紹介した方法で、設置してください。

複数の関連記事がある場合

特定のキーワードにおいて関連記事はないが、例えば「人物ネタ」であれば、人物関連のカテゴリ一覧を表示させたい！や、ドラマの場合、ドラマ名のカテゴリ一覧で表示させたいなどあります。その場合は下記方法に沿って設置してみてください。