記事掲載方法

Contents

記事投稿の基本

メインイメージの作成

(画像クリックしたら拡大されるよ!)

  • 画像作成要件
  • メインイメージは width=”872″ height=”363″ 以上で作成することが望ましいです。(真四角の画像でもOKですよ。その場合は幅が872pixel以上になり、真ん中に素材がうつるようにすると色々上手く行きます)
  • .jpegで作成し、保存名は半角英字で保存してアップしましょう。

 

カテゴリ

カテゴリーとは?

記事を「ジャンル」ごとに分類する為にカテゴリーが存在します。例えば、野球のニュースサイトでしたら、「巨人」「阪神」「中日」というふうにチーム毎に分類すると、巨人ファンは巨人のカテゴリーを、阪神ファンは阪神カテゴリーをという感じで、好きなページだけ閲覧するに便利になりますよね。

カテゴリーはサイトの構造を形作るものでもあるのです。

 

カテゴリは下記から設定可能!

(画像クリックしたら拡大されるよ!)

2つ以上のカテゴリ選択も可能です。2つ以上選択するとそれぞれのカテゴリページに記事が掲載されます。

現状では下記のカテゴリを用意しています。

まだカテゴリの中に記事が入っていない場合は非表示にしているので、「なんで表示されないの!」とおもったら椿もしくは榎本まで言ってください。

タグ

タグとは?

タグは、記事の中で使われている「キーワード」を設定しておく為のものです。例えば、選手の名前をタグに登録したり、歴史に残る試合の名前など、カテゴリーの分類とはまた別枠のものであると効果的です。また、記事内でよく使われているキーワードをタグに設定しても構いません。そうすることで、ユーザーがアーカイブからお目当ての記事を探したいときに役立ちます。

タグは記事下に表示されます!
同じタグをつけた投稿がたくさんあれば、ユーザーは似た記事を検索することができます。

ハッシュタグみたいなものですね。

なので、タグをつける際に注意したい点は以前同じタグを作成していないか?を確認することです。

意味が一緒でも表記ブレなどで新しいタグが作成されてしまいますので、その点要注意です。
(例:「お問い合わせ」と「お問合せ」など)

テキスト・フォント

見出しのスタイルはビジュアルタブの「段落▼」から変更できます。

ビジュアルタブは、ある程度デザインを見ながら編集できます。

テキストタブはHTMLコードを直接打ち込んで反映させるやり方です。

選択できる見出しと段落のサンプルソース・スタイルを書いておきます。

テキストタブの場合はHTMLタグを参考にしてくださいね★

 

段落

 

<p>これは段落です。</p>

これは段落です。

見出しスタイル

 

[見出し1]

これは見出し1です。

<h1>これは見出し1です。</h1>

※記事タイトルに使います。

[見出し2]

これは見出し2です。

<h2>これは見出し2です。</h2>

 

[見出し3]

これは見出し3です。

<h3>これは見出し3です。</h3>

 

[見出し4]

これは見出し4です。

<h4>これは見出し4です。</h4>

 

[見出し5]
これは見出し5です。
<h5>これは見出し5です。</h5>

 

[見出し6]
これは見出し6です。
<h6>これは見出し6です。</h6>

 

画像・キャプション

画像の挿入は投稿にドラッグするか「メディアを追加」ボタンから行えます。

メディアを追加

キャプションです。

アップロードする際には下記設定を行います。

少々面倒ですが、こんな感じです↓

  • それぞれの設定
  • URL・・・自動的に入ります。※.jpegで作成し、保存名は半角英字で保存してアップしましょう。
  • タイトル・・・自動的に入ります
  • キャプション・・・イメージの下に見えるイメージの説明や補足事項です。
  • 代替テキスト・・・万が一イメージが読み込めなかった場合は、こちらのテキストが表示されます。altの役割もしてくれます。SEO的にも親切なので設定しましょう。
  • 説明・・・画像に関する覚書・メモと考えてもらって良いです。「説明」に記入した項目は、HTML上には一切書き出されることはありません。あくまでも、管理者が自分のために設定する覚書です。

HTMLではこんな感じで出力されます。

<a href="https://fitbar.style/wp-content/uploads/2017/09/170926_007.jpg" data-rel="lightbox-5" title="">
 <img class="size-full wp-image-251" src="https://fitbar.style/wp-content/uploads/2017/09/170926_007.jpg" alt="メディアを追加" width="599" height="96" srcset="https://fitbar.style/wp-content/uploads/2017/09/170926_007.jpg 599w, https://fitbar.style/wp-content/uploads/2017/09/170926_007-300x48.jpg 300w, https://fitbar.style/wp-content/uploads/2017/09/170926_007-304x49.jpg 304w, https://fitbar.style/wp-content/uploads/2017/09/170926_007-282x45.jpg 282w" sizes="(max-width: 599px) 100vw, 599px">
</a>
<p class="wp-caption-text">キャプションです。</p>

シンプルなキャプションも用意しています。

これはテキストタブから下記のように追加してください。

<span class="img-caption">サイクルイメージ1週目</span>

どちらをつかってもOKです。

 

リスト・引用

リストの使い方

リストは箇条書きに使います。
要点を箇条書きで記述すれば、ユーザーは重要な点がすぐに頭に入ってきますし、検索エンジンも重要な点が理解しやすくなります。

段落リスト

サンプル
  • 鹿目まどか
  • 暁美ほむら
  • 巴マミ
  • 美樹さやか
  • 佐倉杏子
  • 美国織莉子
  • 呉キリカ
コード
<ul>
<li>鹿目まどか</li>
<li>暁美ほむら</li>
<li>巴マミ</li>
<li>美樹さやか</li>
<li>佐倉杏子</li>
<li>美国織莉子</li>
<li>呉キリカ</li>
</ul>

HTMLソース<ul>~</ul>の中に<li></li>を入れてあげましょう!

番号付きリスト

サンプル
  1. 1. 鹿目まどか
  2. 2. 暁美ほむら
  3. 3. 巴マミ
  4. 4. 美樹さやか
  5. 5. 佐倉杏子
  6. 6. 美国織莉子
  7. 7. 呉キリカ
コード
<ol>
<li>1. 鹿目まどか</li>
<li>2. 暁美ほむら</li>
<li>3. 巴マミ</li>
<li>4. 美樹さやか</li>
<li>5. 佐倉杏子</li>
<li>6. 美国織莉子</li>
<li>7. 呉キリカ</li>
</ol>

HTMLソース<ol>~</ol>の中に<li></li>を入れてあげましょう!

タイトル付き段落リスト

サンプル
  • 出演者
  • 鹿目まどか
  • 暁美ほむら
  • 巴マミ
  • 美樹さやか
  • 佐倉杏子
  • 美国織莉子
  • 呉キリカ
コード
<ul>
<li class="title">出演者</li>
<li>鹿目まどか</li>
<li>暁美ほむら</li>
<li>巴マミ</li>
<li>美樹さやか</li>
<li>佐倉杏子</li>
<li>美国織莉子</li>
<li>呉キリカ</li>
</ul>

<li>ソースにclass=”title”をいれるだけでタイトルになります。

引用の使い方

サンプル

偶然街なかで昔付き合っていた彼女とすれ違ったとき、俺は思わず振り返っていた。 彼女の姿は昔と全然変わっていない。急に押し寄せてきた懐かしさに、もう忘れていたはずの感情があふれ出しそうになる。 彼女に声をかけようか、そう思い手を伸ばそうとする。 だがその直後、俺は気づいてしまった。彼女の隣に俺の知らない男が寄り添っていることを。 冷や水を浴びたように冷静になる。そして俺は理解した。彼女は俺の知らないところで既に新しい今を生きているのだと。 それなら俺だって振り返っちゃダメだ。

コード
<blockquote>偶然街なかで昔付き合っていた彼女とすれ違ったとき、俺は思わず振り返っていた。 彼女の姿は昔と全然変わっていない。急に押し寄せてきた懐かしさに、もう忘れていたはずの感情があふれ出しそうになる。 彼女に声をかけようか、そう思い手を伸ばそうとする。 だがその直後、俺は気づいてしまった。彼女の隣に俺の知らない男が寄り添っていることを。 冷や水を浴びたように冷静になる。そして俺は理解した。彼女は俺の知らないところで既に新しい今を生きているのだと。 それなら俺だって振り返っちゃダメだ。</blockquote>

<blockquote>~</blockquote>で括ってあげると引用文になります。

リンク

通常のリンク

例えば「詳しく見る」という文字列や「fitbar.style」にリンクを付けたい場合は文字列を選択し、書式メニューの鎖マークを押しましょう!
入力画面がでてくるのでそこにリンク先を設定したら完成!
もっと詳しく設定したい場合は歯車マーク(設定)を押します。

  • URL・・・リンク先のURLをいれる。
  • リンク文字列・・・リンクを表示するときのテキスト(もしくはURL)を入力

 

別タブで開くときの設定

サンプル

詳しく見る

リンクの挿入・編集設定画面の「リンクを新しいタブで開く」にチェックをいれるか、HTMLソースに「target=”_blank”」を追加します。

コード

<a href="#" target="_blank">詳しくはこちら</a>

埋め込みリンク

FIT BARサイトの中の他のコンテンツを紹介する場合や、他のサイトの記事を紹介したい場合は、
ビジュアルタブでURLを入力し、リンクを貼らない状態にすると下記のように自動的に情報を取得し、表現してくれます。

ダミーポスト①投稿記事テスト

本日OPEN!新感覚のフィットネスラウンジ【ReXeR Lifestyle&Fitness】

FITNeSS LOUNGE

 

簡単です。
使えるのは記事ページと固定ページだけっぽいのでその点だけ注意です。

 

 参考リンク

サンプル

外部リンク:https://fitbar.style/

 

コード

<p class="post-outbound-link" style="text-align: right;">外部リンク:<a href="https://fitbar.style/" target="_blank" rel="noopener noreferrer">https://fitbar.style/</a></p>

HTMLソースでタグに「 class=”post-outbound-link”」を追加してあげましょう!

 

SNS・Youtube

Twitter 難易度★1

対象ツイートのメニューから埋め込みリンクをコピーし、埋め込みリンクと同様にビジュアルタブでリンクを貼るだけ!

Instagram 難易度★3

サンプル

コード
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:62.5% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BTL4wICgcbB/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">エクラフチュール / ALBION💓 * 今月からエクラフチュールアンバサダーとして アルビオン様の美容液を使い始めてますღ˘◡˘ற♡ 前から気になってた美容液なんやけど 化粧水とかパックの前に塗るもので 浸透力が増すからいい感じ😍! 定期的に肌の変化投稿するつもり♡ * * #アルビオンエクラフチュールアンバサダー #アルビオン #エクラフチュール #美容液 #スキンケア #洗顔後の新習慣 #ソラフェス #基礎化粧品 #メイク #ALBION #サロモ #like #girl #selfy #instagood</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Marika Kajiwaraさん(@marika_kajiwara)がシェアした投稿 - <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2017-04-22T11:20:17+00:00">2017 4月 22 4:20午前 PDT</time></p></div></blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

掲載したいInstagram投稿をひらきましょう。
右下のメニューから「埋め込み」を選択し、埋め込みコードをコピーします!
コピーしたソースをテキストタブから反映したい場所にペーストしたら完成!

参考:http://insta-antenna.com/method-picture-display

Youtube 難易度★1

ビジュアルタブでリンクを入れてあげましょう!

Master Sliderの使い方

1. Master sliderを開く

2. ページ下部のCreate New Sliderをクリック

3. Sample Slidersの中から、テンプレートを選ぶ

  • Slider Without Thumbnails:写真のみのスライダー
  • Slider With Slide Info:写真+文章のスライダー

4. テンプレートを選択して、ページ下部のCREATEをクリック

5. テンプレートにデフォルトで入っている画像を削除

6. Add Slideをクリックして、メディアから画像を挿入

7. スライダーに文章を挿入(Slider With Slider Infoのみ)

  • Slideの中のslide infoをクリック
  • 文章を挿入したい画像を選択して、文章を入力

8. ページ上部タブのSLIDER SETTINGSをクリック

9. スライダーのタイトルを変更

  • Slider nameの部分を編集し、タイトルを設定

10. Slider画像のサイズを変更

  • Slider width:648px
  • Slider height:348px

11. Navigationを変更

  • 下記タブをすべてONにする
  • 「AutoplayLoop」「navigation」「Pause at the final slide」

12. 写真の背景色を変更(画像サイズが小さい写真を使用する場合のみ)

  • Appearanceを変更
  • Background colorをクリック
  • 出てきた画面の下にあるスライダーを一番左にする

13. Save changesをクリックして、設定を保存

14. スライダーのショートコードをコピー

  • Master sliderをクリックし、作成したスライダーに表示されているショートコードをコピー

15. 挿入したい記事のテキストモードを開く

16. 導入したい場所にペースト

17. 完了!!!

作成したスライダーを編集する方法

1. Master Sliderをクリック

2. 編集したいスライダーをクリック

3. 編集しましょう!

作成したスライダーを削除する方法

1. Master Sliderをクリック

2. 削除したいスライダー右のdeliteをクリック

3. 削除完了

FiTBAR用に設定したテンプレートを使う方法

毎回テンプレートの画像を削除したり、スライダーの設定をするのが面倒な場合、FiTBAR用のテンプレートを利用すると楽にスライダーが作成できます。

FiTBAR用のテンプレートを使えば、面倒な設定をする必要がなく、

  • スライダーのタイトル変更
  • 写真の追加
  • Slider Infoで文章の編集(写真+文章のテンプレート使用時のみ)
  • Save Changes

これでスライダーが作成できます。

写真のみ(Slider Without Thumbnails)と同じようなスライダーを作りたい

1. Master sliderをクリック

2. 「写真」という名前のスライダーの右にあるduplicateをクリック

3. 「写真 copy」という名前で、新しいスライダーが作成される

4. 「写真 copy」をクリックして編集

5. Add Slideをクリックして、メディアから画像を挿入

6. Save changesをクリックして、設定を保存

7. スライダーのショートコードをコピー

8. 挿入したい記事のテキストモードを開く

9. 導入したい場所にペースト

10. 完了!!!

写真+分量(Slider With Slide Info)と同じようなスライダーを作りたい

1. Master sliderをクリック

2. 「写真+文章」という名前のスライダーの右にあるduplicateをクリック

3. 「写真+文章 copy」という名前で、新しいスライダーが作成される

4. 「写真+文章 copy」をクリックして編集

5. Add Slideをクリックして、メディアから画像を挿入

6. Save changesをクリックして、設定を保存

7. スライダーのショートコードをコピー

8. 挿入したい記事のテキストモードを開く

9. 導入したい場所にペースト

10. 完了!!!

公開設定

 

公開予約

時間指定で記事投稿時間を予約できます。

 

ディスプリクション

ディスクリプションは自然検索の検索結果に出る文章です。
またそれだけではなく、サイト内のTOPページやカテゴリページにも表示されますので必ず記入してください。

記事の抜粋でOK!多すぎず少なすぎず・・・よしなに

 

メタキーワード

記事のコンテンツシートに記載のキーワードをいれる。

 

メタロボット

  • noindex・・・noindexとは、検索エンジンにページを認識(インデックス)させないために指定するmeta要素のcontent属性に指定できる値です。
  • nofollow・・・nofollowとは、クローラーにページ内のリンクを辿らせず、リンク先にページの評価を渡さないために指定するmeta要素のcontent属性に指定できる値です。

記事以外のコンテンツ(例えばこのページなどはサイトに関係ないのでnoindex・nofollowにチェックいれています。)

CTA

これはまだ運用決まってないので保留。資料ダウンロードからメルマガ登録へ繋げる??

記事納品前の確認事項

記事の統一感を高めるための確認事項を記載しています。

記事の納品前に閲覧し、抜け漏れがないか確認をよろしくお願いいたします!

画像について

画像のテイスト

画像は、アイキャッチ・記事内画像共に、FiTBARの雰囲気に合うような画像を選定し、添付。

サイト全体のビジュアルを統一するため。

●FiTBARのイメージワード

スタイリッシュ、かわいいよりかっこいい、シンプル、おしゃれ、大人

●FiTBARのイメージ画像

記事文章内画像サイズ

記事内に挿入する画像のサイズを下記サイズ前後で統一する。

画像サイズのばらつきを防ぎ、コンテンツの見易さを高めるため。

●幅:300px × 高さ:220px

●画像のサイズイメージ

アップロードする画像のファイル名

アップロードする画像のファイル名は、英語にする。

画像管理のエラーを防ぎ、画像管理を容易にするため。

●良い例
sample.jpg
sample_message.jpg

●悪い例
サンプル.jpg
サンプル_メッセージ.jpg

文章について

文の改行

文章は、「。」「!」などの、区切り毎に改行する。「、」は文章が後に続くので、改行しない。読みやすい文章にするため。

●良い例:

●悪い例:「。」「!」で文章を改行していない

文章の行間

文章の行間は、改行毎に一行分空けるようにする。

文章の間に余白をつくることで、読みやすくするため。

●良い例:「。」「!」ごとに、一行行間を空けている

●悪い例:二行分空いてしまっている

リンクについて

リンク文字列の設定

長いリンクや、見栄えの悪いリンクはリンク文字列を編集し、見栄えよくする。

記事閲覧時の見栄えを良くするため。コンテンツの邪魔をしないため。

下記URLでリンクを設定する場合の例:

https://www.weider-jp.com/protein/columns/detail/?id=76&category=muscle

●良い例:リンク文字列を編集している

リンク先URLは(https://www.weider-jp.com/protein/columns/detail/?id=76&category=muscle)で、リンク文字列を(https://www.weider-jp.com/)に変えている

https://www.weider-jp.com/

●悪い例:リンク先文字列を編集していない

リンク先URLをそのまま文字列として使用しているため、長く見栄えの悪いリンク先文字列になっている。

https://www.weider-jp.com/protein/columns/detail/?id=76&category=muscle

新規タブで開くようにリンクを設定

リンクは新規タブでページを開く仕様にするため、リンクを設定する際にリンクを新しいタブで開くにチェックする。

サイトの使い勝手を上げるため。

やり方は、こちらを確認。

パーマリンクの設定

パーマリンクは、タイトルと関係する英語で設定する。

●タイトルが下記の際の例:

「筋肉と体重の不思議な関係。見た目が良ければ数字は問題ない理由」

●良い例:

筋肉と体重の不思議な関係。見た目が良ければ数字は問題ない理由

●悪い例:漢字とひらがなで設定している

https://fitbar.style/筋肉と体重

●悪い例:関係のない英語で設定している

https://fitbar.style/tokyotower

メタを設定する

メタディスクリプションとメタキーワードの設定

メタディスクリプションとメタキーワードを設定する。

【メタディスクリプション】
検索ページに表示される文章。

メタディスクリプションは、記事を読んでもらえるような文章を120文字程度で設定する。

【メタキーワード】
記事に設定したキーワード

メタキーワードは、記事作成を決める際に設定したキーワードを、カンマ区切りで記載する。

記事文末まとめ文について

まとめ部分は、記事の要点やポイントを、ユーザーが見てわかるようにするところ。

作成記事の中で大切だと思うポイントなどを簡潔に記載して、記事の要点(一番大事なポイント)をまとめる形で文章を作成する。