Bloggerは「モバイルテンプレート」を選択すればいいだけなので、モバイル表示が簡単にできて
助かる！
と思いきや、テンプレートを利用してモバイル表示をしてみると、いろいろと気になるところが。
PC表示については「テンプレート」→「カスタム」→「上級者向け」である程度の調整はできるものの、
モバイルにはほとんど反映されないみたいです。
でも近年、スマホから見る人ってほんと多いですからね！
ここはがんばって、どうにか見やすいように変更していきたいところです.
と思いきや、テンプレートを利用してモバイル表示をしてみると、いろいろと気になるところが。
PC表示については「テンプレート」→「カスタム」→「上級者向け」である程度の調整はできるものの、
モバイルにはほとんど反映されないみたいです。
でも近年、スマホから見る人ってほんと多いですからね！
ここはがんばって、どうにか見やすいように変更していきたいところです.
調べてみるとHTMLをいじればいいそうで、初心者ながらにいろいろなサイトで調べながら試してみました。
以下、私が行ったカスタムをまとめていこうと思います。
ちなみに、HTMLを変更する時は、先にバックアップを取っておくことを忘れずに！
（左のバーで「テンプレート」を表示すると、右上に「バックアップ/復元」のボタンがあります）
「yuuのものづくり図鑑 ～ハンドメイド、時々フリマ～」
のように改行したいところにスペースをたくさん入れたり、
「テンプレート」→「カスタム」→「上級者向け」のところで文字サイズを変更することでなんとか
「yuuのものづくり図鑑
～ハンドメイド、時々フリマ～」
のように、任意の場所で２行に分けて表示されるように工夫していました。
しかしこれも、モバイル版では全く反映されません。
そこで、以下の手順でカスタマイズしました。
まずはじめに大切なのが、必ず「モバイルテンプレート」を選択するコマンドで「カスタム」を選択しておく
ということ。
これをしておかなければ、HTMLをいじっても変更が反映されません！
そして、基本設定のページの「タイトル」を改行なしのものにして、「変更を保存」します。
次に、左側にあるバーで「テンプレート」を開き、「ブログで使用中」の画像の下にある「HTMLを編集」のアイコンをクリック→「ウィジェットへ移動」のコマンドから「Header1」を選びます。
すると、
そのあたりからどんどん下を見ていって、（左の数字がずらっと並んでいる部分に▲のマークがある場合、それは表示を省略している印なので、▲をクリックして省略されている部分を開いて見ます）
（私の場合、２カ所ありました。）
次に、見つけた
最後に、「テンプレートを保存」ボタンを押せば終了です。
これでモバイル表示で、ブログタイトルが２行に分かれました。
しかし、私のようにブログ名が長い場合、勝手に折り返されてしまいます。
そこで次は、ブログタイトルの文字サイズを小さくしたいと思います。
先ほどは、テンプレートのHTMLの一部を書き換える作業を行いましたが、
ここからはどちらかというと、テンプレートのHTMIにCSSを追加するような作業になります。
まず、左側にあるバーで「テンプレート」を開き、「ブログで使用中」の画像の下にある「カスタマイズ」のアイコンをクリック→「上級者向け」→「cssを追加」と進みます。
そこへ
数字の部分が文字サイズを表しているので、この数字を自由に書き換えることによって、
ブログタイトルの文字の大きさが変わります。
ちなみに、
/*ブログタイトルの文字サイズ*/
のようにすると、/*と*/で囲まれた部分は、空白と同じに扱われます。
なので、どのような内容のcssかなどの覚書を書いておくと、後で編集する場合に便利です。
最後に、右上の「ブログに適応」ボタンを押せば適応されます。
Bloggerその他のカスタマイズ方法↓
Blogger：初心者でもできた！モバイル表示をカスタマイズ② (投稿タイトルと、記事本文を見やすく)
Blogger：初心者でもできた！モバイル表示をカスタマイズ③ （ガジェットの表示、「人気の投稿」ガジェットを見やすく）
Blogger：初心者でもできた！見出しのカスタマイズ
以下、私が行ったカスタムをまとめていこうと思います。
ちなみに、HTMLを変更する時は、先にバックアップを取っておくことを忘れずに！
（左のバーで「テンプレート」を表示すると、右上に「バックアップ/復元」のボタンがあります）
ブログタイトルを改行する
このブログのタイトル、「yuuのものづくり図鑑 ～ハンドメイド、時々フリマ～」ですが、基本設定のタイトルを編集するときに、「yuuのものづくり図鑑 ～ハンドメイド、時々フリマ～」
のように改行したいところにスペースをたくさん入れたり、
「テンプレート」→「カスタム」→「上級者向け」のところで文字サイズを変更することでなんとか
「yuuのものづくり図鑑
～ハンドメイド、時々フリマ～」
のように、任意の場所で２行に分けて表示されるように工夫していました。
しかしこれも、モバイル版では全く反映されません。
そこで、以下の手順でカスタマイズしました。
まずはじめに大切なのが、必ず「モバイルテンプレート」を選択するコマンドで「カスタム」を選択しておく
ということ。
これをしておかなければ、HTMLをいじっても変更が反映されません！
そして、基本設定のページの「タイトル」を改行なしのものにして、「変更を保存」します。
次に、左側にあるバーで「テンプレート」を開き、「ブログで使用中」の画像の下にある「HTMLを編集」のアイコンをクリック→「ウィジェットへ移動」のコマンドから「Header1」を選びます。
すると、
<b:widget id='Header1' locked='true' title='yuuのものづくり図鑑 ～ハンドメイド、時々フリマ～ (Header)' type='Header' version='1' visible='true'>
のように自分のブログタイトルが書かれている、Header1のあたりまで移動させてくれます。そのあたりからどんどん下を見ていって、（左の数字がずらっと並んでいる部分に▲のマークがある場合、それは表示を省略している印なので、▲をクリックして省略されている部分を開いて見ます）
<b:includable id='title'>
と書かれた行の左の数字の▲を開いたところあたりから<data:title/>
と書かれた部分がいくつかあるので見つけます。（私の場合、２カ所ありました。）
次に、見つけた
<data:title/>
の部分を消し、代わりにyuuのものづくり図鑑 <ber />～ハンドメイド、時々フリマ～
のように、改行したい部分に<ber />を入れたタイトルを書き込みます。最後に、「テンプレートを保存」ボタンを押せば終了です。
これでモバイル表示で、ブログタイトルが２行に分かれました。
しかし、私のようにブログ名が長い場合、勝手に折り返されてしまいます。
そこで次は、ブログタイトルの文字サイズを小さくしたいと思います。
ブログタイトルの文字サイズを調整
先ほどは、テンプレートのHTMLの一部を書き換える作業を行いましたが、
ここからはどちらかというと、テンプレートのHTMIにCSSを追加するような作業になります。
まず、左側にあるバーで「テンプレート」を開き、「ブログで使用中」の画像の下にある「カスタマイズ」のアイコンをクリック→「上級者向け」→「cssを追加」と進みます。
そこへ
/*ブログタイトルの文字サイズ*/
.mobile .header h1{
font-size:24px;
}
と打ち込みます。.mobile .header h1{
font-size:24px;
}
数字の部分が文字サイズを表しているので、この数字を自由に書き換えることによって、
ブログタイトルの文字の大きさが変わります。
ちなみに、
/*ブログタイトルの文字サイズ*/
のようにすると、/*と*/で囲まれた部分は、空白と同じに扱われます。
なので、どのような内容のcssかなどの覚書を書いておくと、後で編集する場合に便利です。
最後に、右上の「ブログに適応」ボタンを押せば適応されます。
Bloggerその他のカスタマイズ方法↓
Blogger：初心者でもできた！モバイル表示をカスタマイズ② (投稿タイトルと、記事本文を見やすく)
Blogger：初心者でもできた！モバイル表示をカスタマイズ③ （ガジェットの表示、「人気の投稿」ガジェットを見やすく）
Blogger：初心者でもできた！見出しのカスタマイズ
0 件のコメント :
コメントを投稿