【無料メルマガ】

bloggerの画像関連カスタムのあれこれ



Bloggerはデフォルトのカスタムパーツは少ない。でも、HTMLやcssを使う事で、様々なカスタムが出来るところは魅力的ですね。実際に、僕は過去にWordPressを使っていたのですが、Bloggerのカスタムを覚えてから、WordPressと同等のカスタムが出来るようになりました。


そこで今回は、せっかくHTMLやcssを使って作ったパーツの作り方を備忘録として残すことにしました。まだカスタムパーツは少ないのですが、これあらも使い勝手がよくなるカスタムがあれば随時取り入れていきます。あなたがこの記事を読むことで、うログのカスタムのやり方が分かります。是非、最後まで読んでくださいね。





Bloggerに画像を入れる方法





Bloggerに画像を入れるのは簡単です。手順は次の通りです。


①画像を入れたい箇所で、写真のアイコンをクリックします。


②画像選択のプルダウンウインドウが開きます。



③画像選択方法を選びます。


④画像えお入れる位置と大きさを選択します。


1.元々の画像サイズを幅640pxにすることで画像サイズを「特大」で選択すると、画面いっぱい幅の大きさで入れることが出来ます。

2.画像の横にテキスト(文字)を入れるのであれば、表示位置を「左寄せ」にすることで、テキスト入力できます。



Bloggerで使った画像にリンクを入れる方法


Bloggerでも画像にリンクを入れることが出来ます。こちらの作業も簡単なので、気になる人は試してください。手順は次の通りです。


①リンクを入れたい画像をクリックします。



②作成画面のツールバーの中の「クリップのアイコン」をクリックします。


③リンク入力画面に切り替わります。



1.表示したいリンクのURLを入力します。
2.リンク入力後「適用」ボタンをクリックします。


ここまでの作業で画像のリンクかが完了です。画像をリンク化出来ると、色んなカスタムができます。あなたの用途に合わせてカスタムしてくださいね。





画像を横並びにする方法


画像を横並びにするのって・・・意外と難しいと感じた事はありませんか?この悩みを解決する方法を見つけたのでシェアしておきますね。(オマエだけだろ!ってのツッコミは無しで・汗)


横並びにする方法・・・実は簡単でした。使うツールは「テーブルタグ」です。


コピペ用 HTML
<table><tr><td>画像URL<td><td>画像URL<td><tr></table>

*使用する際は、HTML編集画面で使ってくださいね。


画像のURLは、載せたい画像の上で右クリックすると、別ウインドウが開くので「画像のアドレスをコピー」を選択して、HTML変種画面で貼りつけてください。画像の幅は、並べた時の幅をブログの記事の幅以内に合わせてくださいね。


使用例とすれば・・・ランキングバナーだとカスタムしやすいですね。是非、試してください。



ブログで使った画像のSEO対策


ブログに入れた画像をSEO対策することで、検索エンジンからの流入を増やせる可能性があります。少しでも検索からの流入をふやせるのであれば、やっておきたいカスタムですね。ヘッダー画像など、SEO対策することで状況は変わってくると思います。


画像をSEO対策する方法


①SEO対策したい画像をクリックします。


②サブウインドウの「工事アイコン?!」をクリックします。


③画像の編集画面に切り替わります。



1.代替えテキスト欄に画像の説明を入れます。
2.「更新」ボタンをクリックします。


説明文の入力は、画像の説明を簡単に入力すれば大丈夫です。文字数の目安は120文字以内が推奨とのことでした。WordPressで言うと「メタ情報」に入力する内容です。


Googleの検索エンジンは、画像も選択の対象になってるので、簡単な内容でも入れておきたいですね。ブログサービスによって、メタ情報の入力が出来るのかどうかは分かりません。あなたが使っているブログサービスで確認してくださいね。


画像でもSEO対策できるなら、やっておいて損はないのであなたも是非、ためしてくださいね。




画像を圧縮する方法





画像データーの容量次第で、サイト表示スピードが変わってきます。とは言え、画像の質は落としたくない・・・誰もが感じる部分ですよね。こちらのサイトを使う事で、画質を落とさず容量を減らすことができます。手順をのせておきますね。


① TinyPing にアクセスします。




1.赤い枠の中のアイコンをクリックします。
2.画像選択画面に切り替わります。
3.画像を選択します。


画像選択後、ダウンロードが始まります。


②ダウンロード完了画面に切り替わります。



画面中央付近に表示される「Finished」を確認後、「download」をクリックします。


ここまでの作業で、画像の圧縮が完成です。出来るだけ画像は軽くしといた方がイイので、まだ画像の圧縮をしてない人はこの機会に、チャレンジしてくださいね。






今回のまとめ


今回は「bloggerの画像関連カスタムのあれこれ」をテーマに解説しました。併せて画像SEO
ぶついてもお伝えしました、いかがでしたか?


ブログに画像を使うことで、読者の気分転換や目休めになることもあります。画像を載せるとページ速度が落ちたり、容量が圧迫されてしまいます。対策としては、圧縮してから使うことですね。無料で使えるツールもあるので早速、今日からチャレンジしてくださいね。




編集後記


今まで、画像はサイズを揃えて文字だけ入力していたモノを使っていました。これからはヘッダー画像をSEO対策して使います。


他の画像も、まだまだ容量は減らせそうなので、これからは容量を減らした画像を使います。あなたのブログの画像・・・容量は気になりませんか?もし、気になるようであればこの機会に圧縮する癖を付けておいてくださいね。




今回も最後まで読んで頂きありがとうございました、このブログに関するご意見などございましたら、サイドバーのお問い合わせから連絡をお願いしますね。その他、質問や感想なども随時受け付けています。あなたの意見を聞かせて頂けると嬉しいです。よろしくお願いします。






にほんブログ村 小遣いブログ ブログアフィリエイトへ 



真☆ブログ武器 - にほんブログ村



あなたの応援に感謝します。




~この記事を書いた人~

ブログ ✕ ライティングだけで生活することを目標にブログを書いています。全くのゼロ知識からのスタートでしたが、ようやく道筋が見えてきました。
これからも情報発信を続けます。



コメント