Lekumo ビジネスブログ

サポート

記事(ウェブページ)フッターにソーシャルボタンを設置する方法

記事やウェブページのフッターにソーシャルボタンを設置する場合は、管理画面ページ上部のメニューから [ブログ管理] - [デザイン] をクリックし、ページ内のタブから [PC] をクリックし [表示項目を選択] をクリックします。

  1. [記事/ウェブページ] 項目内の [記事のフッター]([ウェブページのフッター])にチェックを入れ [設定] をクリックする
  2. footer-social01.png

  3. 表示したいソーシャルボタンの項目名にチェックを入れる
    • Facebook シェアボタン
    • X (旧 Twitter)
    • はてなブックマーク
    • Tumblr
    • Pinterest
    • Email This

  4. [変更を保存] をクリックする
  5. [表示項目] ページの [変更を保存] をクリックする

上級者テンプレートを利用しているブログの記事(ウェブページ)フッターにソーシャルボタンを設置する

上級者テンプレートを利用している場合は、管理画面ページ上部のメニューから [ブログ管理] - [デザイン] をクリックし、ページ内のタブから [PC] をクリックし以下の手順を行ってください。

  1. [entry-footer-links] を開く
  2. 以下のソースをコピー & ペーストし、不要なソーシャルサービスのソースコードを削除する
  3. <!-- post footer links -->
    
    <p class="entry-footer-share entry-footer-share-buttons">
    
    <!-- X -->
     <span class="separator">|</span> 
    <span class="entry-footer-links-twitter">
    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
    <a href="http://twitter.com/share" class="twitter-share-button"
       data-url="<MTIfNonEmpty tag="EntryShortURL"><$MTEntryShortURL encode_js="1"$><MTElse>
    <$MTEntryPermalink encode_js="1"$></MTElse></MTIfNonEmpty>"
       data-counturl="<$MTEntryPermalink$>"
       data-text="<$MTEntryTitle$>"
       data-count="horizontal">Tweet</a>
    </span>
    
    <!-- はてなブックマーク -->
     <span class="separator">|</span> 
    <span class="entry-footer-links-hatena">
    <a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>" class="hatena-bookmark-button" 
    data-hatena-bookmark-title="<$MTEntryTitle$>" data-hatena-bookmark-layout="standard" 
    title="このエントリーをはてなブックマークに追加">
    <img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 
    alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
    </a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" 
    charset="utf-8" async="async"></script>
    </span>
    
    <!-- Tumblr -->
    <span class="separator">|</span> 
    <span class="entry-footer-links-tumblr">
    <a href="http://www.tumblr.com/share" title="Share on Tumblr" 
    style="display:inline-block; text-indent:-9999px; overflow:hidden; width:63px; height:20px; 
    background:url('http://platform.tumblr.com/v1/share_2.png') top left no-repeat transparent; 
    text-align:left;">Share on Tumblr</a>
    </span>
    
    <!-- Pinterest -->
    <span class="separator">|</span> 
    <span class="entry-footer-links-pinterest">
    <a href="http://pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" >
    <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>
    </span>
    
    <!-- Email This -->
    <span class="separator">|</span> <span class="entry-footer-links-email">
    <a href="mailto:?subject=<$MTEntryTitle encode_url="1"$>&body=<$MTEntryPermalink 
    encode_url="1"$>" class="share-link share-link-email">
    <$MTTrans phrase="Email This"$></a>
    </span>
    
    
  4. [保存] をクリックする

以上の手順を行い、ソーシャルボタンの動作をご確認ください。

page top