javaScriptでBloggerにページネーションを実装する

Bloggerにページネーション機能をつけたい。ページネーションとは記事下部にあって、次の記事、前の記事へのリンクを紹介するというブログパーツ。Bloggerのデフォルトのページネーション機能には、以下の画像のように、次の記事・前の記事のリンクのみで記事のタイトルを表示することはできない。

ページネーションで記事タイトルを取得するようにしたい。当記事では、ざっくりログさまの情報120%全面参考にさせていただいています。ざっくりログさま本当にありがとうございます。Display Post Titles in Blogger Page Navigation



<b:> Bloggerのネイティブ文法では、記事タイトルを取得できない

olderPageUrl: 過去の投稿がある場合、その投稿の URL。ページの種類に応じて表示されます(このリンクはすべてのページにあるとは限りません)。
olderPageTitle: 過去の投稿ページへのリンクのタイトル。
newerPageUrl: 新しい投稿がある場合、その投稿の URL。
newerPageTitle: 新しい投稿ページへのリンクのタイトル。
参考元URL:レイアウト用のデータタグ - Blogger ヘルプ

公式ヘルプを見ると、Bloggerの文法には、
  • olderPageTitle
  • newerPageTitle
といったちゃんとこのようなそれっぽい文法がある



よし!と思ってテーマのHTMLに記載するとこの通り

次の記事、前の記事として表示してくれない。なんだよもう。olderPageTitle = 前の記事、newerPageTitle = 次の記事 ということ。


ちょっとまぎらわしい。記事URLは取得できているので、タイトルを取得するJSコードを書く必要があります。




アクセスカウントされないページネーションコード

ざっくりログさまが上記リンク先の記事で問題があると言っているようにJSでタイトルを取得すると、Bloggerのアクセスカウンターに計上され、次・前のタイトルを取得する度に1PVとしてカウントされてしまいます。

アクセス数を水増ししたいならJSのコードでもいいけどね、そんな不正確なPVデータなんて意味ないしね。アクセスにカウントされないようにするために、ざっくりログさまが書いているようなBloggerAPIを利用したjsonファイルを利用するのがとっても良い方法だと思われます。ざっくりログさま本当にありがとうございます。
<script type='text/javascript'>
//<![CDATA[
// except root, labels, search and mobile pages
if (/.+\.html(\?m=0)?$/.test(location.href)) {
  var olderLink = document.getElementById('Blog1_blog-pager-older-link');
  if (olderLink) {
    getPageTitle(olderLink, setOlderPageTitle);
    function setOlderPageTitle(data){
      setPageTitle(data, olderLink, '', ' &#187;')
    };
  }
  var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
  if (newerLink) {
    getPageTitle(newerLink, setNewerPageTitle);
    function setNewerPageTitle(data){
      setPageTitle(data, newerLink, '&#171; ', '')
    };
  }
  // set the page title from feed data
  function setPageTitle(data, pageLink, prefix, suffix) {
    if (data.feed.entry) {
      if (data.feed.entry.length > 0) {
        var title = data.feed.entry[0].title.$t;
      }
    }
    if (title) {
      pageLink.innerHTML = prefix + title + suffix;
    }
  }
  // get entry data from the feed
  function getPageTitle(pageLink, callback) {
      var pathname = pageLink.getAttribute('href').replace(location.protocol + '//' + location.hostname, '');
      var script = document.createElement('script');
      script.src = '/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&path='+pathname+'&callback='+callback.name+'';
      document.body.appendChild(script);
  }
}
//]]>
</script>


コード(自分なり)解説

人様のコードをまるまる転載しておいて解説もクソもないんだけど、自分なりに注釈を入れてみた。
 <script type='text/javascript'>
if (/.+\.html(\?m=0)?$/.test(location.href)) {
  // ※1location.hrefの末尾にhtmlかhtml?m=0か調べる。末尾がhtmlかチェックする。

  var olderLink = document.getElementById('Blog1_blog-pager-older-link');
  if (olderLink) {  // olderLinkが存在するなら。ショートハンド記法
    getPageTitle(olderLink, setOlderPageTitle);
    //※2関数getPageTitleへ第一引数olderLink, 第2引数へ定義した関数setOlderPageTitleを渡す。

    function (data){
      // getPageTitle() で、feed.jsonを渡される。dataへ格納。
      setPageTitle(data, olderLink, '', ' &#187;') // ^#187; = »
    };
  }

  var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
  if (newerLink) {
    // newerLinkが存在するなら
    getPageTitle(newerLink, setNewerPageTitle);
    //関数getPageTitleへ、第一引数newerLink, 第2引数へ定義した関数setNewerPageTitleを渡す。

    function setNewerPageTitle(data){
      // getPageTitle() で、feed.jsonを渡される。dataへ格納。
      setPageTitle(data, newerLink, '&#171; ', '')
    };
  }
  // set the page title from feed data // dataはjsonファイル。$tは添字の名前。
  function setPageTitle(data, pageLink, prefix, suffix) {
    if (data.feed.entry) {
      if (data.feed.entry.length > 0) {
        var title = data.feed.entry[0].title.$t;
      // jsonファイルの項目、feedの添字entry配列[0]のtitle.$tを取得して、変数titleへ格納
      }
    }
    if (title) {
      // 変数titleが存在するなら、
      pageLink.innerHTML = prefix + title + suffix;
      // suffixは "»" 。 pageLink.innerHTML = ''記事タイトル » となる。
    }
  }
  // get entry data from the feed
  function getPageTitle(pageLink, callback) {
      var pathname = pageLink.getAttribute('href').replace(location.protocol + '//' + location.hostname, '');
      // location.protocol = https: location.hostname = あなたのブログ.blogspot.com
      var script = document.createElement('script');
      script.src = '/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&path='+pathname+'&callback='+callback.name+'';
      // ※3 記事pathnameで、その記事のjsonファイルを取得することができる。最後の&callback=あとの関数にjsonデータが渡されることになる。
      document.body.appendChild(script);
  }
}
//]]>
</script>

※1 Bloggerは、URLに注目すると現在表示している記事の種類を掴める
URLの末尾が.html: 個別記事、pageTypeはItem
URLに label を含む: ラベル一覧ページ pageTypeはIndex
URLに search を含む: 検索結果表示ページ pageTypeはIndex
URLに 2で始まる4桁の数字を含む(ex: 2020): アーカイブページ pageTypeはarchive


※2
 getPageTitle(olderLink, setOlderPageTitle)の、
  • 第一引数:olderLinkはdomオブジェクト(#Blog1_blog-pager-older-link)
  • 第二引数: 関数setOlderPageTitle
これわかりづらかったのが第二引数だけど、関数をsetPageTitleへ渡している。渡した先のgetPageTitleでは、GoogleBloggerAPIから取得したfeed.jsonデータを受け取るコルバック関数として指定される処理になっている。つまり、

「setOlderPageTitleにjsonを渡してね!だから、jsonを受けてほしい関数を渡すからさ!」
という感じ


※3
  • script.src = '/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&path='+pathname+'&callback='+callback.name+'';
で、なんで<script>のsrc属性を記述しているかというと、BloggerFeedAPIを取得するためには<script>をhtmlに作成せよと書いてあるから。
Blogger Data APIが提供するJSON出力形式を使用して、Bloggerベータでホストされているブログからの最近の投稿のリストを表示する方法を示しています。これにより、ブログのパブリックフィードをクエリして、結果のエントリをJSONオブジェクトとして返すことができます。新しいJSONフィードを使用するには、src値が次のスクリプト要素を作成します 
https://blogname.blogspot.com/feeds/posts/default?alt=json-in-script&callback=myFunc
どこblognameあなたが取得したいブログで、 myFuncJSONオブジェクトが渡されるコールバック関数の名前です。<Google翻訳>
参考URL: Simple example of retrieving JSON feeds from Blogger Data API
この引用先の情報ってBloggerAPIのものではなくて、GoogleデータAPIのものなんだよね。なんで、BloggerAPIのセクションにない情報なのだろうか(こんらん)。

  • '/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&path='+pathname+'&callback='+callback.name+'';
は、以下と同義。
  • https://www.themetrial.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&path=/2020/05/blogger.html =

つまり、
https://www.themetrial.blogspot.com + /feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&path=/2020/05/blogger.html 
 ということ。最後のcallback関数へjsonデータを渡す。ここでjsonファイルを受け取るデータを、引数で渡された関数へ渡している。
https://www.themetrial.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&path=/2020/05/blogger.html&callback=callback.name (=関数setOlderPageTitle) ,
callback関数= setOlderPageTitleや setNewerPageTitleとなる。だからjsonを受け取れる。



受け取っているJsonの内容はどうなっているの?

末尾の&callback=callback.nameを消去して、BloggerのURLの部分(以下太字)を調節以下のように調節し、URLを打ち込むとJsonファイルを受け取ることができる。
https://blogname.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=1&redirect=false&path=特定記事のパス.html 

私の場合、一つ前の記事の場合だと以下のようにするとjsonデータをブラウザに表示することができる
https://www.themetrial.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&path=/2020/05/blogger.html

当該部分はこんな感じのデータになる。
"feed": {
       "entry": [
               "title": {
                      "type": "text",
         "$t": "Blogger文法<b:loop>でラベルを呼び出す処理はこれを読めばわかる"
        },
         ]
}

 jsonデータを受け取り、当該箇所の値を取得して、関数に渡せているのがわかりました。

Blogger文法<b:loop>でラベルを呼び出す処理はこれを読めばわかる

Bloggerのラベルを<b:loop>で呼び出す処理ってどんなだろう。なんでloop文なのだろうか。以下では、メインのウィジェットである、投稿ウィジェットとラベルウィジェットのloopの処理の違いをまとめてみました。大きな違いは、なんのデータリストを参照しているか?という点です。


main投稿ウィジェットにおけるloop

    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
post.label = 記事それぞれのラベル、てかラベルリスト。例えば、この記事のラベルリストはBloggerHowToOS9_BloggerTheme作成記だから、<b:loop>で呼び出そうとしているデータリストの中身はこの2つのはず。もう一度コード。


    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
以下の2つの作業をおこなうことになる。
  1. label = ' BloggerHowTo'  ラベルURL、ラベル名を付与した<a>を生成
  2. label = 'OS9_BloggerTheme作成記 ' ラベルURL,ラベル名を付与<a>を生成
つまり、メイン投稿ウィジェットの<b:loop>では、記事に設定されているラベル数分びループ処理を行い、ラベルのURLとラベルのタイトルを<a>に格納して、htmlに記述する。ということをやっていることになる。data:label.isLastは、この例で言えば2のOS9_BloggerTheme作成記のときにtrueになります。isLastは、リストの最後のラベルを対象にした条件分岐をできるようにする構文です。



Labelウィジェットにおけるloop

main投稿ウィジェットでは、その記事に設定されているラベル(リスト)を<b:loop>で呼び出していましたが、対してLabelウィジェットでは、ブログ全体のラベルリストを呼び出します。つまり、全てのラベルを呼び出して、htmlへ記述する処理を行っています。
<ul>
<b:loop values='data:labels' var='label'> // data:labels = ブログ全体のラベルリスト
  <li>
    <a expr:href='data:label.url'><data:label.name/></a>
  </li>
</b:loop>
</ul>

やっていることは、ブログ全体のラベルリストを対象に、それぞれラベルのURL、タイトルを取得して<a>に格納、htmlに記述する。さっきのとの違いは、対象にしているリストが異なっていること。この、HTMLタグとBlogger独自タグが混在しているのってちょっと面白いですよね。

順番的には、1<b>Blogger文法タグ, 2HTMLタグの順番に処理されるようです。この短いコードでブログすべてのラベルを取得することができるのに驚き。こんなシンプルなのね。

Blogger ClassicMacOS9のテーマへ、続きを読むボタンを追加する短いコード

ClassicMacOS8.5~9くらいのテーマを自作している当ブログ。Topページやラベル、アーカイブページなどの一覧ページにて、個別記事のすべて本文が表示されてスクロールが大量に発生するので、つづきを読むページを設置することにしました。



続きを読む ボタンを<more>やjsを使用しないで表示する

こちらのコードを適当なところ(後述)へコピペください。
<b:if cond='data:blog.pageType == &quot;index&quot;  or data:blog.pageType == &quot;archive&quot;'>
  <span class='pageMore'>
    <!-- page more in index pages -->
    <style>
    .entry .post-body{
      height: 180px;
      overflow: hidden;
      }
    </style>
    <a expr:href='data:post.url'>続きをよむ</a>
  </span>
</b:if>     


とっても短いコードになりますがこのように機能しています。コードでやっていることは以下です。
  • トップページ、ラベルページ、アーカイブ、検索結果などのpageType = indexのページにて、
  • 記事要素の高さを180pxにして溢れたものを非表示にし、
  • <a href="記事URL">続きを読む</a>を追加

他の方が作成したBloggerThemeを色々眺めていて面白いと思ったのが、<b:if cond='data:blog.pageType == "index"'>(もし現在表示しているページがindexなら)でpageTypeを判定したあとに<style>を記述して、個別記事のみで適用させるcssを指定する方法。真似させていただきました。


CSSのセレクタを間違うと機能しないかも・・・・

<style>
    .entry .post-body{
      height: 180px;
      overflow: hidden;
 }
</style>
.post-bodyが私のテーマでは投稿本文になっているので、ちょうどよく記事を途中で端折ってくれています。もしお使いのテーマによっては本文のクラスが異なることがあるかもなので適宜読み替えください。おそらくですが、.post-bodyも.post-footerも、どのテーマにも存在すると思われます。




テンプレートのどこにコピペすればいいのか??

 上記コードはキチンと動作するのですがコピペする位置が難しい。私は<div class='post-footer'> 〜 </div>に上記コードを設置してみました。


「<a>続きを読む</a>タグが、どこにあれば適切か?」
を考えて.post-footerに。ブチャラティ厳しすぎ。htmlエディタを開き、エディタ内にフォーカスがある状態でctrl + f 。検索小窓にclass='post-footer'と打ち込めば当該箇所までジャンプ。御コピペ納くださいませ。さいごまでおよみいただきありがとうございました。

スプライト画像にしてしまおう


Bloggerの記事タイトルやURLなどをJavaScriptで取得する方法

ブロガーのThemeを作っていると、


「ブログのタイトルを取得したい!」とか
「現在表示しているページが、個別記事なのかTopページなのかJSで取得したい!」
とかあったりしませんか?そSでBloggerの様々情報を取得して変数に格納する短いコードを記載します。どうぞご活用ください。



情報を取得するJavascriptコード

このコードをテンプレート中の<script>に記載すれば、それぞれ変数で定義した値を取得可能に。
<script type="text/javascript">
var blogTitle = '<data:blog.title/>';
var blogUrl = '<data:blog.homepageUrl/>';
var pageTitle = '<data:blog.pageTitle/>';
var url = location.href;
var blogType = '<data:blog.pageType/>';
</script>

それぞれ以下のようになっています。
  • ブログタイトル: <data:blog.title/>
  • ブログTopページのURL:<data:blog.homepageUrl/>
  • 表示しているページのURL:<data:blog.homepageUrl/>
  • 表示しているページのタイトル:<data:blog.pageTitle/>
  • 表示しているページの種類:<data:blog.pageType/>
なので、現在表示しているページの種類を知りたくば変数blogTypeの値を参照すればOKなわけです。ページの種類にはレイアウト用のデータタグ - Blogger ヘルプよれば、
「item」「file」「index」の3種類があるとされていますが、他にも加えて「archive」「static_page」が存在します。すべての種類は
  • item: 個別記事ページ
  • file: 不明?
  • archive: アーカイブ
  • index: ラベル、アーカイブ、トップページ
  • static_page: ページで作成した、ページ
の5種類です。



グローバルに参照できるデータ

<script>部にBloggerのdataタグが使用できるってちょっと以外ですよね。ミックスした文法に違和感というか。データタグって<b:>記法で参照できるものなんだなって勝手に解釈してた。


Blogger公式ヘルプの情報をみると
グローバルに利用可能なデータ この情報は、特定のウィジェットでのみ使用できるデータとは異なり、任意の場所で使用できます
レイアウト用のデータタグ - Blogger ヘルプ
任意の場所で使用できますとなっている。任意とは・・・・・??








画像引用元:ジョジョ5部
任意の場所・・・・・ってテンプレートのウィジェットの種類を選ばないでOK!ってことだと思ってたんだよ。。。。テンプレート=htmlのどこでも利用できるデータなのね。だからscriptの変数に混ぜたり、expr:してデータを取得したりとか結構できるみたいなんですね。これは奥深いわ。てか覚えられねぇよなぁ。なんとか体系的に語っている教科書的な情報はないものかなぁ・・・

Bloggerの画像がにじむ・荒くなる問題を解決する方法。


こんにちは! もし、前ブログよりリダイレクトしてこられた方はお手数おかけしてすみません。Blogger.comに画像を挿入すると画質が悪くなってがっかりすることはありませんか? その原因や対策を記事にしました。記事の後ろの方でJavaScriptで自動化できるコードを載せているのでぜひ最後までご覧ください





Blogger.comに投稿すると画像が粗くなる問題とは

以下2枚の画像をご覧ください。どちらも同一の画像です(別々にアップロードしたものではありません)

上の画像は画質が悪いですよね? 





画質悪い
画質良い



画質に差があります。横に並べてみるとわかりやすい
画像左: 粗い 画像右: シャープ
同じ画像のはずですが、左の方がジャギーかかって不鮮明になっています。これがBlogger.comの本文の画像が荒くなる問題。本文画像の画質が悪くなって不鮮明になってしまうのです。GooglePhotoでは問題ないのに。








Blogger.comの本文画像の鮮明さとGoogle+の設定は関係ない

"Google+と関連付けられているGooglePhotoの設定を変えることで解決した"
この原因をググってみると上記がヒットするのですがGoogle+の設定は関係ありません。Google+の設定項目自体がなくなっているはず。Blogger.comではGooglePhotoへアップロードした画像がBloggerの本文に挿入されており、GooglePhotoは既にGoogle+から切り離されたサービスとなっています。公式フォーラムにも、Google+から切り離された旨が書かれています。
Google Photos is now a separate product from Google+ Photos, which no longer exists as such, and it does no longer provide the auto enhance setting.
引用元: Disable Auto Enhance for Photos - Google プロダクト フォーラム by Paolo Amoroso


Blogger本文の画像不鮮明問題を解決する方法を海外サイトで見つけました
The s320 is your resolution and it determines the quality depending on the size of the image. Notice how the link has a value of s1600, so when you click on the image it appears bigger and in better quality. An image with the width of 320px will look fine with s320. An image with the width of 800px will look awful with s320.

How to change the quality
The main options are s320, s640 and s1600 which is the highest quality. You can change that part of the code to be s1600 so it’s

or you can remove s1600/ to set it to original so it’s
引用元: How to fix blurry images on Blogger • XOmisse 






ということで、以下具体的手順です








解決方法はhtmlソースに修正を加えること

記事のimgタグのsrcを修正することで解決します。例えば、<img src="/url/any/photo/s320/hoge.jpg"> だったら、s320をs1600に書き変えることで解決します。

<img src="/url/any/photo/s320/hoge.jpg>  これを
<img src="/url/any/photo/s1600/hoge.jpg> こうする


S3桁数字
の部分の数字を大きくすればOK。記事編集ページで、編集モードをhtmlにして書き換えを行えばいいわけです。画像がくっきりしたものになるはず。
これ、一つ一つ手打ちで修正していくのはめんどくさいし辛いので、拡張機能を使ったもっと便利なやり方を紹介します。そして記事最後には、全ての投稿で自動で上記処理を行うJavaScriptコードを記載してありますのでご活用ください







文字列置換の拡張機能でhtmlソースを一括変換する

FindRというChromeの拡張機能を使って、imgタグのsrc属性を/s320から/s1600 へ一括変換可能です。

一括置換処理ができる機能があれば拡張機能・アプリはもちろんなんでもOK。ブラウザ画面を保ったまま操作を完了したいのでWindowsやMac、Linuxネイティブなアプリではなく、私は拡張機能をおすすめします





1,記事を作成する



2,htmlに切り替える


3,FindRで、"/s320" を "/s1600" へ置換

  1. Input Fieldsにチェックをいれる
  2. Find に "/s320" を入力
  3. Replace に "/s1600" を入力
  4. ReplaceAllボタンを押す。

1記事中のすべて画像を鮮明化できたはず。







ここまでの作業をJavaScriptで自動化して楽をしたい!

<script>
// 投稿記事、GooglePhoto画像の鮮明化
function imgRefiner(){
var url = location.href;
var postimgs = document.querySelectorAll('.post-body div.separator img, .post-body tr img');

postimgs.forEach(function(img){
img.setAttribute('src', img.src.replace(/\/s.+\//, '/s1600/'));
});
}

if ( url.lastIndexOf('.html') > 0 ){
imgRefiner();
} </script>
このコードをBloggerのテンプレートのどこかにコピペ。場所は</body>直上当たりが定番でしょうか。.post-body内のimgタグを集めて、それぞれすべてimgタブの属性値src値の変更を自動で行っています。ご使用のテーマによっては、メイン投稿記事のクラス名が上記コードのものと異なっているかもしれません。上記コードの場合だと投稿記事のクラス名は.post-bodyです。

その場合は
.post-body div.separator img, .post-body tr img
部分のセレクタを適宜調整してください。A , Bで複数のセレクタを指定しています。








記事まとめ

Chrome拡張機能とjavascriptの二通りを紹介しました。処理に違いがあるのでより良い方をご選択ください
  • 拡張機能を使用: 記事公開前にhtmlへ修正を加えている。閲覧者はページを表示する
  • javascriptで記述: 記事公開後 閲覧者のブラウザでスクリプトを実行して画像を表示する
JavaScriptの方は記事をロードしてから画像の変換処理というプロセスが挟まれるので、閲覧のもたつきにつながる可能性があります。記事作成者としては楽ができるが、ユーザーエクスペリエンスへは直結しないかもですね。Bloggerの仕様はデフォルトでもっと簡単になってほしい、とも思いますがJavascriptやjqueryでどんどん便利にできるので改善のしがいがありますね。最後までお読みいただきありがとうございました

Bloggerテーマの作り方、必須初期設定などまとめ

画像引用元: https://www.blogger.com/about/favicon/apple-touch-icon-180x180.png

ClassicMacOS9のplatinumなBloggerテーマを作成している当ブログ。私流のブロガーテーマ作成方法を記事にしました。



Blogger公式情報

困ったときや、Blogger記法の情報を知りたいときは上記を参照。歯を食いしばって熟読。



元となるBlogerテーマを探す

私はClassicMacOSの外観がすごい好きだったので、BloggerのこちらのテーマRetroMacThemeというを見つけてこれを元にテーマカスタマイズから始めました。リンク先のレトロマックThemeも、もとはWordPressのテーマをBlogger向けへエクスポートしたもの。

このように自分が作りたいテーマのイメージに近いテンプレを探して手を入れていきます。Blogger TemplatesでBloggerのテーマを探せます。Bloggerの初期テーマもかなりシャレオツなのでこの辺をいじるのがいいかもですね。



ブログパーツの作り方

例えば、目次とかメニューとかサイドバーのアクセサリっぽいやつとかは、プロトタイプになるものをWeb Makerを使用し個別先に作る。
このスクショでは、記事の目次パーツをSheepShaverのスクショを並べて見ながら作成している。WebMakerはWYSIWYGなWebエディタで、html/css/jsを記述したそばから反映結果を表示してくれる。素人のトライアンドエラーでもストレス無く?作業できるのが魅力なcodepenのオフライン版のようなChrome拡張機能&アプリ


htmlエディタへコピペ

WebMakerである程度満足いくまで完成したらBloggerのhtmlエディタへコピペ。これ特にめんどくさいのは、cssは<b:skin></b:skin>内に、JSは<script></script>に記述する必要があり毎度大量のスクロールで編集箇所へ移動しないといけないこと

cssはhtml最上部、scriptはhtml最下部なので、

「Webmakerではleft: 10pxでよかったけど、Bloggerで表示させたらleft: 20pxのほうがいいわ」
とか
「セレクタの記述が間違っていたのでJS書き直さなきゃ」
なんて微調整がしんどい。

更新ボタンを押したときに強制的にエディタ上部に移動させられて編集地点を見失うのはなんとか改善したかったので、HTMLエディタ下部のツールバーを上部へ持ってきて、ウィジェット間ジャンプでショートカットするようにしています。
ツールバーを上部へ持ってくる方法はこちらの記事をご覧ください。BloggerThemeを自作する: BloggerのHTMLエディタが使いづらいのを工夫する





テーマの微調整はChromeDevToolを使用

画像引用元: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2zzdCQ7se3ciMQv0kCyVuQI0TffIMJrT3oFBELR7BdO3RkcaC_CTLbjmVYZ6_nAbRM9s7VykX4AEO2B2VPVmF9DwKyGydgMPti_GGLJo4KrRXuX8CnvqAvVbZ6l2c6qJn_GXhsbWqA_h7/s1600-r/logo_chromium.png

Bloggerのhtmlエディタへのデプロイが完了し、実際にChromeでページを表示してみると

「もっと記事のwidthを増やしたい!」
など改善点や、他見栄えを良くするアイディアなどがいろいろ出てくると思います。そういうときは、右クリック>検証かctrl shift i でChromeDevtoolを使用する。ElementタブでCssを修正すると、即時に結果が反映される。詳しい使用法はこちらのブログさまをご覧ください 初心者向け!Chromeの検証機能(デベロッパーツール)の使い方

死ぬほどわかりやすいです。

注意点はページをリロードしたときにDevToolを閉じておくこと。キャッシュが残っていると変更点が正しく表示されません。また、修正箇所はリロードすると消えてしまい、

「差分だけリストアップしてくれないかな」
とかできないみたいなので、そういうときはCrome拡張機能のLive editor for CSS, Less & Sass - Magic CSS - Chrome ウェブストアを使用しています。
ChromeDevToolかこの拡張機能かは使用場面によって使いやすいほうを選択。





自身のアクセスをカウントしないようにする

Bloggerは、設定で自アクセスをカウントしないに🗹チェックをいれても、自アクセスを他所からアクセスがあったとカウントする。

「えぇ!?ブログを開設して間もないのに、もうこんなにアクセスが来てるの!?」
と驚かれるかもしれないが







模写引用元: ジョジョ4部
これは世界グローバルサービスなBloggerの仕様のようで、chromeのcookiesを以下のように手打ちで設定する必要があるそうな。めんどくさいけど以下のようにする。ChromeDevTool の Consoleで以下を実行。
document.cookie = "_ns=2; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
参考URL: Blogger 「自分のビューを追跡しない」が機能しない(保存されない)原因と対策


素材となるpngやsvgイメージを作成する

ドローエディタは、最近グラデーションメッシュが使用できるようになったオープンソースなInkscapeが使いやすいんだけど、当方環境はChromeOS/ChromiumOSなのでChromeネイティブアプリなSVGBoxを使用する。SVGBoxは、ChromeOSファミリならライセンスフリーのはず。



記事まとめ