Blogger テンプレート QooQ カスタマイズ 07

最後に覚書みたいなものですが.

微調整

微調整のCSSです。

Google Material Icons 位置調整

HTML編集のCSS記述部「全体設定」で

/* Google Material Icons 位置調整 */
.material-icons {
  font-size: 18px;
  position: relative;
  top: 2px;
}

ヘッダータイトルの前にwebアイコン

HTML編集のCSS記述部「ヘッダー」で

/* ヘッダータイトルの前にwebアイコン(すべて追加) */
#header-title:before {
  font-family: 'Material Icons';
  content: "\EB48";
  color: #8888cc;
  position: relative;
  font-size:28px;
  top: 6px;
  left: -6px;
}

投稿一覧のシャドウ

HTML編集のCSS記述部「記事一覧」で

/* 投稿一覧のシャドウ */
.list-item {
	flex-basis: 48.5%; /* 変更 */
	margin-top: 15px; /* 変更 */
	box-shadow: 0px 0px 10px #beb1b3; /* 追加 */
}

投稿一覧の画像をマウスオーバーで浮かせる

HTML編集のCSS記述部「記事一覧」で

/* 投稿一覧の画像をマウスオーバーで浮かせる0 (追記) */
.list-item-img {
  transition-duration: 0.5s;
}
/* 投稿一覧の画像をマウスオーバーで浮かせる1 (追記) */
.list-item-img:hover {
  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}

一覧タイトルの高さを揃える

HTML編集のCSS記述部「記事一覧」で

/* 一覧タイトル */
.list-item-title{
    line-height : 24px; /* 追加,高さを揃える */
    height : 46px; /* 追加,高さを揃える */
    overflow:hidden; /* 追加,高さを揃える */
}

記事内の画像をマウスオーバーで拡大

HTML編集のCSS記述部「個別記事」で

/* 記事内の画像をマウスオーバーで拡大0 (追記) */
.separator img {
overflow: visible; /* はみ出した部分も表示 */
width: 100%;
height: 100%;
display: block;
transition-duration: 0.5s;
}
/* 記事内の画像をマウスオーバーで拡大1 (追記) */
.separator img:hover {
transform: scale(1.1,1.1);
transition-duration: 0.5s;
}

「コメントを投稿」ボタンの調整

HTML編集のCSS記述部「個別記事」で

/* 「コメントを投稿」ボタン(すべて追加) */
#comments > p > a {
    font-size: 65%;
    font-weight: bold;
    color: #ffffff;
    background: #00aa00;
    padding: 0.7em;
    border-radius: 2em;
}

フッターカテゴリを非表示

HTML編集のCSS記述部「個別記事」で

/* フッターカテゴリ */
#single-footer-category{
    display: none; /* 追記 */
}

関連記事のフォントを小さく

HTML編集のCSS記述部「個別記事」で

/* 関連記事のフォントを小さく */
.mrp-post-title {
    font-size: 80%; /* 変更 */
}

サイドバーの調整

HTML編集のCSS記述部「サイドバー」で

/* サイドバー title */
#sub-content .widget h2 {
    font-size: 1.3rem; /* 変更 */
    background: #112276; /* 追記 */
}
#sub-content a{
    color: #0c30c0; /* 変更 */
}
/* サイドバー 内容(すべて追加) */
.widget h2, .widget .widget-content {
    font-weight: 300;
    font-size: 90%;
}

検索窓の調整

HTML編集のCSS記述部「サイドバー」で

/* 検索窓 調整*/
table.gsc-search-box {
	border: solid 1px #aaddcc; /* 変更 */ 
    max-width: 24em; /* 変更 */ 
}

アーカイブ ガジェット カウント 色変更

HTML編集のCSS記述部「サイドバー」で

/* アーカイブ ガジェット カウント 色変更 */
.post-count {
	color: #000000;
}

アーカイブ ガジェット 枠線[下]をつける

HTML編集のCSS記述部「サイドバー」で

/* アーカイブ ガジェット 枠線[下]をつける(すべて追加)*/
.BlogArchive #ArchiveList ul.posts li {
    border-bottom: solid 1px;
    border-color: #dddddd;
}

「ラベル」ガジェットの表示

HTML編集のCSS記述部「サイドバー」で

/* 「ラベル」ガジェットの表示(すべて追加) */
#Label1 > div > ul > li {
	margin: 5px;
}
#Label1 > div > ul > li > a {
	font-size: 14px;
	margin-top: .1em;
	margin-left: .1em;
	padding: .3em 1em;
	border-radius: 22px;
	background: #ff9d76;
	color: #ffffff;
	font-weight: normal;
}

「人気の投稿」のタイトル表示

HTML編集のCSS記述部「サイドバー」で

/* 「人気の投稿」のタイトル表示(すべて追加) */
#PopularPosts1 > h3 {
	font-size: 1.3rem;
	padding: .6em;
	background: #112276;
	color: #ffffff;
	font-weight: bold;
}

「人気の投稿」ガジェットに枠線[上]をつける

HTML編集のCSS記述部「サイドバー」で

/* 「人気の投稿」ガジェットに枠線をつける(すべて追加) */
#PopularPosts1 article {
  padding: 4px 0px;
  border-top :solid 1px;
  border-color: #dddddd;
}

Tipsその他注意事項

これどおりいじっても、どうしても日付にリンクが貼れない。
くやしい。

youtube の調整

youtube はHTMLビューでheight="315", width="560" 等に調整する。