ブログタイトルの改行 : Nature's Farmer（ネイチャーズ・ファーマー）〜井戸掘り始めました〜

ポチッと応援願います	トップページ
	初めての方はこちらへ

投稿日 2018年9月12日水曜日

ブログタイトルの改行

業務外

このブログ、タイトルが長いです。『Nature's Farmer（ネイチャーズ・ファーマー）〜井戸掘り始めました〜』
PCでもスマホでも改行しないと表示されません。でも改行位置が不細工なのが以前から気になっていました。細かい事ですが、これ直したい。

使用前

いつものようにネットを検索して情報収集から始めましたが…、どうも上手くいかない。Bloggerの仕様が変わったらしく、情報が古いようです。実はタイトルの変更は以前も挑戦したのですがギブアップしてました。今回はもう少し頑張ってみましょう。

で、辿り着いた答えがこちらです。
テーマのテンプレートのHTMLを変更します。タイトルのインクルード文をコメントアウトするか削除します。
この部分です。

<data:title/>

代わりにこれを挿入します。タイトルの文字色はイメージ色のダッジブルーを指定します。エンブレムの画像も入れましょう。

【ご注意】タイトル1行目と2行目の後ろには、実際は改行タグ<br/>が入っています。コード表示ツールのSyntaxHighlighterが実際の改行として処理しています。

<div style='text-align: center; color: dodgerblue;'>
<img border='0' src='画像ファイルのURL'/>
タイトル1行目<br/>
タイトル2行目<br/>
タイトル3行目
</div>

これが実際のコードです。セーブするとカッコとか波線の記号がコード変換されますが気にしないでください。

<div style='text-align: center; color: dodgerblue;'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgexwwtJSEnCQ15g69ZtFRlYMO0MB9KbnHGoc2f18xQzrfK0E-5SJbprohtri3IX41hA-2r4C1RokaqeAwROFnSVyX6ePgqBp16QN0A4CEkjnBj_w3Bv6nDGbsYARorpam05XGys7bFIoS7/s200/emblem256.png'/>
Nature's Farmer<br/>
（ネイチャーズ・ファーマー）<br/>
〜井戸掘り始めました〜
</div>

改行はできましたが、フォントサイズの変更はどうするんですかね？
テンプレートのカスタマイズの中に上級者向けのCSSの変更で、フォントサイズを変更することができるようです。

テーマ→（ブログで使用中）カストマイズ→Blogger テーマデザイナー→上級者向け→ブログのタイトル

デフォルトのフォントはArial、サイズは60pxです。ですがこれを変更してもモバイル側のフォントは変わりません。これはPC用のデザイン変更だけですね。

フォントサイズの変更もテーマのテンプレートのHTMLを変更します。
この部分を探して、

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
  border-$startSide: 1px solid $(tabs.border.color);
}
]]></b:skin>

最後にタイトルとエンブレムのサイズをPCとモバイル毎に定義します。Style文ですね。

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
  border-$startSide: 1px solid $(tabs.border.color);
}
/*ブログタイトルの文字サイズ*/
.mobile .header h1{
font-size:20px;
}
.header h1{
font-size:48px;
}

/*タイトル部エンブレムの画像サイズ */
.mobile .header img{
width: 24px;
 height: 24px;
}
.header img{
width: 48px;
height: 48px;
]]></b:skin>

できました。タイトルは3行で狙いどおりの位置で改行されています。
PCのフォントサイズは48px、モバイル用は色々調整して24pxに落ち着きました。