べアルさんの『絶対』ブログ

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

ジャッスさんの『絶対』ブログ

だらだら文章書いて何がいけないんですか!? ねぇ!?

『Material』テーマの使い方 見出し、色の変更等 

大体はじめのほうの記事はサイトのデザインとかになるんですよ僕。

というわけで紹介です。

 

 

 

『Material』テーマ導入

f:id:bearu:20160612154141p:plain

シンプル  is  ベスト!! 

俗にいうフラットデザインですね。 僕のこれまでのブログもフラットデザインでした。 

それで行き着いたのがこちら、『Material』です!! 

 

webgaku.hateblo.jp

ナビゲーションバーがついてないのが「グヌヌゥ」なんですが、これ以上テーマを探すよりは自分でいじったほうが早いのでこれを使うことにしましたよ。

 

自分で弄るのもだいぶダルいけどね。。。

 

サイドバー導入

今までのサイトのスタイルじゃないと違和感あるんで、そこを直します。 んで、一番気になるのがサイドバー。

でもこのテーマ、サイドバーがない。。。 まぁ、はてブロなら調べりゃ出んだろと思って検索。

 

↓はいキター(苦笑) はてブロ楽すぎンゴw

webgaku.hateblo.jp

んでこのサイトをみて導入しやした。

 

見出し変更

次に見出しを変更 ↓が変更後デザイン。

大見出し 帯

中見出し BOX+下線

少見出し 下線

これは自分の中で完全にきまってるスタイルなのでその通りに修正しました。

ちなみにそれぞれコードは

 

大見出し

.entry-content h3 {
background:#333;
font-size: 160%;
color: #fff;
margin:30px 0 30px -25px;
padding:0px 25px;
width:100%;
line-height: 1.8;
}

 

中〃

.entry-content h4 {

margin: 20px 0px 20px -25px;
padding: 0px 0px 0px 10px;
border-left: 15px solid #aaa;
border-bottom: 2px dotted #aaa;
font-size: 150%;
line-height: 1.8;

}

 

小〃

  .entry-content h5 {
margin: 20px 0px 20px 0px;
border-bottom: 2px dotted #aaa;
padding: 0px 0px 0px 0px;
font-size: 120%;
}

((もし使うなら 余白とか色とかそれぞれカスタマイズしてください~

 

その他変更

飽きたんでこれ導入しましたよって報告だけします。

 

フォント変更

body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Verdana,'MS Pゴシック',sans-serif;
}

 

検索(タイトル消し)

 .hatena-module-body{
border-bottom:none;
}

 

 記事タイトル(サイズ等変更)

 .entry-inner h1 {
font-weight: bolder;
font-size: 250%;
}

 

そんな感じです

 

 

 

おわりんこ。

 

広告を非表示にする