サイドバー部分には、各モジュールを設置できます。
管理画面 > [デザイン] > [トップページサイドバー] or [サイドバー]から設定可能です。
トップページサイドバー | トップページのサイドバーのみに表示 |
---|---|
サイドバー | トップページ以外のサイドバーに表示 |
レスポンシブwebデザインなので、スマートフォン版の設定は不要です。
スマートフォンでは、フッタメニューとして表示されます。
各モジュールについて
メディアの認知に寄与するモジュール
このメディアについて
メディア認知の為のモジュールで、メディアのロゴや紹介文を記述できます。
メディア内の回遊に寄与するモジュール
- 最新記事: メディア内の記事を新しい順に表示できます。
- 注目記事: メディア内の記事中で閲覧数が多い記事をランキング形式で表示できます。
- 関連記事: 現在表示されているページに関連する記事を表示できます。
関連記事モジュールは記事下にのみ表示可能です。記事下以外の記事内や、サイドバー表示は出来ません。
検索
メディア内の記事をキーワード入力して検索できるモジュールです。
カテゴリー
記事に設定されている全カテゴリーを表示するモジュールです。
月別アーカイブ(カレンダー)
月別アーカイブ(リスト)
メディアに投稿された記事を時系列で表示するモジュールです。
他サイトへの誘導・リード獲得に寄与するモジュール
リンク
広告リンクや外部リンクなどをテキストリンク表記で設置出来ます。
ピックアップ(バナー)
広告リンクや外部リンクなどを施したバナー画像を設置出来ます。
おすすめのモジュール表示組み合わせ
-
A.スタートアップ
- メディア立ち上げ時/10記事程度/メディアの認知を重視
-
B.グロース化
- メディア運用1-2年以上/100記事以上/メディア内の回遊を重視
-
C.リード獲得
- ナーチャリング記事メイン/誘導・リード獲得を重視
上記がメディアの運用目的に合わせた表示モジュール例となります。
デフォルトでは、ほぼ全てのモジュールが表示されている状態となりますので、適宜表示順の変更や削減をしてメディアに合わせたモジュールを設定して下さい。
「このメディアについて」モジュールのカスタマイズ方法
管理画面 > [デザイン] > [トップページサイドバー] or [サイドバー]項目にある「このメディアについて」より各内容をカスタマイズ調整できます。
メディアロゴ設定
画像のロゴを使用する場合は img タグの部分を <img alt="企業名" src="画像URL">
に置き換えます。
<div class="AboutMedia__image">
<img src="https://placehold.jp/240x168.png" alt="">
</div>
↓
<div class="about-blog-logo">
<img alt="企業名" src="画像URL">
</div>
画像を使用する場合は、アイソレーションスペースを設けることを推奨しています。
アイソレーションスペースとは?
メディアの紹介文設定
メディアの紹介文を変更する場合は、メディアの紹介文が入ります。 を適切な紹介文に変更します。
<p class="AboutMedia__des">
メディアの紹介文が入ります。メディアの紹介文が入ります。メディアの紹介文が入ります。メディアの紹介文が入ります。
</p>
読者になるボタン
不要な場合は、<!-- 読者ボタン --> 〜 <!-- 読者ボタン >
までの記述を全て削除してください。
<!-- 読者ボタン -->
<div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box">
~
</div>
<!-- 読者ボタン END -->
SNSのリンク設定
不要な場合は、<p class="AboutMedia__comment"> 〜 </div>
までの記述を全て削除してください。
<p class="AboutMedia__comment">フォローして今後も読む</p>
<div class="AboutMedia__links">
~
</div>
X 設定
#dummy を適切なリンクに置き換えてください。
<a href="#dummy">
<img src="https://cdn.blog.st-hatena.com/files/26006613721166259/6801883189057297163" alt="X" width="30" height="30">
</a>
Facebook 設定
#dummy を適切なリンクに置き換えてください。
<a href="#dummy">
<img src="https://cdn.blog.st-hatena.com/files/26006613721166259/6801883189057297164" alt="facebook" width="30" height="30" class="sns-icon-fb">
</a>
LINE 設定
#dummy を適切なリンクに置き換えてください。
<a href="#dummy">
<img src="https://cdn.blog.st-hatena.com/files/26006613721166259/6801883189057297162" alt="LINE" width="30" height="30">
</a>
Instagram 設定
#dummy を適切なリンクに置き換えてください。
<a href="#dummy">
<img src="https://cdn.blog.st-hatena.com/files/26006613721166259/6801883189057297167" alt="Instagram" width="30" height="30">
</a>
「ピックアップ(バナー)」モジュールのカスタマイズ方法
管理画面 > [デザイン] > [トップページサイドバー] or [サイドバー]項目にある「ピックアップ」より各内容をカスタマイズ調整できます。
- # の部分には、適切なURLを入力してリンク先を設定してください。
-
<img src="">
部分の画像パスは、設定したいバナーの画像パスに置き換えてください。alt=""
には画像が表示されなかった場合に表示される代替テキストを指定してください。 - デフォルトでは2つのバナーが設定できますが、<li>〜</li>を増減してカスタマイズ出来ます。
<ul class="side-pickup">
<li>
<a id="hbm-pickup-owner-banner" href="#" target="_blank">
<img src="https://placehold.jp/300x100.png" alt="">
</a>
</li>
<li>
<a id="hbm-pickup-owner-banner" href="#" target="_blank">
<img src="https://placehold.jp/300x100.png" alt="">
</a>
</li>
</ul>