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. 【2024年度総括】藤井七冠(最優秀棋士)、羽生九段現役続行と会長退任を表明
2. 【バグ】TVerRec 3.4.2 のリネーム処理不具合とその原因を考察
3. 【恐怖】ポンジスキームとは？歴史から学ぶ詐欺の仕組み
4. 【終息】TVerRec 3.3.9（暫定）で機能制限ほぼ解除、3.4.0リリース！
5. 【緊急】TVerRec 3.3.6緊急リリース！仕様変更に暫定対応
6. 【未解決】TVerRecダウンロード不具合！TVerの仕様変更かも？
7. 【昇級／降級】全棋士ランキング確定、伊藤匠叡王B1へ昇級、羽生九段B2へ降級
8. 【将棋】なぜ藤井聡太は人々を魅了するのか？【2024年度振り返り】
9. 【更新】Lhaz 2.5.4リリース！法人利用が有料化へ
10. 【Pixel 3月／2025】カメラ、WebView 、Bluetooth、電話のバグ修正【Android 15】

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

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