たい焼き

前回の記事で、「忍者おまとめボタン」を使用して
簡単にソーシャルボタンを、設置する方法を紹介しました。


簡単にソーシャルボタン設置!!ブログやっている方必見!!忍者まとめボタン



今日はソーシャルボタンを、記事のタイトル直下に、設置する方法を紹介します。


記事タイトルのすぐ下に設置すると、皆さん見つけやすいですよね。 
 
ソーシャルボタンのコード取得

スマホ白

ソーシャルボタンを設置方法は、様々あります。
今回は、忍者ツールズの、忍者おまとめボタンサービスを利用します。


忍者おまとめボタンは、初心者の方にはとてもオススメです。
簡単な作業で、ソーシャルボタンを設置でき、価格も無料です。


詳細は、前回の記事を参照下さい。
簡単にソーシャルボタン設置!!ブログやっている方必見!!忍者まとめボタン 


今回は、忍者おまとめボタンで、コードを取得し
そのコードを、どこに設置すれば、記事の下にソーシャルボタンが、表示されるのかを書きます。


因みに、当ブログでは以下のように表示しています。
ソーシャルボタン タイトル直下

ブログのHTML編集

-shared-img-thumb-LISA141018307529_TP_V

忍者おまとめボタンで取得した、ソーシャルボタンのコードを、ブログに設置します。
ブログのHTMLを編集し、コードを追記すると、ソーシャルボタンが表示されます。


難しいことを書きましたが(僕にとっては)
ようするに、コピー・アンド・ペーストすればいいわけです。


では、その手順を見ていきましょう。


1.忍者おまとめボタンでソーシャルボタンのコード取得

前回記載したので。割愛します。
以下の記事を、参照して下さい。
簡単にソーシャルボタン設置!!ブログやっている方必見!!忍者まとめボタン 


2.ブログのHTML編集

ブログのHTMLを、編集していきます。
ライブドアブログの場合、HTMLの場所は、以下のとおりです。

2.1.ブログのHTMLの場所

ここでは、個別記事のタイトルの下に、ソーシャルボタンを設置しますので
個別記事の、HTMLを編集していきます。


僕の使っている、ライブドアブログにおいて、HTMLが記載されている場所は、以下のとおりです。


・ブログ設定→PC
 ライブドア ホーム

・カスタマイズ→個別記事ページ
ライブドアブログ HTML





ここに、忍者おまとめボタンで取得した、コードを貼り付けます。


たくさんの行数があると思いますが、
貼り付ける場所によって、ソーシャルボタンが、表示される位置が変わります。


僕は、HTML知識はさっぱりなので
ここかな??と思う場所に、上から順番に、貼り付けていきました。


もちろん、今の状態を保存しておいて
イメージと違ったらもどして、また貼り付ける。


そんな感じで、大変でした。


2.2.ソーシャルボタンコードの貼り付け
<!-- articleHeader End -->というタグの、真上に貼り付けると
記事タイトルの下に、ソーシャルボタンが設置できました。


以下の場所に、コードを貼り付けます。
個別記事 HTML
















上の画像は、コードを張り付ける前
貼り付けると、以下のようになりました。

ブログHTML コード挿入















 
これで、HTMLの編集が完了しました。
ソーシャルボタンが設置できているはずです。



まとめ

m010501

今回は、忍者おまとめボタンで、取得したソーシャルボタンのコードを
ブログのHTMLの追記し、
記事タイトルの直下に、ソーシャルボタンを設置した、流れを書きました。


いやー、大変だったけど、勉強になりました。
HTMLやCSSの言語がわかると、ブログやホームページは思うがまま何でしょうか??


僕も少しずつ、勉強しよう。


今回は、完全に自分のやったことを、忘れないためですが
僕と同じような事が、やりたい方の参考になれば、これ以上のことはありません。


定期的に、更新していきますので
またよかたら、ブログに遊びに来て下さい。

よろしければフォロー&シェアしてください
ランキング参加中です。
下のバナーをクリックしていただけると、嬉しいです♪

人気ブログランキングへ
ブログランキング・にほんブログ村へ
にほんブログ村