琉海です。
ブログスキンのCSSカスタマイズができるひとだけがヤレるシリーズです。
ブログタイトルが長い場合に、自分の思った部分で折り返しがしたい場合がありますよね？
苦肉の策で、空白スペースを入れて埋めて無理に改行させても、ブラウザによっては表示が崩れてしまう場合があります。
かといって、ブログタイトル内に、改行タグ<br />を入れるわけにもいきませんので、デザイン指定で折り返す方法をお伝えします。
なお、この方法は、自分の好きな箇所で改行できる方法ではなくて、横幅を縮めて、そこからはみでた部分が自動的に折りかえす方法です。
長いブログタイトルを思い通りに階段状に折り返す方法ではないので、その点だけご注意くださいね。
(その場合は、ヘッダ画像内にブログタイトルそのものを書き込んでください)
ブログ→デザインの変更→スキンCSSの編集画面を開いておきます。
＜ヘッダーのタイトル文字折り返し＞
※上下に似たような設定があるので、気をつけてくださいね。
#header h1{
padding-top:15px;
margin-left:10px;
text-decoration:none;
}
▼追加します
#header h1{
width:200px;
padding-top:15px;
margin-left:10px;
text-decoration:none;
}
widthというのが横幅の設定です。指定がない場合は、横幅イッパイまで使う設定になっています。そこで、あえて数値設定をして縮めることで、改行するようになるんですね。
２００px指定したら、改行が多すぎてしまって縦幅内におさまらないうえに、ブログ説明文も押し出されて見えなくなってしまいました・・・ピーチブログスキンの横幅は７６０pxですので、これよりも小さな数字を設定するようにしてくださいね。
※下の事例では、h1は４００px設定にしてあります。
＜ヘッダーのブログ説明文の折り返し＞
タイトルだけ短くなってもデザインがおかしいと思いますので、ついでに説明文のところも短めで折り返す方法を挙げておきますね。
#header h2{
margin-left:10px;
}
▼追加します
#header h2{
width:300px;
margin-left:10px;
}
h1のブログタイトルよりも少し短めにしておいたほうが、デザイン的にすっきりするかなぁと思います。
最後にページ下の「保存」ボタンを押して、あなたのブログを確認してみてください。
あとは、ご自身が折り返したい箇所でそうなるように横幅の数値の微調整をしてくださいね。
＜関連記事＞
・ヘッダー画像の作り方(簡易版)
・アメブロのヘッダーをオリジナル画像に変える
・ブログタイトルの文字サイズ変更
・ブログタイトル・説明文の折り返し(現在の記事)
・ヘッダ画像をクリックするとトップに戻るには？
ブログスキンのCSSカスタマイズができるひとだけがヤレるシリーズです。
ブログタイトルが長い場合に、自分の思った部分で折り返しがしたい場合がありますよね？
苦肉の策で、空白スペースを入れて埋めて無理に改行させても、ブラウザによっては表示が崩れてしまう場合があります。
かといって、ブログタイトル内に、改行タグ<br />を入れるわけにもいきませんので、デザイン指定で折り返す方法をお伝えします。
なお、この方法は、自分の好きな箇所で改行できる方法ではなくて、横幅を縮めて、そこからはみでた部分が自動的に折りかえす方法です。
長いブログタイトルを思い通りに階段状に折り返す方法ではないので、その点だけご注意くださいね。
(その場合は、ヘッダ画像内にブログタイトルそのものを書き込んでください)
ブログ→デザインの変更→スキンCSSの編集画面を開いておきます。
＜ヘッダーのタイトル文字折り返し＞
※上下に似たような設定があるので、気をつけてくださいね。
#header h1{
padding-top:15px;
margin-left:10px;
text-decoration:none;
}
▼追加します
#header h1{
width:200px;
padding-top:15px;
margin-left:10px;
text-decoration:none;
}
widthというのが横幅の設定です。指定がない場合は、横幅イッパイまで使う設定になっています。そこで、あえて数値設定をして縮めることで、改行するようになるんですね。
２００px指定したら、改行が多すぎてしまって縦幅内におさまらないうえに、ブログ説明文も押し出されて見えなくなってしまいました・・・ピーチブログスキンの横幅は７６０pxですので、これよりも小さな数字を設定するようにしてくださいね。
※下の事例では、h1は４００px設定にしてあります。
＜ヘッダーのブログ説明文の折り返し＞
タイトルだけ短くなってもデザインがおかしいと思いますので、ついでに説明文のところも短めで折り返す方法を挙げておきますね。
#header h2{
margin-left:10px;
}
▼追加します
#header h2{
width:300px;
margin-left:10px;
}
h1のブログタイトルよりも少し短めにしておいたほうが、デザイン的にすっきりするかなぁと思います。
最後にページ下の「保存」ボタンを押して、あなたのブログを確認してみてください。
あとは、ご自身が折り返したい箇所でそうなるように横幅の数値の微調整をしてくださいね。
＜関連記事＞
・ヘッダー画像の作り方(簡易版)
・アメブロのヘッダーをオリジナル画像に変える
・ブログタイトルの文字サイズ変更
・ブログタイトル・説明文の折り返し(現在の記事)
・ヘッダ画像をクリックするとトップに戻るには？