ブロックエディターのつかいかた
ワードプレスのテーマがSWELLの場合のブロックエディタの使いかたを共有します。
リンクの設定
- 外部リンクおよび内部リンクは「新しいタブで開く」にチェック
- 外部リンクのrel属性：nofollow noopener
- 内部リンク・国の機関サイトリンクのrel属性：noopener
| ⭐️注意事項リンクの挿入時に「noreferrer」が付いてしまうので、コードエディターに変換してnoreferrerの削除をしてください。 |
表の作成
2〜3列の表が理想です。
4列より多くなると、スマホ表示になったときに見づらくなるので、工夫が難しい場合はご相談ください。
| ⭐️表の設定項目テーブルヘッダー設定>ヘッダーカラー：メインカラーテーブルヘッダー設定>ヘッダーテキストを中央寄せにする：チェックテーブル設定>テーブル全体のフォントサイズ：14px1列目に画像を挿入する一覧表の場合：「テーブル1列目の横幅」を150pxに設定 |
ボタンの設置
ブロックの検索窓に「ボタンテンプレ」と入力すると出てきます。
⇩
マイクロコピーを入力し、ショートコードブロック内にボタンのコードを入力してください。
| ⭐️ボタンの設定項目ボタン：リンクを挿入、◯◯にサービス名を記載するマイクロコピー：20字程度で入力する |
ボタン単体を入れたい時は、ブロックの検索窓に「ボタン」と入力すると出てきます。
ボタンのコードの作成について
各サービス紹介のボタンの作成についてです。
ブログパーツを新規作成してください。
ブログパーツのタイトルは「サービス名のボタン」にしてください。
ブロックの検索窓に「ボタン」と入力すると、ボタンのブロックが出てきます。
※一覧表挿入ボタンの場合は「サービス名一覧表挿入ボタン」にしてください。
一覧表挿入ボタンの場合はインラインボタンを使用してください。
⇩
ボタンの中にプリティリンクを挿入してください。
リンク挿入時には必ずnoreferrerを削除する
リンク一覧のシートにボタンのブログパーツも記載しておいてください。
>リンク一覧はこちら
| ⭐️ボタンのテキストサービス名のボタン：サービス名 公式サイトサービス名一覧表挿入ボタン：公式サイト |
アプリボタンのコードの作成について
各アプリ紹介のボタンの作成についてです。
ブログパーツを新規作成してください。
ブログパーツのタイトルは「アプリ名のボタン」にしてください。
ブロックの検索窓に「アプリボタン」と入力すると、アプリボタンのブロックが出てきます。
※一覧表挿入ボタンの場合は「サービス名一覧表挿入ボタン」にしてください。
一覧表挿入ボタンの場合は、ブロックの検索窓に「アプリボタン」と入力すると、アプリボタンのブロックが出てきます。
⇩
ボタンの中にプリティリンクを挿入してください。
リンク挿入時には必ずnoreferrerを削除する
リンク一覧のシートにボタンのブログパーツも記載しておいてください。
>リンク一覧はこちら
※アプリで1つしかリンクがない場合は「ボタンのコードの作成について」と作り方は同じです。
内部リンクの設置
内部リンクを効果的な場所に設置することでサイトのパワーが高まります。
⭐️内部リンクの効果的な場所ユーザーがクリックする場所テキスト内にリンクを設置する例） |
画像の挿入
| ⭐️画像の挿入箇所アイキャッチ必須書き出し：記事内容が一目で伝わるものが理想見出し直下：見出し内容が一目で伝わるものが理想本文内：画像があった方が説明がわかりやすい場合は挿入する バーティカル検索結果で「画像」が左側に来ている場合は、画像対策を強化してください。 |
画像の作成
⚫︎公式サイトのキャプチャ画像の場合
スマホで表示された画面を別のスマホで撮影した画像を使用してください。
| ⭐️画像設定横幅：1000px 縦幅は600px以内画像ファイル：jpg画像の形：横長altタグ：サービス名※縦長の画像の方が良い場合はご相談ください。 |
公式サイトのキャプチャ画像はブログパーツにしてください。
| ⭐️ブログパーツの作成ブログパーツ名：サービス名トップ画面画像の中にプリティリンクを挿入リンク挿入時には必ずnoreferrerを削除する |
作成した画像のブログパーツはリンクシートに記載してください。
⚫︎オリジナル画像の場合
狙いたいキーワードの画像検索結果で出てきた画像を参考にして画像を作成します。
上記の赤丸の画像等を参考に作成する
※画像検索で上位表示＝Googleで高評価を得ている画像
作成した画像例↑
| ⭐️オリジナル画像の設定横長の画像の場合横幅：1000pxまで ※縦幅は自動調整縦長の画像の場合：600px✖️800px正方形の画像の場合：600px✖️600px画像ファイル：jpg透かし画像を挿入altタグ：画像の内容（画像設置箇所の見出しタイトルなど）透かし画像データ：https://www.canva.com/design/DAGDYWogBNk/ZC1VlgAu6H6KvE3T9L2V5g/edit?utm_content=DAGDYWogBNk&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton |
⚫︎アイキャッチ画像
考え方はオリジナル画像と同様
| ⭐️アイキャッチ画像の設定画像サイズ：1200px✖️600px画像ファイル：jpg文字色：メインカラー（#4ACBD6）と黒フォント：ヒカリ角ゴ背景色：お任せイラスト：写真はOK、イラストはCanvaのクリエイターalphavectorの人物を使う。altタグ：記事のキーワードアイキャッチ画像データ：https://www.canva.com/design/DAGCGAoq–I/sEDy6B6E4R2REmcyQMJWJw/edit?utm_content=DAGCGAoq–I&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton |
ボックス（ボーダー設定）
ボックスやキャプションボックスは強調したい場合や箇条書きで説明する場合は使用してください。
あくまでもサイトの情報がわかりやすく、見やすく表示されていることを意識してください。
箇条書きはボックスで囲ってください。
スタイルは自由です。
流れの説明など、数字リストの方がわかりやすい場合は数字リストにしてください。
ボックスの中にタブブロックなど他のブロックを使用しても見やすいです。
ボックス内の背景カラーは見やすければ使用しても良いです。
ボックスに見出しをつけたい時はキャプションボックスのブロックを使用してください。
どのキャプションボックスを使用するかに指定はありませんが、記事やサイト全体のバランスを考えてください。
文字の装飾
ユーザーが読みやすいこと、ユーザーが興味を持つ内容を強調することを意識して文字の装飾はしてください。
| ⭐️文字の装飾大事：太字＋イエローアンダーライン（書式セット1）とっても大事：太字＋マゼンタ（書式セット2） |
太字＋イエローアンダーライ（書式セット1）
太字＋マゼンタ（書式セット2）
ふきだし
口コミを掲載するときはふきだしブロックを使用してください。
ブロックの検索窓に「口コミテンプレ」と入力すると出てきます。
⇩
ふきだし内に口コミを記載してください。
| ⭐️ふきだしの設定項目ふきだし設定>アイコン下に表示する名前：◯◯利用者※◯◯にはサービス名を記載引用は改行して、文字サイズを小さくする |
口コミを増やしたいときはふきだしを増やしてください。
Google mapの埋め込み
- 「クリニック名 地域」でGoogle検索する
バーティカルから「地図」を選択
- 左上の「三」メニューを開く
- 「地図を共有または埋め込む」を選択
- 「地図を埋め込む」を選択、サイズを「小」に変更し、「HTMLをコピー」する
- 基本情報の表のブロックを選択して、赤い枠内のアイコンをクリック
- 「HTMLで編集」をクリック
- 「アクセス」を探す
「アクセス」の次の「<td></td>」を見つけてください。
- 「アクセス」の次の<td></td>の間にコピーしたHTMLをペーストする
下記のような形になればokです。
| <td>コピーしたHTML</td> |
- 「ビジュアル編集」をクリック
- 完成
上記の図のように表示されていればokです。
サービス紹介見出し
ブロックの検索窓で「サービス紹介」と検索すると出てきます。
テンプレに従ってサービス紹介の内容を埋めていってください。
⇩
完成例は既存記事をご確認ください。
タブブロックでの工夫
例）「24時間受講可能」「24時間以外」でタブを作成する
⇨一覧表で24時間受講かどうかの◯✖️表記ではなく、タブで分けて表示するとみやすい
例）「イングリッシュベル」「NOVA」のタブを作成する
⇨複数サービスの比較表をタブで分けて表示するとみやすい
テキストモードのつかいかた
htmlの基本的な原則は「はじまりがあったら、終わりがある」
よくつかうhtmlコード
ショートコードの使い方、中身の作成方法
コメント