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

Atom | RSS

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

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

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

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

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

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

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

目次[表示]

• 1.Bloggerの見出し書式
• 2.色の指定
• 3.その他の要素名
  • 3.1.table, caption タグ
  • 3.2.blockquote タグ
• 4.Awesome Inc 関連記事

Bloggerの見出し書式

<h2> <h3> <h4>

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] と表示するようにしました。

<blockquote class="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);
}

Awesome Inc 関連記事

  Awesome Inc

 External link

• Templatesyard: Free Blogger Templates | Responsive Blogspot Themes

対象：Awesome Inc. テンプレート

Blogger の記事 (Articles about the Blogger)

1. 【Blogger】指定したラベルの記事を新着順で抽出して一覧表示する（ことに成功）
2. Google Bloggerブログがマルウェア検出で公開停止に！原因は？復旧は？
3. IFTTT 使用レポート（使い方）
4. Blogger: ブログのページ幅を最適化（アドセンス対策）
5. Bloggerの管理画面が英語表記になる時の緩和策
6. moreタグの動作をカスタマイズする方法｜Blogger
7. アドセンスコードをmoreタグの位置に挿入する方法（同期コード）
8. more タグの位置にアドセンスコードを挿入する方法
9. モバイルユーザビリティエラーの対処方法 (Blogger)
10. Google Search Consoleに記録された構造化データエラーとは？（対策あり）
11. Blogger ラベルの記事（要約付）
12. Blogger が含まれる記事（要約付）

新着順 (New arrival order)

1. 【Pixel／2025年5月】アンチロールバックの実装、ゼロデイ脆弱性（CVE-2025-27363）
2. 【初心者向け】Windows／AndroidでDoHを設定してセキュリティを高める方法
3. まだ間に合う！ChromeでuBlock Originを使うための最終手段
4. 【新ルール】クイーン白玲（通算5期）で四段昇段！将棋界に激震走る
5. 【最速情報】Google Pixel 9a 日本発売！気になる価格とスペックまとめ
6. 【Pixel 4月／2025】生体認証、カメラ、ディスプレイ、UIの修正【Android 15】
7. 【2024年度】藤井七冠(最優秀棋士)、羽生九段、会長辞任はタイトル100期への伏線か？
8. 【バグ】TVerRec 3.4.2 のリネーム処理不具合とその原因を考察
9. 【恐怖】ポンジスキームとは？歴史から学ぶ詐欺の仕組み
10. 【終息】TVerRec 3.3.9（暫定）で機能制限ほぼ解除、3.4.0リリース！

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

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