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

税と暮らし

暮らしに関わる税を書くはずが…気になるコト、イロイロ書いていますw

【はてなブログ】テーマ「Report」で行ったカスタマイズ 一覧(まとめ)

f:id:tax-life:20170403222347p:plain

 先日、「彼女♡ごはん~大好きな彼女に作ったごはんのレシピメモ」

で使用したテーマ「ZENO-TEAL
こちらのブログでも使って見ようかと思いテーマ変更しました←飽きっぽい性格ですw

 

そこで、テーマ「Report」で行ったカスタマイズをまとめてみました

  

kanojo-gohan.hateblo.jp

 

 

横幅のカスタマイズ

横幅が少し狭かったので、下記のコードをデザインCSSに書いて全体的に横幅を広げました

 

/* 横幅の変更始まり */
#container {
width: 1200px; /* 全体の横幅を変更 */
text-align: center;
margin: 0 auto;
background: #fff;
padding: 0 30px;
}
#wrapper {
width: 800px; /* メインの横幅を変更 */
float: left;
}
#box2 {
width: 350px; /* サイドバーの横幅を変更 */
float: right;
font-size: 14px;
word-wrap: break-word;
}
/* 横幅の変更終わり */

 

 

ヘッダー画像の設定とタイトルの削除

こちらは
デザイン > カスタマイズ > ヘッダ
の所にあるデフォルトの設定では大きな画像を設定できなかったので下のコードをデザインCSSに書きました

 

/* ヘッダー画像設定始まり */
#blog-title {
background-image: url("#");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
text-align: center;/* 中央寄せ */
height: 260px;/* 表示したい画像の高さ */
margin: 0;
padding: 0;
top: 0;
width: 100%;/* 幅100%に */
}
/* ヘッダー画像設定終わり */
/* ブログタイトルを消す始まり */
#title,#title a {
font-size:0%;
}
/* ブログタイトルを消す終わり */
/* ブログタイトルの説明を消す始まり */
#blog-description {
font-size:0%;
}
/* ブログタイトルの説明を消す終わり */

 

サイドバーのタイトルに背景色をつける

デフォルトの設定だとサイドバーのタイトルがわかりづらかったので下のコードを書いて背景色をつけました

 

.hatena-module-title {
border-bottom: 1px solid #ddd;
background: #ffe5e8;
color: black;
}

 

www.tax-life.com

 

グローバルメニューの設置

まずは
デザイン > カスタマイズ > ヘッダ > タイトル下
に下のコードを書き込みます

 

<!--グローバルメニュー始まり-->
<div id="menubar">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
<li><a href="#">メニュー6</a></li>
<li><a href="#">メニュー7</a></li>
<li><a href="#">メニュー8</a></li>
</ul>
<ul>
  <li><a href="#">メニュー9</a></li>
<li><a href="#">メニュー10</a></li>
<li><a href="#">メニュー11</a></li>
<li><a href="#">メニュー12</a></li>
<li><a href="#">メニュー13</a></li>
<li><a href="#">メニュー14</a></li>
<li><a href="#">メニュー15</a></li>
<li><a href="#">メニュー16</a></li>
</ul>
</div>
<!--グローバルメニュー終わり-->

続いてこれを機能させるために
デザイン > カスタマイズ > デザインCSS
に下のコードを書き込みます

 

/* グローバルメニュー始まり */
#menubar{
width:100%; }
#menubar ul{
display:table;
width:100%;
margin: 0;
padding: 0;
background-color: #ffe5e8; }
#menubar li{
display: table-cell;
width:150px;
padding:0;
background-color: #ffe5e8; }
#menubar li a{
display: block;
margin:0 auto;
padding:5px;
border: 1px solid #ffe5e8;
text-decoration: none;
color: #000000;
text-align: center;
font-size: 16px; }
#menubar li a:hover{
color:#ff0000; /* 文字色(赤) */
background-color: #ff99ff; }
/* グローバルメニュー終わり */

 

 

記事下に関連記事「Milliard」の設置

www.tax-life.com

 

その他

まだまだ改善の余地がありそうな画像を並べる方法と、設定してませんがtwitterのタイムラインを表示する方法

 

画像を2枚並べる方法

www.tax-life.com

 

twitterのタイムラインの表示方法

www.tax-life.com