記事の書き方

WordPressの記事は「ブロック」というパーツを組み合わせて作成します。
入力画面に表示されている(+)アイコンを押すとブロックのメニューが表示されるので、そこからブロックを選んで記事に追加します。

※サイトのデザインルールを維持するため、HTMLタグを直接書いて入力することは極力避けてください。既存のスタイルでまかないきれない表現が原稿にあった場合は、原稿の執筆者と相談してできるだけ既存のスタイルでまかなうようお願いします。

ブロックメニュー

最もよく利用するのは「一般ブロック」の「段落」「見出し」「画像」です。シンプルな記事ならこの3つを組み合わせるだけで作成できます。

「kikoiro.com」には、きこいろの記事用に独自で開発したカスタムブロックが入っています。サイトオープン当初は各記事にHTMLやCSSを個別に設定してデザインを調整していましたが、今後はカスタムブロックを使えば誰でも同じ体裁の記事を作成できます。

本文の入力

本文テキスト(今読んでいるこのテキスト)には「一般ブロック」 の「段落」を使います。ブロックの種類を選んでいない状態で入力すると、通常はこの「段落」ブロックになります。

段落ブロック内でEnterキを押すと新しい段落が作られます。新しい段落を作ると前の段落との間に自動的にマージンが入ります(なので、改行を使って間を空ける必要はありません)。

もし、段落の中で改行したいだけで新しい段落を作りたくない場合は、Shift + Enterを押してください。
このような感じで新しい行になります。

ブロックの編集中に表示される上部のバー(ブロックメニュー)からボールド斜体リンクなど設定できます。▼を押して「マーカー」を選ぶと選択中のテキストにマーカーを引くこともできます

ブロックメニュー→マーカー

見出しの使い方(←これはH2)

見出しには「一般ブロック」の「 見出し」を使います。見出しにはレベルがH2からH6まであって、H2が最も大きい見出しです。
見出しのレベルはブロックメニューから変更できます。

見出しを使って構造化する(←これはH3)

ウェブページの内容は、章/節/項のような感じに文書としてきちんと構造化する必要があります(ちゃんとした構造になっているとGoogleの検索エンジンの評価も上がると言われている)。記事内の見出しには基本的にはH2を使い、そのセクションの中で見出しを使ってさらに内容を分けたい場合にH3を、その中でさらに情報を整理したい場合にH4を…といった感じにするとよいです。

見出しに関する注意

次の点に気をつけてください。

1. H5とH6は使用しない(←これはH4)

H5とH6は使用しないでください(これらのレベル用のデザインを用意していません)。

2. リストやテーブルを活用するほうがよい場合もある

たくさんの情報を見出しで分けて本文で説明するより、リストやテーブルを使うほうが情報の整理には向いています。読みづらくなったらリストやテーブルの使用を検討してください。

kikoiro.comブロックの見出しを使う

「kikoiro.com」の「H3(見出し)」「H4(見出し)」を使うと、「一般ブロック」とは違うビジュアルの見出しを使うことができます。

例)

ノーマルの見出し

下線付きの見出し

付きの見出し

kikoiro.comの見出しブロックを追加したあとにビジュアルの種類を切り替えるには、画面右のサイドバーを使って設定します。
サイドバーが表示されていないときは、画面右上にある設定ボタン(歯車のアイコン)をクリックすると表示されます。

設定ボタン

ブロックを選択した状態でサイドバーを表示し、「ブロック」タブを押すと設定項目が表示されます。

サイドバーの設定項目

見出し以外にも設定項目を持っているブロックがあります。それらも使い方は同じです。
ただし、kikoiro.com以外のブロックの設定項目はむやみに変更しないでください(きこいろ用に作成しているスタイルが対応していない場合がある)

ブロックタイプの変更

ブロックのテキストを維持したまま別のタイプのブロックに変換できる場合があります。ブロックメニューの左端のボタンから変更できます。
他の文書からテキストをペーストしたあとに使用する場面が多い機能です。

画像の追加

写真やイラストなどの画像は、「一般ブロック」の「画像」から追加できます。追加すると、まず次のようなメニューが表示されます。

画像ブロックの追加メニュー

新しい画像を入れるときは「アップロード」、追加済みの画像を再利用するときは「メディアライブラリ」から追加してください(いったんアップロードした画像はすべてメディアライブラリに保存されるようになっている)。
※「URLから挿入」は使用しないでください。

アップロードする画像のサイズに注意する

詳しくはNotionの「画像データの扱い方」を参照。

表示位置とサイズを設定する

画像を追加したあと、メニューから表示位置を「中央寄せ」に設定してください。

画像の配置メニュー

サイドバーの「画像サイズ」を「大」に設定してください。元画像が小さいと「大」が選択できず「フルサイズ」になる場合もあります。

Alt(代替テキスト)を設定する

画像にはAlt(代替テキスト)を設定する必要があります。何らかの理由で画像が表示できなかったときに代わりに表示されたり、視覚障害者がスクリーンリーダーを使ってウェブサイトを読むときにも使われる情報なので忘れずに設定する必要があります。
画像の説明として適切なものを簡潔に入力してください。

テーブル(表)を使う

テーブル(表)を入れたいときは「フォーマット」の「テーブル」ブロックを使います。

ブロックを追加するとこんな感じの画面が出てくるので、列数と行数を指定して「テーブルを作成」を押します。

注意

  • これで作成できるのはシンプルな表のみです。複雑な表を組むにはHTMLを直接編集する必要があるため、必要に応じて相談してください。
  • スマホは画面幅が狭いため、列数の多い表はまともに表示できないことに注意してください。2列以下が無難です。

kikoiro.com用ブロックの説明

undefinedundefined

前述したとおり、見出しを追加するためのブロックです。

undefined

本文でなにかの手順を書きたいときに使用するブロックです。先頭に丸数字(①②③)などを自分で入れて使います。使用例は「障害年金」の「5. 手続きの流れ」などにあります。

undefinedundefined

箇条書きまたは番号付きリストを作成するブロックです。中黒または番号が自動で入ります。
「一般ブロック」の「リスト」と違い、背景色を白にしたり行間のマージンを調整するオプションがあります。リストは基本的に一般ブロックのほうではなくこのブロックを使ってください。

undefined

「本文-リスト」と似ていますが、上部にマーカー付きのタイトルが入ります。使用例は「家族が生活の中で工夫できること」などに出てきます。

undefined

ページ中に入れる仕切り線です。ひとつのセクションの中で話題が長くなってしまって、ちょっと文章を分けたい場合などに使います。
サイドバーで線の長さを選べます。短いほうは文中、長いほうはページの末尾での使用に向いています。
使用例は「片耳難聴と音楽」「片耳難聴者が利用できる福祉制度」などにあります。

undefinedundefined

インタビューの設問と回答に使うブロックです。設問の先頭には「ーー」が自動で付き、回答の先頭は自動的に字下げされます。すべてのインタビュー記事で使用されています。

undefinedundefined

一般の当事者にインタビューした記事には、先頭にインタビュイーのプロフィールが入っています。それを作るためのブロックです。インタビュイーが当事者本人の場合と家族の場合とでブロックが違います。
使用例は『真珠腫性中耳炎で片耳難聴になった男性「人に言いたくないけど伝えずに困るのは自分」』(本人用)、『片耳難聴を持つ子どもの父親「親にできることは“子どもを大切にすること”だけと気付いた」』(家族用)で見られます。

undefined

ひとつのブロックの中にタイトル、段落、複数のテーブルを入れらるようになっているものです。症例などの情報を表を使ってまとめたいときに使用します。使用例は『真珠腫性中耳炎で片耳難聴になった男性「人に言いたくないけど伝えずに困るのは自分」』にあります。

undefined

ページの末尾に「*1 ◯◯◯」などの注釈を入れるためのブロックです。「障害年金」などに使用例があります。

undefined

ページの末尾に参考文献リストを入れるためのブロックです。「ことばの発達や学業への影響」などに使用例があります。

使用しなくてよいブロック

次のブロックは使用しなくて大丈夫です。
「FAQアイテム」は記事以外のページで使うものです。
その他のブロックはページのURLの設定などを済ませてから使う必要があるので、必要に応じてこちらで作業します。

undefinedundefinedundefinedundefined

著者紹介