金融日記テクニカル

昔、金融工学やRやプログラミングのテクニカルを話をまとめていこうとはじめたブログです。
主にウェブビジネスのテクニカルな話を備忘録的に書いていきます。

カテゴリ: XHTML/HTML+CSS

Facebookもとうとう上場して、日本でもようやく普及しはじめたようなので、ブログにいいね!ボタンを付けてみました。

また、Tweetボタンの仕様が勝手に変わって、幅が広すぎるので、その修正方法もいっしょに紹介したいと思います。いいね!ボタンもデフォルトで幅が広すぎて、CSSで変更する必要があります。

いいね!ボタンはFacebookのサイトで作ることができますが、以下のコードをコピーした方がはやいかもしれません。
<iframe src="//www.facebook.com/plugins/like.php?href=<$ArticlePermalink$>&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>

太字の<$ArticlePermalink$>がそのエントリーが参照しているURLを表すもので、これはブログのベンダーによって違います。ライブドアブログの場合はこのままでいいのですが、他のブログを使っている場合、自分で対応するタグを調べて下さい。

それと、Facebookのいいね!ボタンも、Tweetボタンも、なぜかデフォルトだと幅が広すぎて見てくれが悪いです。CSSに以下のコードを付け足して調整しましょう。
iframe.twitter-share-button {
width: 115px!important;
}

iframe[src*="www.facebook.com/plugins/like.php"]{
width:115px !important;
}

ライブドアブログの場合は「ブログ設定」の「デザイン設定」で「CSS」を選んで、付け足して下さい。

Tweetボタンとはてブボタンは、以前のエントリーに作る方を書いておきました。

結局、Tweetボタン、いいね!ボタン、はてブボタンのコードは次のようになります。
<Div Align="right">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<$ArticlePermalink$>" data-text="金融日記テクニカル <$ArticleTitle ESCAPE$>" data-count="horizontal" data-via="kazu_fujisawa" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<iframe src="//www.facebook.com/plugins/like.php?href=<$ArticlePermalink$>&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>

<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>" class="hatena-bookmark-button" data-hatena-bookmark-title="<$ArticleTitle ESCAPE$> - <$BlogTitle ESCAPE$>" 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>
</Div>

太字の部分が自分で変えないといけないところです。

ライブドアブログの場合で説明すると、「ブログ設定」の「デザイン設定」で「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」の次の位置に、上のコードを貼り付けて下さい。
・・・icleCategory1$></a>&nbsp;</IfArticleCategory1><IfArticleCategory2>|&nbsp;<a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a></IfArticleCategory2></div>

この間

<IfFirstArticle><$Advertise$></IfFirstArticle>
</div>
<div class="blogbodybottom・・・

さて、上手くできましたでしょうか?

ちなみに、ライブドアブログの場合は「ブログ設定」の中の「外部サービス」で、チェックボックスをクリックするだけで、これらのボタンを付けることができるようになりました。しかし、いろいろやってみたら、あまり見てくれがよくなかったので、自分で付けることにしました。

最近、CSSとかHTMLをいろいろ読み書きできるようになったので、ブログをカスタマイズしてみることにしました。手始めにはてなブックマークボタンツイートボタンをブログにつけてみます。

はてなもTwitterもよくできた公式ボタンを最近リリースしています。もちろんこういった機能を実現するプログラムは以前にもたくさんあったのですが、やっぱり公式ボタンが信頼できますね。まずはツイートボタンから。このサイトでコードを自動生成できるのですが、ちょっとコツがあります。

Twitter公式ツイートボタン

1の「ツイート内テキスト」で<$ArticleTitle ESCAPE$>、「URL」に<$ArticlePermalink$>を入れましょう。2で自分のアカウントをいれておくと、ツイートするときに"via @kazu_fujisawa"みたいに出してくれます。
次のようなコードが自動生成されるはずです。

<a href="http://twitter.com/share" class="twitter-share-button" data-url="<$ArticlePermalink$>" data-text="<$ArticleTitle ESCAPE$>" data-count="horizontal" data-via="kazu_fujisawa" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

ライブドアブログでは<$ArticleTitle ESCAPE$>がエントリーのタイトルを自動的に返すタグです。また<$ArticlePermalink$>がそのURLを返します。これらのタグはそれぞれのブログベンダーで違いますから、自分で調べてみてください。data-urlでエントリーのURLを指定します。data-textでどういうテキストを最初に表示させるか指定します。この場合はエントリーのタイトルになっていますね。ブログ名も入れたかったら<$BlogTitle ESCAPE$>も加えるといいでしょう。data-text="<$BlogTitle ESCAPE$> : <$ArticleTitle ESCAPE$>"のように書きます。

次ははてなブックマークボタンのコードを生成しましょう。次のサイトで同じように生成できます。

はてなブックマークボタン

1のところにライブドアブログのタグを入れても、「<」と「>」がHTMLの実体参照に置き換わってしまいうまくいきませんでした。直接テキスト・エディタで編集した方がいいようです。

<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>" class="hatena-bookmark-button" data-hatena-bookmark-title="<$ArticleTitle ESCAPE$> - <$BlogTitle ESCAPE$>" 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>

<$ArticlePermalink$>と<$ArticleTitle ESCAPE$>と<$BlogTitle ESCAPE$>のところが自分で書かないといけないところです。

以上ではてなブックマークボタンツイートボタンの準備は完了です。あとはこれを好きなところに貼るだけです。

僕は次のところに貼りつけました。ライブドアブログの「デザインのカスタマイズ」で「トップページ」、「個別記事ページ」、「カテゴリアーカイブ」、「月別アーカイブ」で次の場所にコピペします。

・・・icleCategory1$></a>&nbsp;</IfArticleCategory1><IfArticleCategory2>|&nbsp;<a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a></IfArticleCategory2></div>
<Div Align="right"><a href="http://twitter.com/share" class="twitter-share-button" data-url="<$ArticlePermalink$>" data-text="金融日記テクニカル <$ArticleTitle ESCAPE$>" data-count="horizontal" data-via="kazu_fujisawa" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>" class="hatena-bookmark-button" data-hatena-bookmark-title="<$ArticleTitle ESCAPE$> - <$BlogTitle ESCAPE$>" 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></Div>

<IfFirstArticle><$Advertise$></IfFirstArticle>
</div>
<div class="blogbodybottom・・・


これでめでたくはてなブックマークボタンツイートボタンがついたはずです。たしかめてみましょう。

最近、ウェブ・サイト制作の勉強をしようと思い、HTMLとCSSの本を本屋で立ち読みして10冊ほど買い込みました。その結果、次の3冊が僕的にはかなり役に立ちました。ちなみにDreamweaverが業界標準のパッケージですが、僕はサンプル・コードをテキスト・エディタでちょこちょこ直すだけで今のところ十分なので、そういう用途で役に立った本です。

それにしても最近のサイトってみんなスタイル・シート(CSS)で作るんですね。ところでCSSというのはCascading Style Sheetsの略です。CSSでサイト全体のレイアウトを決めて、そのレイアウトにHTMLを流しこんでいきます。CSSが標準化して普及する前(10年以上前?)はHTMLのTableタグでこういうことをやっていたのですが、CSSのおかげで非常に洗練されました。

1. XHTML/HTML+CSSスーパーレシピブック、エ・ビスコム・テック・ラボ

とてもシンプルかつ使いやすいサンプルがひと通り入っています。また本そのもののデザインもきれいで読みやすいです。Dreamweaverのような商用アプリケーションに依存しないのもいいですね。とりあえずCSSを手っ取り早く学んで、雛形がほしい人にはオススメの本です。

またこの本のいいところは、サンプルコードのCD-ROMがついていないことです。出版社のサイトからダウンロードできるようになっています。僕は今時インターネットにつながらない人がプログラミングなんてしないのだから、CD-ROMなんていらないとずっと思っていたのでこれは評価できます。

2. HTML&スタイルシート ポケットリファレンス、シーズ

ググれば大体のことはわかりますが、やっぱり紙のHTML辞典があると便利です。定番本ですね。

3. Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。加藤善規、平澤隆、両見英世

この本はHTMLやCSSがひと通りわかるようになった人がさらに気をつけるといいポイントをまとめています。プロのウェブ・デザイナーのノウハウ集みたいな感じです。ひとつひとつのポイントが簡潔にまとめられているし、本の構成もきれいなのでとても読みやすいです。コラムもいろいろウンチクが身につき、読み物としても面白いですね。

ところでHTMLやCSSをいじるエディターですが、なんだかんだいってEclipseのエディターが一番使える気がします。

以上。

↑このページのトップヘ