休日はブログのメンテナンスやカスタマイズを行っています。そんな私は、ど素人なので、自分でプログラムを書いたりすることはできません。既存のサービスをうまくつかって、ブログのデザインを自分好みのものにしていきましょう。

そんな何でも一人でやらなければいけない広報・PR担当者のお助けTIP!

私が使っているライブドアブログを例にしています。ただ紹介するサービスは他社のブログでも活用できます!

このブログのタイトルと記事の間にソーシャルボタンを設置する方法をお伝えします。

ライブドアブログは簡単にソーシャルボタンを設置できます

「ブログ設定」⇒「外部サービス」⇒「ソーシャルボタン」をクリックすると、LINE、はてなブックマーク、Twitter、Facebookなどから自分が置きたいボタンを選べる画面が出てきます。ブログに表示したいソーシャルボタンを選びチェックをいれます。


0-1



そうすると、自動的に表示されるようになります。簡単ですね。

no title

私もこちらを使っていたのですが、バナーの大きさが違ったりとバラバラ感がどうにかならないものかなと思っていました。

そこでカスタマイズすることにしました。

「忍者おまとめボタン」を利用しています

今、このブログのタイトルと記事の間にあるソーシャルボタンは私がデザインをしたりCSSを書いているわけではありません。できないから(苦笑)

そこで忍者おまとめボタンを利用することにしました。

ソーシャルボタンを選ぶ


「新規ボタンを追加」をクリックして始めましょう!

1

「設置するWebサイトを選らんでください」という画面が出ます。私はlivedoor blogを選択。

2

次に「ボタンを選ぶ」画面が出ます。おススメのスタイルがすでにあるので、ここから選ぶもよし、

3

下に「自分でカスタマイズして選ぶ」というボタンもあります。私はこちらをクリック。

4

機能別リストにあるレスポンシブを選択しました。

5

レスポンシブはこんな画面。ここで自分が置きたいボタンを選びます。カーソルを置けば「+追加」という表示が出るのでクリックしていきます。
 
12

選んだものは「表示するボタン」に表れます。

 13
クリック&ホールドして、順番を入れ替えることができます。また削除することもできますよ。



14
完成したら右下にある「プレビュー&コードを取得する」をクリック。

コードをコピーします。

8

このコードを貼り付けます!

ライブドアブログ(livedoor blog)にソーシャルボタンのコードを貼り付ける方法

「ブログ設定」「デザイン・ブログ設定」の「PC」を選択。

その中にある「カスタマイズ」を選択


15

その中にある「個別記事ページ」を選択。

6

ここがちょっと緊張するポイントです。

<!-- 記事ヘッダー、記事タイトル -->
<header class="article-header">

の項目の下に</header>があります。その真上に、

<!-- articleHeader End -->

と打ちこみます。

7

そしてコピーをしたコードを貼り付けます。一番下に「プレビュー」のボタンがあるので、クリックして確認をしましょう。

貼り付けられていますね!

9
ソーシャルボタンを置くと、その記事が拡散されやすくなります。

是非トライをして見てくださいね。

フッターのボタンも忍者おまとめボタンで作りました。

Have a nice ブログ生活!

 



.:*゚..:。*゚:.。*゚..:。*゚:.。*゚..:。*゚:.。*゚..:。*゚:.。*゚..:。*゚..:。*゚:.。*゚..:。*゚:.。*゚..:。*゚..:。*゚

【プロフィール】鎌倉幸子はどこから来てどこへ行くのか

【執筆した本一覧】記憶を記録にするシゴト

【連絡先】執筆や講演などの依頼はこちらのフォームからお願いします

ツイッターもフォローしてね



本のご案内!

走れ!移動図書館: 本でよりそう復興支援 (ちくまプリマー新書)

鎌倉 幸子 筑摩書房 2014-01-07
売り上げランキング : 340327
by ヨメレバ


コメント

 コメント一覧 (1)

    • 1. かまくらさちこ
    • 2016年08月08日 01:56
    • 私もどうにかならないものかと思っていたら素晴らしい記事発見!ありがうとございます!
コメントフォーム
評価する
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット