はてなブログの全カスタマイズ 全てコピペでOK

f:id:douitasimasite11:20170807124354p:plain

こういうのは長々説明する必要はないのでどんどん紹介していきます!

ヘッダー画像の幅調整などヘッダー全般!

mshitech.hatenablog.com

おすすめのヘッダー画像のロゴ無料作成サイト

www5.ja.flamingtext.com

こちらでは英語になっておりますが全て日本語です。

使い方はシンプルでタイトル名を入力後

好みのロゴを見つけていくだけです。

 

読者ボタンのURL!

ttp://blog.hatena.ne.jp/douitasimasite11/www.dansoku.com/subscribe

赤色の場所を自分のIDに変更

プロフィールについて - はてな

緑色の部分は自分のブログのタイトル(ドメインになります)

ヤフーでしたらttps://www.yahoo.co.jp/

この赤色の部分になります。

(最初のhは抜いておりますので必ず付け加えてください)

 

読者ボタンのカスタマイズ!

www.thoughts-make-things.com

 

アイコンファビコン素材!

blog.codecamp.jp

こちらで選ぶといいかもです!

search.yahoo.co.jp

 

はてなブログ独自ドメイン変更方法!

www.japan-secure.com

 

はてなブログおすすめのテンプレート!

happylife-tsubuyaki.hatenablog.com

レスポンシブデザイン対応のテンプレートの方がおすすめかと思います。

これはどの端末から閲覧しても全てPC版と同じように表示されます。

レスポンシブデザインに対応していないテンプレートはPC版デザインとスマホ版デザインとで分かれるのであまりおすすめはしません。

ただレスポンシブデザインはスマホ版では表示速度がかなり落ちます。

 

スクリプトの設定

スクリプトを直接記事下などに書くと読み込みが遅くなる場合があるので画像の場所に追加していくようにしましょう。

f:id:douitasimasite11:20170807130251p:plain

 

ブログの表示速度を上げる方法!

www.notitle-weblog.com

ブログの表示速度が落ちる原因は主にGoogle関連のスクリプトと画像です

スクリプトは後から読み込ませるようにすると少し表示速度は上がります。

画像は出来る限り圧縮した方が表示速度の改善に繋がると思います。

blog.codecamp.jp

スクリプトに関連したもの

jquery読み込み先の変更である程度表示速度は改善するかもしれません。

www.weblog-life.net

 

色々な種類の関連記事ブログパーツ!

www.jimpei.net

http://www.hiroseyonaka.com/entry/2016/09/02/212651

 

関連記事のカスタマイズ!

shota-natuta.hatenablog.com

こちらに関連するもの

happylife-tsubuyaki.hatenablog.com

 

はてなのブログのパンくずリストのカスタマイズ!

www.marvelousone.tokyo

パンくずリストのCSSはそれぞれ違います。

自分のサイトのパンくずリストを右クリックで検証します(Chromeの場合)

パンくずリストのクラスを探します。

class="breadcrumb-child"

この赤色の部分がパンくずリストの基本スタイルになります。

 

はてなブログにおしゃれなソーシャルボタンを設置(コピペ一で発)!

【はてなブログカスタマイズ】色々な「SNSシェアボタン」と「フォローボタン」を集めてみた。 - BACKFLOW

www.ituore.com

www.clrmemory.com

www.yukihy.com

 

はてなブログフッターカスタマイズ!

design.syofuso.com

 

はてなブログにおしゃれなメニューバーを設置してみよう!

www.yukihy.com

これに関連してメニューバーを固定する方法

www.subcul-girl.com

 

はてなブログに目次を設置(コピペで一発)!

mshitech.hatenablog.com

staff.hatenablog.com

 

サイドバーの広告などを固定する方法!

www.no-overtime-day.com

 

Google AdSenseなどの広告を記事下に2つ並べる方法!

www.maskednishioka.com

 

はてなブログの見出しのカスタマイズ方法!

www.notitle-weblog.com

www.tsubasa-note.blog


はてなブログの引用枠部分のカスタマイズ

matsuda-risako.hatenablog.com

www.shotanomad.com

 

記事一覧をカード風にカスタマイズ!

blog.wackwack.net

 

カエレバのカスタマイズ!

kaereba.com

まずこちらにアクセスしてIDなどの設定をして下さい(簡単です)。

jimeishi.net

open-cage.com

www.tsubasa-note.blog

僕が使っているカエレバのCSSです!

.booklink-box, .kaerebalink-box, .tomarebalink-box{
box-sizing: border-box;
border: solid 1px #5d5d5d;
border-radius:2px;
font-size:small;
padding:10px;
margin-bottom: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.booklink-image, .kaerebalink-image, .tomarebalink-image{
margin:0 15px 0 0;
width: 160px;
text-align: center;
-webkit-flex: 0.6;
flex: 0.6;
}
.cstmreba img{
margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info, .tomarebalink-info{
-webkit-flex: 2;
flex: 2;
margin:0;
line-height:120%;
overflow: hidden;
}
.booklink-name, .kaerebalink-name, .tomarebalink-name{
line-height:1.5em;
}
.booklink-name a, .kaerebalink-name a, .tomarebalink-name a{
text-decoration:none;
font-weight:800;
}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date{
background-color:#DDD;
border-radius:2px;
padding:2px;
font-size:8px;
text-align:right;
font-family:verdana;
line-height:120%;
margin-bottom:5px
}

.booklink-powered-date a, .kaerebalink-powered-date a, .tomarebalink-powered-date a{
text-decoration:none;
font-weight:400;
}
.booklink-detail, .kaerebalink-detail, .tomarebalink-address{
font-size: 12px;
}
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1{
flex-wrap: wrap;
display: -webkit-flex;
display: flex;
}
.booklink-link2 a,
.kaerebalink-link1 a,
.tomarebalink-link1 a {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inline-block;
margin:5px 2px 0 0;
padding:10px 1px;
text-align:center;
text-decoration:none;
font-weight:800;
font-size:12px;
}
.booklink-link2 a:hover, .kaerebalink-link1 a:hover, .tomarebalink-link1 a:hover{
color:#fff;
}
.booklink-link2 a:active, .kaerebalink-link1 a:active, .tomarebalink-link1 a:active{
position:relative;
top:1px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkkakakucom, .shoplinkrakukobo, .shoplinkyahoo, .shoplinkseven, .shoplinkjtb, .shoplinkjalan {
width: 48%;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkkindle a, .shoplinkkakakucom a, .shoplinkrakukobo a, .shoplinkyahoo a, .shoplinkseven a, .shoplinkjtb a, .shoplinkjalan a {
width: 100%;
}
/* amazon */
.shoplinkamazon a {
color: #FF9901 ; /* 文字の色 */
border: solid 1px #FF9901 ; /* ボーダー色 */
}
.shoplinkamazon a:hover {
background-color: #ff9901; /* カーソルを重ねた時の背景色 */
}
/* 楽天 */
.shoplinkrakuten a {
color: #c20004 ; /* 文字の色 */
border: solid 1px #c20004 ; /* ボーダー色 */
}
.shoplinkrakuten a:hover {
background-color: #c20004; /* カーソルを重ねた時の背景色 */
}
/* kindle */
.shoplinkkindle a {
color: #007dcd; /* 文字の色 */
border: solid 1px #007dcd ; /* ボーダー色 */
}
.shoplinkkindle a:hover {
background-color: #007dcd; /* カーソルを重ねた時の背景色 */
}
/* 価格 */
.shoplinkkakakucom a {
color: #314995; /* 文字の色 */
border: solid 1px #314995 ; /* ボーダー色 */
}
.shoplinkkakakucom a:hover {
background-color: #314995; /* カーソルを重ねた時の背景色 */
}
/* kobo */
.shoplinkrakukobo a {
color: #990000; /* 文字の色 */
border: solid 1px #990000 ; /* ボーダー色 */
}
.shoplinkrakukobo a:hover {
background-color: #990000; /* カーソルを重ねた時の背景色 */
}
/* yahoo */
.shoplinkyahoo a {
color: #7b0099; /* 文字の色 */
border: solid 1px #7b0099 ; /* ボーダー色 */
}
.shoplinkyahoo a:hover {
background-color: #7b0099; /* カーソルを重ねた時の背景色 */
}
.shoplinkyahoo img {
display: none;
}
.shoplinkyahoo a {
font-size: 10px;
}
/* 7net */
.shoplinkseven a {
color: #82c36f ; /* 文字の色 */
border: solid 1px #82c36f ; /* ボーダー色 */
}
.shoplinkseven a:hover {
background-color: #82c36f; /* カーソルを重ねた時の背景色 */
}
/* jtb */
.shoplinkjtb a {
color: #990000 ; /* 文字の色 */
border: solid 1px #990000 ; /* ボーダー色 */
}
.shoplinkjtb a:hover {
background-color: #990000; /* カーソルを重ねた時の背景色 */
}
/* jalan */
.shoplinkjalan a {
color: #FF9901 ; /* 文字の色 */
border: solid 1px #FF9901 ; /* ボーダー色 */
}
.shoplinkjalan a:hover {
background-color: #FF9901; /* カーソルを重ねた時の背景色 */
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover,
.tomarebalink-link1 a:hover{
font-weight:800;
}
.booklink-footer{display: none;} 

 

画像にマウスを乗せたら透過する方法!

a:hover img {
opacity: 0.5;
}

基本はこのスタイルです。

ここから背景や枠線を出したりアニメーションにしたりとなんでもできます。

 

はてなブログで出る予期せぬ余白や横スクロールバーを直す方法!

html {
background: initial;
}


html,body{
width: 100%;
}

余白をなくす(どちらも試してみて下さい。両方追加するとデザインが崩れる可能性があります)

 

#container {
overflow: hidden;
}

横スクロールバーを非表示にする 

これらの方法を使っても余白や横スクロールバーが出る場合おそらく原因は広告になります。一旦すべての広告を外してから試してみて下さい。

 

はてなブログのカスタマイズのことで分からないことがありましたら人力検索はてなで聞くといいと思います。

はてなブログに関する質問 - 人力検索はてな