記事下に表示される「著者紹介」「この記事が気に入ったら」「お問い合わせ」の各設定は、
プロフィールカード or 記事下(ソーシャルパーツ下)モジュールで設定する事が出来ます。
著者紹介の設定
著者紹介は、記事編集画面の右側にある編集サイドバーから [(1)プロフィールカード] > [(2)著者紹介を選択] > [(3)選択中のプロフィールカード] 項目に著者紹介が表示されたら設定完了です。
プロフィールカードは、各記事毎に設定する必要があるので注意して下さい。
編集サイドバーにプロフィールカードの項目がない場合は、追加をクリックすると選択出来ます。
プロフィールカードで実装された著者紹介は、記事本文末尾の最後に表示されます。
編集サイドバーにプロフィールカードの項目がない場合は、追加をクリックすると追加できます。
追加する場合は次のHTMLを「カード本文」に貼り付けてください。
<div class="writer">
<div class="writer-image"><img src="https://placehold.jp/200x200.png" alt="著者名"></div>
<div class="writer-profile">
<div class="write-name">
<div><span class="writer-name-item">著者名</span><span class="writer-id">id : xxxxxxxxxx</span></div>
</div>
<p class="writer-proifle-body">著者の紹介文をここに記載します。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</p>
<ul class="writer-sns">
<li class="writer-sns-twitter"><a href="#" target="_blank"><img src="https://cdn.blog.st-hatena.com/files/26006613782400880/6801883189057062727">@xxxxxxxxxx</a></li>
<li class="writer-sns-hatebu"><a href="#" target="_blank"><img src="https://cdn.blog.st-hatena.com/files/26006613782400880/6801883189057067144">xxxxxxxxxxのブログ</a></li>
</ul>
</div>
</div>
「編集サイドバーを利用して記事を書く」も併せてご参照ください。
著者紹介のカスタマイズ方法
著者紹介のカスタマイズは「プロフィールカードを記事に設定する」を参考にしてください。
著者名
<div><span class="writer-name-item">著者名</span><span class="writer-id">id : xxxxxxxxxx</span></div>
xxxxxxxxxx の部分に記事を書いた著者名を記述します。
著者画像
<div class="writer-image"><img src="https://placehold.jp/200x200.png" alt="著者名"></div>
https://placehold.jp/〜 の部分をアップロードした著者画像の画像URLに置き換えて著者画像を反映して下さい。
著者プロフィール
<p class="writer-proifle-body">ライターさんの紹介文をここに記載いたします。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</p>
<p>〜</p>
内に著者のプロフィール自己紹介文を記述して下さい。
著者のSNSやブログへのリンク
<ul class="writer-sns">
<li class="writer-sns-twitter"><a href="#" target="_blank"><img src="https://cdn.blog.st-hatena.com/files/26006613782400880/6801883189057062727">@xxxxxxxxxx</a></li>
<li class="writer-sns-hatebu"><a href="#" target="_blank"><img src="https://cdn.blog.st-hatena.com/files/26006613782400880/6801883189057067144">xxxxxxxxxxのブログ</a></li>
</ul>
# 部分に任意のリンクURLを記述して下さい。
この記事が気に入ったら の設定
管理画面 > [デザイン] > [記事下(ソーシャルパーツ下)]にある「この記事が気に入ったら」より
各内容を調整します。
<section class="SingleReader">
<div class="SingleReader__image">
~
</div>
</section>
イメージ画像設定
画像部分には、企業ロゴや記事の雰囲気が伝わるイメージ画像を設定する事が出来ます。
<div class="SingleReader__image">
<img src="https://placehold.jp/540x200.png" alt="">
</div>
https://placehold.jp/〜 の部分をアップロードした画像のURLに置き換え、画像を反映して下さい。alt=""
の""
内には画像の代替テキストを記述できます。
画像が表示されない場合に、記述したテキストが表示されるのでお勧めです。
「この記事が気に入ったら」箇所のテキスト設定
<p class="SingleReader__detail__text">
この記事が気に入ったら<br class="pc_block">読者になろう
</p>
<p>〜</p>
内のテキストを変更して下さい。
一行にしたい場合は、<br class="pc_block">
を削除して下さい。
読者になるボタン設定
<!-- 読者ボタン -->
<div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box">
〜
</div>
<!-- 読者ボタン END -->
不要な場合は、<!-- 読者ボタン --> 〜 <!-- 読者ボタン END >までの記述を全て削除してください。
お問い合わせの設定
管理画面 > [デザイン] > [記事下(ソーシャルパーツ下)] にある「お問い合わせ」より各内容を調整します。
説明文
<p class="SingleContact__text">
オウンドメディアに関して、ご検討の方はまずはお気軽にご相談ください。<br>
経験豊富なスタッフがお客様にあったご提案やアドバイスを行います。
</p>
説明文を変更する場合は、<p></p>
内を適切な説明文に変更します。
お問い合わせ先へのリンク
<a class="SingleContact__btn" href="#dummy">
お問い合わせ
</a>
#dummy を適切なリンクに置き換えてください。
文言を変更したい場合は、お問い合わせ のテキストを変更してください。