Sunday 25 September 2022

[Blog] Blogger by Google のデザインを外部テンプレートで綺麗に

  September 25, 2022    はな

 Blogger は無料でブログが持てる Google のサービスです。ブログの作成も、記事の更新も、アドセンスの設置も、とても簡単。

なのですが、読者が目を通したくなるサイトにするのは少し難しいんですよね。


  1. Blogger の欠点 1 - テンプレートがダサイ
    • 非公式サイトには素敵なテンプレートがあるよ
    • Blogger サイトへ、外部テンプレートの設定手順
  2. Bloggerの欠点 2 - HTMLコードが汚い
    • HTMLコードの手直しを発生させないためには
    • 編集作業を外部でやることのメリット


Blogger の欠点 1 - 公式テンプレートがダサイ

Blogger 公式サイトにはテンプレートが数種類しか無く、かつ全くイケていません。

そして、なかなかモバイル対応しないな・・・まさかこのままサービス終了するつもり？と思っていたら、2019 年のアップデートで、全体的に少し使いやすくなりました。

やる気あるんだ一応・・・

ということで最近、すっかり手を抜いていた Blogger サイトに手を入れ始めました。



非公式サイトには素敵なテンプレートがあるよ

HTMLビューでちまちまカスタマイズして行けば、Blogger のデザインをきれいにできるのかなぁ・・・と思っていたら。

あるじゃない、テンプレートを集めたサイトが。"blogger template" とかでググれば出て来ます。何しろ時間と能力が無いので、使えるもんはどんどん使いたいよ。

たとえばですが、私は以下から調達しました。ここはテンプレート数も豊富だし、更新もされているし、無料で使えておすすめ。

btemplates.com

どのデザインを選ぶかは個人の好みですが、私は最低限スマホ対応がしてあって、動きがなるべく速いものが良かったので、"responsive fast" などと検索して絞り込んだ中から選びました。



Blogger サイトへ、外部テンプレートの設定手順

テンプレートをダウンロードした後は、同サイトの FAQ を参考に自サイトへインストール。FAQ の動画は今の画面と少し異なるので説明すると、以下の手順となります。

  1. Blogger 管理画面 [Theme] メニューへ行く。
  2. [CUSTOMIZE] → [backup] より、自サイトのコンテンツとテーマのバックアップを取る。
  3. テンプレートをどこか (さっきのココとか) で見つけて Download しておく。
  4. DL したフォルダを解凍しておく。
    • Chromebook での解凍方法： [Files] → [Download] の Zip ファイルを右クリック → "Open with files" を選択すると、ファイルマネージャーの下の方に解凍ファイルが現れます。
  1. Blogger 管理画面の [Theme] → [menu] → [restore] → [upload] から、解凍したフォルダ内の xml ファイルをアップ。
  2. [View blog] でデザインを確認。
  3. テンプレート編集は、[CUSTOMIZE] → [Edit HTML] より。

DL したフォルダにデザイン違いの xml ファイルが複数ある時は、あててみてデザインの好きな方を使えば OK。

ちなみに解凍せずに UP しようとしたら、「これは使えない」的なエラーが出ます。Google のサービスってたまにあるよね、こういう理由も書いていない不親切なエラーが。



Bloggerの欠点 2 - HTML コードが汚い

ところで Blogger (の Compose view) で作ったサイトは、HTML コードがとても汚くなります。

ちょっと操作が面倒なので、よく意図せぬ設定が勝手に登場して来るのですが、そんな時は HTML ソースを開いて直接直すことになります。

ソースを開くと、<div><div> ... <span><span><span> ...... と不要なコードがウジャァ〜ッと勝手に入れられており、まるで昔のホームページビルダーみたい。

見た目をきれいに整える苦労は、他のブログシステムと比較して面倒かも…。


HTMLコードの手直しを発生させないためには

この後ろ向きな作業をしないために、一つは「ビジュアル編集モードで作らない」ことです。

文章を含めた HTML コードをとにかく Blogger の外で管理し、更新の時だけ完成版を HTML編集画面に貼り付ける。コード修正も楽になります。


編集作業を外部でやることのメリット

文章の管理をサイト外でやることで、

「書いた文章が急に消えた！」

という悲劇も起こりにくくなります。

Blogger や WordPress は、入力したものを自動保存してくれるけど、バックアップは手動なので、オリジナルの文章はどこかに取っておくことをおすすめします。

  

  No Comments

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)