Jtrimを使ったバナーの作り方。サイドバーの改善。簡単ブログカスタマイズ。

このブログのサイドバーにバナー(ボタン)を付けました。長年愛用しているフリーの画像加工ソフトJtimを使って作成する方法をご紹介します。

その他、サイドバーのカスタマイズについてもご紹介します。

ブログデザインを変更しました。その為、バナーやその他カスタマイズなどは現在のものと異なります。

[Sponsor]

▼Jtrimの記事(Jtrimの使い方についてはこちらの記事をご参照ください)

www.yururimaaruku.com

バナーの作成

写真の取り込み

1.気に入った写真を用意する。

2.Jtrimを起動する。

3.Jtrimへドラッグ

f:id:yururimaaruku:20160530205312p:plain

見やすい大きさにリサイズ

f:id:yururimaaruku:20160530205237p:plain

取り込んだ時点で見やすいサイズになればいいのですが、大きい画像の事が多いと思います。いずれにしてもバナーだとそれほど大きな画像は使えませんので、見やすくなる程度に小さくしましょう。あまり小さくしすぎても作業がしにくいので、画像全体が見える程度がほどほどでいいと思います。

メニューバーのイメージ→リサイズをクリック。

f:id:yururimaaruku:20160530200723p:plain

サイズでも比率でもやりやすい方で指定します。

私はあまり考えず比率で50とか入れます。元に戻すボタンで様子を見ながら扱いやすい大きさまで縮小します。

今回私の使った写真は高解像度だったので10でちょうど良かったです。

f:id:yururimaaruku:20160530205330p:plain

 

バナーにしたい部分を切り抜きます

バナーにしたい部分をくりぬくために、左上から右下へドラッグして枠を表示させます。

f:id:yururimaaruku:20160530201240p:plain

イメージ→切り抜きをクリックします。

f:id:yururimaaruku:20160530205355p:plain

切り抜けました。

f:id:yururimaaruku:20160530205410p:plain

文字を入れます

ツールバーの「A」のマーク「文字入れ」をクリックします。

開いたウィンドウで文字を入力します。

 

今回の設定

文字色→白 フォント→メイリオ サイズ→30 スタイル→B(太字)透過

 

不透明度を低くすると下の画像を透かして見せることもできます。

場所を確定するまで「OK」をクリックしないでください。

f:id:yururimaaruku:20160530201905p:plain

OKを押す前に文字の上にマウスポインターを移動します。

すると手のマークに変わります。そこで好きな位置へドラッグします。

ここで初めてOKをクリックします。

いったん確定すると文字やデザイン、位置の修正はできません。

なごみ
間違えた時は「元に戻す」ボタンで戻れます。気楽に気楽に。

▼ 文字を下に移動しました。

f:id:yururimaaruku:20160530202505p:plain

バナーのサイズに整えます

先ほどトリミングした時のようにドラッグして画像を囲みます。

右下から左上がやりやすいです。

f:id:yururimaaruku:20160530203001p:plain

メニューバーのイメージ→リサイズ をクリックします。

f:id:yururimaaruku:20160530203157p:plain

「サイズで指定する」の横幅にピクセル数を入力します。

サイズは設置されるブログの幅によって異なるかと思います。

私のブログでは横350にしました。

f:id:yururimaaruku:20160530203618j:plain

出来上がった画像を名前を付けて保存します。

元の画像とは違う名前を付けてくださいね。そのままだと上書きされてしまいますのでご注意ください。

ここからははてなブログの方向けです。

画像をアップロード

編集見たままモードで書いている方は、「記事を書く」をクリックして、保存した画像ファイルを文字入力欄にドラッグして画像をいったんアップロードします。

画像の貼り付け

次に「html編集」に切り替えます

このようなコードが書いてあります。

例)※コードはそれぞれ違います。

<img~ />のところをそのまま使います。

f:id:yururimaaruku:20160530210932p:plain

これを

1.<p>を<a href=”表示させたい記事のURL“>に変更。

2.</p>を</a>に変更します。

そして全体をコピーします。

デザイン→カスタマイズ→サイドバー→モジュールの追加→HTMLをクリックします。

f:id:yururimaaruku:20160530204657p:plain

タイトルをつけて、下の枠に先ほど作ったコードを貼り付けます。

以上です。

説明すると長くなってしまいましたが、操作はそれほど難しくはありません。

もっと本格的な作り方は色々あると思いますが簡易な方法ということでご容赦ください。

その他 サイドバーの改善

「よく読まれている記事」の画像表示

コメントにて質問いただきましたサイドバーのよく読まれている記事に画像を入れる設定。このようにしています。

ブログデザイン→カスタマイズ→注目記事のところで以下のように入力して適用をクリックします。

f:id:yururimaaruku:20160331074956j:image

Feedly購読のリンク

クリックで購読できるボタンを付けました。feedlyのサイトでコードを作成して、自分のブログのデザイン設定→カスタマイズ→サイドバーにてHTMLのパーツを作ります。

ちょっと躊躇したのが、自分のブログのURLを貼り付ける時。URLそのままでなくてfeedのURLを貼り付けなければいけません。

参考記事

はてなブログにFeedlyのFollowボタンをつけてみたーyou_tomitaの日記-

タイトルデザイン変更

こちらのブログでは、サイドバーを枠囲みにしたりアイコンを非表示する方法を分かりやすく解説されています。

www.a-s-blog.com

またお会いしましょう。

スポンサーサイト