こんにちは、purinです。
青森旅行記がまだ途中ですが、今回は箸休めとしてWordPressのカスタマイズ記事にしました。
そんなわけで、今日はサイトのトップページにあるブログタイトル部分をカスタマイズする方法を説明していきます。
cocoonの場合カスタマイズされていない初期設定はこんな感じ。
もう少し文字などのデザインを自分好みに変えてみたいと思います。
ヘッダーのデザインを決める
文字のデザインを決める
文字のデザインによって受ける印象が異なりますので色々と試してから決めたいと思います。
今回はフリーで使えるサイトのものを利用させていただきました。
http://lightbox.on.coocan.jp/html/fontImage.php
（下の方に注意事項があり、フォントによっては使用条件があったりするのでご確認ください）
見てみると文字だけなのに本当に色々なデザインがあって、
こんな風に、並べてみると同じ文字でも雰囲気がかなり異なりますよね！
表示するテキストに文字を入力したうえで、フォント名を選択し、変更をクリックすれば画像下部分にあるように選択したデザインの文字が確認できます。
私は今回はコーポレート明朝を利用させていただくことにしました。
やわらなすぎないかつ、角ばりすぎていない感じがブログのタイトルとマッチしているかなと思いました。
文字のサイズを決める
文字のデザインを決めたらサイズも決めておきましょう。
私はサイズを45、X座標10、Y座標60、幅830、高さ80にしてみました。
※この記事を下書きしてからブログタイトルを変えたので、字数が少し多くなった関係で文字サイズのみ40にしています。
それから透過PNGにチェックを入れましょう。
（透過させないと、もし背景画像を設定した際に文字の背景が白浮きしてしまいます）
デザインが完成したらダウンロードボタンをクリックし、保存。
作成したデザインを反映させる
作成したヘッダーデザインをcocoonに反映させます。
まずcocoon設定をクリックし、ヘッダーを選択。
下の方にヘッダーロゴがありますので、選択をクリックします。
※上の画像は実際にはロゴをアップロードした後のものなので先ほど作成したデザインが表示されていますが、この時点ではまだ何も画像は表示されていません。
次にファイルをアップデートのファイルを選択をクリックし、先ほど保存したデザインをアップロード。
無事にデザインがアップロードされていたら、すべての変更を保存をクリックします。
ブログのトップページをクリックし、デザインが変更されているか確認します。
念のため、モバイルの方も確認しておきましょう。
PCもモバイルも表示が問題なければ完成です。
お疲れさまでした！
