2011年9月29日木曜日

Bloggerで始める今時のブログ(Google+のブログパーツ)

Facebookもtwitterもブログパーツを設置したので、この流れでGoogle+のブログパーツ無いかなあと思い探しました。
このブログに載っていた下記サービスがよさそうです。
http://impresario.me/widgetplus/

The Widget+ 
http://widgetsplus.com/

http://widgetsplus.com/

設定にはGoogle+ IDが必要になります。これはGoogle+にアクセスした後で自分のプロフィール写真をクリックした時のURL

https://plus.google.com/107492160423949973895/posts

とかの 107492160423949973895 に該当します。

Basic Settings からGoogle+ IDを入力して、つぶやいたフィードも表示させるんだったら
Include update feed にチェックを入れて「Get Code」 をクリックします。
出来上がったコードをBloggerのウィジェットとして登録すれば完了です。

2011年9月3日土曜日

Bloggerで始める今時のブログ(シンタックスハイライト)

一応このブログでは技術的な情報を配信する予定でいます。
そのため、ソースコードをブログに貼り付けるシーンも出てくると思います。
その際ソースコードを綺麗に見せたい!と思うので、シンタックスハイライトをBloggerにぶち込もうと思います。

https://sites.google.com/site/fazibear/blogger.html?attredirects=0

ここからblogger.htmlをダウンロードします。
こちらのブログを参考にしました。
コードをハイライトする「Blogger Syntax Highlighter」ウィジェット http://www.kuribo.info/2008/06/blogger-syntax-highlighter.html

このhtmlをブラウザで表示させると僕の環境ではうまくできないので、テキストエディタで開いて貼付けを行いました。
textareaで囲まれた部分(<style>~</script>まで)をコピーしてBloggerのウィジェットで「html/javascript」を選んで「タイトル」入力欄を空白にして、内容にコピーしたのを貼りつけて「ウィジットを追加」ボタンを押して追加しましょう。
下記の部分ね。導入すると下記みたいな感じで表示がされます。

<textarea style="display: none" name="widget.content">
<style>
中略
--></script>
  </textarea>

対応しているのは

  • c++ 
  • c# 
  • css 
  • delphi 
  • html 
  • java 
  • js 
  • pascal 
  • php 
  • python 
  • ruby 
  • sql 
  • vb 
  • xml
使い方としては下記のようにします。通常のモードではできないので「html」標示モードですね。
<pre name="code" class="html">
(コード)
</pre>

あと<>&lt;&gt;に変換する必要があります。

2011年9月2日金曜日

Bloggerで始める今時のブログ(twitterに連携する)

Bloggerに記事を投稿したらtwitterにも自動的にPOSTしたい!
そんな事ってあると思います。

Tweeterfeed
http://twitterfeed.com/

http://twitterfeed.com/

これで設定するのが一番簡単なんじゃないかと思います。IDEA*IDEAにも紹介されていた
FriendFeedとかも使ってみましたが、イマイチうまく投稿できない・・・。

もともとlast.fmとかはFriendFeed使ってるけど、ブログは連携の仕方がよくわからない。
しかもIDEA*IDEAはWordTwitに乗り換えたって、それWordPressのプラグイン・・・。

ということで気を撮り直して、ブログの更新情報を Twitter に流してくれる Twitterfeedを参考に設定してみました。(クリボウの Blogger TipsさんのサイトはBlogger関連記事が色々あって参考になります)

2011年8月31日水曜日

Bloggerで始める今時のブログ(ウェブマスターツールに登録する)

さて、GoogleのサービスBlogger.
Googleの他のサービスとの連携もそれなりに。

ウェブマスターツール


https://www.google.com/webmasters/tools/home?hl=ja
https://www.google.com/webmasters/tools/home?hl=ja
アクセスするともうBloggerで作ったブログが表示されてますので、そのまま登録できちゃいます。

ウェブマスターツールを使うことでGoogleにどんなかんじでインデックスされるのか、サイト内のキーワードがどんな具合なのか、+1ボタンのクリックがどんなかんじなのかを集計することができるようになります。

2011年8月30日火曜日

Bloggerで始める今時のブログ(twitter公式ガジェットを設置する)

twitterの公式ガジェットを設置しよう!

twitterアカウントを持っていれば、下記から簡単にガジェットの追加ができます。

http://business.twitter.com/about/resources/widgets/widget_profile


http://business.twitter.com/about/resources/widgets/widget_profile
自分のアカウントを設定してデザインやら項目を設定します。

最後に「完了&コード取得」をクリックすると貼り付けるためのコードが生成されます。



のボタンをクリックすれば簡単に追加完了です。

2011年8月29日月曜日

Bloggerで始める今時のブログ(twitterのFollow meボタンを設置する)

せっかくブログを作ったので、ブログからtwitterのアカウントへ誘導をしたいと思います。

go2web20
http://www.go2web20.net/

http://www.go2web20.net/twitterFollowBadge/

こちらからボタンを作ることができます。










色やら表示するテキストやらを色々選んでコードを生成すると、実際にどう表示されるかが確認できます。

よければこのコードをBloggerに登録します。

Bloggerの「デザイン」のタブから「レイアウトを編集」を選んで「HTML/JavaScript」のガジェットを追加すれば設置できます。

その際にタイトル文字を入れてしまうとブログ上に表示されてしまうので、タイトルには何も入れないようにします。

2011年8月28日日曜日

Bloggerで始める今時のブログ(Analyticsのタグを埋め込む)

さて、Bloggerには管理画面に「統計」というタブがあってある程度のアクセス集計は確認することができます。













だがしかし、細かい解析をするには少し物足りません。
そんな時には同じGoogleのサービスのGoogle Analyticsを使いましょう!

http://www.google.com/intl/ja/analytics/


Bloggerを作るときにもうGoogleアカウントはあるので、設定はらくちん!
「今すぐアクセス」をクリック
次の画面で「プロファイルを追加」をクリックして、作ったブログを登録しましょう!







登録が終わると、埋め込むタグが用意されます。
これをコピーしてBlogger側に埋め込みます。

Google Analyticsで生成された埋め込み用コード









Blogger側で「デザイン」のタブから「HTMLの編集」をクリックします。















まあまずいじる前に、ぶっ壊れたときにもとに戻せるように「テンプレートをすべてダウンロード」からバックアップをとっておきましょう。

その上で「テンプレートを編集」から</head>を探してその前にタグを埋め込みます。
"
    </b:template-skin>
<script type='text/javascript'>

  var _gaq = _gaq || [];
  _gaq.push([&#39;_setAccount&#39;, &#39;UA-24559530-2&#39;]);
  _gaq.push([&#39;_trackPageview&#39;]);

  (function() {
    var ga = document.createElement(&#39;script&#39;); ga.type = &#39;text/javascript&#39;; ga.async = true;
    ga.src = (&#39;https:&#39; == document.location.protocol ? &#39;https://ssl&#39; : &#39;http://www&#39;) + &#39;.google-analytics.com/ga.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
  </head>

テンプレートを保存して完了!となります。

2011年8月27日土曜日

Bloggerで始める今時のブログ(上部のナビゲーションの色を変える)

さて、ブログが徐々に自分好みに調整をしてますが、Bloggerでブログをやる上で避けて通れない、上部のナビゲーション。
結構邪魔だったりもしますが、実はこれ透明にできるんです。

これも管理画面の「デザイン」から
navbarの「編集」を押すことで、透明を選択できるようになります。

これで目立たなくなった!

Bloggerで始める今時のブログ(ファビコンを変える)

Bloggerで作ったブログだと表示される
のアイコン。
これを変更することができます。

管理画面の「デザイン」から
ファビコンの「編集」をクリックします。


・・・とその前に、ファビコンを用意しないといけません。
ファビコンを作る場合は下記から作るとかっこいいです。

ICON GENERATOR

http://icon-generator.net/
に紹介されていて参考にしました。


ファビコンサイズだと複雑にすると文字が読めないので、シンプルなデザインの「CS4」を選びます。
文字は一文字がいいでしょう。
背景色は明るめにすると文字の黒とコントラストがはっきりして見やすくなると思います。

さて作り終わったら「アイコンを保存する」から保存をします。

さてこれで画像ができました。
ちなみにこの段階で2文字のアイコンも作っておくと後でFaceBookのページを作るときに使えるのでいいかと思います。



さてここからファビコンを作るには、今度はファビコンジェネレータのサイトを利用します。


これが決定版じゃね?とってもお手軽なFavicon作成ツール『Favikon』


で紹介されている



Favikon
http://www.favikon.com/

http://www.favikon.com/
を利用します。
利用方法は簡単。


先ほど作ったアイコンファイルをアップして範囲を選択するとファビコンの出来上がり!


これをダウンロードしてからようやくBloggerに戻ってきて、
から作ったファビコンを登録しよう!

2011年8月26日金曜日

Bloggerで始める今時のブログ4

さて、DNSの設定をしたら、Blogger側でドメインの設定をするぞ。

「設定」の「公開」から

切り替え: •  カスタム ドメイン 


を選ぶべし!

そしたら先ほど設定したドメインを登録します。


はい、これで自分のドメインでアクセスできるようになりました~。


2011年8月24日水曜日

Bloggerで始める今時のブログ3

さて、ようやくあなたもブログオーナーになったわけだが、ふと手を止めてみて欲しい。そのドメイン。

http://neoneeton.blogspot.com

いいけどさ。いいけどあれだね。自分のドメインに設定したいところ。
そんなところでみんな持ってる無我夢中・ムームードメインの登場だ!

ムームードメインでムームDNSを設定すればBloggerも自分のサブドメインで表示することができるぜ!

さあ、その手順だ。(ムームDNS以外の設定方法は知らん。各自調べてみてくれよな!)

1.ムームDNSでカスタム設定のセットアップ手順を確認する
この手順を見ればたぶんいけると思う。

2.実際に設定するのはこんな感じだ

  • サブドメインは自分の付けたいのを適当に入れます。
  • 種別は「CNAME」を選びます。
  • 内容は ghs.google.com を入れます。
詳しくはブログでカスタム ドメイン名を使用するに書いてあるからよく読んで設定しよう!





3.寝て待て

ちなみにDNSってのは浸透に時間がかかる。下手すりゃ24時間くらいかかる。真夜中に試してすぐ反映されないと君のやる気も無くなっちまうだろ?俺は気持ちが折れそうになった。というわけでこの設定をしたらおやすみなさい。

朝になって確認して表示されてたらよかったね。
次はBloggerでサブドメインに転送する設定をするよ。

Bloggerで始める今時のブログ2

さて、Bloggerでブログを始める方法ですが、Googleのアカウントを持っていれば簡単です。
アカウントを持ってない人はアカウントを事前にとってくだされ。

1.ブログに名前をつけてやれ!

http://www.blogger.com/ にアクセスすると下記画面が表示されます。
ブログタイトルを適当に決めて、ブログアドレスを慎重に決めてからブログを作ります。


2.テンプレートで決める!
次にテンプレートを選びます。個人的には「画像ウィンドウ」が好きなので悩んだら「画像ウィンドウ」にしてください。


3.できたぞ
はい、できあがり〜。これであなたも立派なブログオーナー。
これで記事をたくさん書いてブログイベントに出まくってアルファブロガーを目指してくれ!

Bloggerで始める今時のブログ1

僕が初めてBloggerを始めたのは、6・7年くらい前だと思う。多分。

あまりに昔過ぎて覚えてないけど、その当時はまだMTもそこまで流行ってなく、もちろんビジネスブログなんて言葉もなかったような気がする。
その当時にしてはHTMLをほぼ全部いじれるほぼ唯一のブログサービスだったのでBloggerでブログを書いてました。
それに、どうやってたのか思い出せないが、指定サーバ上に書きだすなんてことができて、Bloggerで書いたコンテンツがso-netのFTPサーバ上に出力されるとかそういう高度なこともできていた。

あれから数年経ったわけですが、一時は規模縮小かなと思っていたBloggerでしたがどうやら少しずつ機能拡張しているようです。

そんなわけでBloggerではじめる今時のソーシャルメディアと連携させるブログを作っていきたいと思います。

カテゴリを確認

カテゴリはあるのかな

ブログ始めました。

久しぶりにブログを始めました。

2011年5月19日木曜日

IE9でDOM Exceptionが発生する

document.createElement(dojo.isIE ? '<input type=\'hidden\' name=\'hoge\' />' : 'input'); 
今まで上記のようにIEでは createElementしていましたが、IE9ではDOM Exceptionをはくようです。

document.createElement(dojo.isIE < 9 ? '<input type=\'hidden\' name=\'hoge\' />' : 'input');
のようにするとよさそうです。

http://d.hatena.ne.jp/Kazzz/20110420/p1

2011年5月18日水曜日

IE7でファイルをダウンロードすると、空白文字がアンダースコアに!

Internet Explorer 7 でファイルをダウンロードすると、ファイル名に空白文字が、アンダースコアに変更されます。
  http://support.microsoft.com/kb/952730/ja
 と言うことで修正プログラムが公開されています。

2011年5月17日火曜日