「小枝」と「小技」の漢字は似ています(笑)
初心者がネットで調べながら少しずつ変更して見栄えを良くしてます、完全に理解してるわけではないので動かないこともありますが悪しからず。
Bloggerを見栄え良くするためにテーマのHTMLをたまに変更しますが、毎回、変更するたびに忘れては調べての繰り返しです(笑)
Bloggerは基本は「PC表示」で「モバイル表示」は初期値が非表示になっている項目もあるので注意が必要です。
いろいろ変更するにはCCS、いや、CSSで追加しないといけないんですが昔はHTMLにはなかった仕様なので完璧には理解できていません～～～
因みにCCSは私には馴染みがあるTIのDSP開発環境の名前です。
フォント変更(初期フォントから綺麗なフォントへ)
１）「テーマ」「カスタマイズ」「上級者向け」「CSSに追加」の順に選択。
２）以下のテキストを貼り付けて「ブログに適用」をクリック。
* {
font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif !important;
}
モバイル向けフォントも変更するには以下の手順を追加で行う。
３）「テーマ」「歯車のボタン」「デフォルト」から「カスタム」の順に選択。
４）「保存」で終了。
ラベルの位置変更
１）「レイアウト」を選んでガジェッドを適当な場所に追加。
２）レイアウト画面で「メイン」の編集を選択し、「ラベル」項目のチェックを外す。
３）「リアクション」項目をクリック。
（横にある編集でリアクション名はコンマで区切りながら増加は可能)
４）プレビューで確認して「配置を保存」を選ぶ。
モバイル向けラベルを表示するには以下の手順を追加で行う。
５）「テーマ」「歯車ボタン」「カスタム」を選択して保存。
７）次にPC画面の下にあるHTML編集を選択。
８）「ウィジェットへ移動」のプルダウンメニューで「ラベル」を選択
９）以下のラインに移動。
<b:widget id='Label1' locked='false' title='ラベル' type='Label'>
１０）下記のように「mobile='yes'」を挿入して保存。
<b:widget id='Label1' locked='false' mobile='yes' title='ラベル' type='Label'>
「Atom」表示を消去
１）「テーマ」「HTML編集」を選択。
２）以下の行を探し削除か、コメントに変更してから「保存」で終了。
<b:include data='feedLinks' name='feedLinksBody'/>
<!--<b:include data='feedLinks' name='feedLinksBody'/>-->
モバイル表示のタイトル文字サイズ変更
タイトル文字の大きさを変更しても、そのままではモバイル表示は変更されません。以下のようにCSSに追加して変更します。
１）「テーマ」「カスタマイズ」「上級者向け」「CSSに追加」の順に選択。
２）以下のテキストを貼り付けて「ブログに適用」をクリック。
.mobile .header h1{ font-size:15px;}
以下はフォント変更等で設定してあれば必要なし
３）「歯車のボタン」「デフォルト」から「カスタム」の順に選択。
４）「保存」で終了。
Navbarを消した後のスペースを消す
１）「テーマ」「カスタマイズ」「上級者向け」「CSSに追加」の順に選択。
２）以下のテキストを貼り付けて「ブログに適用」をクリック。
#navbar { height: 0;}
以下はフォント変更等で設定してあれば必要なし
３）「歯車のボタン」「デフォルト」から「カスタム」の順に選択。
４）「保存」で終了。
ここも上記と同じ3個のブログを変更したのですが、上記で変更できたブログだけは上手くスペースが変更されましたが他は変化なしで駄目でした。何か他にも条件が合うのかもしれませんが(笑)
モバイル画面で「共有+1」ボタン消去
SNSボタンを「レイアウト」から「ブログ投稿」の編集で消してもモバイル表示では「＋１」ボタンだけ残ってしまいます。
１）「テーマ」「HTML編集」を選択。
２）以下の行を探し削除か、コメントに変更してから「保存」で終了。
<div class='post-footer-line post-footer-line-2'>
<div class=‘goog-inline-block dummy-container’>
..........
<data:post.dummyTag/></div>
</div>
↓ ↓
<div class='post-footer-line post-footer-line-2'>
</div>
このブロックは隠れていて「CTRL+F」とかでは簡単には見つかりませんでした。私の場合は隠れている行を表示させて1400行辺りで発見しました。
<div class='goog-inline-block dummy-container'><data:post.dummyTag/>
上記ラインだけ削除すると「共有」と言うボタンは残ります。
＞＞『ブログ用の画像編集小技』ページへ
