【Blogger】ぐぐりらにっき、リニューアルしました-ぐぐりらにっき

chromeのコンソールを見てみると`marked.js`が読み込まれていないようだったので、いろいろいじっていたのですが、この時に誤ってBloggerのテーマを変更してしまいました。

以下の記事にも書いてあるのですが、Bloggerの仕様ではテーマをバックアップしてから変更しないと復元できないのです。しかもテーマを変更する時には何も警告がなくすぐに変更されてしまうため、陥りやすい罠と言えます。

[ちょっと待って！Bloggerでの取り返しのつかない3つのこと。 ブロガーロード(BLOGGER ROAD)](https://bloggerpathwaynetlife.blogspot.com/2018/02/Blogger-never-to-return.html)

この罠をまんまと踏み抜いてしまい、`marked.js`がロードできていないどころかこれまでに行なったカスタマイズが全て消えてしまいました。

## marked.jsの対応

まずmarkdownがHTMLに変換されなくなっていた件は、`marked.js`がロードできていないことが原因でした。

以前[こちらの記事](https://www.smartbowwow.com/2019/02/blogger.html)で参考にして書いた時は、

```
<script src='https://rawgithub.com/chjj/marked/master/lib/marked.js'/>
<script>

var mdEls = document.querySelectorAll('.markdown');
for(var i in mdEls){
    var mdEl = mdEls[i];
    var converted = document.createElement('div');
    converted.innerHTML = marked(mdEl.value);
    mdEl.parentNode.replaceChild(converted, mdEl);
}
</script>
```
としていましたが、変更されたようで、

```
<script src='https://cdn.jsdelivr.net/npm/marked/marked.min.js'/>
  <script>

var mdEls = document.querySelectorAll('.markdown');
    for(var i in mdEls){
        var mdEl = mdEls[i];
        var converted = document.createElement('div');
        converted.innerHTML = marked.parse(mdEl.value);
        mdEl.parentNode.replaceChild(converted, mdEl);
    }
    </script>
```

と変更すると解決しました。

結局GitHubのリポジトリを見にいき、Usageにあるコードを参考にしました。
いつの間にか変わっていたようです。困ったらオリジナルを見に行きましょう。

[GitHub - markedjs/marked: A markdown parser and compiler. Built for speed.](https://github.com/markedjs/marked)

これでmarkdown問題は解決です。

テーマをうっかり変えてなければここで終了なんですが、テーマも変えてしまっているので、せっかくなので人気のあるテーマに変更します。

## テーマ変更

調べてみたところ、QooQというテーマがBloggerでは人気のようです。

[blogger日本語テンプレート「QooQ」ダウンロードページ – くうく堂](https://qooq.dododori.com/blogger/qooq-download/)

とりあえず適用してみるか...と軽い気持ちでダウンロードして使ってみたのですが、これがかなり綺麗でよかったです！

前のテーマは割と自分でCSSを当てて頑張ってデザインしていたのですが、今回適用したQooQはほぼデフォルトで満足のいくデザインになっていました。

今回のリニューアルに伴って、ちょうど関連記事のコンポーネントとして使っていたMilliardが提供終了していたので本ブログでも対応したのですが、このQooQのテーマにはデフォルトで関連記事のコンポーネントも入っているようで、渡りに船といった感じでした。

[【サービス終了】Bloggerの関連記事にMilliard!!カスタマイズ方法](https://soundorbis.com/bloggermilliard-2/)

CSSの当て方も、以前使っていたテーマはHTMLのCSSのパートを自分で探してきて書き込むという結構面倒な方法でCSSを書く必要があったのですが、QooQではそもそもテーマカラーなどの基本的な色はCSSを書かなくてもUIからぽちぽちするだけで設定できますし、CSSが必要な細かい修正がしたい時は専用の枠があるので、そこに書けば良いだけでとても楽です。

自分はブランドカラーをぐぐりらのアイコンに近い色に変えて、CSSの微調整は表や引用部分のデザインにだけ少し手を加えました。

Bloggerのテーマで何使おうか迷ったらQooQはおすすめです。

## 技術ブログに必要なカスタマイズ

その他、技術ブログに必要なカスタマイズをいくつかしました。

* 数式 : katex
* シンタックスハイライト : highlight.js

このあたりは以前書いた記事と変わらないので、そちらを参考にしていただければと思います。

[Bloggerで技術ブログを書くためのカスタマイズ-ぐぐりらにっき](https://www.smartbowwow.com/2019/02/blogger.html)

## 終わりに

リニューアルを終えて、とても見やすくなりました。
テーマのところで触れませんでしたが、レスポンシブ対応や描画の高速化もされていて、使いやすさだけでなく見やすさも満足です。

しっかりと比較はしていませんが、記事の横幅が広くなった気もします。

メンテナンスを行なっていたことが原因でうっかり環境を壊してしまい、どうしようかと思いましたが、結果的に以前よりも良いブログに改善することができたので、怪我の功名といった感じです。

今後も記事を頑張って書いていきますので、よろしくお願いいたします。

【Blogger】ぐぐりらにっき、リニューアルしました

0 件のコメント:

コメントを投稿

このブログを検索

POPULAR POSTS

SPONSORED LINK

RECENT POSTS

TWEETS

ARCHIVES

LABEL

CONTACT