アメブロの記事にtwitter・はてなブックマークアイコンをつける方法
この記事をはてなブックマークに登録
この記事をtwitterでつぶやく
＿＿＿＿＿＿
／ ,,､,､,､,､,､,､,､､ヽ
l ／ ヽl
l l ｜
l l ｜
| 」. ＼ ／ ｜
,ｒ-/ ⌒ | |⌒ .| ＜MHFとほとんど関係ない記事だよ＾＾ｂ
l . |____| |
ｰ' ヽ＿＿ノ |
.|:::::: |r┬-| :|
. ＼::::::::::::`ー'´::::::/
ヽ:::::::::::::::::::／:
ﾋﾟｭｰ ＝〔~∪￣￣〕
＝ ◎――◎
アメブロの記事に、ついったーアイコンとはてぶアイコンを無理矢理くっつけるやり方。
うまくいけば、この記事の一番上みたいな感じになる。
自分はHTMLとかCSSとか素人なんで、色々外部サイトを参考にしてみた。
ライブドアブログとかだとCSSをカスタマイズすれば一発なんだけど
アメブロは非常にめんどいことが判明。
色々調べたけど、各記事にそれぞれHTMLを手入力するやり方しかわからなかった。
▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲
■はてなブックマークアイコンの設置
まず、アメブロの記事編集画面で、｢HTMLタグを表示｣の状態にする。
これでHTMLを入力する準備が完了。
早速、はてなブックマークのアイコンを設置してみる。
下記のHTMLを記述する。
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━
<a target="blank" href="http://b.hatena.ne.jp/append?自分の書いた記事のURL"><img width="16" height="12" border="0" src="http://b.hatena.ne.jp/images/append.gif" alt="はてなブックマークに追加" />この記事をはてなブックマークに登録</a>
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━
この記事をはてなブックマークに登録
↑表示はこのようになる（記事URLはこの記事のURLを入力してる）
注意点は、赤字の部分。ここは手入力が必要。ぶっちゃけめんどくさい。
簡単に赤字部分の説明をしておく。
・自分の書いた記事のURL
・・・ここに入力したURLが、はてなブックマークに登録されるようになる。
・この記事をはてなブックマークに登録
・・・これは筆者が勝手にくっつけた説明文なので、
アイコンのみ表示したい時は消すと良い。
▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲
■twitterアイコンの設置
楽・技林ブログ 記事：twitterで「これつぶやいて！」というリンクの作り方
※設置方法は、こちらのブログを参考にさせて頂きました。
twitterのアイコンを設置してみる。
下記のHTMLを記述する。
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━
<a href="http://twitter.com/home?status=ブログ名 記事タイトル 自分の書いた記事のURL"><img border="0" alt="この記事をtwitterでつぶやく" src="twitterアイコン画像URLへのリンク" />この記事をtwitterでつぶやく</a>
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━
この記事をtwitterでつぶやく
↑表示はこのようになる。（画像URLへのリンクだけは入力してる）
例によって赤字の部分は手入力が必要。
はてぶよりめんどくさい。
簡単に赤字部分の説明をしておく。
・ブログ名 記事タイトル 記事のURL
・・・この部分が、そのままtwitterのつぶやき欄に記載される。
例えば、ここに MHF と入力したとする。
すると、このように表示される。
アイコンをクリックしたら即つぶやき発信ではない。
ブログ名は任意だが、記事タイトルと記事URLは入力した方がいいだろう。
尚、日本語などはUTF-8でURLエンコードすれば良いらしい。
理由は正直よくわかんない。知ってる人おしえて＞＜；
・twitterアイコン画像URLへのリンク
・・・読んでその通り、ここにはアイコン画像のURLを入力する。
・この記事をtwitterでつぶやく
・・・これは筆者が勝手にくっつけた説明文なので、
アイコンのみ表示したい時は消すと良い。
▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲
■注意点
注意点というか問題点が一つある。
それは記事URL。
一旦記事を公開しないと記事URLがわからないので、
わざわざ一旦記事をうｐして記事URLを確認してから、記事修正をしないといけない。
▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲
以上、素人なりに説明してみた。
詳しい方、変なトコあればご指摘下さい。
しかし今回の記事書きながら思ったけど、
アメブロはあまりカスタムできない仕様になってるなぁとつくづく思い知らされた。
HTMLも制限が多いし。
でも逆にそれがアメブロの個性と言えるかもしれない。
見る方からすれば一目でわかる場合が多く、
そのわかりやすさがアメブロの良い点なのかもしれない。
アメブロ仲間同士の連帯感を生み出しているとも言える（こじつけ
よくバリバリにカスタムしてるアメブロも見かけるが、
ごちゃついて見づらかったり、見る方にとっては良い迷惑だったりもする。
このブログもｒｙ
結論：シンプル・イズ・ベスト（ｷﾘｯ
＿＿＿＿＿＿
／ ＿,,､,､,､,､,､,､,､ヽ
l < ヽ l
l l | ｜
l l ｜ |
|」 ＿＿ ＿＿ | | ちなみに当ブログでは
,ｒ/ （・）| |（・） r-, 広告をベタベタ貼ることで、
.l | |_____| | i いかがわしさを演出しております
ｰ' ___,,..ｨ :|ﾉ ,-
{:: :: ＼_ノ ::: ::| { （^ヽ
r'⌒ヽ ヽ:::::::...............::::::::::/＼ ∩ /- { （＼
レ(ヽ ＼ /ヽ::::::::::::::::::::::::::ﾉ ＼ ／ノ/__ / (＼ ）
＼_ ﾉ ｀ ー- / /.:/ , -⌒ヽ / ノ ヽ ＼＼
TOPに戻る
ライブドアブログとかだとCSSをカスタマイズすれば一発なんだけど
アメブロは非常にめんどいことが判明。
色々調べたけど、各記事にそれぞれHTMLを手入力するやり方しかわからなかった。
▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲
■はてなブックマークアイコンの設置
まず、アメブロの記事編集画面で、｢HTMLタグを表示｣の状態にする。
これでHTMLを入力する準備が完了。
早速、はてなブックマークのアイコンを設置してみる。
下記のHTMLを記述する。
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━
<a target="blank" href="http://b.hatena.ne.jp/append?自分の書いた記事のURL"><img width="16" height="12" border="0" src="http://b.hatena.ne.jp/images/append.gif" alt="はてなブックマークに追加" />この記事をはてなブックマークに登録</a>
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━
この記事をはてなブックマークに登録
↑表示はこのようになる（記事URLはこの記事のURLを入力してる）
注意点は、赤字の部分。ここは手入力が必要。ぶっちゃけめんどくさい。
簡単に赤字部分の説明をしておく。
・自分の書いた記事のURL
・・・ここに入力したURLが、はてなブックマークに登録されるようになる。
・この記事をはてなブックマークに登録
・・・これは筆者が勝手にくっつけた説明文なので、
アイコンのみ表示したい時は消すと良い。
▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲
■twitterアイコンの設置
楽・技林ブログ 記事：twitterで「これつぶやいて！」というリンクの作り方
※設置方法は、こちらのブログを参考にさせて頂きました。
twitterのアイコンを設置してみる。
下記のHTMLを記述する。
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━
<a href="http://twitter.com/home?status=ブログ名 記事タイトル 自分の書いた記事のURL"><img border="0" alt="この記事をtwitterでつぶやく" src="twitterアイコン画像URLへのリンク" />この記事をtwitterでつぶやく</a>
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━
この記事をtwitterでつぶやく
↑表示はこのようになる。（画像URLへのリンクだけは入力してる）
例によって赤字の部分は手入力が必要。
はてぶよりめんどくさい。
簡単に赤字部分の説明をしておく。
・ブログ名 記事タイトル 記事のURL
・・・この部分が、そのままtwitterのつぶやき欄に記載される。
例えば、ここに MHF と入力したとする。
すると、このように表示される。
アイコンをクリックしたら即つぶやき発信ではない。
ブログ名は任意だが、記事タイトルと記事URLは入力した方がいいだろう。
尚、日本語などはUTF-8でURLエンコードすれば良いらしい。
理由は正直よくわかんない。知ってる人おしえて＞＜；
・twitterアイコン画像URLへのリンク
・・・読んでその通り、ここにはアイコン画像のURLを入力する。
・この記事をtwitterでつぶやく
・・・これは筆者が勝手にくっつけた説明文なので、
アイコンのみ表示したい時は消すと良い。
▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲
■注意点
注意点というか問題点が一つある。
それは記事URL。
一旦記事を公開しないと記事URLがわからないので、
わざわざ一旦記事をうｐして記事URLを確認してから、記事修正をしないといけない。
▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲
以上、素人なりに説明してみた。
詳しい方、変なトコあればご指摘下さい。
しかし今回の記事書きながら思ったけど、
アメブロはあまりカスタムできない仕様になってるなぁとつくづく思い知らされた。
HTMLも制限が多いし。
でも逆にそれがアメブロの個性と言えるかもしれない。
見る方からすれば一目でわかる場合が多く、
そのわかりやすさがアメブロの良い点なのかもしれない。
アメブロ仲間同士の連帯感を生み出しているとも言える（こじつけ
よくバリバリにカスタムしてるアメブロも見かけるが、
ごちゃついて見づらかったり、見る方にとっては良い迷惑だったりもする。
このブログもｒｙ
結論：シンプル・イズ・ベスト（ｷﾘｯ
＿＿＿＿＿＿
／ ＿,,､,､,､,､,､,､,､ヽ
l < ヽ l
l l | ｜
l l ｜ |
|」 ＿＿ ＿＿ | | ちなみに当ブログでは
,ｒ/ （・）| |（・） r-, 広告をベタベタ貼ることで、
.l | |_____| | i いかがわしさを演出しております
ｰ' ___,,..ｨ :|ﾉ ,-
{:: :: ＼_ノ ::: ::| { （^ヽ
r'⌒ヽ ヽ:::::::...............::::::::::/＼ ∩ /- { （＼
レ(ヽ ＼ /ヽ::::::::::::::::::::::::::ﾉ ＼ ／ノ/__ / (＼ ）
＼_ ﾉ ｀ ー- / /.:/ , -⌒ヽ / ノ ヽ ＼＼
TOPに戻る