BloggerをNote風にしてみた

Bloggerを公開していくにあたり、標準的なTemplateを利用していましたが、使い勝手が悪いので、premiumbloggertemplates.com のTemplateを使うことにしました。Note風の構成にするのを目標として、Templateの導入、目次の自動生成、見出しやBOXデザイン、ソースコード引用、Webサイト引用を行いました。本記事は、その手順をまとめたものになります。

Blogger TemplatesからのTemplateのインポート

Templateのダウンロード

以下のサイトからダウンロードします。各Templateのページに行くとDownloadボタンがあるので、そこからTemplateをダウンロードすることが出来ます。

Templateのインポート

Bloggerの管理画面を開き、テーマ→カスタマイズ→元に戻す から、Templateをアップロードします。 新しいテンプレートを適用する前に既存のテンプレートをバックアップしておきます。

Templateの修正

Bloggerの管理画面を開き、レイアウトから、Templateを修正します。GUIなので修正できる部分は修正しておきます。

次にテーマ→カスタマイズ→HTML編集 から、Templateを修正します。cssとhtmlを直に修正します。自分のBlogに必要なもの以外は削除してしまいます。今回はシンプルな構成にしたかったので、slideなど思い切って削除しました。

見出しやBoxデザインの設定

Bloggerの管理画面を開き、テーマ→カスタマイズ→HTML編集 からTemplateを修正します。基本的には、サルワカさんのCSSサンプルをそのまま使用しています。背景色や線の太さなどは、雰囲気に合わせてカスタマイズしてます。

/* Use this with ... */～/* Header...*/の間が、BlogMainで利用するCSSになっているので、そこに埋め込みます。

h3{padding: 0.5em;
   color: #ffffff;
   background: #02BB9F;
   border-left: solid 5px #00927b;
   font:normal bold 20px Arimo,Arial,Helvetica,sans-serif;}
h4{
   color: #02BB9F;
   padding: 0.5em 0.5em;
   border-bottom: solid 3px #02BB9F;
   width: 90%;
   font:normal bold 16px Arimo,Arial,Helvetica,sans-serif;}
   
.box11{
    position: relative;
    padding: 0.5em 1em; margin: 2em 0;
    color: #5d627b; background: white;
    border-top: solid 3px #02BB9F;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.22);
}
.box11 p {
    margin: 0; 
    padding: 0;
}

.box28 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 3px #02BB9F;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px; left: -2px; padding: 0 9px; 
    height: 25px; line-height: 25px;
    font-size: 17px;
    color: #ffffff; background: #02BB9F;
    font-weight: bold;
}
.box28 p {
    margin: 0; 
    padding: 0;
}  

目次の自動生成とソース引用の設定

Bloggerの管理画面を開き、テーマ→カスタマイズ→HTML編集 からTemplateを修正します。基本的には、スケ郎のお話さんのCSSサンプルをそのまま使用しています。背景色や線の太さなどは、雰囲気に合わせてカスタマイズしてます。

&lt/head&gt ... &lt body &gtの直前に埋め込みます。

&lt b:if cond='data:blog.pageType == "item"' &gt
...
&lt /b:if &gt
&lt script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=doxy'/ &gt

Webサイト引用の設定

これはブラウザの設定になりますので、以下の引用サイトを参考に設定します。このカード自体もこの設定で作成されてものになります。

まとめ

今回は、BloggerのTemplateを利用したNote風レイアウトを実践してみました。このBlog自体がNote風になっているはずです。改めてhtml編集をメインにブログを書くと、構成が綺麗になったり、htmlのタグ本来の使い方に沿って作られるので、何を書いたか見やすいですし、転用がしやすいと思いました。最後にまとめを書いて終わりにしたいと思います。

引用元サイトのご紹介