ブログタイトルの改行

業務外

このブログ、タイトルが長いです。『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/AVvXsEgkT-lyUmU5P5V4MQDuBQ3ErQ1_A6tuWeJp7tSx-v4TX8sdn5CFs0UvmnESJ-t8GVSgZo75z_wGt4QODYork-DFQYLyMs-CESrSXaAaQpURgYcgLB8hrWZc-gQgSlCjwtx1wrDcsEjhMPlL/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に落ち着きました。

使用後

感想と構想

前回断念したブログタイトルの変更ですが、やり遂げました。小さなことですが気になっていたんですよね。これでかっこ良くなった。

---

ブログタイトルの改行は、以下の記事を参考にさせていただきました。

Blogger：初心者でもできた！モバイル表示をカスタマイズ①　(ブログタイトルの改行、文字サイズ)