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