425_1

賢威テンプレートのデフォルトデザインは、いかにも「ザ・賢威」という感じなので、これを変更するサイトが多いようですが、CSSのみの変更だけではデザインできる幅も限られてしまいます。
(高度で複雑なCSSを記述することで、可能になる場合もありますが・・)

そこで、比較的簡単にオリジナルの見出しを作っていくには、見出し背景を画像に変更していくのがいいでしょう。

今回は、GIMPを使って賢威のh2見出し(記事タイトル)をオリジナルデザインで作成していく方法を解説します。

 

賢威h2見出し(記事タイトル)のデザインイメージ

今回、変更していく箇所は、賢威の記事タイトルの場所であるh2見出しです。
下記のようにオリジナル画像に変更しようと思います。

 

デフォルトの見出し(賢威6.2ヘルシー版)425_2

オリジナル見出し
425_14

 

見出し画像のサイズは?

まずはじめに、見出しの画像サイズを決定していきます。
見出しの画像サイズは、見出しの場所やカラム数によってサイズが異なります。

ここでは賢威テンプレートを例にとってご説明します。

賢威の場合、h2見出しの横幅のサイズは、メインコンテンツ幅のサイズと同義になります。

よって、下記の場所からメインコンテンツの横幅のサイズを確認していきましょう。

ダッシュボードメニュー>外観>テーマの編集>layout.css

このファイルの中に、「1カラムレイアウト」「2カラムレイアウト」「3カラムレイアウト」とそれぞれセクションが分かれていますね。

この中で、現在あなたが使用しているテンプレートのカラム数の部分を見ていきます。

 

1カラムの場合の横サイズ

1カラムレイアウトの場合、メインコンテンツの幅を知るのはとても簡単です。
なぜなら、サイトの全体幅=メインコンテンツの幅 となるからです。

もし、サイトの全体幅がいくつだったか忘れてしまった場合は、下記の場所を確認します。

425_18

.col1 .copyrightセレクタの、min-widthプロパティにサイト全体幅のサイズが記載されています。

 

2カラムの場合の横サイズ

「2カラムレイアウト」セクションの中にある下記の記述がある部分を確認してください。

.col2 #main-and-sub,
.col2r #main-and-sub{ width: *****; }

このwidthの部分が、メインコンテンツの幅のサイズになります。
この部分は「px」または「%」で記述することができます。

 

* widthが「%」で表示されている場合

この箇所の少し上にある.col2r .copyright pセレクタのwidthサイズを確認します。
ここは、サイトの全体幅を表しています。

 

425_17

つまり、

.col2r .copyright pセレクタのwidthサイズ → 1000px
.col2 #main-and-sub,.col2r #main-and-subセレクタのwidthサイズ → 66.8%

と記載されていた場合、サイト全体幅1000pxに対してメインコンテンツの幅を66.8%取るという意味になり、メインコンテンツの幅は668pxと判別できる、ということになります。

 

3カラムの場合の横サイズ

3カラムの場合はカラム幅構成はやや複雑ですが、メインコンテンツの幅を知るときは下記の場所を確認します。

425_19

.col3r #main-contentsセレクタのwidthサイズが、メインコンテンツの幅になりますね。

こちらも、「%」で記述されていた場合は、2カラムの場合と同様にして、.col3r .copyright pセレクタのサイト全体幅を確認してからメインコンテンツの幅のサイズを計算してみてください。

 

画像サイズの高さは?

画像サイズの高さは、見出しをどんなデザインにするかによって適切なサイズが異なりますが、およそ65px~90pxの間で調整するといいでしょう。

 

素材を用意する

見出し画像に使う素材を準備します。

GIMPでは「レイヤー」という機能を使って、素材を加工しながらいろいろなデザインをしていくことができますが、最初は見出しに使いやすいライン素材がおすすめです。

フリーのライン素材が入手できるサイト
FREE-LINE-DESIGN

今回の例では、このような↓素材を使っていきたいと思います。

425_15

 

GIMPを使って見出し画像を作成する手順

1. GIMPを起動したら、

メニュー>ファイル>新しい画像

と選択し、新規作成画面を表示します。

 


2. 「新しい画像を作成」ダイアログで、キャンバスサイズ(画像サイズ)を指定します。

ここでは、例として賢威2カラムのh2見出し用として、幅670px、高さ80pxで解説していきます。

425_3

 


3. 幅670px×高さ80pxの新規キャンバスが作成されました。

425_4

 


4. ここに素材ファイルを新規レイヤーとして追加します。

425_5

素材ファイルをGIMPのキャンバス上にドラッグ&ドロップすると新規レイヤーが追加されます。

レイヤーウィンドウを確認するとこのように、素材ファイルが追加されていますね。

425_6

もし、レイヤーウインドウが出ていない場合は、

メニュー>ウィンドウ>ドッキング可能なダイアログ>レイヤー

から表示してください。

 


5. このままでは追加した素材のサイズが大きすぎるので、ちょうどいいサイズに調整していきましょう。

まず、レイヤーウィンドウで素材ファイルをクリックして選択してから、

メニュー>レイヤー>レイヤーの拡大・縮小

を開きます。

425_20

ここでレイヤーサイズを変更し、素材を適当な大きさに調整します。

 すると・・・

このように、素材のサイズが小さくなりました。

425_7

 


6. この素材をライン状に並べていきたいので、素材レイヤーを複製します。

レイヤーウィンドウで素材ファイルを選んで右クリックし、「レイヤーの複製」を選択します。

425_9

このように、素材ファイルのレイヤーが複製されて、新たにレイヤーが追加されました。

これを必要な分だけ繰り返して、素材ファイルを複製していきます。

 


7. 複製した素材レイヤーの配置を調整して、下線のように配置していきましょう。

ツールボックスの【移動】コマンドを選択します。

425_8

次に、レイヤーウィンドウで移動したい素材ファイルを選択してから、画面の素材をドラッグして移動していきます。

複製された素材がこのように↓配置できました。

425_10

 


8. このままでもいいですが、さらに素材レイヤーを複製して上にも線を作ってみましょう。

素材ファイルの向きを変えるには、

メニュー>レイヤー>変形

で、水平反転や垂直反転、回転などが選べるのでこちらで調節していきます。

上にも線がついてさらに素敵な見出しになりましたね^^

425_11

 


9. 最後に、これをjpgファイルとして書き出します。

メニュー>ファイル>エクスポート

を選択して、下記のダイアログを開きます。

425_12

① ファイル名を指定
② ファイルを保存場所を指定
③ ファイル形式を指定

最後に、「エクスポート」を押下して、jpgファイルが作成されたら完成です。

 

次回はこの作成した見出し画像をWordpressに反映させる手順を解説します。
お楽しみに!