CSSの追加カスタマイズ楽しくてしょうがない。
Blogger初心者のQooQのカスタマズをやっちゃいました😵第５弾 超カッコいいカスタマイズご紹介 CSS追加編
今回はチョット難しくなっているものもありますが、手順は同じなのでできると思います。超カッコいいカスタマイズを紹介しますのでやってみてください。(⌒▽⌒)
小さい変更だと誰にも分らない、時間が経ったら自分でも分からない程度だけど(￣▽￣;)塵も積もれば山となる だんだんオリジナル度マシマシで愛おしいブログになってます。
追加のカスタマイズ CSSだけでやった分
- ブログ説明 文字の太さを普通に
- ライトボックスの左下に見える「div」タグを消す
- ラベルを左上隅サムネイル画像上に乗せ半透明にする。
- 左ベッタリ表示にマージンを
１．ブログ説明 文字の太さを普通に
ヘッダーにある ブログ説明の文字の太さを太字から普通の文字に変更
#header-text{
font-weight: normal;
}
font-weight: normal;
}
２．ライトボックスの左下に見える「div」タグを消す
参考記事はラムネグさんの
Blogger・ライトボックスの左下に見える「div」タグを消す方法
ライトボックス（って言うんだね）左下の<div>タグが気になっていましたが、Bloggerの不具合だそうです、QooQテンプレートに変更してカスタマイズで文字を白くしたので目立ったようです。修正待つよりCSS追加で回避 なくしてしまいます。
CSSの追加
/* ライトボックスの左下に見える「div」タグを消す 不具合を回避 */
.CSS_LIGHTBOX_ATTRIBUTION_INDEX_CONTAINER {
display: none;
}
.CSS_LIGHTBOX_ATTRIBUTION_INDEX_CONTAINER {
display: none;
}
３．ラベルを左上隅サムネイル画像上に乗せ半透明にする。
QooQのカスタマイズの嵌るきっかけになったのが、ふじろじっくさんのブログなので、連日入りびたり、記事ポチポチして読みまくっているのですが入りびたりなのがバレたようだ・・・・(;´･ω･)参考記事は ふじろじっくさんの
【QooQ】最近のカスタマイズまとめ
ふじろじっくさんの記事では 他のカスタマイズもやっていますが、今回 灰色うさぎは 『ラベルの位置を左上隅に移動』のところだけ抜粋してカスタマイズしました。
CSSの追加
/* サムネイルの左上にラベルを移し半透明に */
.list-item {
position: relative;
}
/* ラベルを左上に */
.list-item-category {
position: absolute;
top: 0;
left: 5;
}
/* ラベルを半透明に */
.list-item-category-item {
opacity: .75;
}
.list-item-category-item:hover {
opacity: 1;
}
.list-item {
position: relative;
}
/* ラベルを左上に */
.list-item-category {
position: absolute;
top: 0;
left: 5;
}
/* ラベルを半透明に */
.list-item-category-item {
opacity: .75;
}
.list-item-category-item:hover {
opacity: 1;
}
ふじろじっくさんのコードは left: 0; で左上隅にピッタリでしたが
トップ位置が少し下にずれてしまったので 左を空けて位置調整
ラベル位置指定を top: 0; left: 5; で指定してあります。
御朱印もいいけど、うさぎの絵馬も集まってきました。
0 件のコメント:
コメントを投稿