Bloggerの最新カスタマイズ

Social_Media_DimSum --Social Media Small Plate Style
ちょっとだけブログをカスタマイズしてみました。今回は、カスタマイズした内容のまとめです。

photo credit: The Daring Librarian via photopin cc


今回は、詳細な説明は行いません。ご了承ください。ちょっとだけブログをカスタマイズしたので、メモ。





上メニューバー







タイトル上にメニューバーを付けました。これは、以前紹介したブログの下に付けていたメニューバーのCSSを改良し、再利用しました。


<div class='content-outer'>
<div class='stickey_sns'>
<div id='stickey_footer'>

<ul id='footer_menu'>
<li>ここにメニューを記述</li>
</ul>
<ul id='social_icons'>
ここに検索フォームを記述
</ul>
</div></div>

<div class='content-cap-top cap-top'>



#stickey_footer { /* This will make your footer stay where it is */
background: none repeat scroll 0 0 #F2F2F2;
/* border: 1px solid rgba(0, 0, 0, 0.3);*/
top: 1;
/* font-family: Arial, Helvetica, sans-serif;*/
height: 44px;
left: 50%;
margin: 0 auto 0 -510px;
padding: 0 10px;
position: absolute;
width: 1000px;
z-index: 999;
}

/* hover effect */
#stickey_footer:hover {
background: none repeat scroll 0 0 #F2F2F2;
}

#footer_menu {
margin: 0;
padding: 0;
width: auto;
}

#footer_menu li {
overflow:hidden;
background:#F2F2F2;
list-style: none;
float: left;
font-size:26px;
padding: 6px 0 0 30px;
/* border-right:1px solid rgba(0, 0, 0, 0.4);*/
/* background: rgba(0, 0, 0, 0.3);*/
}

#footer_menu li:hover {
background:#F2F2F2; /* Fallback color for old browsers */
/* background: rgba(0, 0, 0, 0.3);*/
}

#footer_menu li a {
display: block;
color: #000000;
text-decoration: none;
}

#footer_menu li a:hover {
color: #0066FF;
text-shadow:0 0 1px #ffffff;
}

#footer_menu li span {
/*
display:none;
*/
}

#stickey_footer #social_icons {
float:right; /* social icons positions */
margin: 0;
padding: 0;
width:auto;
overflow:hidden;
}

#stickey_footer #social_icons li {
margin-right:12px; /* 12px is the space between each one of them */
float:left;
width:auto;
padding: 12px 14px 14px 14px;
list-style:none;
_margin-right:0px; /* this is for IE6 only */
}

.stickey_sns {
border: 1px solid rgba(0, 0, 0, 0.3);
background: none repeat scroll 0 0 #F2F2F2;
/* border: 1px solid rgba(0, 0, 0, 0.3);*/
top: 0;
height: 46px;
left:0;
position: fixed;
width: 100%;
z-index: 310;
}



ポイントは、新しい親要素を作り、そこで position: fixed;を指定することと、コピーしてきたものを position: absolute;に書き換えることです。


ちなみに、モバイルには表示しないので、以下の様な感じで。

.stickey_sns {display:none;}
#stickey_footer {display:none;}



CSS Sticky Footer For Blogger


移動アイコン






移動先は、適当にidを指定。

<div id='back-top'>
<a href='#top'><span class='entypo-up-open-big'/></a>
</div>
<div id='back-top2'>
<a href='#footer-2-2'><span class='entypo-down-open-big'/></a>
</div>

</body>



/* backtotop */
#back-top {
position: fixed;
top: 2px;
right: 2px;
background: #1F1F1F;
z-index: 1200;
font-size:15px;
height: 20px;
width: 25px;
margin: 5px;
padding: 5px;
text-align: center;
}

#back-top a {
display: block;
color: #ffffff;
text-decoration: none;
}

#back-top a:hover {
text-shadow:0 0 3px #FF0066;
color: #FF0066;
}

#back-top2 {
position: fixed;
top: 2px;
left: 2px;
background: #1F1F1F;
z-index: 1200;
font-size:15px;
height: 20px;
width: 25px;
margin: 5px;
padding: 5px;
text-align: center;
}

#back-top2 a {
display: block;
color: #ffffff;



ポイントとしては、 text-shadow:0 0 3px #FF0066; の部分です。 text-shadow:0 0 3px #FF0066 inset;などとすると、内側に影をつけることができます。指定できる値は以下のようになっています。


text-shadow:'横にずらす値' '下にずらす値' 'ぼかし値' '色の指定';



また、 text-shadowの部分は、 box-shadowとすることもできます。


RSSアイコン





Webフォントを使いました。ただし、Feedlyのアイコンは見つかりませんでしたので、公式画像を使用。

<li><a href='http://mba-hack.blogspot.jp/feeds/posts/default' target='blank'><span class='fontawesome-rss'/></a></li>

<li><a href='' target='blank'><span class='fontawesome-fire'/></a></li>

<li><a href='' target='blank'><img alt='follow us in feedly' height='28' id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-logo-black_2x.png' width='28'/></a></li>



http://www.feedly.com/factory.html


検索フォーム







検索フォームは、以下の記事からコードを取ってきて改良。このサイトは、今回のブログデザインにとても参考になりました。

[How-To] Make a search box with Pure CSS for blogger! | Symmetrycode


<ul id='social_icons'>
<form action='/search' id='searchthis' method='get' style='display:inline;'>
<!-- Search box for blogger by Namanyay Goel //-->
<input id='namanyay-search-box' name='q' placeholder='' size='40' type='text'/>
</form><span class='entypo-search'/>
</ul>



#namanyay-search-btn {
background:#0099ff;
color:white;
font: 'trebuchet ms', trebuchet;
padding:10px 5px;
border:0 none;
font-weight:bold;
}

#namanyay-search-box {
border:1 #2f2f2f;
padding:5px;
margin:10px;
width:200px;
}

#namanyay-search-box:hover {
box-shadow:0 0 3px #0066FF inset;
}



ブログのタイトル





ブログのタイトルを変更しました。具体的には、画像を左に置きました。意外と厄介なので、HTMLで書きました。おすすめはしません...。


<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<div class='float'><a href='ここのサイトURLを記述'><img src='ここに画像URLを記述'/></a></div>
<a href='http://mba-hack.blogspot.jp/'><b:include name='title'/></a></h1>
</div>
<b:include name='description'/>
</div>



ポイントは、 floatです。画像の回りこみの設定をします。


ページナビ



削除していたページナビを戻しました。

<!-- navigation -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</b:if>

<!-- feed links -->