このブログのサイドバーにバナー（ボタン）を付けました。長年愛用しているフリーの画像加工ソフトJtimを使って作成する方法をご紹介します。
その他、サイドバーのカスタマイズについてもご紹介します。
▼Jtrimの記事（Ｊtrimの使い方についてはこちらの記事をご参照ください）
バナーの作成
写真の取り込み
１．気に入った写真を用意する。
２．Jtrimを起動する。
３．Jtrimへドラッグ
見やすい大きさにリサイズ
取り込んだ時点で見やすいサイズになればいいのですが、大きい画像の事が多いと思います。いずれにしてもバナーだとそれほど大きな画像は使えませんので、見やすくなる程度に小さくしましょう。あまり小さくしすぎても作業がしにくいので、画像全体が見える程度がほどほどでいいと思います。
メニューバーのイメージ→リサイズをクリック。
サイズでも比率でもやりやすい方で指定します。
私はあまり考えず比率で50とか入れます。元に戻すボタンで様子を見ながら扱いやすい大きさまで縮小します。
今回私の使った写真は高解像度だったので10でちょうど良かったです。
バナーにしたい部分を切り抜きます
バナーにしたい部分をくりぬくために、左上から右下へドラッグして枠を表示させます。
イメージ→切り抜きをクリックします。
切り抜けました。
文字を入れます
ツールバーの「Ａ」のマーク「文字入れ」をクリックします。
開いたウィンドウで文字を入力します。
今回の設定
文字色→白 フォント→メイリオ サイズ→30 スタイル→Ｂ（太字）透過
不透明度を低くすると下の画像を透かして見せることもできます。
ＯＫを押す前に文字の上にマウスポインターを移動します。
すると手のマークに変わります。そこで好きな位置へドラッグします。
ここで初めてＯＫをクリックします。
いったん確定すると文字やデザイン、位置の修正はできません。
なごみ▼ 文字を下に移動しました。
バナーのサイズに整えます
先ほどトリミングした時のようにドラッグして画像を囲みます。
右下から左上がやりやすいです。
メニューバーのイメージ→リサイズ をクリックします。
「サイズで指定する」の横幅にピクセル数を入力します。
サイズは設置されるブログの幅によって異なるかと思います。
私のブログでは横350にしました。
出来上がった画像を名前を付けて保存します。
元の画像とは違う名前を付けてくださいね。そのままだと上書きされてしまいますのでご注意ください。
ここからははてなブログの方向けです。
画像をアップロード
編集見たままモードで書いている方は、「記事を書く」をクリックして、保存した画像ファイルを文字入力欄にドラッグして画像をいったんアップロードします。
画像の貼り付け
次に「html編集」に切り替えます
このようなコードが書いてあります。
例）※コードはそれぞれ違います。
<img～ />のところをそのまま使います。
これを
１．<p>を<a href=”表示させたい記事のURL“>に変更。
２．</p>を</a>に変更します。
そして全体をコピーします。
デザイン→カスタマイズ→サイドバー→モジュールの追加→HTMLをクリックします。
タイトルをつけて、下の枠に先ほど作ったコードを貼り付けます。
以上です。
説明すると長くなってしまいましたが、操作はそれほど難しくはありません。
もっと本格的な作り方は色々あると思いますが簡易な方法ということでご容赦ください。
その他 サイドバーの改善
「よく読まれている記事」の画像表示
コメントにて質問いただきましたサイドバーのよく読まれている記事に画像を入れる設定。このようにしています。
ブログデザイン→カスタマイズ→注目記事のところで以下のように入力して適用をクリックします。
Feedly購読のリンク
クリックで購読できるボタンを付けました。feedlyのサイトでコードを作成して、自分のブログのデザイン設定→カスタマイズ→サイドバーにてHTMLのパーツを作ります。
ちょっと躊躇したのが、自分のブログのURLを貼り付ける時。URLそのままでなくてfeedのURLを貼り付けなければいけません。
参考記事
はてなブログにFeedlyのFollowボタンをつけてみたーyou_tomitaの日記－
タイトルデザイン変更
こちらのブログでは、サイドバーを枠囲みにしたりアイコンを非表示する方法を分かりやすく解説されています。
またお会いしましょう。
