BloggerのテーマをContempoに変更しました
GoogleのブログサービスBloggerを利用しているこのブログのデザインを変更するため、テーマをContempoに変更してみたので、それについて書いてみます。
これまで使っていたテーマは「シンプル」で、名前の通りシンプルで私好みのデザインでした。
しかし、スマホで見たときにページトップのカテゴリーがわかりにくいのが気になっていました。また、1ページにいくつもの投稿が表示される昔っぽい表示もどうかと思っていました。
https://blogger-nav.blogspot.com/2018/09/blogger_12.html
実はテーマ選択ページで上の方に表示されている次の4つが新しいテーマでした。
Bloggerを開始した当初に検討したとは思うけれど、おそらく画像やフォントサイズが気に入らなかったので使わなかったのだと思います。
ただし、いくつかカスタマイズをしました。カスタマイズといってもコードを書き換えるような高度なものではなく、テーマカスタマイズページや、レイアウトページで変更できる程度のものです。
「テーマ」ページの「カスタマイズ」をクリックして表示される「テーマデザイナー」の「背景」で「背景の削除」をクリック。これでスッキリしました。背景がなければ読み込みも若干速いはずです。
「レイアウト」編集のページで「サイドバー(下)」の「ガジェットの追加」をクリックし「人気の投稿」を追加すると、PCで見た場合のトップページでも左側に表示されるようになります。
鉛筆アイコンをクリックして、お好みでパラメーター調整をするとよいでしょう。
これまで使っていたテーマは「シンプル」です
このブログはGoogleのブログサービスBloggerを使って書いています。これまで使っていたテーマは「シンプル」で、名前の通りシンプルで私好みのデザインでした。
しかし、スマホで見たときにページトップのカテゴリーがわかりにくいのが気になっていました。また、1ページにいくつもの投稿が表示される昔っぽい表示もどうかと思っていました。
Google純正の新しいテーマ
そこで、テーマを評価の高いVaster2に切り替えようかと調べてみたところ、Google純正のテーマも2017年3月にバージョンアップしていて、機能や性能が向上した新しいテーマが4つあることがわかりました。https://blogger-nav.blogspot.com/2018/09/blogger_12.html
実はテーマ選択ページで上の方に表示されている次の4つが新しいテーマでした。
- Contempo
- Soho
- Emporio
- Notable
Bloggerを開始した当初に検討したとは思うけれど、おそらく画像やフォントサイズが気に入らなかったので使わなかったのだと思います。
Contempoを選択
今回あらためて新しい4つを見比べてみると、私好みのテーマはContempoでした。ただし、いくつかカスタマイズをしました。カスタマイズといってもコードを書き換えるような高度なものではなく、テーマカスタマイズページや、レイアウトページで変更できる程度のものです。
画像を非表示
まず気に入った背景画像がなかったので、画像そのものを削除。自分で画像をアップロードしようかとも思いましたが、適正サイズ等を調べるのが面倒なのでとりあえず削除しました。「テーマ」ページの「カスタマイズ」をクリックして表示される「テーマデザイナー」の「背景」で「背景の削除」をクリック。これでスッキリしました。背景がなければ読み込みも若干速いはずです。
人気の投稿
新しいテーマのデフォルトでは「人気の投稿」が投稿を選択して表示したときだけ投稿の下の方に表示されます。トップページでは表示されません。「レイアウト」編集のページで「サイドバー(下)」の「ガジェットの追加」をクリックし「人気の投稿」を追加すると、PCで見た場合のトップページでも左側に表示されるようになります。
鉛筆アイコンをクリックして、お好みでパラメーター調整をするとよいでしょう。
スマホの場合には、左上のメニューアイコンをタップするとサイドバーが表示され、人気の投稿も表示されるようになります。
「投稿」のタイトルは、「投稿タイトルのストリームのフォント」で調整する必要がありました。
これでしばらく使ってみます。
ページも復活
固定ページである「ページ」が初期化されて消えていたのでこちらも表示を復活させました。フォントサイズを調整
あとは、テーマのカスタマイズで、「上級者向け」を選択して、「ブログのタイトル」、「投稿」を選び、フォントサイズを少し小さくして完了です。「投稿」のタイトルは、「投稿タイトルのストリームのフォント」で調整する必要がありました。
スマホ画面も良好
スマホ画面でも確認してみたところ、以前よりモダンになっていい感じになりました。Google純正という安心感
Vaster2や新しいZELOも良いのかもしれませんが、どこの誰とも知らない人が作ったテンプレートはやはり不安が残ります。Google純正テンプレートであればその点安心です。これでしばらく使ってみます。
引用形式の変更
デフォルトの引用形式が変だったので変更しました。
見出しのスタイル
2020/10/3追記
上の投稿では、見出しスタイルの変更についても少し書いてあります。ただし、h3を直接変更しているので、h3タグを使っている場所全てに影響が出てしまいます。Contempoはなんとタイトルもh3なので、こちらにも影響がでて、なおかつ見栄えも変わりありません。
タイトルには、post-title entry-titleのクラスが指定されているので、これを変更すれば、普通のh3見出しと区別が出来そうです。いずれ調べてみようと思います。
gtag.js対応
Googleから、 アナリティクス タグ(analytics.js)から最新のタグ(gtag.js)にアップグレードしましょうというメールが届いていました。
ある程度Webを扱える方ならGoogle Analyticsを使われていると思います。Contempoでは2020/10/3現在、analyticsタグが使われています。
簡単に変更できないものか見てみましたが、がっちり組み込まれていそうで私にはそう簡単に変更できなさそうでした。
待っていれば、そのうちGoogle側で変更してくれるのかもしれません。とりあえず不都合もないので様子を見ようと思います。
コメント
2023-09-24 コメントの設定についてコメントをいただきましたので、書いてみます。と言っても、自分でももはやどうやって設定したのか覚えていないので、現在の設定からそれらしいところを探してみました。お役に立てば幸いです。
「設定」の「コメント」グループ
レイアウト
続きを読む
トップページにリストされている投稿に「続きを読む」というリンクが表示されています。これをどうやって表示したのか不明ですが、「レイアウト」設定ページの「ページの本文」の「ブログの投稿」の編集を選び、次のように設定すると表示されるのではないかと思います。
未確認です。
初めまして。素晴らしいブログで1つ設定をご教示頂きたいのですが、同じ「bloggerのcontempo light画面でこのようにコメント登録できるようにできません」おてすうですがご教示ください。
返信削除コメントをありがとうございます。同じIT業界の方からコメントをいただき嬉しいです。素晴らしいブログとは到底思えませんが、とりあえずコメントの設定とおぼしき所を投稿に追加してみました。お手数ですが、本文をご覧いただけますか。
削除NKさん、丁寧に教えて頂きありがとうございました。おかげさまでこのテンプレートでコメント記入の表示する事ができました。追加で1つお伺いしたいのですがAdsenseをやられているでしょうか。もしやられているのならば私は全然承認されません。価値あるサイトを心がけていますが、Bloggerの他のテンプレートでは、パンくずリストやスマホでの横にスライドする動きなどを入れユーザの操作性向上を狙ったりしましたが本テンプレートではそれができないようです。でもスマホ対応で無いので画面が崩れ諦めました。本テンプレートでラベルの項目をクリックすると全画面表示(投稿したような画面)にいきなりしたいのですが何か設定などご存じでしたら申し訳ございませんがご教示ください。
削除コメント登録を作成する事ができました。ありがとうございました。
削除とりあえずコメントが登録できたようで何よりです。ご質問についてですが、ラベルと全画面表示というのがわかりかねました。ラベルというのは投稿の件名の事でしょうか? それとも、ページを指しているのでしょうか?
削除(コメント投稿の通知メールが迷惑メールフォルダーに入ってしまうため、気が付くのが遅れています)
AdSenseをやっているかについては、やっています。ブログを作ってすぐに申し込みましたが、私も承認されませんでした。アクセス数がある程度増えてから再度申し込んでみたところ、今度は承認されました。
削除わかりにくい表現で悩ませてしまい申し訳ございません。
削除一つずつ質問してゆきます。
・サイドバーでも「ページ」カジェットをおいて各ページにリンクするようにしているのですが、「ページ」カジェットをサイドバーにもう一つ作成しそれをページリスト(先頭)のところに移動させました。
そうすると、縮小されたページでは、ページ上部に表示されていますがサイドバーの「ページ」カジェットまたはページリスト(先頭)のところにある「ページ」カジェットよりリンクし全ページが表示されるとページの上部のページ」カジェットに記入した各ページの項目名が消えてしまいます。固定させるためヘッダーのところに移動させたりすると今度は縦表示でこていはされます。ページの項目名を全ページになっても消え無い設定などお手数ですがご教示ください。
ページカテゴリを移動していたらページが全表示になっても消えなくなりました。
削除お騒がせしました。
NKさんのブログでコメントの右側が「続きをよむ」等にカスタマイズされているのはどんな魔法を使っているのでしょうか。
小生は、はじめのページのページ名ですが。お手数ですがご教示くださればありがたいです。よろしくお願いします。
「続きを読む」について何か設定したような記憶がありませんが、それではないかと思われるところを本文に追加してみました。ご参考までに。
削除「続きを読む」の設定できました。ありがとうございました。感激です。
返信削除おめでとうございます!
削除