Simplicityヘッダーのブログタイトル位置と大きさの変更

このテーマを使ってスタイルシートをカスタマイズしないでトップ画面からだけのカスタマイズだけだとどうも文字位置が変に思ったし文字の大きさも小さく感じ変更することにしました。

これをこうしました。

位置をずらしただけでは文字が小さいと思ったので大きさの変更です。

これで少しは満足です。

私はまずヘッダー用の画像を用意します。

Simplicityヘッダー用写真

すると下地が白いのでタイトルの文字が勝手に載ります。
写真の加工ですが、私はラベルマイティとか使ってますが、写真ファイルには変換できないので、パソコンの画面自体をキャプチャーしてペイントでトリミングして使ってます。

写真が出来たらヘッダー写真を載せますがデフォルトでは1070ピクセルの高さが100ピクセルです。

そんな横に長い写真がないので私は250ピクセルに変更して使っています。最新版のSimplicityでは簡単に変更できます。サイト名をポイントしたらメニューが出てきますが、そこからカスタマイズを選んで、次にヘッダー画像をクリックして開いたらヘッダーの高さってありますからそこを変更してください。1度保存して閉じないと変更にならない時がありますので注意してください。壊れていないですから。

ブログタイトル文字を変更

画像をUPしたら勝手にタイトル文字が上に載りますので私は位置をずらし大きさも変更しました。

この青い枠で囲った部分をコピーして子テーマに貼り付けます。

margin　が余白を意味して　top　が上で　56px　が大きさで上から56px余白がありますって意味でmargin-top:56px;とスタイルシートに記載して命令をしてあげます。bottom　は下を意味しmargin-bottom:30px;下から30px余白がありますって意味です。font-sizeは文字の大きさです。fontは文字を意味しsizeは大きさです。

文字の大きさはデフォルトでは忘れましたが25pxになっているかと思いますが私は50pxにしています。

文字の位置は/*ヘッダーブログタイトル文字上からの余白*/のpxの前の数字を変えると位置が変更できます。

色々試されると良いと思います。

ヘッダーのカスタマイズは以上ですがまた変更したら載せたいと思います。

まだ昨日載せたばかりのテーマですから大変なんです。

テーマを変更したらリンクも変わってる部分が出てきましたし、まだ全部目を通したわけではないので全てが上手く行ってるかわかりません。

ページが増えると変更も大変です。

なるべく早くに変更することをお勧めします。

グローバルメニューバーの色変更はこちらから