grandmasayuri.com(グランマさゆり)-サードエイジ-

~人生の後半もワクワク楽しく!~

Jtrimを使ってバナーをサイドにつくってみた(ブログカスタマイズ)

こんにちは。

たま~に更新している、アクセスもごくごくわずかな零細姉妹ブログのために、当ブログにバナーを設けました。
バナーのつくり方・貼り方は、「Excelを20年以上使ってきた私が気を付けていること」で驚異的なブクマ数を記録している、「ゆるりまあるく」のなごみさんの記事を参考にさせていただきました。

Jtrimを使ってバナーをサイドにつくってみた(ブログカスタマイズ)

 

www.yururimaaruku.com

www.yururimaaruku.com

 

1 写真素材の調達

かわいらしい写真素材がみあたらなかったので、「kaboompics」さんで調達しました。

Kaboompics - Free High Quality Photos

このサイトで、好きな画像をダウンロード。 

2 画像編集ソフトの準備

画像編集ソフトは、なごみさんが使っている「フリーソフトJtrim」をダウンロードして使用しました。

3 画像を切り抜き、貼り付け

Jtrimを開き、画像をドラッグします。
まずは、作業のため、見やすい大きさにリサイズします(イメージ→リサイズ)。
画像から、バナーに表示させたい部分を切り抜きます。
画像の上から文字を入力します(「A」をクリックすると文字入力になります)。
文字の色は、画像から文字がハッキリわかる色を使うと良いです。太字で、透過、文字サイズは30以上がベターです。
適当な位置に移動させ、保存。
最後にもう一度、リサイズ。サイズ指定で横サイズを350に。
これでJtrimの作業は、終わりです。

4 はてなの作業

次は、はてなブログ側の作業です。
「記事を書く」の画面に、保存した画像をドラッグしてアップロードします。
HTMLで<p>と</p>で挟まれた「<img class」から「"/>」までのコードをコピーしてメモ帳などに貼り付けておきます(または全部をコピー)。
<p>の部分を<a href="リンクさせたい記事のURL">に変更し、</p>を</a>に変更します。
変更したコード全体を、「デザイン→カスタマイズ→サイドバー→モジュールの追加→HTML」に貼り付け、タイトルを付けるだけです。
ちゃんとリンクしてるかどうか確認し、OKであればアップロードした画像の下書きは削除して構いません。

ホントにカンタンで、あっという間に出来ちゃった、って感じです。

Jtrimを使ってバナーをサイドにつくってみた(ブログカスタマイズ)

なごみさん、ありがとうございます。
「実践で使うExcelとAccessの話」「ひたすらパンを焼くブログ」と2つのサブブログも運営してるなごみさん、ハッキリ言って、凄すぎます。

また時間合ったら、カスタマイズしまーす。