TAROGの番人 タロウです
このイントロの名乗りをどのように固定しようか迷っています。なんかいいアイデアないかいな。サムネイルは地獄の接待6連戦最終日に食べた大東園の焼肉です。うまかったけどつぶれて全部吐いた。ほんと罰当たり。
さて今回は、ここ最近TAROGにほどこしたカスタマイズをまとめようと思います。何をやったかの備忘録です。特に頑張ったぞ、という点はSEOに重要な効果を発揮するという「パンくずリスト」。
ではどうぞ。
ブログの見た目と階層性を改善したい
要は
Home> information> about
みたいなやつですね。
HTML手打ちはしたことはあっても某HIROSHI・ABEの公式サイト並みのサイトしか作ったことのない僕には、なかなか骨の折れる作業ですが、先々はCSSくらいは書けるようになりたいぞということで、いろんな方のブログを見ながら変更しました。
今回参考にしたのは下記の海外ブログサイト。
簡単な英語だったので意外にすんなり
何故英語のブログから頑張ったのか。
単純にそっちのほうが、日本語ブログのまねっこにならなさそうだから。デス！
ちなみに英語でパンくずはBreadcrumbsというそうです。
コードを入れ替えたら意外に簡単にできた
コードをいじる前に現在のファームのBUを取ることは忘れずに。結構失敗してウアーン！ってなります。
まずは
<b:include data='top' name='status-message'/>
を探してそれを
<b:include data='posts' name='breadcrumb'/>
に差し替えます。
次に
<b:includable id='main' var='top'>
を検索したら下記のコードと入れ替えます。
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
» ラベル無し
</b:if>
» 本記事
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » すべての記事
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » <data:blog.pageName/> カテゴリ内の記事
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='comment-form' var='top'>んで、これを導入するとこんな感じです。
おお、おお、いいんじゃない？
今回、コードを本文中に表記するにあたって下記のhighlight.jsという項目を参考にしました。BloggerのHTML編集でコードぶち込んで、コードの前後を<pre><code>~</pre></code>で囲むだけ。
楽ちん。
とりあえず、Bloggerでラベルを入れると、一番最後に登録されたラベルにタグ付けされるようなコードのようです。先々検討の余地ありかな。
記事分類・ラベルの表示をシンプルに変更
記事の分類をシンプルにわかりやすくしました。
合わせてブログ右部のカテゴリ分けも表示を変更。より関連するジャンルを見つけやすい形に。
大分類を作りたかったけど今の僕にはちょっと理解できなかったので、また今度やろう。
結果こんな感じです。
これに合わせてカテゴリ内容も精査しました。
どうぞHOMEをご覧ください。
タグの一括編集について
それに合わせていったんすべてのタグを消したりする一括編集が必要だったので調べたところ、ここがわかりやすかったのでご参考までに。（消えてました 2020年3月15日）
ざっくりに書くと、管理画面から「投稿」を開き、表示件数を100件にしたうえで投稿記事左のチェックボックスにチェックします。
んで、しおりマークで「すべての記事に該当タグをつける」「すべての記事から該当タグを消す」という作業を繰り返すだけで100件単位でタグをすべて消していけるということです。
細かくやればもっと繊細な一括編集も可能。以上。やったら簡単だけど結局時間はかかる。でも一つ一つよりははるかに楽。
※ブログ自体の記事数が100記事超えたら100以上の選択肢もでるのかもしれないですね
最終更新日を表示する
参考はこちら
同じ画像だけど、うん。かっこいいやん。
まとめ
一つ一つ改善しながら、いろんなことを勉強できるのでブログは面白いなあと思います。結局調べものだけに熱中してしまってアウトプット（ブログアップ）がおろそかになることがあるのが難点ですが。
今後も、ブラッシュアップとやったことはきっちりまとめておきたい。
というかまとめないといけないし、絶対まとめるのをお勧めします。
万が一、戻したいとかバックアップがぶっ飛んでもまた作り直せるから。。。
では
↓これは前回のまとめ
あきらめてWordpressに移行すると超楽よ