最近、ウェブマスターツールから「モバイル対応していないと検索ランク下げるよ」的なメールが来て、直後から検索ランクがみるみる下がって困っていました…（気のせいかもしれませんが。。） ちなみに、検索ランクを下げた理由は「モバイルユーザビリティが悪いから」だそうで、具体的には「タップ ターゲット が近すぎるから」だそうです。 致し方ないので重い腰をあげて ソーシャルボタン（facebook の「いいね」、twitter の 「ツイート」等） を押しやすいよう オリジナルデザイン に変更してみました。 ここでは、そのまとめを掲載します。 ちなみに、Google が推奨するボタンサイズ、ボタン間隔は 「タップ ターゲットのサイズを適切に調整する」 に記載されており、まとめると以下のようです。 どちらかを満たしていれば良いようなので、両方を満たして広げすぎる必要はないようです。 推奨され ...

Blogger に オリジナルデザイン の "pocket" ボタンを設置する簡単な手順をまとめます。 オリジナルデザインのボタンを作成する場合、ブログテンプレートを直接編集することで作成します。 具体的には、Bloggerの管理ページへログイン後、[テンプレート]-[HTML の 編集]で編集できる ブログテンプレート に対して直接変更を加えます。 以下の手順では、ブログテンプレートのどの部分に対してどのように変更を加えるかを記載しています。 テンプレート の 編集手順 ポストデータを表示するタグ内で、表示したい位置に以下のタグを挿入します。 リンクは pocket に登録する URL を埋め込むように作成しています。 <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'> ... ...

Blogger に オリジナルデザイン の "はてぶ(はてなブックマーク)" ボタンを設置する簡単な手順をまとめます。 オリジナルデザインのボタンを作成する場合、ブログテンプレートを直接編集することで作成します。 具体的には、Bloggerの管理ページへログイン後、[テンプレート]-[HTML の 編集]で編集できる ブログテンプレート に対して直接変更を加えます。 以下の手順では、ブログテンプレートのどの部分に対してどのように変更を加えるかを記載しています。 テンプレート の 編集手順 ポストデータを表示するタグ内で、表示したい位置に以下のタグを挿入します。 ブックマーク時のに URL を指定するよう作成しています。 <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'> ... ...

Blogger に オリジナルデザイン の "google pulus one(+1)" ボタンを設置する簡単な手順をまとめます。 Googleさんはカウント数を取得する方法を提供していないようなので、 Yahoo! の YQL (Yahoo Query Language) を利用させていただきます。 オリジナルデザインのボタンを作成する場合、ブログテンプレートを直接編集することで作成します。 具体的には、Bloggerの管理ページへログイン後、[テンプレート]-[HTML の 編集]で編集できる ブログテンプレート に対して直接変更を加えます。 以下の手順では、ブログテンプレートのどの部分に対してどのように変更を加えるかを記載しています。 テンプレート の 編集手順 前提として必要な外部ファイルは jQuery と font-awesome の2種類です。 ...

Blogger に オリジナルデザイン の　Facebook "シェア(share)" ボタンを設置する簡単な手順をまとめます。 （残念ながら Facebook "いいね！(like!)" ボタンはうまくできていません。。） オリジナルデザインのボタンを作成する場合、ブログテンプレートを直接編集することで作成します。 具体的には、Bloggerの管理ページへログイン後、[テンプレート]-[HTML の 編集]で編集できる ブログテンプレート に対して直接変更を加えます。 以下の手順では、ブログテンプレートのどの部分に対してどのように変更を加えるかを記載しています。 テンプレート の 編集手順 前提として必要な外部ファイルは jQuery と font-awesome の2種類です。 headerの任意の場所へ以下のタグを挿入します。 font-awesome は ...

Blogger に オリジナルデザイン の "ツイート(tweet)" ボタンを設置する簡単な手順をまとめます。 オリジナルデザインにすれば、モバイル対応もできるはず… 具体的にはアイコンの大きさ、色、形、位置等が自由に作られるようになります。 オリジナルデザインのボタンを作成する場合、ブログテンプレートを直接編集することで作成します。 具体的には、Bloggerの管理ページへログイン後、[テンプレート]-[HTML の 編集]で編集できる ブログテンプレート に対して直接変更を加えます。 以下の手順では、ブログテンプレートのどの部分に対してどのように変更を加えるかを記載しています。 テンプレート の 編集手順 前提として必要な外部ファイルは jQuery と font-awesome の2種類です。 headerの任意の場所へ以下のタグを挿入します。 fon ...

.config dt{ float: left; width: 12em; } .config dd { margin-left: 12em; } Blogger で 関連記事を表示する 方法がもう少し簡単にならないかと試行錯誤した結果…結局作ってしましました。 実装は JavaScript で Google Feed API を利用しています。 関連記事表示モジュールの設置手順 メニュー から [テンプレート] を選択し、 [HTML の編集] を開きます。 <b:widget type='blog'> の子要素で <b:includable /> の並びに以下のコードを追加します。 <b:includable id='related-posts' var='post'> <div class='RelatedPosts ...

Blogger の テンプレート を変更したとたん、 LightBox(ライトボックス) が動かなくなってしまいました。。 解決策をいろいろと探し回ったりしたのですが、よく見かけたスクリプトを挿入する方法ではうまくいきませんでした… そこで、頑張ってテンプレートを解析してどうにか直したので、その方法をここへまとめて記載しておきます。 修正手順 ライトボックス 設定 の 確認 と 修正 テンプレート タグ構造 の 確認 と 修正 おまけ そもそもの原因って… ライトボックス 設定 の 確認 と 修正 （おそらく、この設定は有効だと思いますが…） この手順は念のための確認です。 そもそものライトボックス設定が無効であっては表示ができないので、ここで確認しておきます。 この設定に問題ない場合、次のステップへ進んでください。 [ダッシュボード] から ...

ウェブマスターツール で Blogger に対して "updated がありません" または "author がありません" といったエラーが出たときの修正方法をまとめます。 WordPress でのやり方は結構見かけたのですが… Blogger を対象にしたものがみあたらなかったので、ここでは Blogger を対象として記載します。 …といっても、ほとんど同じなんですが。。 目次 エラー例 原因 修正 / 対策 確認 エラー例 今回の記事では、次のようなエラーが起こっている状況を対象にしています。 実際に発生するエラーの画面、エラー内容を以下に掲載します。 author がありません updated がありません 原因 これらの エラー が出る原因は、Blogger の 各ページ が microformats.org スキ ...

Blogger に Pocket の "pocket" ボタン を 設置、追加する方法を記載します。 各ページ　（投稿） に対する ボタン です。 ここに載せる コード は ブログ テンプレート に対してコピペ で使えるようにしてあります。 表示したい位置へ コピー & ペースト して利用してください。 作業手順手としては次の通りです。 ※その他の ソーシャルボタン もまとめて追加する方法は こちら。 ※ソースコード は ダブルクリック すると、全選択できます。

Blogger に はてなブックマーク の "B!" ボタン を 設置、追加する方法を記載します。 各ページ　（投稿） に対する ボタン です。 ここに載せる コード は ブログ テンプレート に対してコピペ で使えるようにしてあります。 表示したい位置へ コピー & ペースト して利用してください。 作業手順手としては次の通りです。 ※その他の ソーシャルボタン もまとめて追加する方法は こちら。 ※ソースコード は ダブルクリック すると、全選択できます。

Blogger に google の "+1" ボタン を 設置、追加する方法を記載します。 各ページ　（投稿） に対する ボタン です。 ここに載せる コード は ブログ テンプレート に対してコピペ で使えるようにしてあります。 表示したい位置へ コピー & ペースト して利用してください。 作業手順手としては次の通りです。 ※その他の ソーシャルボタン もまとめて追加する方法は こちら。 ※ソースコード は ダブルクリック すると、全選択できます。

Blogger に facebook の "いいね" ボタン を 設置、追加する方法を記載します。 各ページ　（投稿） に対する いいね ボタン です。 ここに載せる コード は ブログ テンプレート に対してコピペ で使えるようにしてあります。 表示したい位置へ コピー & ペースト して利用してください。 作業手順手としては次の通りです。 ※その他の ソーシャルボタン もまとめて追加する方法は こちら。 ※ソースコード は ダブルクリック すると、全選択できます。

Blogger に twitter の "ツイート" ボタン を 設置、追加する方法を記載します。 各ページ　（投稿） に対する ツイート ボタン です。 ここに載せる コード は ブログ テンプレート に対してコピペ で使えるようにしてあります。 表示したい位置へ コピー & ペースト して利用してください。 作業手順手としては次の通りです。 その他の ソーシャルボタン もまとめて追加する方法は こちら。

Blogger に twitter の 「ツイート」、facebook の 「いいね」、google の 「+1」、はてなブックマーク の 「B!」、Pocket の 「Pocket」 ボタン 等、 俗に言う ソーシャルボタン を まとめて 一気 に設置する方法をここでは載せます。 いろいろと方法はあるかと思いますが･･･ここでは、 Blogger の テンプレート を編集して実現する方法です。 ([2015/03/15] 本記事ではそれぞれのSNS提供モジュールを利用しています。オリジナルデザインにしたい場合、"Blooger に オリジナルデザイン の ソーシャルボタン を設置する方法" をご参照ください。) ソーシャルボタン 設置手順 メニュー から [テンプレート] を選択し、 [HTML の編集] を開きます。

Blogger の 記事 一覧 を表示する ページ を作成します。 ここで紹介する方法では、ソート順（タイトル名、公開日付、更新日付）、表示方法（一覧、ラベル別）を任意に指定できます。 また、各要素に クラス名 が割り振られているので、好きな表示を簡単に実現できます。 とりあえず自分のブログで試したい方は デモページ（日本語） をご利用ください。 （…いくつかの ブログ で "記事一覧を表示する方法" が記載されていましたが、 個人的にしっくりこなかったので新しく作ってしまえ、という経緯です。。） 目次 作成手順 説明 更新履歴 作成手順 Blogger の 左メニュー から [ページ] を選択します。 [新しいページ] を選択します。 ...

.inputfield { width: 100%; margin: 1em 0; } .requiremark { color: #ff0000; } .outputfield { width: 100%; margin: 1em 0; } .errormessage { color: #ff0000; } Blogger の フィード URL （RSS や Atom、JSON を受信する URL）を作成する Webアプリ です。 * は必須入力項目です。 必要事項を入力した後、「フィード URL 生成」で フィード URL が生成されます。 作りたいフィードの設定入力 * ブログURL ...

.arguments { margin-left: 2em; } .arguments dt { float: left; width: 8em; } .arguments dd { margin-left: 8em; } .sampleurl { border: 1px solid #efefef; /*overflow: auto; white-space: nowrap;*/ padding: 1em 2em; } Blogger の feed URL で利用可能な パラメタ― を一覧にしてまとめました。 RSS や json を利用しての2次利用で必要な情報になるかと思います。 （2013/07/10 Blogger の フィード URL 生成 ツール） フィード URL の基本構成 ...

Syntax Hilighterをどうしても使ってみたくて… ようやく Blogger にコードが貼れるようになった。。。 自分は主に Javascript を扱っているので JavaScript のみ。 function foo () { window.alert('bar'); } やり方自体は、alexgorbatchev.comにあるソースコードを拝借するやり方。