しげふみメモ


おもにIT関連について、気になったことや試してみたことをメモしておきます。
Linux, Firefox, Thunderbird, Blog, Google, Amazon, Affiliate, iPod, PC, English ...

Blog

livedoor BlogにTwitter公式ツイートボタンを設置

先日公開されたTwitterの公式ツイートボタンをこのブログに設置してみました。
Twitter / ツイートボタン

設置方法は以下の記事を参考にさせていただきました。
FC2ブログの各記事に「ツイートボタン」を設置する方法*二十歳街道まっしぐら

上記の記事を参考にして、livedoor Blog用にテンプレートのタグを変更します。
ツイートボタンの設定で、「ツイート内のテキスト」には <$ArticleTitle$> を入力。
「URL」には <$ArticlePermalink$> を入力。

「ツイート内のテキスト」にブログのタイトルも入れたい場合は <$BlogTitle$> が使えます。
例えば 『<$BlogTitle$> : <$ArticleTitle$>』 といった感じです。
参考:DesignTemplate/Tag/ - livedoor Blog まとめサイト - livedoor Wiki(ウィキ)

あとは表示されたコードをHTMLテンプレートの好みの位置に挿入します。
ブログ設定 → デザインのカスタマイズ で、トップページ、個別記事ページ、カテゴリアーカイブ、月別アーカイブを変更して保存すればOKです。

[2010年8/28追記]
1ページに複数のツイートボタンを表示させる場合でも、javascriptの widgets.js は1回読み込めばOKです。
Tweet Button FAQ | dev.twitter.com
そして、widgets.js は </body> タグの直前に入れると良いようです。
例えば、私の場合、ツイートボタンのコードの以下の部分をHTMLテンプレートの表示させたい部分に入れています。

<a href="http://twitter.com/share" class="twitter-share-button"
 data-url="<$ArticlePermalink$>"
 data-text="『<$BlogTitle$> : <$ArticleTitle$>』"
 data-count="horizontal" data-via="shigefumi">Tweet</a>

そして、以下のjavascript部分は </body> タグの直前に入れています。

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

[追記ここまで]

[2011年9/30追記]
コードの data-via="shigefumi" の部分は自分のTwitter IDに変更するといいかと思います。
[追記ここまで]

ボタンの表示位置を微調整したい場合、CSSを変更します。
デザインのカスタマイズで、スタイルシート(CSS)に例えば以下のように追加して保存します。

.twitter-share-button { vertical-align: middle; }

これで、このブログにもTwitter公式ツイートボタンを設置できました。
良かったら使ってみてください。

ちなみに、livedoor Blogでは、以前からTwitterに簡単につぶやける独自タグ <$PostToTwitter$> があり、私も使っていましたが、今はTwitter公式の方がいい感じです。

[2011年10/15追記]
独自タグが色々追加されたようです。
外部連携用ボタンを設置できる独自タグを追加しました - Blogger Alliance お知らせブログ
細かいカスタマイズはできないかもしれませんが、この方が簡単に設置できそうです。
[追記ここまで]

このブログの関連記事

livedoor Blogの記事投稿者の表示不具合と復旧

3月は仕事が忙しく、前の記事はほぼ1ヶ月ぶりの更新でした。
投稿後に記事を確認すると、記事の最後に表示している記事投稿者IDのリンクがそのページ自身になっていました。(今まではプロフィールのページ
また、変更しているプロフィールアイコンもデフォルトのものになっていました。

以下のページにある方法で復旧できました。
livedoor Blog 開発日誌 : 記事投稿者を表す“独自タグ”を追加いたしました

* 不具合報告
記事投稿者IDを表す「<$ArticleAuthor$>」の部分が文字化けしている、というケースがあるようです。
ご迷惑をおかけし誠に申し訳ありません。
もしそのエラーにあたる場合、大変お手数かけますが以下の方法で復旧させていただけますでしょうか。
新管理画面にログインし直して、ブログデザインを再設定するか、ブログパーツの設定ページから「ブログに反映する」ボタンを押してください。

今回初めて新管理画面にログインしました。
前の記事は旧管理画面から投稿したから不具合が起こったのでしょうか?
ただ、一旦新管理画面から復旧させると、その後は旧管理画面で編集しても不具合は起こらないようです。

ところで、このブログのデザインはデフォルト2008(スカイ,3カラム) - ブログ公式テンプレート・デザインを元にカスタマイズしたものを使っていますが、記事投稿者の部分は変更していませんでした。
これを機に、記事投稿者IDの部分はニックネームを表示するように変更しました。

ちなみに、このブログのデザインの元テンプレートを「みんなのデザイン」にデザインを公開しましたが、現在の利用者数をメモしておきます。
スカイ,3カラム,サイドバー180px : 23人
スカイ,3カラム,サイドバー180px,AdSense簡単対応 : 37人
思ったよりたくさんの方に使っていただき、ありがとうございます。嬉しいです。

ついでに、新管理画面のブログ編集ブックマークレットをメモ。
旧のURLを変更しただけですが。
「livedoorID」の部分を自分のIDに変更する必要があります。

javascript:d=document;id=d.location.href.match(/\/(\d+)\.html/);if(id==null)void(window.open('https://livedoor.blogcms.jp/member/','_blank',''));else%20void(window.open('https://livedoor.blogcms.jp/blog/livedoorID/article/edit?id='+id[1],'_blank',''));

livedoorブログ検索がリニューアルしたけど

livedoor ブログ検索が3月5日にリニューアルしたようです。

株式会社ライブドア - プレスルーム
「livedoor ブログ検索」サービスでは、自社開発検索エンジンを使用するほか、自社のCGMサービスと連携してスパム情報をデータベース化し、いち早くスパム対策強化に乗り出すなど、ユーザーの利便性及び安全性を追及したサービスを提供しています。
ブログ検索 検索 Q&A livedoor ヘルプ
Q. ブログ検索とは何ですか?
A. ブログ検索とはlivedoorが開発するブログに特化した検索エンジンです。
やや強めのスパムフィルターをかけることにより、宣伝サイトや他ブログのコピーサイトの結果が少なく、より良質なブログが検索される傾向にあります。

早速試してみましたが、この記事を書いている時点では、「しげふみ」で検索してもこのブログは表示されませんでした。残念。
ライブドアのスパムフィルタ「スパムちゃんぷるー」に嫌われて、スパム判定されているのでしょうか?

このブログは livedoor Reader でそれなりに購読されているのですが、スパム判定に購読者数は考慮されていないのでしょうか?
RSSリーダーである程度の数の人間が読んでいるブログなら、スパムブログの可能性は低いと思いますが。どうなんでしょう。

検索結果のRSSは出力してくれているので、しばらく様子を見てみます。

AutoPagerizeのページ区切りをサイトに合わせて見やすくしよう

私にとって、AutoPagerizeはもう無くてはならないものになっています。
他にも使っている人はかなり多いはずです。
AutoPagerize のページ区切りにスタイルをあてる - 0x集積蔵 という記事がありました。
今までシンプルだったページ区切りの見た目を CSS でカスタマイズできるようになりました。

最近アップデートされた AutoPagerize 0.0.32 で対応しています。

早速、このブログに合わせて変更したものを CSS に追加してみました。

/* AutoPagerize */
.autopagerize_page_separator{
border:none;
}
p.autopagerize_page_info{
margin:5px 0px 20px;
background:#ebebeb;
-webkit-border-radius: 0.4em;
-moz-border-radius: 0.4em;
border-radius: 0.4em;
line-height:1.5;
font-size:100%;
text-align:center;
}

以下のように、ページ区切りが違和感無く挿入されています。
AutoPagerizeのページ区切りのスタイルを変更

かなり良くなった気がします。
これは公式デザインに取り入れてもいいぐらいかと思います。

今後、サイトのデザインに合わせて、AutoPagerizeのページ区切りのスタイルを変更しておくサイトが増えそうです。

サイト側で変更されるまでは、Firefoxのアドオン Stylish 等を使って、自分好みに変更してみるのもいいかと。

@namespace url(http://www.w3.org/1999/xhtml);

/* AutoPagerize */
.autopagerize_page_separator{
border:none;
}
p.autopagerize_page_info{
margin:5px 0px 20px;
background:#ebebeb;
-webkit-border-radius: 0.4em;
-moz-border-radius: 0.4em;
/*
border-radius: 0.4em;
*/
line-height:1.5;
font-size:100%;
text-align:center;
}

例えば、Googleだと以下のようになります。
StylishでAutoPagerizeのページ区切りのスタイルを変更

このブログの関連記事

livedoor Blogのプレビューの横幅を広く

私は livedoor Blog で記事を投稿する前には、プレビューボタンで確認するようにしていますが、このプレビュー画面の横幅がなぜか 90% に指定されています。
何か理由はあるのでしょうか?

私は幅が広い方がいいので、ユーザースタイルシートで変更するようにしました。
Firefoxのアドオン Stylish で使っています。

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://cms.blog.livedoor.com/cms/article/preview"),
               url-prefix("http://cms.blog.livedoor.com/cms/design/preview") {
  iframe[name="preview_inner"] {
    width: 100% !important;
  }
}
Before
元のプレビュー画面
After
変更後のプレビュー画面

userstyles.org にも登録しておきました。
livedoor Blogのプレビュー画面の横幅を広く | userstyles.org

XPathGraphの上下反転機能

ウェブ上の数値を毎日1回取得して自動的にグラフを作成するサービス XPathGraph で、私もいくつかのグラフ(shigefumi : XPathGraph)を作っていますが、グラフ表示の上下反転機能が追加されたようです。
Twitter / XPathGraph: 今日のアップデート: グラフ表示の上下反転機能を追加 ...

グラフ表示の上下反転機能を追加しました。ランキングなど、若い数字を高く見せたい場合にご利用ください。既存のグラフも編集から変更可能です。

早速、フィードメーターランキングのグラフを上下反転させてみました。

フィードメーター しげふみメモ ランキング : XPathGraph
フィードメーター しげふみメモ ランキング : XPathGraph
フィードメーター しげふみメモ ランキング

この記事投稿時点では、貼り付け用の画像はまだ上下反転していないようです。
そのうちアップデートされるといいな。
参考:はてなグラフ - xpathgraphのグラフ

このブログの関連記事

はてなスターを設置

少し前に 飽きるブログ:あなたのlivedoorブログにもはてなスターを設置しよう。“評価”されることでそのサービスにはまる « インターネット « ランカー・リー オフィシャルブログ を読んだのをきっかけに、このブログにも はてなスター を設置しました。

自分の書いた記事に何らかの反応があるのは嬉しいです。
ブログにコメントがあったり、どこからかリンクされたり、はてなブックマークやlivedoorクリップなどでブックマークされたり。
はてなスターはもっと気軽にできそうなのがいいですね。

このブログのデザインは、公式デザイン / デフォルト2008(スカイ,3カラム)を元にしています。
同じようなデザインを使っている方の参考になるかもしれないので、カスタマイズするHTMLコードについてメモしておきます。

以下を「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」のテンプレートの </head> の直前に追加。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.SiteConfig = {
  entryNodes: {
    'div.article-outer': {
      uri: 'h2 a',
      title: 'h2',
      container: 'h2'
    }
  }
};
Hatena.Star.Token = 'はてなスターで自分のブログを登録した時に表示されるトークン';
</script>

このブログのデザインでは、デフォルトのAddボタンやコメントボタンの色では見えにくいので、はてなスター ヘルプ - Hatena Star の「色違いの画像を使う」を参考にして、色を黒に変更しました。
以下をデザインのカスタマイズでCSSに追加。

.hatena-star-add-button-image {
  background-image: url(http://s.hatena.ne.jp/images/add_bl.gif);
}
.hatena-star-comment-button-image {
  background-image: url(http://s.hatena.ne.jp/images/comment_bl.gif);
}

これで、デザインの反映でスター追加のボタンが表示されました。

以前に、はてなブックマークされていたページにスターを付けてもらっていたからなのか、そのスターがこのブログにも表示されました。
すでにいくつかスターを頂いていたとは知りませんでした。
これは嬉しいですね。

ということで、自分がもらって嬉しいはてなスター。私もこれからスターを送ろうと思います。

ちなみに、私のはてなIDは sgfm です。
はてなスター - sgfm favorites
ブックマークは以前から使っていましたが、これを機にタイトルを変更しました。
はてなブックマーク - しげふみブックマーク
ブクマコメントを書いていないので、あまり面白くないと思いますが。

はてなブックマーク - しげふみメモのブックマークは、このブログのセルフブックマーク用。
現時点でこっちの方がお気に入られが多いのがびっくりでした。

このブログの関連記事

「みんなのデザイン」にデザインを公開してみました

Blogのデザインを変更予定Blogのデザイン変更完了しました で書いたように、このBlogのデザインを変更するついでに、デザイン共有機能を試してみました。
livedoor Blog 開発日誌 : 作成したデザインをみんなで共有できるようになりました - livedoor Blog(ブログ)

このBlogのデザインは公式デザイン / デフォルト2008(スカイ,3カラム)を元にしています。
現在のデザインにカスタマイズする過程で二つのデザインを公開しました。
と言っても、公式デザインをほんの少し変更しただけですが。

みんなのデザイン / スカイ,3カラム,サイドバー180px

変更点はCSSだけです。

サイドバーの幅を 180px に変更、外枠を狭くして、本文をなるべく広くなるようにしました。

みんなのデザイン / スカイ,3カラム,サイドバー180px,AdSense簡単対応

サイドバーの幅を 180px に変更、外枠を狭くして、本文をなるべく広くなるようにしました。
さらに、Google AdSenseを貼り付けやすくしてみました。
デザインのカスタマイズで、トップページ、個別記事ページ、カテゴリアーカイブ、月別アーカイブの <!−− ここに○○○のAdSenseを貼る −−> の部分を自分のAdSenseコードに変更すればOKです。

AdSenseの表示例としては、このBlogも一例になるかと。
私は、タイトル部分にリンクユニットを貼っていますが、場合によってはビッグバナー(728x90)でもいいかもしれません。

ただ、タイトル部分にAdSenseを貼らない場合、IE6でタイトル部分の下側が角丸にならず表示が乱れます。
その場合は、トップページ、個別記事ページ、カテゴリアーカイブ、月別アーカイブのカスタマイズで、

<!-- ここにブログタイトルエリアのAdSenseを貼る -->

の前に全角スペースを入れるとOKです。

この修正や、コメント部分など、共有デザイン公開後に修正したい箇所がありますが、残念ながらできないようですね。

この二つのデザインから、更に細かい修正や追加をして、現在のこのBlogのデザインになっています。

Blogのデザイン変更完了しました

前の記事でBlogのデザインを変更予定と書きましたが、早速変更しました。
細かいところは今後もいろいろ変更するかもしれませんが、とりあえず見られるようになったと思います。

表示がおかしい場合は、スーパーリロードしてみてください。
参考:スーパーリロード « 葉

シンプルな「デフォルト2008(スカイ,3カラム)」を元に、少しカスタマイズしてみました。
FirefoxとIE6でしか確認していません。おかしいところがあれば、教えていただけると助かります。

拍手機能も付いたので、よかったらお気軽にどうぞ。
自分も、今後は他のブログで積極的に拍手しようかな。
はてなスターも後で付けようかと考えています。

デザイン共有機能については、後で書こうと思います。

Blogのデザインを変更予定

近いうちに、このBlogのデザインを変更する予定です。
シンプルな「デフォルト2008」の3カラムを元にして、少しカスタマイズしようと思います。

しばらくは、作業中などで表示がおかしい場合があるかもしれません。

あと、デザイン共有機能についても試してみたいですね。
みんなのデザイン - livedoor Blog(ブログ)

2005年にこのBlogを始めた頃は、現在の「デフォルト2003 (White) 」相当のデザインでした。
CSSもあまりわからないまま、見よう見まねで3カラムにしたり、少しずつ細かいところを変更してきて、自分でもよくわからなくなってきていました。
共通ヘッダやページナビゲーション、拍手機能などもまだ組み込んでないし。

ということで、最新のテンプレートを元にリニューアル予定です。

[追記]
記念にこの記事のスクリーンショットを撮っておきました。(クリックで拡大)
しげふみメモ-Blogのデザインを変更予定_top

しげふみメモ-Blogのデザインを変更予定_long

Firefoxアドオンの Screengrab! を使いました。

エンジニア転職情報
このBlog内を検索
プロフィール

しげふみ

連絡先
連絡先
RSSリーダーに登録
Subscribe with livedoor Reader

あわせて読みたい
人気blogランキング

  • ライブドアブログ