headAD

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

2014年4月14日月曜日

ブログをGoogle+共有するとプロフィールの画像になる

Bloggerでブログを作成し、Google+と共有できるのはとてもいいことだと思っている。
でも、ブログの内容によっては写真や画像が少ないのもある。

それを、Google+に共有しようとすると、プロフィールの画像がデカデカと貼りついてしまう。


まあ、これはこれで良いのかもしれないが、記事の画像を取り上げてもらいたい。
しばらくほっておいたが、どうも気になってきた。

調べると、共有時に120x120サイズ以上の画像が見つかると取り上げるようになっているようだ。
※出典はgoogle+のヘルプで記事を見たが、ここに貼り付けようとしたが見つからなかったので、後で見つかったら掲載する。

ではなぜ、プロフィールの画像が出るのか、そう、プロフィールの画像が350x350ほどあった。
これが原因と思い、100x100に小さくしてプロフィールに収めようとしたら、こちらは250x250以上でないとダメ!と言われた。

えぇーーー。ダメじゃん。 ググってみてもそれらしいものはない。

じゃぁ、ブログの自己紹介の画像を取っちゃえ!!!と焼酎飲んだ勢いで、テンプレートのコードをコメントアウトしてみた。


(ビフォア)画像付きと(アフター)画像なし。 説明されなくても解るよね。
[g+]にマウスオンするとプロフィールが表示するのでこれもよし!!。

こうすることで、

このように、無事に記事中の画像を取り上げてくれた。

今のところこれしか方法が解りませんが、お気づきの点ありましたらお知らせください。







2014年3月16日日曜日

ブログテンプレートのカスタマイズ備忘録

2月からBloggerに仲間入りして一ヶ月を超えた、その間、携帯・スマホでも見やすい画面にしようと、テンプレートをカスタマイズに切り替えて、いくつか手を加えたので忘れないうちに書いてみた。
各種の方法は、ググってみればいっぱい出てくるが、狙っているものとちょっと違うものがあったりして、試行錯誤した。

■スマホでアイコンが出ない


まずは定番のファビコンの設定である。PCで使う分には設定したとおりにファビコンが表示されたが、モバイルで表示されないことが判った。この時はモバイル版を使用しない設定にしてスマホでもファビコン出るようにした。
これらのファビコンの設定はこちらに書いた。
その後、スマホでPC画面のままを見るのは小さいので、モバイル版のカスタムに移行しようとしたが、エラーとなった。これはこちらで解決した。

■モバイル版で広告がでない


これで、スマホでも見やすくなったと思ったら、タイトルの下にAdSense広告が出ていない。ウィジットでコードは貼り付けているが、PCしか表示していなかった。
[テンプレート]→[HTML編集]→[ウイジットへ移動]でAdSenseのコードを入れているウィジットを選択し移動する。
下のように、mobile=’yes’ を追加する。
<b:widget id='HTML1' locked='false' mobile='yes' title='' type='HTML'>
こうすることで、スマホでも広告が表示されるようになるが、PCで表示していたものもデカいサイズのまま表示されるので、PC用とスマホ用に切り替えすることにする。
今回は、テンプレートのレイアウト編集でウィジットに貼り付けるものはPC用として、スマホ用はテンプレートに直接書き込んでPC用とスマホ用を切り替えるようにした。
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
  <h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
  <data:content/>
</div>
上のグレーにしている箇所が広告を表示している部分だ。ここにスマホ用を追加して切り替えるようにした。
<div class='widget-content'>
<b:if cond='data:blog.isMobile'>
   <!-- ads-head-banner -->
<b:else/>

   <data:content/>
</b:if>
</div>
黄色マーカーを追加し、AdSenseのコードは320x50を選んで<!-- ads-head-banner -->の位置にコピペした。

■モバイル版でアトリビューションが出ない


次に、ページの最下段フッターにある’Powered by Blogger’の前に、レイアウトのAttributionを編集というか文字を追加してPCでは下のように横一列に表示するが、スマホでは’Powered by Blogger’しか出ない。
© 2014 kiyosey. Powered by Blogger.

これは上に書いたウィジットにmobile=’yes’を追加するなど他のことも併せてやったがダメだった。
ここでは、Attributionウィジットを使わずテンプレートに直接書き込むようにした。また、スマホでは横の文字数が長くなると折り返るので、PC用とスマホ用で表示を変えるようにした。
まず、[テンプレート]→[HTML編集]→[ウイジットへ移動]でAttributionウィジットに移動する。
このウィジットは使わないので、次のようにする。
<!--
      <b:section class='foot' id='footer-3' showaddelement='no'>
        <b:widget id='Attribution1' locked='true' mobile='yes' title='' type='Attribution'>

    ~途中省略~

        </b:widget>
      </b:section>
-->
<div style='text-align: center;'>
<br/>
&#169; 2014 kiyosey.
<b:if cond='data:blog.isMobile'>

  <br/> Powered by Blogger.
<b:else/>

   Powered by <a href='http://www.blogger.com' target='_blank'>Blogger</a>.
</b:if>
</div>
Attributionウィジットの上の行の<b:sectionから下の</b: sectionまでを<!--   -->で囲む。
その下には、新しく表示するためのコードを挿入する。
これで、PCでは1行、スマホでは2行表示してくれる。
© 2014 kiyosey.
Powered by Blogger.

■引用で枠線が出ない


私が使うテンプレートでは、引用でタグをセットしても枠が出なかった。これもついでにテンプレートにコードを追加した。
下の内容をテンプレートの550行付近に追加する。
.post-body blockquote {
border: 1px solid #a7a7a6;
padding: 15px 10px 15px 40px;
margin:20px;
background-color:#ffffe8;
}

もし、間違いやもっと良い方法があればお知らせください。

2014年3月9日日曜日

Bloggerモバイルテンプレートをカスタムにするとエラー


 前に、Bloggerのスマホ用ファビコンの設定を書きましたが、モバイルバージョンではダメと書いていました。もしくは、モバイル設定してもテンプレートをカスタムにしなければいけません。

私の環境では、モバイルバージョンを使用する にしてカスタムに変更するとエラーが出てしまい、原因が解るまでモバイルバージョンを使用しないにしておきました。でも、スマホ画面ではPC用の画面だと見づらいので手をつけることにしました。

その時に表示されるエラーコード(bX-ekl1qx)でたどっていくと、海外版のQ&Aになにやらニュースや旅行などのガジェットに問題があるらしいというのが書いてありました。
このブログには、Blogger推奨のガジェットしか使っていないと思いつつ、もう少し探したところ、ビンゴ!!。

Bloggerテンプレートの、ニュースリールガジェットが原因、削除するとスッキリ解決


↓この記事を参考にしました。

Bloggerのモバイルテンプレートをカスタムにすると表示されずエラー画面になる。対処方法

そのものズバリです。
jamさんの「ブログ ノウハウと いろは」の掲載記事で解決しました。

と言うことで、ブログのモバイルバージョンを復活し、スマホでも読みやすくなりました。

2014年3月1日土曜日

Bloggerのスマホ用ファビコンの設定

 まず最初にBloggerに標準装備のファビコン(Favicon)を設定してみます。
ファビコンというのは、ブラウザタブやお気に入りリストのアイコン表示のことです。
自分のブログでファビコン設定されていないと、オレンジの[B]のアイコンが表示されます。
自分用のアイコンがあると、愛着が湧いてくるので、設定してみました。とても簡単です。

まずファビコン用画像を用意します。
画像のサイズは適当でOK。100x100でもいいし、600x600でもいいです。あと形式はjpgやpngファイルがいいです。ただし!!縦横比率は同じにしておいたほうがいいです。
私は、150x150のpngファイルを用意しました。

次にファビコン画像を、自分のBloggerに登録します。
[マイブログ]→[レイアウト]→[ファビコン]→[編集]
登録したい画像を選択して登録すると、下の画のようにアイコンが表示されます。
Bloggerのファビコン登録ではこれで終わりです。
すごく良いところは、htmlを勝手に設定してくれますし、画像もfavicon.icoに自動で変換してくれます。

これで、PCで見えるようになります。ブラウザのキャッシュが効いているので、数日かかる場合もあります。

さて、お題のスマホです。
スマホでは、ブックマークやホーム画面にアイコンを追加することができます。これをウェブクリップアイコンと言いますが、これまでの方法ではファビコンはスマホには表示しません。
そのままだと、オレンジの方位磁石の画が見えます。
やっぱここも変えたいですよね。

Bloggerが標準で装備していないので簡単な裏ワザで設定してみます。
※ここから先は、テンプレートのhtmlを直接編集するので、先にやり方を読んで、理解できないようならむやみに触らこないほうが無難です。
※もう一つだけ注意。「モバイルバージョンを使用する」では、これから説明する方法ではできません。「モバイルバージョンを使用しない」設定で使うようにしてください。変更は[マイブログ]→[テンプレート]→[モバイル設定]

つまりスマホで見るときもPCと同じ形式で見える方法でしかできないということです。どうしてもモバイルならカスタム設定でも行けそうですが、情報がありません(*1)。
(*1)その後、追加の情報をこちらに記載しました。

(1)ファビコン画像をapple-touch-icon.pngというファイル名にして保存します。
 この画像は、角丸にしなくてもいいです。スマホ側で角丸になります。
 他の記事では、自前のサーバーやgoogleサイトを使ったりしていますが 、ここでは、自分のブログの下書きに画像を貼り付けます。つまり、画像を貼り付けたブログを一枚作成します。これは下書きのままで公開はしませんが削除もしません。
貼り付けたら、[作成]の横の[HTML]に切り替えて
 herf="http://2.b~~0/apple-touch-icon.png"に注目し、http~.pngまでをコピーします。
この投稿ページでの作業は終わりです。

(2)次に、[マイブログ]→[テンプレート]→[HTML編集]を開き、
 <head>~</head>の中の行に下の一行を追加します。headの何行か下をみるとtitle~の行があるので、その上あたりに一行追加すればよいです。

 <link href="xxx.png" rel="apple-touch-icon"/>

 さらに、(1)でコピーしたhttp~.pngまでの文字を、上の青字のxxx.png部分へ貼り付けます。
 つまり、下のようになっていればOKです。
  <link href=http://2.b~~0/apple-touch-icon.png" rel="apple-touch-icon"/>
 ここまでできたら、[テンプレートを保存]で終了です。

スマホでブックマークやウェブクリップするとアイコンが表示します。なお、iphoneで確認するとウェブクリップは角丸、ブックマークも角丸ですが角張っているように整形されます。
       

なにか、お気づきの点ありましたらコメントください。



2014年2月3日月曜日

ブログのタイトルロゴ

 ブログのタイトルロゴを作ってみました。

ブログのデザインも色々と考えるのは楽しいけれど、メンドウなところも。自由がきかないとか。

無料でロゴが作成できるサイト一覧を見ていたら、面白そうだったので文字を入れてポチポチとやったら出来てしまいました。

ただ、全角が入らなかったので、後で上に乗せてみました。どうでしょう!
美的センスがないですが、初ロゴです。



2014年2月1日土曜日

初めまして

 今日からBloggerです。

しばらくは、過去の出来事などから綴っていきます。