Awesome Inc. テンプレートをカスタマイズ｜Blogger

このサイトを検索 | Search this site

Awesome Inc. テンプレートをカスタマイズ｜Blogger

※2020/03/24
このブログのテンプレートは「SuperFast」に変わりました。

このブログは Blogger に付属する Awesome Inc. テンプレートをカスタマイズして利用しています。

これまで加えてきたカスタマイズ項目のうちCSSに関係するものをまとめました。

任意のCSSを追加することで、Awesome Inc. テンプレートで定義された要素名やクラス名の設定を上書きすることができます。

ほとんどの要素名は次のクラス名を付加すると動作しますが、<h2> などの一部の要素名は Awesome Inc. の上位で使われているクラス名を付加する必要があります。

Bloggerの見出し書式

Bloggerエディターの書式設定ドロップダウンリストと見出しタグの関係。

見出しの対応表
見出し	<h2>
小見出し	<h3>
準見出し	<h4>

Awesome Inc. の <h2> <h3> <h4> のスタイルを調整したい時は、クラス名と要素名を組み合わせて指定します。

クラス名を付加せずに h2, h3, h4 のスタイルを変更することはできません。

調べてみると Awesome Inc. は、 h2 のスタイルを指定する時のみ .post-body に加えて特殊なクラス名が必要でした。

以下は当ブログで使用しているカスタムCSS の一部です。

h2 のスタイルを指定する時のクラス名

.mobile はモバイルテンプレートを変更したいときに使用します。

.main-inner .post-body.entry-content h2,
.mobile .main-inner .post-body.entry-content h2 { xxx: zzz;}

h3 のスタイルを指定する時のクラス名

.post-body h3 { xxx: zzz;}

h4 のスタイルを指定する時のクラス名

.post-body h4 { xxx: zzz;}

色の指定

当ブログでは、h2, h3, h4 の背景色を指定しています。

指定方法は RGBAカラーモデルを利用しています。

background-color: rgba(13,175,237,.14);

RGBAカラーモデルはベースの色、当ブログではタイトルの背景色、を決めたら４つ目の引数で透明度を指定すればよく、同系色でまとめたい時に簡単に指定することができます。

その他の要素名

table, caption タグ

table, caption タグは用途に応じて複数のクラス名を設定し使い分けています。

caption-side : bottom; を指定すると captionタグに囲まれた文字列は右下に表示されます。

以下は当ブログでの設定例です。

caption {
caption-side : bottom;
text-align : right;
margin-top : 4px;
}

blockquote タグ

.quote クラスを作成して主に blockquote タグで指定しています。

他の文献から引用する時は、引用したことを明示する必要があるので、左上に [Quote] と表示するようにしました。

.quote {
position : relative;
padding : 2.6em 2em 1em 2em;
margin : 1.5em 2em;
border : 0px dotted gray;
background-color: #FAFAFA;
}

.quote:before {
display : inline-block;
position : absolute;
padding : 1px 3px;
top : 3px;
left : 3px;
vertical-align: top;
content : "Quote";
color : #fff;
font-size : .9em;
border-radius : 10%;
background : #848484;
background-color: rgba(132,132,132,.35);
}