Bloggerの公式テンプレート（テーマ）であるEmporioのカスタマイズメモ。

新しいテーマの公式ブログ。
Official Blogger Blog Share your unique style with new Blogger themes

Contempoのサンプルブログ
Sohoのサンプルブログ
Emporioのサンプルブログ
Notableのサンプルブログ

1.何はともあれ読みにくいフォントを指定する。

/* フォントファミリーを指定する */
*{
 font-family: meiryo,メイリオ,"ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif !important;
}

2.スクロールしたときに表示されるフローティングタイプのブログタイトル部分を半透明にする。

/* ブログタイトル部分を半透明に コメントアウト ここから
.centered-top-container.sticky,.sticky .centered-top{
background-color:$(header.background.color)
}
コメントアウト ここまで */
/* ブログタイトル部分を半透明に 追加ここから */
.centered-top-container.sticky,.sticky .centered-top{
background-color: rgba( 38, 50, 56, 0.55 );
}
/* ブログタイトル部分を半透明に 追加ここまで */

3.英語・アルファベット表記を大文字にしない。

/* 大文字にしない コメントアウトここから
text-transform:uppercase;
大文字にしない コメントアウトここまで */

4.ページトップ（ページの一番上に戻る）ボタンの設置。

<!-- ページの一番上に戻るボタンの設置 -->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:30px;right:5px;" href="#" title="Back to Top"><img src="画像のURL" height="48" width="48" style="opacity: 0.5;" /></a>

4.5.ボタンの変更

<!-- ホームページに戻るボタンの設置 -->
<a href='https://kyotominagoyama.blogspot.com/' rel='nofollow' style='display:scroll;position:fixed;bottom:80px;right:5px;' title='Back to Home'><img src='画像のURL' style='opacity: 0.7;' height='40' width='40'/></a>

<!-- ページの一番上に戻るボタンの設置 -->
<a href='#' rel='nofollow' style='display:scroll;position:fixed;bottom:30px;right:5px;' title='Back to Top'><img src='画像のURL' style='opacity: 0.7;' height='40' width='40'/></a>

5.引用のフォントなどのスタイルの変更

/* 引用のフォントなどの変更 コメントアウトここから
blockquote{
color:$(blockquote.color);
font:$(blockquote.font);
font-size:x-large;
font-style:italic;
font-weight:300;
text-align:center
}
引用のフォントなどの変更 コメントアウトここまで */
/* 引用のフォントなどの変更 ここから */
blockquote{
color:$(blockquote.color);
font:$(blockquote.font);
background-color: #40535e;
padding: 10px;
}
/* 引用のフォントなどの変更 ここまで */

引用ここから
ここは引用ここは引用ここは引用ここは引用ここは引用ここは引用ここは引用ここは引用ここは引用ここは引用ここは引用ここは引用ここは引用ここは引用ここは引用ここは引用ここは引用ここは引用ここは引用ここは引用
ここまで引用

6.写真の説明文の変更

/* 写真の説明 コメントアウトここから
.tr-caption{
color:$(picture.caption.text.color);
font:$(picture.caption.font);
font-size:1.1em;
font-style:italic
}
写真の説明 コメントアウトここまで */
/* 写真の説明の変更 ここから */
.tr-caption{
color:$(picture.caption.text.color);
font:$(picture.caption.font);
}
/* 写真の説明の変更 ここまで */

7.写真がはみ出さないようにする。

Microsoft EdgeやChrome、Firefoxでは写真や画像ははみ出さないけれど、何故かInternet Explorerだけ、はみ出してしまう事があるのでそのために変更。

Internet Explorerを切り捨ててしまえば下記の変更はしなくても大丈夫。

二か所あるので両方とも変更する。
一か所め。
/* 写真などimgをはみ出さないようにする コメントアウトここから
.post-body img{
max-width:100%
}
写真などimgをはみ出さないようにする コメントアウトここまで  */
/*  写真などimgをはみ出さないようにする　追加ここから  */
.post-body img {
 width:100%
}
/*  写真などimgをはみ出さないようにする　追加ここまで  */

二か所め。
/* 写真などimgをはみ出さないようにする コメントアウトここから
.post-body img{
height:inherit;
max-width:100%
}
写真などimgをはみ出さないようにする コメントアウトここまで  */
/*  写真などimgをはみ出さないようにする　追加ここから  */
.post-body img {
 height:inherit;
 width:100%
}
/*  写真などimgをはみ出さないようにする　追加ここまで  */

8.折りたたんであるサイドバーのガジェット（ウィジェット）を開いた状態で表示する。

<b:widget id='Label1' locked='false' title='ラベル' type='Label' visible='true'>
<b:widget-settings>
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
<b:widget-setting name='display'>LIST</b:widget-setting>
<b:widget-setting name='selectedLabelsList'/>
<b:widget-setting name='showType'>ALL</b:widget-setting>
<b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<details class='collapsible extendable'>
<!-- ラベルを開いた状態にする コメントアウトここから
<b:attr cond='data:view.isLabelSearch' name='open' value='open'/>
ラベルを開いた状態にする コメントアウトここまで -->
<!-- ラベルを開いた状態にする 変更ここから -->
<b:attr name='open' value='open'/>
<!-- ラベルを開いた状態にする 変更ここまで-->
<b:with value='true' var='renderAsDetails'>
<b:with value='data:messages.labels' var='defaultTitle'>
<b:include name='super.main'/>
</b:with>
</b:with>
</details>
</b:includable>
<b:includable id='cloud'>
<b:include data='{                               buttonClass: &quot;flat-button&quot;,                               items: data:this.labels,                               itemSet: &quot;labels&quot;,                               itemsMarkup: &quot;super.cloud&quot;                             }' name='extendableItems'/>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<b:class expr:name='data:this.display + &quot;-label-widget-content&quot;'/>
<b:include cond='data:this.display == &quot;list&quot;' name='list'/>
<b:include cond='data:this.display == &quot;cloud&quot;' name='cloud'/>
</div>
</b:includable>
<b:includable id='list'>
<b:include data='{                               buttonClass: &quot;flat-button&quot;,                               items: data:this.labels,                               itemSet: &quot;labels&quot;,                               itemsMarkup: &quot;super.list&quot;                             }' name='extendableItems'/>
</b:includable>
</b:widget>