最後に覚書みたいなものですが.
微調整
微調整の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その他注意事項
ファビコンを設定
「管理画面」→「設定」→「ファビコン」で設定する連絡フォーム(ガジェット)は使用不可
独自ドメインでは動くようです。コメント投稿できない件
原因はよくわからないのですが、「管理画面」→「設定」→「コメントの表示場所」
を「ポップアップウィンドウ」とすることで、
コメントができるようになります。
追記の挿入(重要)
投稿の一覧表示やラベル検索等の結果の一覧の表示数が少なくなってしまう場合があります。画像データ等で投稿のデータが多い時は投稿エディタで、投稿文の初めの方に「追記の挿入」をいれて top ページ等の読み込みを制御すると表示数を増やすことができます。
逆に一覧の数を少なくするには url の末尾に "?&max-results=5" を追加します。
(「5」は一覧の数でこの数を好きに設定)
カレンダーを設置できない。
アリストマスターさんの
これどおりいじっても、どうしても日付にリンクが貼れない。 
くやしい。
youtube の調整
youtube はHTMLビューでheight="315", width="560" 等に調整する。まだほかにもあるのですが、とりあえずはこれで大体お終いです。
誤りや、まだ漏れているものもあるかもしれません。
その場合、後日修正します。
また、このままでは検索しにくいと思いますので、いずれ総まとめをしたいと思っております。
乱筆乱文にてお見苦しかったと思いますが、長い間ありがとうございました。
この資料が皆様のお役に立てばと思っております。
0 件のコメント:
コメントを投稿