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

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

投稿日 2018年9月12日水曜日更新日 2020年2月20日木曜日

ブログタイトルの改行

業務外

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

使用前

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

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

        
          ブログソースコード
          
              <data:title/>

ブログソースコード
1 2 3	`<data:title/>`

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

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

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

ブログソースコード
1 2 3 4 5 6 7 8	`<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>

ブログソースコード
1 2 3 4 5 6 7 8	`<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>

ブログソースコード
1 2 3 4 5 6	`.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>
  
  

            

        
      

ブログソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22	`.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>`