wordpress cocoon 投稿の見栄えを良くし読みやすくするテクニック

さっさん
さっさん

参戦記を投稿したのですが、おぬっちさんのようなカッコいい投稿のやり方を教えてほしいのですが…。

おぬっち
おぬっち

カッコいい投稿のやり方、私もわからないのです。tetsujinが投稿の体裁を整えてくれてました。

tetsujin
tetsujin

了解いたしました。今回の投稿は、カッコいい体裁の投稿のやり方について解説します。
当サークルのHPは、wordpressのcocoonというテーマを使用しています。cocoon独自の投稿テクニックを紹介します。

Sponsored Links




1.投稿に吹き出し、枠組、アイキャッチ画像を入れる方法

まずは、上記の図のように

①投稿の本文内に「吹き出し」を入れる方法
②投稿の本文内に「枠組」を入れる方法
➂投稿が完了すれば、HPのトップページに「メンバーからの最新投稿」が表示されます。その投稿のイメージ写真を設定する方法

を以下に説明していきます。

1-1.吹き出しを投稿に入れる方法

wordpressにログインして、投稿>新規投稿から投稿ページを開きます。吹き出しを入れたい箇所にカーソルを持っていき、下の図のように「吹き出し」の横の▲をクリック、その後、例えば「おぬっち(左)」をクリックします。

おぬっち
おぬっち

内容を入力してください。

上のように「おぬっち」のアバターが左側に表示され、「内容を入力してください。」となります。この枠の中にカーソルを持っていき、入れたい文字を入れるだけです。投稿本文の右側に吹き出しを表示させたい場合は「おぬっち(右)」をクリックします。

おぬっち
おぬっち

内容を入力してください。

アバターはサイト管理者(当サークルでは私)が設定しますので、あらかじめ希望する画像をお知らせいただく必要があります(アバターが未設定のメンバーまたは画像変更希望のメンバーは個人ラインにて画像を送付ください)。

1-2.投稿に枠組を入れる方法

投稿の内容で、箇条書きにしたい場合に便利なのがこの「枠組」です。例えば、参戦したマラソン大会の魅力を箇条書きに見せたい場合や読者にアピールしたいポイントのまとめなどに使うと読んでもらいやすくなります。その方法は、

投稿ページで スタイル>ボックス(タブ)>OK>黄色 を選択すると下のようになります。

選択を変えれば、「チェック」や「GOOD」等になります。また枠の色も5色から選べます。
文字を入れるには枠内にカーソルを持って行って、文字を入れるだけ。注意点は↓これ。
枠内で改行したい場合は「Shift+Enter」を押してください。「Enter」のみ押すと枠の外にカーソルが移動します。

1-3.アイキャッチ画像を設定する方法

投稿が完了するとHPのトップページに「メンバーからの最新投稿」が表示されます。タイトルのみならず画像も表示されるのですが、その画像の設定方法を説明します。

PCの場合、投稿ページの右側に「アイキャッチ画像を設定」という文字があるので、これをクリック。メディアページが開くので、投稿にマッチする画像を選択するだけです。尚、画像はできるだけ投稿本文内に貼った画像をアイキャッチに設定してください。ですので、投稿文章が完成し、投稿を公開する直前に設定するのが良いと思います。アイキャッチ画像を設定しないとあらかじめ管理者が設定した画像が表示されます(当サークルの場合は陸上競技場のイメージ写真です)。

Sponsored Links




2.投稿に見出し、もくじを入れる方法

「もくじ」については投稿本文内に「見出し」を複数設定することで自動的に作成されます。ですので、「もくじ」は気にせず「見出し」について説明します。なお、投稿後、もくじ内のタイトルをクリックするとその項目まで飛ばすことができるので、読者にとっては便利な機能です。

2-1.「見出し2」を本文内に入れる方法

まず、「段落」の横にある▲をクリック。そこから、「見出し2」を選ぶと、バー(上下に線がある行)が表示されます。その中に、文字を入力し見出しを作成します。見出しとは本文の内容を要約したタイトルのようなものです。

2-2.「見出し2」の投稿内にさらに見出しを入れる方法

同様に「見出し2」の投稿内に小見出しを複数入れたい場合は「見出し4」を設定してください。「見出し4」は「見出し2」を更に細かくタイトル付けしたい場合に使用します。

投稿を作成する手順として、大見出し>小見出し を先に決めてから本文を作成すると読者もわかりやすい内容になると思います。

2-3.見出し内に投稿文を入れる方法

見出しの下に投稿本文を入力するのは「段落」(見出し1の上にある「段落」)を選択してください。ちなみに、文章の入力で改行をする時に大きくスペースが空いてしまう場合は、「Shift+Enter」を押せばスペースがなく改行できます。

Sponsored Links




3.投稿文章にアンダーライン、リンクを貼る方法

いよいよ最終段階、見出しや本文が完成しある程度読みやすくなったけど、もう少し手を加えたいのがマーカーアンダーラインや他のコンテンツとのリンクです。リンクは読者にとっては有効な情報になりますね。

3-1.アンダーラインの入れる方法

投稿ページ内の文字にアンダーマーカーを入れたい場合は、その文字をマウスで選択してから スタイル>マーカー>赤色アンダーマーカー をクリックするとこのようになります。⇒ 例:アドレナリンと足首の…

お好みのマーカーの方法や色を選択してください。

上手なブロガーさんの投稿文はマーカー部分だけ読めばある程度、内容がわかるように設定されているようです。読者の方のことを配慮してマーカー設定することがコツとなります。

3-2.リンクを貼る方法

投稿文章に全ての情報を掲載するのは無理ですよね。過去の投稿と今回の投稿をリンクさせたい場合や他の有効な情報とリンクさせて投稿を充実させたい場合の方法を説明します。

例:2019リレーマラソンin浜寺公園

たとえば、上の例の文字「2019リレーマラソンin浜寺公園」をクリックすれば、別のHPに移動する方法が「リンクを貼る」ということです(上の例はここではリンク設定前です)。

・リンクを貼りたい文字をマウスで選択
・メニュー内の鎖アイコン(上の図の⑨)をクリック
・歯車アイコン(リンク設定)をクリック
・リンク先のURLをペースト
過去の投稿とのリンクは、中段より下の枠内タイトルをクリック
・「リンクを新しいタブで開く」にチェックを入れる
・最後に右下の「リンク追加」ボタンを押す

実際にやってみると自動的に下のような表示になりリンク設定されていることが読者にわかります。

例:チームベストを出したリレーマラソンの内容はコチラ(2019リレーマラソンin浜寺公園)をクリックしてください。・・・・・