読者です 読者をやめる 読者になる 読者になる

bunoshi

働き方を考えるブログ

隙間・線・幅の調整、SNSボタンの設置方法。【はてなブログ カスタマイズ】

ブログ運営-はてなブログカスタマイズ ブログ運営

f:id:ranmaru-24mensou:20150807205127p:plain

休みなのでオリジナルテーマの作成に没頭していました。

HTMLやCSSのもともとの知識が無いのでとにかく大変です。本を参考にしたり、ネットで調べたりしながらできるところからカスタマイズしています。

 

カスタマイズしたこと

タイトル下の隙間を調整

タイトル画像との隙間が広すぎるので、調整して狭くしました。

#blog-title {
margin: 5px 0;
padding: 5px 0;

marginとpaddingで50pxだったのを10pxに変更。これでかなりすっきり。左の画像が変更前、右が変更後です。黒猫とグローバルメニューの隙間が小さくなってます。

f:id:ranmaru-24mensou:20150830095135p:plain

 

トップページの画像を中央に移動

記事のトップに入れた画像が左に寄ってしまうので、中央にくるように修正。ただすべての画像が中央寄りになると困るのでTOPページのみにしておく。

.page-index
.entry-content img {
max-width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}

 「.page-index」を加えるとTOPページだけ反映されるから便利。

 

サイドメニューの線を変更 

サイドメニューの最新記事や注目記事の下に出る線の色と見た目を変更。

下のソースの「border-bottom:」の「px」で線の太さ、「dotted」を変えることで線の種類、「#c0c0c0」で色を変えられます。

.hatena-urllist li {
padding: 8px 0;
border-bottom: 1px dotted #c0c0c0;
line-height: 1.5;

「border」で参考にしたサイト。すごく助かりました。

www.htmq.com

 

 カテゴリ表示のパン屑を調整

カテゴリ表示したときのパン屑を調整。#top-boxの「margin」でタイトルとの隙間をゼロにして「border」をなくし、「background-color」で色をつけて帯のようにしました。

ついでに画面いっぱいまで背景色をつけたいのと、文字の位置は記事にそろえたかったので「width」と「margin」を記入。

#top-box {
margin: 0px auto 20px;
font-size: 90%;
background-color: #f5f5f5;
}
#top-box .breadcrumb {
width: 1100px;
margin-left: auto;
margin-right: auto;
border: none;
padding: 10px;

左側の画像が変更前、右側の画像が変更後です。カスタマイズしている時に確認できないのがつらい。一度保存してブログを別のページで表示しないと確認していました。

f:id:ranmaru-24mensou:20150830094234p:plain

 画面いっぱいまで広げるのは後でやります。

 

ページしたにSNSのボタンを設置

他のサイトを見た時によく見かけるオリジナルのボタンを設置したかったんです。と言っても画像を作ったりせずに背景を塗りつぶしてボタンのように見せています。

まずはカスタマイズ⇒記事⇒記事下にHTMLを記入。

<div class="snsbox">
<ul>
<li><a href="http://twitter.com/intent/tweet?text={Title}&amp;url={Permalink}" target="tweetwin" class="snsbox-tw">
twitterでシェア
</a></li>
<li><a href="https://www.facebook.com/sharer/sharer.php?u={Permalink}" onclick="window.open(this.href,'sns','width=500,height=500,menuber=no,toolbar=no,scrollbars=yes'); return false;" class="snsbox-fb">
facebookでシェア
</a></li>
<li><a href="https://plus.google.com/share?url={Permalink}" onclick="javascript:window.open(this.href,'sns','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="snsbox-gp">
google+でシェア
</a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url={Permalink}&title={Title}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加">
はてなブックマーク
</a></li>
</ul>
</div>

 

次にデザインCSSにソースを記入。

/* シェアボタン */
.snsbox {
margin-top: 40px;
}
.snsbox ul {
margin: 0;
padding: 0;
list-style: none;
}
.snsbox li a {
display: block;
padding: 10px 5px;
color: #ffffff;/* リンク文字の色 */
font-size: 14px;
text-align: center;
text-decoration: none
}
.snsbox-tw {
background-color: #55acee;
}
.snsbox-fb {
background-color: #3b5998;
}
.snsbox-gp {
background-color: #dd4b39;
}
.hatena-bookmark-button {
background-color: #008fde;
}
.snsbox li a:hover {
opacity: 0.6
}
.snsbox ul:after {
content: "";
display: block;
clear: both;
}
.snsbox li {
float: left;
width: 25%;/* ボタンの幅 */
}

そして出来上がったのがこれ!

f:id:ranmaru-24mensou:20150830132513p:plain

すごくシンプル!でもこんな形が好き。本当はカウントもしたかったんだけどどうやるのか分からないからあきらめました。

 

タイトルとグローバルナビゲーションを横幅一杯に変更

横幅を1100pxにしているせいか、グローバルナビゲーションの左右が途中で切れています。やっぱり画面いっぱいに表示したいので、タイトル部分とグローバルナビゲーションの横幅を指定しないようにしました。

いじったのはここ。

/* container */
#container {
width: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
padding-top: 37px;
}
#container #content {
width: 1100px;
margin-left: auto;
margin-right: auto;
display: block;
*zoom: 1;

やり方があっているかどうかは知りませんが、思った通りの形になったからあっているんでしょう。たぶん。

広がった分グローバルナビゲーションの文字も画面の左端まで動いてしまい、見た目が良くないので記事と同じ位置まで移動させました。

まずはHTMLを修正。

<div class="navi">
<div class="navi-inner">
<nav class="menu">
<ul>
<li><カテゴリURL">カテゴリ名</a></li>
</ul>
</nav>
</div>
</div>

次にCSSで幅を指定してあげれば、

.navi-inner{
width: 1100px;
margin-left: auto;
margin-right: auto;
}

画像のように、記事とグローバルメニューの位置がそろいます。

f:id:ranmaru-24mensou:20150830142719p:plain

 上で修正したパン屑も背景も画面いっぱいまで広がるようになりました。

 

カスタマイズしてみて

疲れました。オリジナルテーマを発表している人はすごいですね。この調子でいくとあまり時間がかからずに出来上がりそうです。

でも結局、作るだけで満足して使わないかも。

SNSボタンの作成などはこの本を参考に作っています。

 

 管理人はCSSの素人です。ソースの使用は自己責任でお願いします。


転職30代の転職派遣から正社員ニート・フリーターから正社員働き方コラム転職サイト転職エージェント雑記ブログ運営
免責事項

Presented by bunoshi