サイドバーの設定

サイドバー部分には、各モジュールを設置する事が出来ます。
管理画面 > [デザイン] > [トップページサイドバー] or [サイドバー]から設定可能です。

トップページサイドバー	トップページのサイドバーのみに表示
サイドバー	トップページ以外のサイドバーに表示

※レスポンシブwebデザインなので、スマートフォン版の設定は不要です。
※スマートフォンでは、フッタメニューとして表示されます。

各モジュールについて

メディアの認知に寄与するモジュール

このメディアについて

メディア認知の為のモジュールで、メディアのロゴや紹介文を記述。

メディア内の回遊に寄与するモジュール

• 最新記事: メディア内の記事を新しい順に表示。
• 注目記事: メディア内の記事中で閲覧数が多い記事をランキング形式で表示。
• 関連記事: 現在表示されているページに関連する記事を表示。

検索

メディア内の記事をキーワード入力して検索する事が出来るモジュール。

カテゴリー

記事に設定されている全カテゴリーを表示するモジュール。

月別アーカイブ

メディアに投稿された記事を時系列で表示するモジュール。

他サイトへの誘導・リード獲得に寄与するモジュール

リンク

広告リンクや外部リンクなどをテキストリンク表記で設置出来ます。

ピックアップ（バナー）

広告リンクや外部リンクなどを施したバナー画像を設置出来ます。
本モジュールが削除されている場合は、
[サイドバー] > [モジュールを追加] > [HTML] を選択後、下記HTMLを挿入しバナー画像のURLを設定してください。

<ul class="side-pickup">
<li>
<a class="hbm-pickup-owner-banner" href="#" target="_blank">
<img src="【画像URL】" alt="【画像の説明】">
</a>
</li>
<li>
<a class="hbm-pickup-owner-banner" href="#" target="_blank">
<img src="【画像URL】" alt="【画像の説明】">
</a>
</li>
</ul>

モジュールの表示設定

• A.スタートアップ
  • メディア立ち上げ時／10記事程度／メディアの認知を重視
• B.グロース化
  • メディア運用1-2年以上／100記事以上／メディア内の回遊を重視
• C.リード獲得
  • ナーチャリング記事メイン／誘導・リード獲得を重視

上記がメディアの運用目的に合わせた表示モジュール例となります。
デフォルトでは、ほぼ全てのモジュールが表示されている状態となりますので適宜表示順の変更や削減をしてメディアに合わせたモジュールを設定して下さい。

「このメディアについて」モジュールのカスタマイズ方法

管理画面 > [デザイン] > [トップページサイドバー] or [サイドバー]項目にある「このメディアについて」より各内容をカスタマイズ調整する事が出来ます。

メディアロゴ設定

<div class="about-blog-logo">MEDIA JOURNAL</div>

企業名をテキスト表記にする場合は、MEDIA JOURNAL を企業名に書き換えます。

<div class="about-blog-logo">MEDIA JOURNAL</div>
↓
<div class="about-blog-logo"><img alt="企業名" src="画像URL"></div>

画像のロゴを使用する場合は MEDIA JOURNAL の部分を <img alt="企業名" src="画像URL"> に置き換えます。

メディアの紹介文設定

<p class="about-blog-description">メディアの紹介文をここに記載します</p>

メディアの紹介文を変更する場合は、メディアの紹介文をここに記載しますを適切な紹介文に変更します。

読者になるボタン

<!-- 読者ボタン -->
  <div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box">
〜
  </div>
<!-- 読者ボタン -->

不要な場合は、<!-- 読者ボタン --> 〜 <!-- 読者ボタン >までの記述を全て削除してください。

SNSのリンク設定

<div class="follow-sns">
  <p class="follow-sns-title">フォローして更新通知を受け取ろう</p>
〜
  </div>
</div>

不要な場合は、<div class="follow-sns"> 〜 </div>までの記述を全て削除してください。

Twitter設定

<a id="hbm-about-owner-twitter" href="#" target="_blank">

# を適切なリンクに置き換えてください。

Facebook設定

<a id="hbm-about-owner-facebook" href="#" target="_blank">

# を適切なリンクに置き換えてください。

LINE設定

<a id="hbm-about-owner-line" href="#" target="_blank">

# を適切なリンクに置き換えてください。

Instagram設定

<a id="hbm-about-owner-instagram" href="#" target="_blank">

# を適切なリンクに置き換えてください。

「ピックアップ（バナー）」モジュールのカスタマイズ方法

管理画面 > [デザイン] > [トップページサイドバー] or [サイドバー]項目にある「ピックアップ」より各内容をカスタマイズ調整できます。

<ul class="side-pickup">
  <li>
    <a class="hbm-pickup-owner-banner" href="#" target="_blank">
      <img src="https://cdn.blog.st-hatena.com/files/26006613376395758/13574176438093413665" alt="">
    </a>
  </li>
  <li>
    <a class="hbm-pickup-owner-banner" href="#" target="_blank">
      <img src="https://cdn.blog.st-hatena.com/files/26006613376395758/13574176438093413665" alt="">
    </a>
  </li>
</ul>

• # の部分には、適切なURLを入力してリンク先を設定。
• <img src="">部分の画像パスは、設定したいバナーの画像パスに置き換えてください。
  

  alt=""には画像が表示されなかった場合に表示される代替テキストを指定してください。

• デフォルトでは、2つのバナーを設定出来ますが、<li>〜</li>を増減してカスタマイズ出来ますので適宜追加・削除してください。