賢威の簡単なテキストボックスの作り方その２

今回も前回に引き続き、簡単なテキストボックスの作り方（テキストの背景装飾）の講座をおこなっていきます。（前回の記事はこちら）

前回に引き続き、賢威6.0のユーザー（特に「コーポレート版」の「２カラム」）の場合はコピペでそのまま使えますので、そのまま使って貰っても大丈夫です。

今回の方法を習得すれば、上記のようなボックス以外にも、例えば

今回も早速、テキストボックスの背景画像をGIMPで作っていきます。GIMPは本当にPhotoshopやIllustratorを持っていないアフィリエイターにとっては非常に重宝する無料ツールです。

まずは「幅600　高さ600」で新規画像を作成します。

 
新規画像を作成したら、【塗りつぶし】ツールを使って下地の色をつけていきます。今回は薄い黄色のテキストボックスを作りますので「#ffffd9」で塗りつぶしていきます。

 
次に「新規レイヤー」を作成して、そこに見出しを作っていきます。新規レイヤーは右側の「レイヤー、やんネル、パス、アンドゥー、・・・」と記載されたウィンドウにあります。

 
もしこちらのウィンドウがみつからない場合には、メニューの「ウィンドウ―＞最近閉じたドック」から復元できると思います。

新規レイヤーも同じサイズで作成してしまって大丈夫です。レイヤーの塗りつぶし方法は「透明」になるようにしておいてください。また、レイヤー名は適当に「見出し」と付けておきます。するとこのようになります。

 
次に矩形選択ツールで見出しの範囲を四角形で選択します。

 
選択ができたら、この範囲を「塗りつぶしツール」で塗り潰してください。今回は赤色の見出しを作りたいので「#bd4343」で塗りつぶします。

 
塗り潰したら、次に「テキストツール」で「まとめ」の文字を書きます。

 
使っているフォントは「HGPGothicE」、文字サイズは「34」です。あとは「アンチエイリアス」に必ずチェックを入れるようにしてください。

 
後は適当に左側に模様をつけます。これも、「矩形選択」ツールで四角形を３つ作って「塗りつぶしツール」で白で塗るだけなので、上の手順と同じです。

これで背景素材の画像は完成です。PNG形式（またはJPEG）で保存して、賢威のダッシュボードの「メディア―＞新規追加」からアップロードをおこなってください。

次にCSSに以下のコードをコピペします。賢威の管理画面の「外観―＞テーマ編集」を選択し、右側のリストから「design.css」を選択してください。

そして以下のソースコードをコピペして、そのまま「design.css」のわかりやすいところに張り付けてください。※（URL）のところは上記でアップロードした画像のURLを指定してください。

これで完了です。このまとめボックスを使いたいときは、記事を書くときのエディタ（テキストモード）で以下のように書きます。

<div class="box_matome">
こうやってdivタグを使って記述すると、ここに書かれた部分がまとめボックスとして反映されます。
</div>

そのまま使える画像素材

GIMPを使ってベース（下地）の画像素材を作るのが面倒、という場合はこの素材をそのままドラッグ&ドロップして使っても大丈夫です。