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

2015年1月4日日曜日

Googleが提供するツールでモバイルのエクスペリエンスを向上させる

このエントリーをはてなブックマークに追加 Evernoteにクリップ

約半数がモバイルからのアクセス

スマホの普及によりモバイルからのアクセスは増加しています。このブログへのアクセス(UUベース)も2013年1月には10%に満たなかったモバイルユーザーが、2014年下期には45%と、半数近くがモバイルからのアクセスとなっています。

image

ブログのモバイル対応について考えてみた | 象と散歩 でモバイル(スマホ)でYoutubeと表を見やすくするための方法について記載しましたが、今やスマホで見やすいサイトであることは必須条件となってきています。

Googleではモバイルに対するユーザビリティに関してのレポートやツールを提供していますので、これらを有効活用してモバイル・ユーザーフレンドなサイトにしましょう。

モバイル対応を求めるGoogle

Googleは下図の右のようなモバイルに対応したサイトを望んでいます。



Google にとっては、モバイル フレンドリーなサイトが増えることが、結果、モバイルでの検索の増加、広告収入の増加に繋がるので当然ですが、利用者にとってもモバイル ユーザフレンドなサイトが望まれているのは利用者の立場からみて間違いありません。

[スマホ対応] ラベルって何?

2014年11月14日付のGoogleウェブマスター向け公式ブログの 検索ユーザーがモバイル フレンドリー ページを見つけやすくするために の中でモバイル版の検索結果に[スマホ対応]ラベルが表示されるという発表がありました。[スマホ対応]ラベルは下記の条件に合致する場合に適用されるとあります。
  • 携帯端末では一般的でないソフトウェア(Flash など)を使用していないこと
  • ズームしなくても判読できるテキストを使用していること
  • ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
  • 目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること
日本語(左図)では[スマホ対応]、英語(右図)は[Mobile-friendly]と表示されます。

20150106_073213000_iOS20150106_073500000_iOS

そして、「Googleではモバイル・フレンドリーの条件をランキング要素として使用することも実験中です。」という記載がありますので、近い将来には、”見やすさ” だけではなく、検索結果のランキングに影響しそうです。

モバイル対応を始めよう

Googleでは、サイトやブログのモバイル対応のガイダンスとして、 ウェブマスター向けモバイルガイド を提供してくれています。

モバイル フレンドリー テスト

この中にサイトやブログがモバイルに最適化されているかを確認するために モバイル フレンドリー テスト が用意されています。自分のサイトやブログをGoogleがモバイルに最適化されていると判断しているかを確認しましょう。

確認は簡単で、下記画面でURLを入力して「分析実行」ボタンをクリックするだけです。


問題がなければ下記のように「問題ありません。このページはモバイル フレンドリーです。」と表示されます。またGoogleがこのサイトを実際にどのように見ているのかがイメージとして表示されます。

モバイル フレンドリー テスト

このモバイル フレンドリー テストでお墨付きがもらえれば、前述したGoogleモバイル検索の結果で、[スマホ対応]ラベルが付加されます。

PageSpeed Insights でモバイルの操作性を向上させる

モバイル フレンドリー テスト で問題がなかったとしても、まだ改善できることは見つけられます。そのひとつが、PageSpeed Insights です。

PageSpeed Insights は、ページのパフォーマンス(表示速度)を測定し、改善点を指摘してくれるツールですが、PCとモバイルと両方の表示で測定を行ってくれます。(Google ウェブマスター向け公式ブログ: PageSpeed Insights を使ってサイトのモバイル操作性を向上させましょう

1) PageSpeed Insights の実行
「ウェブページのURLを入力」欄にURLを入力して「分析」をクリックします。

2)PageSpeed Insights の実行結果
ブログのモバイル対応について考えてみた | 象と散歩 でチェックしてみましたが、58/100 点と思ったより点数が高くなりません。

PageSpeed Insights (1)

改善できる点はないかと詳細を確認すると、「次のスクリプトの非同期バージョンを使用してください」という中に Google +1 のスクリプトが含まれていましたのでこちらを改善します。

PageSpeed Insights (2)

Google +1のJavaScripitを非同期にする

Google +1のJavaScripitを非同期にする方法については、+1 ボタン - Google+ Platform の JavaScript の非同期読み込みに記載がありますので こちら を参考にしてください。

ヒント: パフォーマンスを最高にするには、このコードを最後の +1 タグの直後に配置します。

とありますが、</Body>タグの直前に記載すれば大丈夫です。

3) 修正後の再チェック
Google +1のJavaScriptを変更して再度、PageSpeed Insights で確認すると、58/100 → 60/100 へと2ポイント改善されました。

PageSpeed Insights


PageSpeed Insights のルール に日本語での解説もありますが、Bloggerを利用している場合には、これ以上の改善はできなそうです。

4)ユーザーエクスペリエンス
PageSpeed Insightsでは「速度」以外にも「ユーザーエクスペリエンス」についても評価してくれます。こちらは 96/100 で修正が必要な項目はありませんでした。
image

ウェブマスターツール

Googleウェブマスターツールでもモバイル ユーザビリティのチェックができます。チェックできる内容は以下の6点です。
  • Flash が使用されています
  • ビューポートが設定されていません
  • 固定幅のビューポート
  • コンテンツのサイズがビューポートに対応していません
  • フォントサイズが小です
  • タップ要素同士が近すぎます

詳細は、モバイル ユーザビリティ - ウェブマスター ツール ヘルプ で確認できます。

image

まとめ

Googleが強く推奨するだけではなく、モバイルからのアクセスは増え続けていますので、モバイル ユーザ体験の向上は今や必須です。

スマホで検索して、開いた途端に見る気が失せるサイトもまだ少なくありません。折角、Googleが無償でモバイル ユーザビリティ、表示速度など各種チェックツールと変更方法まで教えてくれているので、是非、修正可能な範囲で対応しましょう。

【おまけ】モバイル・ユーザの実態調査(Our Mobile Planet)

Googleが提供するモバイル向けのレポートとして、各国のモバイルユーザの実態をまとめた Our Mobile Planet があります。2013年のレポートなので鮮度は落ちてしまいましたが、モバイルユーザーの動向としては参考になります。

スマートフォンの使用度は過去6ヶ月間で増加

自分でグラフも作れる Our Mobile Planet

また Our Mobile Planet では、2011~2013年のデータを使って自分で簡単なグラフを作成することができます。


例えば、下記はスマホでどのくらいの頻度でウェブにアクセスをしているかを示したグラフで、83%のスマホ・ユーザーが毎日ウェブサイトにアクセスしていることがわかります。

image

各国との違いも比較できるので、2014年のデータも追加されることを願います。

2014年12月31日水曜日

ブログのモバイル対応について考えてみた

このエントリーをはてなブックマークに追加 Evernoteにクリップ
ここ数年でモバイルのアクセス数も随分と増えたと思い、Googleアナリティクスで確認をしてみると、1年の間でもモバイルは増加し、デスクトップとタブレットのカテゴリが減少しています。直近1ヶ月では4割がモバイルからのアクセスになっています。

モバイル増加率

自分がブログで使っているBloggerは、モバイルテンプレートを選択すればある程度は整形して表示してくれます。しかし、直近でエントリーした「検索エンジンでブログを検索対象とする方法」をiPhoneで閲覧すると画像は自動的にリサイズされていますが、Youtubeと表は、はみ出して、かなりカッコ悪い状態です。モバイルユーザーの経験価値を高めねば。

20141230_230544000_iOS  20141230_200454000_iOS

と、いうことで ”Youtube” と ”表(table)” のレスポンシブル対応について調べてみました。

Youtubeのレスポンシブル対応

参考にしたのは、下記のサイトです。タイトルはまさに「Youtube(その他iframeを使った動画)をレスポンシブにする方法」です。



スタイルシートの設定で簡単にYoutubeをレスポンシブルにできるとありますので早速試してみました。

Step1

サンプルではクラス名が ”video-container” でしたが、Youtube以外の動画も使わないので ”youtube” にしました。コツは56.25%です。56.25%は、5625/10000 となりますが、この比率は5で割っていくと 1125/2000 → 225/400 → 45/80 → 9/16となります。そうです、HD動画の16:9の比率なんですね。と、How do you convert a percentage (56.25%) into a fraction? にて説明されていました。

.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.youtube iframe,
.youtube object,
.youtube embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Bloggerの場合
上記のスタイルシートがそのまま使えます。どこに記述すればよいかは、引用(blockquote)を格好よく表示する | 象と散歩 を参考にしてください。

Step2

Youtubeから取得した埋め込みコードを上記で作成したクラス名で囲むだけです。

image

これがサンプルのコードです。

<div class="youtube">
<iframe width="560" height="315" src="//www.youtube.com/embed/R_PWp3dEsmI" frameborder="0" allowfullscreen></iframe>
</div>

スマホでのYoutubeの表示確認

検索エンジンでブログを検索対象とする方法」を修正して確認します。下図左がiPhone(Safari)で右がSurface(IE11) で表示しています。

20141230_222916000_iOSimage

素晴らしい、レスポンシブになった。

表のレスポンシブ対応

表(table タグ)は配置を変えられないのでレスポンシブにはならないと分かりつつも、世の中には賢い人がいるに違いにない、と、見つけたのが、「10+ Solutions for Responsive Data Tables 」という中にあった方法です。

The Basics

ベーシックで紹介されているのは、すごく簡単な方法でtableタグで表の幅(width)を設定せずにブラウザの表示にまかせるという方法です。

Before
<table border="1" cellpadding="2" cellspacing="0" width="720"><tbody>
<tr>
<td width="360">テスト1行目テスト1行目テスト1行目</td>
<td width="120">テスト2行目</td>
<td width="120">テスト2行目</td>
<td width="120">テスト2行目</td>
</tr>

After
<table border="1" cellpadding="2" cellspacing="0"><tbody>
<tr>
<td>テスト1行目テスト1行目テスト1行目</td>
<td>テスト2行目</td>
<td>テスト3行目</td>
<td>テスト4行目</td>
</tr>

しかし、幅を指定しないと、列が多い場合や文字が多い場合などは、フォーマットが崩れて反って読みづらくなってしまいます。

Mobile-Frendly Table

レスポンシブルではないけど表のフォーマット崩さない方法が、”Mobile-Friendly Table(モバイルにやさしい表)” で紹介されています。モバイルの場合に表を横にスクロールさせる方法です。

しかし、無知な自分にはサンプルコードの使い方がわかりません。

@media screen and (max-width: 640px) {
table {
overflow-x: auto;
display: block;
}
}

そこで似たようなことを試めされている方はいないかと探し、「tableをレスポンシブでも破綻しないようにする簡易的な手法 | webutubutu」 を参考にさせていただきました。

しかし、上記で紹介されているサンプルのスタイルシートではうまくいきませんでした。確かにスマホで、表の横スクロールが可能になりましたが、PCでもスクロールバーが表示されてしまいます。またメディアスクリーンで指定した「表は左右にスクロールできます」が表示されてしまいます。

下記がtableをレスポンシブでも破たんしないようにする簡易的な手法から引用したCSSの記載例です。

.table-wrap{overflow: scroll; position:relative;}
@media screen and (max-width: 1410px) {
.table-wrap:before{
content: "\008868\00306f\005de6\0053f3\00306b\0030b9\0030af\0030ed\0030fc\0030eb\003067\00304d\00307e\003059"; /* 文字化け対策のためUnicode変換 */
color:#fff;
font-size:12px;
background-color:#e07903;
position: absolute;
top:0px;
border-radius: 5px;
padding: 0.05em 0.5em;
}
}

スマホで表がはみ出してしまう場合の対応【完成形】

と、いうことで、先人たちの知恵を融合してtableのレスポンシブル対応の完成です。tableのスタイルでoverflowをautoにして、display block を追加することで、スマホだけで表をスクロールできるようになりました。

またメディアクエリの max-widthを640pxにすることでスマホだけで表上にメッセージを表示させることができました。640pxにする理由がわかりません。iPhoneでは350pxの表までははみ出さずに表示できたので max-width の値を350px前後にも変更してみましたがうまくいきませんでした。

スクロールを示唆する文言は、スマホ対応なのでスクロールではなく、「表は左右にスワイプ可」としました。

下記がサンプルのスタイルシートになります。

.table {
overflow: auto; display: block; position:relative;
}
@media screen and (max-width: 640px) {
.table:before{
content: "\08868\0306f\05de6\053f3\0306b\030b9\030ef\030a4\030d7\053ef"; /* 文字化け対策のためUnicode変換 */
color:#fff;
font-size:12px;
background-color:#e07903;
position: absolute;
top:0px;
border-radius: 5px;
padding: 0.05em 0.5em;
}

iPhoneでの表示は下記のようになります。

20141231_011551000_iOS

まとめ

今回は、ちょうど気になったYoutubeと表のレスポンシブル対応でしたが、スマホからのアクセスは、これからも増え続けていくと思います。適宜ユーザビリティ強化は図っていきたいと思います。

先ずは、モバイルでのアクセスが多いコンテンツから少しずつ修正していきたいと思います。

2014年12月28日日曜日

検索エンジンでブログを検索対象とする方法

このエントリーをはてなブックマークに追加 Evernoteにクリップ
久しくGoogleウェブマスターツールを覗いてみていなかったのですが、いつのまにか自分が使っている Blogger もサイトマップに対応していたので、Googleウェブマスターツールで登録を変更しました。

ウェブマスターツールでGoogleに検索をしてもらうようにするための方法は、BloggerでなくてもどのWEBサイトでもブログでも同じです。

Google検索の仕組み

Googleでは、スパイダー(クローラー)というソフトウェア(ロボット)が定期的にWEBページをクローリングして情報を収集してインデックスを作成しています。Googlebot がこのクローリングを行うためのロボットで、ボットとはロボットの略称です。

英語のクロール(CRAWL)という意味には、虫が這い回るという意味もあるので、まさにリンクをたどって這い回る蜘蛛(スパイダー)がクローリングなのです。

スパイダー

そして、誰かがGoogleで検索したときに、索引として参照されるのがこのインデックスです。逆に言えばインデックスに登録されていないWEBページは検索の対象になりません。

Goolgeの検索の仕組みついては、Googleが提供している「How Search Works」(日本語字幕あり)が、わかりすく説明をしているので参考にしてください。

クローラーの挙動を決める robot.txt

robots.txt ファイルについて - ウェブマスター ツール ヘルプ に説明がありますが、robots.txt には、クローラーが、サイトやブログにアクセスしたときにどのように振る舞ってもらいたいかが記載されています。最もシンプルなのは、クローリングを許可するか否かと、サイト構成(地図)が記載されているサイトマップの設置場所についての記載です。

robots.txtの表記例
項目名 説明
User-agent: 対象となるロボット名です。
* はすべてのロボットを対象にしているという意味になります。
Disallow: クローリング対象外とするURLを記載します。
Allow: クローリングの対象とするURLを記載します。
/ はディレクトリ配下すべてを対象とするという意味になります。
Sitemap: サイトマップが設置されているURLを指定します。
Blogger の robots.txt
Blogger の場合、何も設定しなくても下記の robots.txt がルートディレクトリに作成されています。自分のブログであれば、http://walking-elephant.blogspot.com/robots.txt です。独自に編集することもできます。
User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow: /search
Allow: /

Sitemap: http://walking-elephant.blogspot.com/sitemap.xml

User-agent: が Mediapartners-Google となっているのは Google AdSense です。Disallow: の指定がないので、すべてのディレクトリが対象となります。一方、通常の検索エンジンに対しては、/search をクローリング対象外としているので検索結果やラベル検索によるページについてはインデックスされませんが、広告は表示されるという設定になっています。

サイトマップとは

Googleなどの検索エンジンのクローラーは、リンクをたどってコンテンツの情報を取得していきます。サイトマップはその道しるべ(索引)です。サイトマップには、コンテンツの場所(URL)や最終更新日などが書かれています。

Blogger は、サイトマップに対応していなかったので、サイトマップ代わりにRSS/ATOMフィードを使わなければなりませんでしたが、いつのまにかサイトマップに対応して自動的に作成されるようになっていました。

下記は、自分のブログのサイトマップの例ですが、<URL>タグで1コンテンツを囲み、<loc>タグで場所(URL)と<lastmod>タグで最終更新日が記述されています。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://walking-elephant.blogspot.com/2014/12/2kg.html</loc>
    <lastmod>2014-12-23T16:30:27Z</lastmod>
  </url>
</urlset> 

sitemap.xmlの表記例
項目名 説明
<url> <url>タグで1コンテンツを囲みます。
<url>~</url>の間に以下のタグでコンテンツの詳細を記載します
<loc> 【必須】
ページの場所(URL)を記載します
<lastmod 【オプション】
ページの最終更新日を記載します
<changefreq> 【オプション】
ページの更新頻度ですが参考値です(always,hourly,daily,weekly,monthly,yearly,never)
<priority> 【オプション】
サイト内の重要なページを知らせるための優先度(0.0-1.0)
デフォルトの優先度は0.5です

ウェブマスターツールに登録しよう

Googleなどの検索エンジンは、下記の順番でサイトやブログのリンクをたどってインデックスに登録していきます。

Googleのクローリング順序

しかし、世界中には数多のサイトやブログがありますので、自分のサイトやブログをクローリングしてもらうために、ウェブマスターツールに登録しておきましょう。Yahoo! の検索エンジンはGoogleなので、現在、WEBマスターツールを提供しているのは、GoogleとBingです。

・Goolge ウェブマスターツール
・Bing Webmaster Tools

Googleウェブマスターツールにサイトマップを登録しよう

Googleウェブマスターツールでのサイトマップの登録方法は下記の通りです。

① メニューからクロールの下にあるサイトマップを選択

② 「サイトマップの追加テスト」をクリック

③ ボックスにsitemap.xmlをタイプ

④ 「サイトマップをテスト」をクリック

Googleウェブマスターツール(サイトマップ)

⑤ テスト完了でエラーがないことを確認

Googleウェブマスターツール(サイトマップ テスト)

⑥ ①-③と同じ手順で「サイトマップを送信」をクリック

新しく登録されたサイトマップでインデックスに登録されるまでステータスは保留となっています。

Googleウェブマスターツール(自分のサイトマップ)

⑦ インデックスに登録されたら、以前に登録したRSS/ATOMフィードを削除

RSS/ATOMフィードでインデックスを登録していたときは、214登録/215送信でしたがXMLサイトマップに変更したら213登録/213送信と正しい213ページになりました。

Googleウェブマスターツール(フィードの削除)

Bing Webマスターにサイトマップを登録しよう

続いてBingのWebマスターツールへのサイトマップの登録です。サイトマップの送信ボックスにXMLサイトマップのURLを入力して送信ボタンをクリックすれば完了です。

Bing Web Master tools

以上でサイトマップの登録は完了です。

2013年12月30日月曜日

Word2013でブログを書く

このエントリーをはてなブックマークに追加 Evernoteにクリップ
やっとBloggerユーザーもWord2013でブログを投稿できるようになりました。Word2007からブログ投稿ができるようになっていたのですが、Word2013では、Bloggerのアカウントを選択すると「アカウントを登録することができません。」と悲しくも拒絶されていたのです。

word2013 Bloggerアカウント登録(失敗)
もちろんWindowsマシンであればMicrosoftが提供する Windows Essentials に含まれている優れたブログライターである Windows Live Writer を利用することできるので、敢えてWordでブログを投稿する必要はないのですが、Surface/Surface 2 に搭載されている Windows RTではWindows Live Writerが利用できません。またWindowsストアにブログ・ライティング・ソフトはないので、Surface使いにはWordでブログの投稿できないというのは致命的?でした。

Word2013でBloggeの投稿が可能に

12月に修正プログラムがリリースされてやっとWord2013からBloggerに投稿できるようになりました。

Description of the Word 2013 update 2850060: December 10, 2013

  Issue that this update fixes (このアップデートで修正される問題)
  • You cannot register your Blogger account in Word 2013.
  • (Word2013でBloggerアカウントを登録できない)

さっそく試してみると、通常のWord2013でも Office RT のWord2013 でも Blogger アカウントの登録ができました。
  word2013 Bloggerアカウント登録(成功)

Wordでブログに投稿する

Word2013でブログに投稿するの簡単です。Wordを起動して「ブログの投稿」を選択します。

  word2013_1
後は前述のアカウント登録をすれば準備完了です。Wordと同じように文章を作成できるので難しいことがわからなくてもブログに投稿することができます。WordPress.com にも対応しています。

Wordでブログのメリット

  • ワープロ感覚でブログを作成
  • 図形、クリップアートなどの利用が可能
  • 表、グラフも簡単に作成
基本的な操作はワードと同じなので気軽にブログを作成することができます。表の作成、図の作成、グラフの作成なども容易です。例えば下記のようなブログを簡単に作成することができます。

  Word for blogger

Wordでブログのデメリット

  • プレビューができない
  • ビデオ、地図などが挿入できない
  • htmlが直接編集できない
  • 余分なHTMLタグ <span xlmns=’’’’></span>
プレビュー機能がないのでブログ上でどのように表示されるのかを確認するためにはブログに下書き保存をして確認するしかありません。またWordではYoutubeの動画を差し込むことができるのですが、ブログテンプレートからは動画の挿入ができません。あと地図の挿入もできません。何よりもhtmlを直接編集できません。またフォントを指定していなくても余分なhtmlタグが挿入されてしまいます。

Wordでブログ投稿をするコツ

前述したようにWindowsマシンであれば、Windows Live Writerを利用した方が無難です。しかし普段はSurface2を持ち歩いているのでブログの下書きとしてwordを利用しています。ブログに直接投稿する以外にも下書きとして保存できるので修正が必要であれば、ブラウザや別な環境で修正を行うことができます。 下書きとしてだけではなく、図形やグラフを挿入するような場合にもwordで作成すると便利です。


残念なことに...

2014年1月の初旬にはまた Word 2013 から Blogger にアクセスできなくなりました。僅か1ヵ月足らずの命とは...。マイクロソフトのコミュニティには、「ログインのシーケンスが Googleによって変更されたのでは?」とありますが、そもそも Windows Live Writer では Blogger に接続して使えるのですからそんなに難しい問題ではないのではと思ってしまいます。

早いバグフィックスを望みます。

そして再び...

2014年4月8日のWord2013のアップデートに下記の更新内容が含まれていました。
Word 2013 で、Blogger のブログのアカウントを登録しようとすると、次のエラー メッセージが表示されます。

アカウントを登録することはできません。

お帰りなさい。(2014年4月30日 追記)

2011年5月17日火曜日

ブログとSNSを連携する - Tumblrで共有

このエントリーをはてなブックマークに追加 Evernoteにクリップ
「Tumblrで共有」ボタン、ウェブサイト運営者向けに提供開始という記事を見かけたので早速ブログにTumblrの共有ボタン(Share on Tumblr)を設置してみました。



Tumblr共有ボタンの設置方法にあるコードを貼り付けるだけです。



Advancedを選択するとTumblrに共有される形式をリンク、引用、写真、ビデオの中から選択することができるようです。



先ずは基本のBasicを選択します。

BloggerにTumblrで共有ボタンを設置する

Tumblr共有ボタンのステップ1にあるJavaScriptを/headの前にコピーします。

<script type="text/javascript" src="http://platform.tumblr.com/v1/share.js"></script>

1.Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2.テンプレートから /head を検索。
3./headの下にコードを張付ける。

続いてShare button codeにあるコードを貼り付けてみましたが、Tumblrで共有ボタンが表示されません。

ボタン画像のURLが正しく解釈されていないのではと思い、コードをみると画像のURLがアポストロフィで囲まれていましたので、これをクォートに変更してみると『Tumblr共有ボタン』は表示されましたが、表示位置が変です。

再びコードを眺めると<a>タグで「Share on Tumblr」という文字列にリンクをさせているのですが、表示上にこの文字列はありません。text-indent:-9999px という記載があるので、おそらくこれがあり得ない場所に文字列を飛ばしているのではないかと考え、「Share on Tumblr」とtext-indent:-9999pxを外してみました。

するとTumblr共有ボタンが正しく表示されました。(自分の感に万歳!)

下記の【After】がBlogger用に変更した『Tumblrで共有ボタン』のコードです。

【Before】
<a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;">Share on Tumblr</a>

【After】
<a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; overflow:hidden; width:81px; height:20px; background:url("http://platform.tumblr.com/v1/share_1.png") top left no-repeat transparent;"></a>

このコードをテンプレートに埋め込みます。

1.Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2.テンプレートから <div class="post-header-line-1">を検索。
3.<div class="post-header-line-1">の下にコードを張付ける。

Tumblr共有ボタンを試す

Tumblr共有ボタンを押すとShare on Tumblrの画面が表示されます。Basicを選択しているとLinkがデフォルトになるようです。左下の『Create post』でTumblrに投稿されます。



BloggerへのTumblr共有ボタンの設置はこれで終了です。

今日の一曲(2曲セットで)

ザ・ベスト・オブ・セックス・ピストルズ
charaのMy Wayを紹介したときにセックス・ピストルズに触れましたが、パンクというジャンルを知らなかった自分が、初めて Anarchy in the U.K. を聴いたときは、頭の回路が完全にショートし、My Wayで陶酔してしまいました。そしてその後のニナ・ハーゲン、戸川純という、自分の趣向に新しいパターンを生み出すきっかけとなったのです。

ザ・ベスト・オブ・セックス・ピストルズには、勿論この2曲も収録されています。音量を上げて空気の振動を感じながら聴いてください。
Anarchy in the U.K. - The Sex Pistols
 
My Way - The Sex Pistols

2011年5月3日火曜日

Bloggerの表示を最も簡単にiPhoneに最適化する方法

このエントリーをはてなブックマークに追加 Evernoteにクリップ

Blogger Touchを使ってスマートフォンに最適化

私自身もBloggerでブログを書いていますが、Bloggerを使ったブログをiPhoneで閲覧していると下記のようにiPhone用の表示に最適化されているサイトが見受けられます。

Blogger Touch オフィシャルブログ

これは、Blogger Touchというサービスを利用して、bloggertouch.appspot.com/xxx(xxxは指定)にリダイレクトさせることによってiPhone用の表示に最適化しています。

Blogger Touchのサービス設定

Blogger Touchのサイトで『Mobile Edition Maker』をクリックすると




Only Three stepsと記載されているように、僅か3ステップで設定することができるとあります。

BloggerのURLを入力

これは3ステップには含まれていないようです。まず自分のブログのURLを入力します。



Step1:リダイレクトさせるURLを決める



Step2:『Add Code』をタップ




Bloggerのページ要素を追加で『ウィジェットを追加』をタップし、ブロガーに組み込みます。



Step3:『Verification』で設定を確認



Bloggerの設定でスマートフォンに最適化

Blogger Touchは、Bloggerを簡単にiPhone用の表示に最適化する方法ではありますが、現時点で最も簡単にiPhoneに最適化するには、Bloggerの 設定>メールとモバイル>モバイルテンプレート(ベータ版)で『モバイルテンプレートを表示する』を『はい』にするだけで、Bloggerをスマートフォン(iPhone, android携帯)に最適化することができます。




実際にスマートフォンでアクセスされた場合にどのように表示されるかは、スマートフォンを保有していなくても『モバイルプレビュー』から確認することができます。下記は、このブログのトップページをiPhoneで表示したものです。




各記事はこんな風に表示されます。




本文中心だけの表示でサイドバーがなくなります。しかし、Blogger Tochでスマートフォンの表示に最適化するとAdSenceが表示されませんが、Bloggerの設定でスマートフォンの表示に最適化した場合には、AdSenceが表示されます。

今日の一曲


My Wayといえば、英国訛りで♪マ~イ、ワイ!とシャウトするセックス・ピストルズ(Sex Pistols)が有名です。このMy Wayが収録されているピストルズのアルバム『Kiss This』は一聴の価値ありですが、iPhoneでインターネットラジオのスォーノ・ドルチェ(Sono Dolce)を聴いていたら、流れてきたのがYen town bandことCharaのMy Wayでした。

iTunesで購入してからCharaのボーカルであることを知りました。彼女の独特の声で切なくMy Wayを歌い上げてくれています。

My Way - Yet Town Band