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

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

heder
これをこうしました。

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

header2
これで少しは満足です。

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

header3

スポンサードリンク
スポンサードリンク

Simplicityヘッダー用写真

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

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

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

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

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

/*ヘッダーブログタイトル文字上からの余白*/
#site-title{
margin-top:56px;
margin-bottom:30px;
}
/*ヘッダー文字の大きさの変更*/
#site-title a{
display:block;
text-decoration:none;
color:#222;
font-size:50px;
line-height:100%;
font-weight:bold;
}

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

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

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

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

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

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

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

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

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

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

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

スポンサードリンク
スポンサードリンク
スポンサードリンク
  • このエントリーをはてなブックマークに追加

コメント

  1. […] 2016年2月17日(水)、ヘッダーのブログタイトル位置と大きさを変更した。 → 「パソコン初心者日記」を参照。“ブログタイトルの文字を変更”の青い枠で囲ったコードをコピーして子テーマに貼り付けた。 → 設定は  “font-size:60px” にした。 → 「管理メニュ―」ー「ダッシュボード」ー「メニュー」ー「外観」ー「ヘッダー」ー「ヘッダー画像」とする。 →「ヘッダーの高さpx」を “250” にした。 →「現在のヘッダー」の「ヘッダーの新規画像を追加」をクリックし、画像を選択。切り取りたいところに、資格を移動させてクリックする。 → 「ヘッダー」まで戻り「色」をクリック。「サイトタイトル色」「サイト概要色」をいじる。 […]

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)