#Blogger 日本語テンプレート「Smart」
— 昇運さん@オオサンショウウオ【超特大】 (@Get_RisingLuck) September 12, 2020
久しぶりの新作テンプレートを試す前に、変更に必要な情報を再確認しておきましょう。
追加した各種コードを忘れているのは、よくある事です(遠い目)https://t.co/IRjREiDXkb
2020年9月、新しいblogger用デザインテンプレートが公開されました。
まだ使用者は少ないようですが、開発・公開してくれるだけでも感謝します。
まだ使用者は少ないようですが、開発・公開してくれるだけでも感謝します。
当ブログはメインブログへのテンプレートテストも兼ねているので、先にこちらで試用する予定です。
新作デザインテンプレート『Smart』とは?
開発元のwebサイトBLOGGER LABOによると、下記の紹介がされています。
このテンプレートは、カスタマイズを前提にした日本語対応の国産テンプレートです。ソースコードにいちいち説明がついているので、カスタマイズ初心者でもコードの意味合いが分かりやすくなっていると思います。また、カスタマイズなんてしない という人のためにも、そのままで十分使える機能を備えた造りになっています。
日本語対応で、適用してからすぐに使い始められる機能がある。
これはblogger初心者にはありがたい。
同デザイン・4仕様から選べます
デザインも重要ですが、技能やカスタマイズ能力に合わせた仕様が用意されています。
- ノーマル版
- ノーマル版(目次なし)
- テーマデザイナー対応版
- テーマデザイナー対応版(目次なし)
導入後に指定のXMLファイル編集があります
制作者より当サイトのテンプレート導入後にやってほしいことという指示がありました。
この案内を元に、テンプレートのコード編集を覚えるのもよいでしょう。
各自のブログに合わせたテンプレート編集へ
実質完成しているとはいえ、外見は各自のお好みで更新しましょう。
テンプレート更新のたびに、広告関連コードは再配置が必要です。
#Blogger デザイン再構成
— 昇運さん@オオサンショウウオ【超特大】 (@Get_RisingLuck) July 10, 2020
【変更したテーマ内HTMLを復元する】
①GoogleAdSenseコード
②『見出し』(装飾)
③『カエレバ』(装飾)
④目次自動生成コード
⑤Twitterカード生成コード(要確認)
②と③は、こちらのWebサイトを利用させてもらいます。https://t.co/NSEm7PH0V1
今回は目次機能が選択式なので、目次自動生成コードを省略できます。
頻繁にデザインテンプレートを更新すると、重要なコードの配置を忘れる事もありました。
バックアップと再構築の手順は、毎回確認して更新作業に取り掛かりましょう。
『カエレバ』装飾のCSS追加に戸惑う
2020年はblogger本体の大幅なアップデートがありました。
そのため以前のCSS編集方式(Bloggerでの使用方法)は直接使えなくなっております。
現時点では、旧来の設定画面に戻る事で可能でした。
旧設定に戻れなくなった場合は、デザインのHTML編集画面から追記することになります。
コード配置箇所には、十分ご注意ください。
追加した装飾コードは『カエレバ』に反映されますが、なぜか【ヨメレバ】には反応しないのが謎です。
これを見落とす可能性が高い。
旧設定に戻れなくなった場合は、デザインのHTML編集画面から追記することになります。
コード配置箇所には、十分ご注意ください。
#Blogger CSSメモ
— 昇運さん@オオサンショウウオ【超特大】 (@Get_RisingLuck) November 30, 2020
<!-- 追加CSSコードはこの直上に配置 -->
}]]></b:skin>
追加した装飾コードは『カエレバ』に反映されますが、なぜか【ヨメレバ】には反応しないのが謎です。
【Smart】導入直後の感想
- 動作は順調
快適すぎて違和感がない。 - テンプレートコード各所に項目が明記されている
変更箇所が検索しやすく、過去に使用していたコードへの更新も安心。 - 自動目次生成機能の動作条件が不明
H3見出しの数だけでは発生しない。
【追記】である(<!--more-->)を記事内HTML編集で入れると発生する。
指定のテンプレート書き換えの誤解
コード内には画像URLを書き換える部分は5箇所あります。これを見落とす可能性が高い。
誤解したのは解説文の内容は対象外ということでした。
下記のコード内容は変更不要です。
// 「https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTHgL_vkoGeKfxcy9UKc5EhhIFeceBkbtrNvMxZ9jwf6stIUcMzCArG5m46zUSKHjbkeYMDlRGMMFELuqKqObZfEV9NU2OxBWzeqdsJGz-abuQtksG2HS0utcga8E_p3tDRX6gCRQdzd-I/s1600/noimage.png」を自分の画像URLに変更する
<!-- 関連記事を表示させるコードはじめ
-->に続くコード内に、変更すべき2箇所があります。
- 標準の文字サイズは小さめ
これは自分の好みに合わせて大きくしたいものです。
/* コンテンツ(本文の内容) */項目を14pxから16pxにしてみました。 - ヘッダーに配置したアドセンス広告の背景が青い
テーマデザイナー経由で各所の色を変更したのですが、なぜか一部の背景色が変更できません。
暫定的にアドセンス広告のガジェットを移動させて対処しました。
採用からカスタマイズまで、丸一日で十分慣れる事ができます。
初心者でも積極的に試してみる価値のあるデザインテンプレート『Simple』でした。
コメント