2016/03/22

Bloggerで画像サイズを任意の大きさに変更してみる

更新日:2016年09月23日(金)
グーグルロゴ小
Bloggerの画像の表示サイズは、通常「小、中、大、特大」の中から選択することになるのですが、HTML編集モードで画像のHTMLタグをいじれば好きなサイズに変更できるんだそうです。
やり方はとっても簡単。
<a href="https://4.bp.blogspot.com/-OIaQTFr2u6o/VatazbGOVwI/
AAAAAAAABdk/5ZhKQ9FJ5H4tk4ldnwI1QaAce-nh2X9qQ/s1600/
google-485613_640.jpg" imageanchor="1" style="margin-left: 1em;
margin-right: 1em;">
<img border="0" height="226" src="https://4.bp.blogspot.com/
-OIaQTFr2u6o/VatazbGOVwI/AAAAAAAABdk/5ZhKQ9FJ5H4tk4ldnwI1QaAce-
nh2X9qQ/s320/google-485613_640.jpg" width="320" /></a>
img要素の「S」が付いた赤字の部分を見つけて、 「s200」など好きなサイズに変更するだけです。
これで1ピクセルから 1600 ピクセルまでの間で任意にサイズが指定できます。

ところが!「メモ取り!」はテンプレートが一部壊れているからか(多分)、この方法ではサイズ指定ができません。
新規の投稿ならアップロード時にサイズを指定すれば簡単ですが、過去記事の画像サイズを変更したい場合は非常に不便です。

そこで、別の方法を試してみました。
<a href="https://4.bp.blogspot.com/-OIaQTFr2u6o/VatazbGOVwI/
AAAAAAAABdk/5ZhKQ9FJ5H4tk4ldnwI1QaAce-nh2X9qQ/s1600/
google-485613_640.jpg" imageanchor="1" style="margin-left: 1em;
margin-right: 1em;">
<img border="0" height="226" src="https://4.bp.blogspot.com/
-OIaQTFr2u6o/VatazbGOVwI/AAAAAAAABdk/5ZhKQ9FJ5H4tk4ldnwI1QaAce-
nh2X9qQ/s320/google-485613_640.jpg" width="320" /></a>
いじるのは赤字部分のwidth="320"height="226"画像の縦と横の値です。
今回は横長の画像なのでレイアウトを横幅に合わせ、320を400にサイズ変更します。

例)横幅を320から400に変更する場合

1.「レイアウト÷原稿」で横の割合を求めます。
400÷320=1.25
2.次に縦の割合を求めます。
226×1.25=282.5=282
小数点以下を入れてしまうと、モバイル表示で画像がうまく表示されないので切り捨てか四捨五入してください。
<a href="https://4.bp.blogspot.com/-OIaQTFr2u6o/VatazbGOVwI/
AAAAAAAABdk/5ZhKQ9FJ5H4tk4ldnwI1QaAce-nh2X9qQ/s1600/
google-485613_640.jpg" imageanchor="1" style="margin-left: 1em;
margin-right: 1em;">
<img border="0" height="282" src="https://4.bp.blogspot.com/
-OIaQTFr2u6o/VatazbGOVwI/AAAAAAAABdk/5ZhKQ9FJ5H4tk4ldnwI1QaAce-
nh2X9qQ/s320/google-485613_640.jpg" width="400" /></a>
3.HTMLタグをwidth="400"height="282"に値を変更すれば、縦横比を崩すことなく画像サイズを変更できます。
グーグルロゴ大

計算がちょっと面倒ですが、これで縦横比を保ちながら画像サイズを自由に指定できます。
img要素で画像のサイズ変更ができない場合はお試しください。
 

2016/03/18

「WinShot」のPNG設定

WinShot

「WinShot」はとっつきやすくて使いやすいスクリーンキャプチャソフトです。

ポータブル版もあるし、持ち歩きできて便利!
長いこと愛用してるんですが、自動保存できる画像形式が「BMP / JPEG / PNG / GIF」とあるのに、デフォルトだとBMPとJPEGにしか対応してないのが気になってました。
環境設定デフォルト
PNG形式で保存できないのは不便なので別のキャプチャソフトに乗り換えようと思っていたところ、偶然PNG形式での保存方法を見つけました。

PNG形式の設定方法

WinShotを起ち上げたら、環境設定タブを開きます。
「自動保存時の拡張子」のビットマップ欄またはJPEG欄に直接PNGと入力する。
環境設定変更済み
これだけ。
GIF形式で保存したい場合は、GIFと入力します。

まさかこんなに単純な事だったとは^^;
試しにやってみるもんですね。
 

2016/03/12

Bloggerのタイトルと説明文の間を詰める方法

ずっと気になっていたタイトルと説明文の行間をようやく詰めることができました。
「テンプレート」→「HTMLの編集」で実行します。
 .header-inner .Header .titlewrapper {
   padding: 30px $(header.padding);
 }
を探して、
 .header-inner .Header .titlewrapper {
   padding: 30px 0px 0px 30px; (header.padding);
 }
上右下左30pxずつ空いていた間隔をいい感じに変更します。

お試しの際はテンプレートを保存してから作業してくださいね。
 

2016/03/05

Google AdSenseの最適化タブで指導された

3、4日前、アドセンスに最適化タブが表示されているのに気付きました。

調べてみたら2月10日に発表があったんですね。

ぽちっとしてみたら、いくつか改善案が提案されてました。
デリケートなカテゴリのブロックを緩めろとか、なんとか…。

それ以外は、自分でも気づいてた部分でした。
アドセンスと考えが同じだったみたい♪

なーんてね。
こんなちっこいブログでもちゃんと面倒見てくれるんですね。
裏を返せば常にチェックされてるんだってことですが(^_^;)

デリケートなカテゴリに関しては、テストで様子見を決め込みます。
後はおいおい…。

調べながらやってるから、反映が遅いんですよねー(-_-;)
 

2016/03/01

【Blogger】Google検索で投稿タイトルをブログタイトルの前に置く方法

更新日:2016年08月27(土)
タイトル表示
Bloggerの初期設定では、Google検索をすると「ブログタイトル|投稿タイトル」 と表示されます。
ですが、これだと投稿タイトルが長い場合は途中で切れてしまい非常にわかりづらい。
そこで今回はタイトルタグを変更して「投稿タイトル|ブログタイトル」に並べ替える方法をメモ。

タイトルタグの変更方法

1.Bloggerテンプレートの「HTMLの編集」を開きます。
HTMLの編集
2.<title><data:blog.pageTitle/></title>を検索します。
「Ctrlキー+Fキー」を押すと検索窓が出るので探しやすいです。

3.コードが見つかったら、以下のコードに置き換えます。
<b:if cond='data:blog.pageType == "item"'>
   <title><data:blog.pageName/> | <data:blog.title/></title>
 <b:else/>
   <title><data:blog.title/></title>
 </b:if>
テンプレートを保存して完了です。


ブログタイトルと投稿タイトルの並べ替えは既に実行していましたが、これまで参考にしていたサイトが閉鎖してしまったようなので、備忘録として記録しました。

今回参考にさせていただいたページはこちら↓です。
http://www.blogger-customize.com/2014/02/title-tag-edit.html

それでは本日はこの辺で。
最後までお付き合いいただき、ありがとうございます(^_^)