✰Galleria Blogger Template 2014 Free Download
この『Galleria』は、私が現在使用しているテーマです!!
何と言っても、このテーマの面白い所は、
サムネイルをマウスオーバー時すると、画像が上にスライドされる所 ♬
まるで棚から本を取り出すような、何とも気持ちはイイ感じがクセになる ・ᴥ・
ねぇ!! 何度もスライドさせたくなっちゃうデショ。
でも、このテーマ、素人主婦な私にはカスタマイズが難しかったぁ、、
* * * * * * * * * * * * * *
✐ McaronShufuカスタマイズ
✰Bloggerカスタマイズ☺女子オススメの可愛い無料テーマ - NAVER
◆カテゴリーメニューに違うものがなぜか出力されてたので、その対処法
→ウジェットの locked='true' をすべて locked='false' に変更
<true(移動・削除できない)false(移動・削除できる)
例)
◆メニュー下にアイコン画像のような物が表示されていたので、その対除法
→ 検証でチェックし、その邪魔なコードを削除
◆メニュー項目がコードの中になかったもで、その対処法
→ menu-primary-container を検索し
この真下に下記コード埋め込む
* * * * * * * * * * * * * *
※数字・色コード・画像アドなどを変更して、カスタマイズして下さい。
✐ ブログタイトル
◆ブログタイトル <.blogname h1 で検索
.blogname h1 {
color: #fff;
font-size:36px;
padding:35px 0 0px 0;
font-weight:normal;
text-shadow:1px 1px 0px #172527;
}
◆ブログタイトルのリンク色 <.blogname h1 で検索
.blogname h1 a:link, .blogname h1 a:visited{
color: #fff;
display:block;
margin:0px 0 0 0px;
}
.blogname h1 a:hover {
color: #fff;
}
◆ブログ説明 <.blogname h2
.blogname h2 {
margin:0px 0px 0px 0px;
font-size:16px;
font-weight:normal;
color: #BFB3A7;
text-shadow:1px 1px 0px #172527;
}
◆ブログタイトルの背景画像 <#top で検索
#top {
height:118px;
position:relative;
background:url(http://~) center no-repeat ;
}
* * * * * * * * * * * * * *
✐ 検索
◆検索の枠 <soxbox で検索
◆検索の背景画像 <.soxbox で検索
.soxbox{
background:url(http://~);
width:272px;
height:61px;
float:right;
margin-top:35px;
}
◆検索 <search で検索
◆検索の虫めがねアイコン <#searchsubmit
#searchsubmit{
background:url(http://~);
border:none;
color:#fff;
display:block;
margin:2px 0px 0px 5px;
width:30px;
height:30px;
float:left;
cursor:pointer;
}
◆検索内の文字 <#s {
#s {
width:190px;
background:transparent;
margin:5px 0px 0px 0px;
padding: 4px 5px;
height:15px;
border:none;
font: normal 100% "Tahoma", Arial, Helvetica, sans-serif;
color:#000;
float:left;
display:inline;
}
⇨ 文字サイズと文字の太さの指定を入れる場合、色指定の下に下記コード追加
font-size:20px;
font-weight:bold;
* * * * * * * * * * * * * *
✐ サムネイルボックス
◆サムネイルボックス <.gallerybox img
.gallerybox img{
left:10px;
top:20px;
height:160px;
width:250px;
position:absolute;
overflow:hidden;
}
◆サムネイルの投稿タイトル幅と背景画像 <.gallerytitle
◆サムネイルの投稿タイトル <gallerytitle h2 で検索
.gallerytitle h2{
font-size:14px;
text-align:center;
padding-top:25px;
text-shadow:1px 1px 0px #C16943;
}
.gallerytitle h2 a:link,.gallerytitle h2 a:visited{
color:#260C02;
}
.gallerytitle h2 a:hover{
color:#140601;
}
* * * * * * * * * * * * * *
✐ 投稿ページ
◆投稿ページの記事タイトル <.title で検索
.title h1 {
margin: 0px 0 0px 0;
padding: 5px 5px 5px 0px;
font-size: 20px;
font-weight:bold;
overflow:hidden;
}
.title h1 a, .title h1 a:link, .title h1 a:visited {
color:#333;
background-color: transparent;
}
.title h1 a:hover {
color: #111;
background-color: transparent;
}
◆ 投稿ページの記事タイトル枠内の余白 <.title で検索
.title{
margin: 0px;
padding: 10px 20px 0px 20px;
}
◆投稿ページの文字 <.entry で検索
.entry {
margin:0 0;
padding: 0px 20px 20px 20px;
font-size:13px;
}
◆投稿ページの文字の行間 < Main Blog Content で検索
CSS部分の/*---------------------------------------------------------
{--------} Main Blog Content {--------}
----------------------------------------------------------*/
内のpost { の中に line-height: 1.6; を追加
.post {
height:100%;
line-height: 1.6;
color:#666;
padding:0px 0px;
margin:0px 0px 30px 0px;
position:relative;
display:inline-block;
}
◆投稿ページの画像の外枠(ボーダー)のはずし方
→ 追加CSS
/*画像の外枠をなくす*/
.post img {
padding: 0;
border: 0 none;
}
◆各投稿ページの記事下のコメント枠とお勧めBloggerブログリンクの削除
→ 『Blog1』の下のcommentのあるコードを4つ削除
◆各投稿ページ記事下のホーム
◆各投稿ページの下のページナビを英語で変更
→ 次ページ
→ 前ページ
◆各投稿ページの下のページナビのCSS <.blogger-pagenavi で検索
.blogger-pagenavi{
font-size:12px;
text-align: center !important;
}
.blogger-pagenavi a, .blogger-pagenavi a:link, .blogger-pagenavi a:visited {
text-decoration: none;
background:#F2F2F2!important;
border: 1px solid #ddd !important;
color:#555 !important;
padding:3px 7px !important;
display: block;
text-align: center;
float: left;
margin-right: 4px;
}
.blogger-pagenavi a:hover {
color: #ffffff;
}
◆各投稿ページのページナビの下に固定画像等埋め込む場合
<blog-pager-older-link で検索
* * * * * * * * * * * * * *
✐ レイアウト幅
◆各投稿ページの幅 <#content で検索
①
#content {
float:left;
width: 600px;
height:100%;
padding:0px 0px ;
margin:0px 0px 30px 0px;
display:inline;
overflow:hidden;
}
②
#content {width: 950px;margin:0px;padding:0px;}
#navigation{margin:0px 0px 10px 0px;padding:20px;width:875px;height:27px;}
③
body#layout #content {width:600px;float:left;}
◆サイドバーの幅 <#sidebar-wrapper
#sidebar-wrapper {
float:right;
width:290px;
padding:20px 0px 0px 0;
display:inline;
overflow:hidden;
}
* * * * * * * * * * * * * *
✐ リンク
◆リンク色 <.entry で検索
→ リンク文字のみの文字サイズ追加 font-size:15px;
.entry a:link,
.entry a:visited {
color: #206DD9;
background-color: transparent;
}
.entry a:hover {
color:#0E56BA;
font-size:15px;
background-color: transparent;
text-decoration: none;
}
◆サイドバーのリンク色 <a { で検索
→ 文字の太字指定を追加 font-weight:bold;
a {
color: #206DD9;
font-weight:bold;
text-decoration: none;
outline:none;
}
a:visited {
color: #206DD9;
}
a:hover, a:active {
color: #1367B5;
text-decoration: none;
}