かずうの気まま日記

ラベル blogger の投稿を表示しています。すべての投稿を表示

2012年8月7日火曜日

【Moblogger】モブログを書くための環境を整えています。（ set up!!）

Have desk, will write Photo by Bright Meadow

こんばんは、モブロガーを密かに目指しはじめた @kazwoo215 です。

iPhoneアプリ『Moblogger』だけでモブログに挑戦しようと環境を整え始めました。

2012年4月4日水曜日

Bloggerのトップレベルドメイン（ccTLD）が変わってた件。「.com」から「.jp」へ

blogger-logo Photo by kazwoo215

以前設置した ZenBack が上手く読み込みできなくなって困ってました。

思い切って Blogger ユーザーの方に聞いてみたら意外なところに落とし穴が！なんと Blogger 自体のドメインが「.com」から「.jp」に変わってました！

2012年1月28日土曜日

【webサービス】Bloggerでzenbackを簡単に設置する方法

ZenBack Photo by kazwoo215

BloggerでZenBackを簡単に設置する方法をお教えします。

2011年10月25日火曜日

【iPhone/iPadアプリ】公式アプリ Blogger を使ってみる！！

やっと出たGoogle公式のアプリ「Blogger」

いままで公式のアプリがなく BlogPress で下書きをつくっていました。

これからは「Blogger」を使って下書きをして写真は後から追加という感じだと気軽にブログアップ出来るように思います。現在写真はflickrから経由して表示させているので。

ちなみにひとつ前のエントリ：「iPhone 4S になりました！」

は「Blogger」で書いています！

Blogger 1.0.0（無料）

カテゴリ: ソーシャルネットワーキング
販売元: Google - Google Mobile（サイズ: 1.2 MB）
全てのバージョンの評価:

（23件の評価）

Kazwoo

2011年2月1日火曜日

【いいね！】 facebookの“いいね！”ボタンをBloggerに設置する方法（How to put Like button.）

Monkey 'Like' Hand Photo by MailChimpR

あなたのブログに“いいね！”ボタンは付いていますか？

bloggerサイトに設置＆表示シリーズ第三段目となります。

これまでのエントリ：はてなブックマークレット、はてなスターをbloggerサイトに設置＆表示する方法。
・[はてブ] Bloggerに“はてなブックマーク”を設置する方法 a??a?Re¨?ao?a?Ra?￣a?|a?ae￠≪a??a??a?￣a??a??a?￣a?°

・[はてなスター] Bloggerに“はてなスター”を設置する方法 a??a?Re¨?ao?a?Ra?￣a?|a?ae￠≪a??a??a?￣a??a??a?￣a?°

ではさっそく始めましょう！
流れを説明します。

1.blogger（自分のブログサイトに行く）ログイン
2.テンプレートの内容を編集する
3.一部HTMLタグの書き換えを行う（一般例）
4.一部HTMLタグの書き換えを行う（tweet Shareの隣に配置）
5.完成

1.blogger（自分のブログサイトに行く）ログイン
自分のブログサイトに行ってログインしてください。

2.テンプレートの内容を編集する
ダッシュボードから以下の用にクリックして進みます。
ブログを管理 > デザイン > HTML の編集 > テンプレートを編集

そして「ウィジェットのテンプレートを展開」にチェックを入れます。ここがポイントです！

3.一部HTMLタグの書き換えを行う（一般例）
まず<data:post.body/>を探してそのすぐ後に以下の貼り付け用コードをペーストします。

ここで「テンプレートを保存」すれば、facebookの「いいね！」ボタンをエントリの下に単独でつける場合はこれで完成です！

実は今回ちょっと工夫してみました。

ツイッターへの投稿（tweet Share）の隣にfacebookの「いいね！」ボタンを配置することにしてみました。つまり横並び表示です。

4.一部HTMLタグの書き換えを行う（tweet Shareの隣に配置）
まずツイッター投稿（tweet Share button）ボタンを配置してその後に「いいね！」ボタンを配置していきます。

4-1.ツイッター投稿（tweet Share button）ボタンの配置
最初に<div class='post-footer'>を探しましょう。
その直後に以下のコードを貼付けします。

<a class='twitter-share-button' data-count='horizontal' data-lang='ja' data-via='ユーザー名' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

4-2.いいね！ボタンの配置
4-1.で配置したツイッター投稿ボタンの下に以下のコードを貼付けします。

このコードはこちらのサイト(英語)から作ることが可能です。

こんな感じでコードを貼りつています。

最後に「テンプレートを保存」をクリック

5.完成

Bloggerをお使いの皆さんも“いいね！”ボタンの設置でfacebookのお気に入りを付けてもらいましょう♪

【あとがき】
今回はメッチャ苦労しました(o´д`o)=3

と言うのもイメージしていたところに「いいね！」ボタンがなかなか付けられなかったからです。綺麗にツイッター投稿と横並びにするのが難しかった。

参考となるサイトを読んである程度やるべきことは見えていました。しかし思った位置に配置できなかった。

一番の変更点は配置の高さのマージンを変えたこと。
height:20px 本来は60px位の高さですが思い切って20pxまで下げちゃいました。いまのところは問題ないですが今後もしかしたらレイアウトがずれてくる可能性もあります。そしたらまた考えます！

そしてもう一点。
いままで一つひとつエントリの最後に付けたしていたツイッター投稿部分もレイアウトの中に盛り込みました。なんとか上手く動いてくれてるようです。

おそらくHTMLの中身を読んで自在に書き換えられる方は、今回書いてあることは苦も無くサラッと出来てしまうのかもしれません。

しかしHTMLタグを少ししか知らない私が中身(大本のレイアウト部分)を触って書き変えるのは、かなりの労力を要しました。

検索して色々なサイトを探ってみましたが、どれも一発で解決できるところが中々見つからなかったのが実感です。

結局書いてあることを何度も試して実際反映される結果を検証しながら出来上がった感じ。

今回感じたのはBloggerというブログサービスの不便さ。
FAQも日本語に対応していないところがあったり、ググっても日本語で解説しているところが中々みつからない。英語で検索入力するといっぱい出てくるのですが中身を読んで理解しながら自分のやりたいことを実行するのはとても難しい。これが感想です。

本当はもっと自由にカスタマイズできるといいなぁと思ってます。

今回行った3つのボタン配置と表示は、実際にお試しして出来たことを備忘録的にエントリにしたものです。

もしBloggerユーザーでなおかつサーバーを借りずに「blogspot.com」ままブログサイトを運営されている方の助けになれば幸いです。

Kazwoo

関連するエントリ
・[はてブ] Bloggerに“はてなブックマーク”を設置する方法 a??a?Re¨?ao?a?Ra?￣a?|a?ae￠≪a??a??a?￣a??a??a?￣a?°

・[はてなスター] Bloggerに“はてなスター”を設置する方法 a??a?Re¨?ao?a?Ra?￣a?|a?ae￠≪a??a??a?￣a??a??a?￣a?°

参考にした記事
・FacebookのLikeボタンとShareボタンの使い方と付け方 | フランスの日々 a??a?Re¨?ao?a?Ra?￣a?|a?ae￠≪a??a??a?￣a??a??a?￣a?°

・Facebook Like / Recommend Button For Blogger ~ Blogger Widgets《英語です》

2011年1月25日火曜日

【はてブ】 Bloggerに“はてなブックマーク”を設置する方法（How to put Hatena Bookmarks.）

Frayed Photo by nyello8

あなたのブログに“はてなブックマーク”は付いていますか？

以前読んだエントリがずっと気になっていました。はてブがあると読者の興味数がわかる！

ブログを短期間で月間10万PVにする方法を公開します　僕の18個の戦略 | Last Day. jp

ボタンを導入した後からは、はてブされる数そしてTweetされる数が格段にアップしました。

“はてなブックマーク”と“ブックマーク数”の設置と表示は色んな方に読んでもらうのにとても便利な指標となります。

今回はBlogger（ブロガー）で“はてなブックマーク”と“ブックマーク数”を設置する方法をご紹介します。

ではさっそく始めましょう。

ログインそしてHTML編集

1.ダッシュボードからデザインをクリックします。

2.デザイン > HTMLの編集と進みます。

3.ウィジェットのテンプレートを展開にチェックを入れます。ここがポイントです！

4.下の枠内に表示されているHTMLタグから <div class='post-header-line-1'/> と言う文字列を探します。（Windowsの場合はCtrl+F、Macintoshの場合はcommand+Fで検索できます。）

それを以下の文字列に置き換えます。難しいことは考えずにそのままコピペ（コピー＆ペースト）してみてください。

<div class='post-header-line-1'> <span class='hatena-entry hatena-append'> <a expr:href='"http://b.hatena.ne.jp/append?" + data:post.url'> <img align='absmiddle' alt='このエントリーをブックマークに追加' height='12' src='http://b.hatena.ne.jp/images/append.gif' style='border: none;' title='このエントリーをブックマークに追加' width='16'/></a> <a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url'> <img align='absmiddle' alt='このエントリーを含むはてなブックマーク' expr:src='"http://b.hatena.ne.jp/entry/image/" + data:post.url' style='border: none;' title='このエントリーを含むはてなブックマーク'/></a> </span> </div>

画面上ではこんな感じとなります。

文字列の検索：

そのまんまコピペ：

5.最後に「テンプレートを保存」をクリック

6.するとブログのエントリタイトルの下に“はてなブックマーク”と“ブックマーク数”が表示されます。

Befor

After

これで完成です。

私のブログはBlogger（ブロガー）と言うレンタルブログサービスを使用しています。Googleのアカウントでそのまま使える言う単純な理由でこのブログサービスを選びました。

しかし使い勝手がいまひとつ悪かった。。。

と言うのもヘルプが英語だったり、何かカスタマイズしたいと思った時に検索をかけても良いノウハウがみつからない。日本ではユーザ少ないのかな？

上手くカスタマイズ出来ずにいたところ同じBlogger（ブロガー）で私のやりたいことをいとも簡単にやっている方がいたので教えていただきました。

それはtwitter知り合いのYuichi (@flavour47) さんです。ありがとうございました！

Yuichiさんのブログサイト
Yu_notes　

そしてYuichiさんがココを参考にするといいよって教えてくれたのがこのサイトでした。

Web Cafe Blog: Blogger に「はてなブックマーク,はてなスター」ボタンを設置する 

今日は「Blogger で、はてなブックマークとはてなスターを使う」場合のメモを残して置きます。

Bloggerをお使いの皆さんも“はてなブックマーク”と“ブックマーク数”の設置と表示でアクセス数アップを目指しましょう♪

Kazwoo

2010年7月8日木曜日

【webサービス】「blogger for iPhone」bloggerがついにiPhone向けにカスタマイズ可能に！Blogger Touch

ついにbloggerもiPhone向けにカスタマイズ可能になりましたo(^▽^)o

いつもWordPressのブログを拝見しながら WPTouch の for iPhone なレイアウトに憧れていました。

いままでにもblogger向けに for iPhone をうたったレイアウトを変えるツールを試しましたが、どれも上手くいかなかったorz

でも今回は完璧でした( ´ ▽ ` )ﾉ
これでようやくblogger for iPhone の誕生！

では、さっそくその方法をご紹介します。

先ずはBlogger Touchのサイトへ。