Blogger Theme for Girls ♬

✰Calmer Fashion Blogger Template • Blogspot Templates 2016

✐ 白をベースに薄ピンクな挿し色が､何とも柔らかな印象を与えるテンプレート

レスポンシブ+SEO対応
トップにスライドショーとSNSボタン
ドロップダウンメニュー
トップページのサムネイル下にSNSボタン
各投稿ページの記事タイトル下にSNSボタン

✰Galleria Blogger Template 2014 Free Download

この『Galleria』は、私が現在使用しているテーマです!!

何と言っても、このテーマの面白い所は、
サムネイルをマウスオーバー時すると、画像が上にスライドされる所 ♬

まるで棚から本を取り出すような、何とも気持ちはイイ感じがクセになる ･ᴥ･

ねぇ!!　何度もスライドさせたくなっちゃうデショ。

でも、このテーマ、素人主婦な私にはカスタマイズが難しかったぁ、、

*　　*　　*　　*　　*　　*　　*　　*　　*　　*　　*　　*　　*　　*　　
✐ McaronShufuカスタマイズ

✰Bloggerカスタマイズ☺女子オススメの可愛い無料テーマ - NAVER

◆カテゴリーメニューに違うものがなぜか出力されてたので、その対処法
→ウジェットの locked='true' をすべて locked='false' に変更
＜true(移動・削除できない）false(移動・削除できる）
例）

<b:widget id='HTML6' locked='false' title='Count' type='HTML' visible='false'>

◆メニュー下にアイコン画像のような物が表示されていたので、その対除法
→ 検証でチェックし、その邪魔なコードを削除

<div class='widebanner'> <a href='http://premiumbloggerthemes.com/'> <img src='http://premiumbloggerthemes.com/images/728x90/728x90-1.gif'/></a></div> <div class='clear'/>

◆メニュー項目がコードの中になかったもで、その対処法
→ menu-primary-container を検索し

<div class='menu-primary-container' id='menu'>

この真下に下記コード埋め込む

<div class="widget-content"> <ul> <li><a href="http://galleria-besttheme.blogspot.jp/" id="homeButton">Home</a></li> <li class="page_item"><span class="menu_bg"><a href="http://galleria-besttheme.blogspot.com/p/about-us.html">About Us</a></span></li> <li class="page_item"><span class="menu_bg"><a href="http://galleria-besttheme.blogspot.com/p/contact-us.html">Contact Us</a></span></li> </ul> </div>

*　　*　　*　　*　　*　　*　　*　　*　　*　　*　　*　　*　　*　　*

※数字・色コード・画像アドなどを変更して、カスタマイズして下さい。

✐ ブログタイトル

◆ブログタイトル　＜.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　で検索

<div class="soxbox"> <div id="search"> <form action="/search" id="searchform" method="get"> <input id="s" name="q" onblur="if(this.value==''){this.value='search site'};" onfocus="if(this.value=='search site'){this.value=''};" type="text"> <input id="searchsubmit" type="submit" value=""> </form> </div> </div>

◆検索の背景画像　＜.soxbox　で検索
.soxbox{
background:url(http://～);
width:272px;
height:61px;
float:right;
margin-top:35px;
}

◆検索　＜search　で検索

<div class='soxbox'> <div id='search'> <form action='/search' id='searchform' method='get'> <input id='s' name='q' onblur='if(this.value==''){this.value='search site'};' onfocus='if(this.value=='search site'){this.value=''};' type='text'/> <input id='searchsubmit' type='submit' value=''/> </form> </div> </div> </div> </div>

◆検索の虫めがねアイコン　＜#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

<style> .gallerytitle{ width:270px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZLR-l3pf-sfEYAnev7kIBJSPWY6xOty11szU9-seMnp7QqZc16c18epFipX58x7MnHVjT1rNFb_DTXoPGeNRX8VO7kQUhMth6sMIADfAYDdp8xuQ3PFT3kjSQqO3PlDGq1KCPV8BUfs/s1600/gallerybase.png); height:60px; position:absolute; bottom:12px; left:0px; z-index:10; } </style> <![endif]-->

◆サムネイルの投稿タイトル　＜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つ削除

◆各投稿ページ記事下のホーム


◆各投稿ページの下のページナビを英語で変更
→　次ページ

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Next</a>

→　前ページ

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Back</a>

◆各投稿ページの下のページナビの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　で検索

ページナビ下の<div class='clear'/>の下に入れたいコードを入れる

*　　*　　*　　*　　*　　*　　*　　*　　*　　*　　*　　*　　*　　*　　　

✐ レイアウト幅

◆各投稿ページの幅　＜#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;
}