Bloggerのカスタマイズで参考にさせていただいたページ

時々追加してます。参考にさせていただいた皆様ありがとうございます。

あれどうやってやったんだっけ？って忘れてしまった未来の自分のためと、同じような情報を探している方々のためにメモしておきます。

ソースコードの表示（code-prettify）

• 技術ブログの「ソースコード」表示を効果的にカスタマイズする方法 | maesblog
  https://mae.chab.in/archives/2963

• pre記法にスクロールバーを表示させました - 部屋を掃除したら漫画が沢山出てきたので書く日記
  http://bata64.hatenablog.jp/entry/20101109/1289274993

目次の表示

• [Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）https://www.sukerou.com/2018/10/blogger-table-of-contents-javascript.html

Google検索結果に表示される記事タイトル形式のカスタマイズ

• Blogger記事のタイトル表示を変更する方法 | Asterlist
  https://blog.asterlist.com/2012/11/0801.html

リンクに target="blank" を付加する方法
Bloggerのエディタが使いにくいので、Markdownで大部分を書いてからHTMLに変換してコピペしてるので…。

• markdown記法でリンクをtarget="_blank"にする - エンジニアをリングする
  http://yoshiko.hatenablog.jp/entry/2014/02/27/markdown%E8%A8%98%E6%B3%95%E3%81%A7%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%92target%3D%22_blank%22%E3%81%AB%E3%81%99%E3%82%8B

サイトマップ関連
カスタマイズではないですが、ブログを始めるにあたり全然知らなかったので参考になりました。

• BloggerのサイトマップをSearch Consoleに送信する方法 | Blogger101@ブロギングライフ
  https://blogger101.blogging-life.com/2018/01/blogger-submit-sitemap-to-search-console.html

• Blogger/Googleサイトのサイトマップ送信 - Google Search Consoleの使い方
  https://www.howtonote.jp/google-search-console/sitemap/index7.html

Bloggerテンプレートのカスタマイズメモ: ラベル選択時の表示の改善

ラベルを選んだときの「ラベル○○の投稿を表示しています。」の表示がいけてない気がしたのでカスタマイズ。

ここです。

• 角丸に
• ボーダーの色をちょっと薄く

下記のCSSを足しました。

.status-msg-border{
  border-radius: 5px;
  border: 1px solid #555;
}

.status-msg-bg{
  border-radius: 5px;
}

.status-msg-border という div の上に .status-msg-bg が描画されているので、 .status-msg-border だけに border-radius を設定すると角が薄く表示されてしまう。
→とりあえず両方に同じ値の border-radius を設定して解決。
（もっとスマートな方法ありそうですが…）

こんな感じになりました。