(cache) 【保存版】はてなブログのカスタマイズとか広告の貼り方総まとめ！　虎の巻！【htmlやCSSも大公開】

「だいちゃん　死んでくれ」という検索ワードで人がやってきましたｗｗｗｗｗｗ

どうも、だいちゃん(∀)です。

普段、ブログ運営やブログのカスタマイズなどについて書かないようにしていたのですが、最近はそういった方法論でお金を取るようなビジネスが増えてきていますよね？

私は、「自分だったらそのくらい無料で教えるのに」と普段から思っていたのですが、ブログになるべくお金の匂いをさせたくないという思いと、ブログ運営の方法論については色々な人が書いているから、わざわざ自分が書く必要ないよね、と思っていて書かないようにしていました。

しかし先日、ブログ運営について話をして欲しいという依頼があって、ツイキャスというサービスを使ってブログ運営論についてお話をしました。ほぼ初心者向けについてですが。

話した内容についてはツイッターをやっている方は下記リンクから聞けるので、お暇があれば聞いてみてください。

ブログの話しようぜ2 - TwitCasting

なので今日はブログ運営について話をしていこうと思います。

ブログのカスタマイズ

だいちゃん.comのカスタマイズで参考にしたWEBサイトです。

・HTMLとCSSの基本をサルでもわかるようにまとめた - いつ俺〜いつから俺ができないと錯覚していた？〜

・コピペ一発！はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ！ - いつ俺〜いつから俺ができないと錯覚していた？〜

・コピペ一発！はてなブログでカエレバ・ヨメレバをオシャレにカスタマイズ！ - いつ俺〜いつから俺ができないと錯覚していた？〜

・はてなブログに11種類から選べるSNSフォローボタンをコピペ＋αで実装するカスタマイズ - いつ俺〜いつから俺ができないと錯覚していた？〜

「いつから俺ができないと錯覚していた？」（以下、いつ俺）というブログ、高専出身の優秀な理系大学院生がカスタマイズについて分かりやすくブログで解説してくれていて、私のブログも主にいつ俺さんを参考にカスタマイズしています。

・はてなブログカスタマイズ公式コピペ設置方法まとめ - 太陽がまぶしかったから

・

他にも、太陽がまぶしかったからさんのブログは、はてなブログのカスタマイズについて凄く分かりやすく書いてくれているのでオススメです。

パンくずリストなどSEOに強いと言われているカスタマイズのスクリプトなども載っています！

だいちゃん.comのカスタマイズ

まず、テーマを選定します。

私は「DUDE - テーマストア - はてなブログ」というテーマを土台に使っています。

そして、上記のリンクを参考に自分なりにカスタマイズしたCSSをご紹介します！

（※広告部分など、一部省略しています。）

パソコン版

【ヘッダー】

グローバルナビ

<div id="navigation">
<ul class="menu">
<li class="first"><a href="http://www.xn--n8jvce0l6c.com/"><i class="fa fa-home"></i> <span class="global-text">Home</span></a></li>
<li><a href="http://www.xn--n8jvce0l6c.com/entry/2016/03/25/%E3%81%A0%E3%81%84%E3%81%A1%E3%82%83%E3%82%93%28%E2%88%80%29%E3%81%AE%E8%A9%B3%E7%B4%B0%E3%83%97%E3%83%AD%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB"><i class="fa fa-user"></i> <span class="global-text">Profile</span></a></li>
<li><a href="http://www.xn--n8jvce0l6c.com/archive/category/%E9%9A%9C%E5%AE%B3%E8%80%85"><i class="fa fa-laptop"></i> <span class="global-text">障害者の記事</span></a></li>
<li><a href="https://twitter.com/syusoretujitu" target="_blank"><i class="fa fa-twitter"></i> <span class="global-text">Twitter</span></a></li>
<li><a href="http://www.xn--n8jvce0l6c.com/entry/2016/03/25/%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B"><i class="fa fa-envelope"></i> <span class="global-text">お問い合わせ</span></a></li>

</ul>
</div>

【記事上のhtml】

<div class="share-3d">
<span style="font-size: 8px">シェアする</span>
<div class="share-3d-inner">

<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>

<a href="http://www.facebook.com/share.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" ><i class="blogicon-facebook lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>

<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" target="_blank"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>

<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="small-text">Google+</span></a>

<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
</div>
</div>

【記事下のhtml】

<div class="follow-btn" >
<span style="font-size:80%; text-align:center">フォローする</span><br>
<div class="snsshare2">

<a id="share_fb" href="https://www.facebook.com/yamamoto.daisuke.58"><i class="blogicon-facebook lg"></i>Facebookをfollow</a>
<a id="share_tw" href="https://twitter.com/intent/follow?original_referer=http%3A%2F%2Fwww.xn--n8jvce0l6c.com%2F&ref_src=twsrc%5Etfw&screen_name=syusoretujitu&tw_p=followbutton"><i class="blogicon-twitter lg"></i>Twitterをfollow</a>
<a id="share_hatena" href="http://blog.hatena.ne.jp/syusoretujitu/www.xn--n8jvce0l6c.com/subscribe"><i class="blogicon-hatenablog lg"></i>このブログの読者登録</a>
<a id="share_feedly" href="http://feedly.com/i/welcome/feed/http://www.xn--n8jvce0l6c.com/rss"><i class="blogicon-rss lg"></i>feedlyで購読</a>

</div>

【フッターのhtml】

<footer>Copyright (C) 2013-2016 だいちゃん.com All Rights Reserved.</footer>
<div id="back-to-top"><a href="#">to TOP</a></div>（トップへ戻るボタンの設置）

<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>

【CSS】

/* <system section="theme" selected="6653586347153366095"> */
@import url("http://hatenablog.com/theme/6653586347153366095.css");
/* </system> */

/* <system section="background" selected="default"> */
/* default */
/* </system> */

/*ブログの幅・メインカラムの幅*/

#container {
width: 960px;
background:url("");
margin-left: auto;
margin-right: auto;
}

#blog-title{
height: 210px;

}

#blog-title-inner{
height: 210px;
}

#main{
width:650px;
float: left;
background: #ffffff;
padding: 20px 10px 0px 10px;
}

#box2 {
float: right;
width: 260px;}
/* サイドバーの幅 */
background: #ffffff;
padding: 0 10px 0 10px;
margin: 10 0 0 5px;

}

/*ブログの大見出し・小見出し*/

h1.entry-title:a{
font-size: 25px;
}

h1.entry-title{
background: #ffd700;
padding: 5px 5px;
margin-bottom: 10px;
}

h2{
margin:10px 0px;
padding:0 0 5px 9px;
border-left:8px solid #8b0000;
border-bottom:2px dashed #dcdcdc;
}
h3{
margin:10px 0px;
padding:0 0 5px 9px;
border-left:6px solid #8b0000;
}
a.keyword{
color:#000000;
}

/*リンク設定*/

a:link { color: #0000ff; }
a:visited { color: #000080; }
a:hover { color: #ff0000; }
a:active { color: #ff8000; }

/*グローバルナビ*/
@media screen and (min-width: 1024px)

#navigation { width: 960px;}

#navigation ul{list-style: none;
margin: 10px 0 0 0;

padding: 0;}

#navigation li{
float: left;
width: 160px;
height: 80px;
list-style: none;
display: block;
text-align: center;
font-size: 20px;

}
-webkit-padding-start: 40px;
}

/*本文の文字の大きさ*/
.entry-content {font-size: 17px;
line-height:1.8em;
}

/* adsense */

/* あわせて読みたい */

#new-entries-title {
color: #000;
font-size: 160%;
font-weight: bold;
margin: 20px 0 10px 0;
padding:0 0 0 15px;
height: 39px;
border-bottom: dashed 1px #000;
}

/* facebookページbox */
#fb-like-box{
width: 300px;
height: 300px;
}
@media (max-width: 800px) { 
#fb-like-box{
width: 280px;
height: 280px;
}
}
/* topに戻るボタン */
#back-to-top{
padding:5px 10px;
font-size:20px;
font-weight:bold;
background-color:rgba(0,0,0,0.3);
position:fixed;
right:5px;
bottom:5px;
border-radius:5px;
}
#back-to-top a{
color:#fff;
}
#back-to-top a:hover{
text-decoration: none;
color:#000;
}

.intro-article-wrapper a {
text-decoration: none;
color: #0085cd;
font-size: 90%;
}
/* 指定数のHTMLを生成 */
var resultHtml = "";
for(var x = 0; x < resultEntries.length; x++) {
var entry = resultEntries[x];
var entryTitle = entry.title.replace('- '+blogTITLE , '')

/* HTML生成 */
var html = '<div class="intro-article-wrapper" style="width: 100%; overflow:auto; margin-bottom:15px;">'
+ '<a class="intro-article-img" href="' + entry.link + '" style="float:left;" rel="nofollow">'
+ '<img src="http://capture.heartrails.com/150x130/shadow?' + entry.link
+ '" align="left" width="150" height="130" alt="'
+ entryTitle + '">'
+ '<a class="intro-article-title" href="' + entry.link + '" rel="nofollow">'
+ entryTitle
+ '</a> <img src="http://b.hatena.ne.jp/entry/image/' + entry.link + '">'
+ '<a href="http://tweetbuzz.jp/redirect?url=' + entry.link + '"><img src="http://tools.tweetbuzz.jp/imgcount?url=' + entry.link + '"/></a></div>';
resultHtml += html;
}

/* ソーシャルボタン*/
.snsshare {
width: 100%;
height: 104px;
margin-bottom:10px;
}

.snsshare a {
width: 50%;
margin-bottom: 0px;
padding: 8px 0;
float: left;
font-size: 20px;
font-weight: bold;
color: #ffffff !important;
text-align: center;
display: inline-block;
text-decoration: none;
}

.snsshare a:hover {
color: #ffffff;
text-decoration: none;
opacity: 0.6 !important;
}

.snsshare a.share_fb { background-color: #3B5998; }
.snsshare a.share_tw { background-color: #00ACEE; }
.snsshare a.share_bookmark { background-color: #008FDE; }
.snsshare a.share_rss { background-color: #70CA3B; }

/*ライター紹介*/

.writer {border: solid 2px #d3d3d3;
padding: 10px 10px 0 10px;
}

/*広告本文内*/

.insentence-adsense {
text-align: center;
}

/*記事下*/

.adsense{float: left;
margin-right: 10px;
}

/* snsボタン */

/* 全般設定 */

.snsshare2 {
width: 100%;
height: 180px;
margin-bottom: 10px;
}
.snsshare2 a {
width: 48%;
height: 25px;
margin-bottom: 10px;
padding: 14px 0;
float: left;
font-size: 1.13em; /* 18px */
font-weight: bold;
color: #ffffff;
text-align: center;
letter-spacing: 0.1em;
display: inline-block;
text-decoration: none;
}
.snsshare2 a:hover {
color: #ffffff;
text-decoration: underline;
}
/* facebook設定 */
.snsshare2 a#share_fb {
background-color: #3B5998;
border: 2px solid #3C5A98;
margin-right: 2%;
}
/* Twitter設定 */
.snsshare2 a#share_tw {
background-color: #00ACEE;
border: 2px solid #0193CB;
}
/* hatena!設定 */
.snsshare2 a#share_hatena {
color: #3D3F44;
border: 2px solid #3D3F44;
background: #ffffff;
margin-right: 2%;

/*グーグルプラス*/

.snsshare2 a#share_google {
background-color: #D43D37;
border-bottom: 1px solid #8D2D1D;
}

/*footer*/
.ssImg{
height: 80px;
width: 80px;
padding: 0;
}
.ssTitle{
font-size: 90%;
}
.ssPanel{
border-top: 1px solid rgb(228, 228, 228) !important;
border-bottom: none !important;
width: 49% !important;
height: 100px !important;
float: left !important;
margin-right: 1% !important;
}
.ssLimitedContainerHeader > div > div > div{
color: #ffffff ;
background: #202f55;
font-size: 16px ;
padding: 10px 5px 10px 10px !important;
margin-top: 15px;
}

/*スマホ*/
@media screen and (max-width:680px){
.ssPanel{
width: 100% !important;
}
}

/*シェアボタン*/

.share-3d{
margin-bottom: 10px;
text-align: center;
}
.share-3d-inner a {
position: relative;
display: inline-block;
width: 18%;
height: 40px;
line-height: 20px;
border-radius: 5px;
font-size: 16px;
text-align: center;
color: #ffffff;
text-decoration: none;
}
.share-3d .small-text{
font-size: 10px;
}
.share-3d .hatena-bookmark-button{
background: #00A4DE;
box-shadow: 0 3px #43638b;
}
.share-3d .twitter-button{
background: #55ACEE;
box-shadow: 0 3px #0092ca;
}
.share-3d .googleplus-button{
background: #C53727;
box-shadow: 0 3px #ad3a2d;
}
.share-3d .facebook-button{
background: #405BA7;
box-shadow: 0 3px #2c4373;
}
.share-3d .pocket-button{
background: #EE4256;
box-shadow: 0 3px 0 #c0392b;
}
.share-3d a:active{
top: 3px;
box-shadow: none;
}
.share-3d .hatena-bookmark-button:active{
background: #43638b;
}
.share-3d .twitter-button:active{
background: #0092ca;
}
.share-3d .googleplus-button:active{
background: #ad3a2d;
}
.share-3d .facebook-button:active{
background: #2c4373;
}
.share-3d .pocket-button:active{
background: #c0392b;
}

/* 続きを読む */
.entry-content .entry-see-more{
width: 350px;
height: 40px;
padding: 10px;
font-size: 16px;
color: #fff;
text-align: center;
font-weight: solid;
background-color: #32272a;
border-radius: 4px;
line-height: 40px;
-webkit-transition: none;
}
.entry-content .entry-see-more:hover{
color: #fff;
background-color: #74545e;
}

/*follow button*/
.follow-btn{
width: 100%;
text-align: center;
margin-bottom: 10px;
}

/*アド*/
.ad{width: 768px;
margin-left:auto;
margin-right:auto;}

/*カエレバ・ヨメレバ（PC版）*/

.kaerebalink-box, .booklink-box {
border: 2px solid #CCCCCC;
padding: 20px;
width: 90%;
max-width:680px;
margin:0 auto;
}
.kaerebalink-image, .booklink-image {
width:20%;
float: left;
}
.kaerebalink-image a img,.booklink-image a img {
width:100%;
}
.kaerebalink-info, .booklink-info {
width:70%;
margin-left: 2em;
float: left;
}
.kaerebalink-name > a, .booklink-name > a {
font-size: 16px;
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-powered-date, .booklink-powered-date {
font-size: 12px;
}
.kaerebalink-powered-date a, .booklink-powered-date a {
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-link1, .booklink-link2 {
margin-top: 1em;
}
.kaerebalink-link1 div, .booklink-link2 div {
margin-right: 5px;
margin-bottom:3px;
text-align: center;
float:left;
width: 30%;
}
.kaerebalink-link1 div:active, .booklink-link2 div:active {
border-top:3px solid #FFFFFF;
margin-bottom: none;
box-shadow:none;
}
.kaerebalink-link1 div a, .booklink-link2 div a {
color: white;
text-decoration: none;
font-weight: bold;
display:block;
width: 100%;
height: 40px;
line-height: 40px;
}
.shoplinkamazon {
background: #FF9900;
box-shadow: 0 3px #B16A00;
}
.shoplinkamazon:hover {
background: #FFB23F;
}
.shoplinkkindle {
background: #0079BA;
box-shadow: 0 3px #015684;
}
.shoplinkkindle:hover {
background: #2797D4;
}
.shoplinkrakuten {
background: #BF0000;
box-shadow: 0 3px #7B0101;
}
.shoplinkrakuten:hover {
background: #DC3939;
}
.shoplinkkakakucom {
background: #25388E;
box-shadow: 0 3px #081658;
}
.shoplinkkakakucom:hover {
background: #485CB7;
}
.shoplinkyahoo {
background: #750992;
box-shadow: 0 3px #3F0250;
}
.shoplinkyahoo:hover {
background: #8F0FB3;
}
.booklink-footer {
height:0;
clear: left;
}

携帯版

【記事上のhtml】

<div class="share-3d">
<span style="font-size: 8px">シェアする</span>
<div class="share-3d-inner">

<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>

<a href="http://www.facebook.com/share.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button"><i class="blogicon-facebook lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>

<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>

<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="small-text">Google</span></a>

<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>

<a href="http://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button">
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/f/ftmaccho/20150905/20150905143148.png" width="18px" height="18px" alt="LINEで送る" /><br><span class="small-text">Line</span>
</a>
</div>
</div>

【記事下のhtml】

<div class="share-3d">
<span style="font-size: 8px">シェアする</span>
<div class="share-3d-inner">

<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>

<a href="http://www.facebook.com/share.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button"><i class="blogicon-facebook lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>

<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>

<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="small-text">Google</span></a>

<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>

<a href="http://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button">
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/f/ftmaccho/20150905/20150905143148.png" width="18px" height="18px" alt="LINEで送る" /><br><span class="small-text">Line</span>
</a>
</div>
</div>

/* sns followボタン */
/* 全般設定 */
.snsshare2 {
width: 100%;
height: 180px;
margin-bottom: 10px;
}
.snsshare2 a {
width: 47%;
height: 30px;
margin-bottom: 10px;
padding: 14px 0;
float: left;
font-size: 14px; /* 18px */
font-weight: bold;
color: #ffffff;
text-align: center;
letter-spacing: 0.1em;
display: inline-block;
text-decoration: none;
}
.snsshare2 a:hover {
color: #ffffff;
text-decoration: underline;
}
/* facebook設定 */
.snsshare2 a#share_fb {
background-color: #3B5998;
border: 2px solid #3C5A98;
margin-right: 2%;
}
/* Twitter設定 */
.snsshare2 a#share_tw {
background-color: #00ACEE;
border: 2px solid #0193CB;
}
/* hatena!設定 */
.snsshare2 a#share_hatena {
color: #3D3F44;
border: 2px solid #3D3F44;
background: #ffffff;
margin-right: 2%;

}
/* feedly設定 */
.snsshare2 a#share_feedly {
background-color: #70CA3B;
border: 2px solid #69A205;
}
/*instagram*/
.snsshare2 a#share_instagram {
background-color: #3f729b;
border-bottom: 1px solid #21AA10;
margin-right: 2%;
}
/*グーグルプラス*/
.snsshare2 a#share_google {
background-color: #D43D37;
border-bottom: 1px solid #8D2D1D;
}

/*ライター紹介*/
.writer {border: solid 2px #d3d3d3;
padding: 10px 10px 0 10px;
}

/*カエレバ・ヨメレバ（スマホ版）*/
.kaerebalink-box, .booklink-box {
border: 2px solid #CCCCCC;
padding: 20px;
width: 80%;
margin:0 auto;
}
.kaerebalink-image, .booklink-image {
margin:0 auto;
text-align:center;
}
.kaerebalink-info, .booklink-info {
margin:10px auto;
padding-top:10px;
border-top:1px solid #CCCCCC;
}
.kaerebalink-name > a, .booklink-name > a {
font-size: 16px;
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-powered-date, .booklink-powered-date {
font-size: 12px;
}
.kaerebalink-powered-date a, .booklink-powered-date a {
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-link1, .booklink-link2 {
margin-top: 1em;
}
.kaerebalink-link1 div, .booklink-link2 div {
margin:5px auto;
text-align: center;
width: 100%;
}
.kaerebalink-link1 div a, .booklink-link2 div a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
display:block;
width: 100%;
height: 40px;
line-height: 40px;
}
.shoplinkamazon {
background: #FF9900;
}
.shoplinkkindle {
background: #0079BA;
}
.shoplinkrakuten {
background: #BF0000;
}
.shoplinkkakakucom {
background: #25388E;
}
.shoplinkyahoo {
background: #750992;
}
.booklink-footer {
height:0;
clear: left;
}

</style>

<div class="follow-btn" >
<span style="font-size:80%; text-align:center">フォローする</span><br>
<div class="snsshare2">

</div>
</div>

<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/gatcha.js" charset="utf-8"></script>

【CSS（フッター）】

スマホのCSSは直接フッターなどに<style type="text/css">から書き込みます。

.touch-item-list {
display: none;
}

#globalheader-container {
display: none;
}

#container{

padding-top: 0px;}

#blog-description {
display: none;
}

.entry-footer-section {
display: none;
}

.search-box {
display: none;
}

.footer-action-wrapper {
display: none;
}

#footer-menu {
display: none;
}

.entry-content {
font-size:13px;
line-height:1.8em;
}

h1.entry-title{
background: #ffd700;
padding: 5px 5px;
margin-bottom: 10px;
}

h1.entry-title a{
font-size: 25px;
}

h2{
margin:10px 0px;
padding:0 0 5px 9px;
border-left:8px solid #8b0000;
border-bottom:2px dashed #dcdcdc;
}
h3{
margin:10px 0px;
padding:0 0 5px 9px;
border-left:6px solid #8b0000;
}
a.keyword{
color:#000000;
}

</style>

そして、トップ画像は960px×210pxで作成して使用します。