さのの雑記

さののの雑記

『浸透力半端ない淡々としたブログ』

はてなブログでカスタマイズした事まとめてみた ※H30.10.6追記

 f:id:sanozakki:20180930074154j:plain
こんにちは、さのです。
 
久しぶりにブログを書こうと思ってログインしたら、アクセスが結構集まってるやん!ってことでこのままではいかんと思い2週間くらいすきま時間を使ってこつこつカスタマイズしてみました。
でもCSSとかなにそれおいしいのレベルの知識の無さなので、色々と他の方のブログを参考にしました。
参考にした方にはささやか過ぎますが、お礼として読者登録(はてブロの方のみ)とこの記事でご紹介させていただきます。
もし読者登録されてないって方がいらっしゃればTwitterの方からご連絡ください・・・。
 
ということで以下がカスタマイズ内容です!
 
 

テーマをBrankに

まずテーマは2カラムのシンプルなデザインにしたかったのでBrankに。
 

ドロップボックスを使って外部CSSを参照させる

最初ははてブロに直接CSSを記述していたのですが、編集窓が使いづらいしテーマCSSと干渉して反映されなかったりと色々大変だったのでドロップボックスにCSSファイルを置いて編集する事にしました。

これが功を奏してカスタマイズするのがとても楽になりましたよ。

www.halu7.com

ただ問題だったのが、私は現在自分のPCを持っていないのでローカルファイルを保存しておくPCをどうしようか悩んでいたのですが、元のCSSファイルさえアップロードすれば、writeboxを使ってブラウザ上で編集する方法が見つかったので解決しました。
ただCSSファイルのバックアップを取っていないので万が一の事があると心配ですね。
 
 

ブログタイトル・ブログ説明文

ふい字

gattolibero.hatenablog.com

ログタイトルは自由ネコさん(id:gattolibero)の記事を参考にしてふい字フォントを追加。
ただ外部フォントは表示速度が気になる。
ちなみに外部CSSで外部フォントを追加する場合は、@font-faceのコードをはてなブログの方へ追加しないとうまく反映されないようです。
ご注意ください。
 
/*ふい字フォント追加*/
@font-face {
font-family: 'HuiFontP109';
src: url('/fonts/public/HuiFont/HuiFontP109.eot');
src: url('/fonts/public/HuiFont/HuiFontP109.eot?#iefix') format('embedded-opentype'), url('/fonts/public/HuiFont/HuiFontP109.woff') format('woff'), url('/fonts/public/HuiFont/HuiFontP109.ttf') format('truetype'), url('/fonts/public/HuiFont/HuiFontP109.svg#HuiFontP109') format('svg');
font-weight: normal;
font-style: normal;
}

こちらを必ずはてなブログ本体のデザインCSSへ記入。

/* ブログタイトル・説明文 */
#title a {
font-family: 'HuiFontP109', sans-serif;/* ブログタイトルをふい字に */
font-size:80px;/* ブログタイトルのサイズ */
color:#000000;/* ブログタイトルの色 */
}
#blog-description {
font-family: 'HuiFontP109', sans-serif;/* 説明文をふい字に */
font-size:21px;/* 説明文のサイズ */
}
 こっちは外部でも可。
ブログタイトルの色は目立たせるために#000000にしてます。
 

センタリング

demacassette2.hateblo.jp

ハイポジさんの記事を参考にブログタイトルと説明文をセンタリング。

#blog-title-content {
text-align: center;/* ブログタイトル・説明文をセンタリング */
}
 
 

パンくずリスト

ヘッダーのパンくずリストを消し、記事タイトル下に表示

blog.minimal-green.com

パンくずリストをそのまま表示するとグレーの段ができて不格好なので非表示にして記事上に移動。

記事上のカテゴリーと被るのでそちらも非表示に。

/* 本来のパンくずリストを非表示 */
.page-entry #top-box {
display: none;
}
/* 記事上パンくずリストのサイズ・余白 */
#bottom-box {
margin:12px 0;
font-size:13px;
}
/* タイトル下のカテゴリー非表示 */
.entry-categories {
  display:none;
}
 

トップとカテゴリーボタンのデザイン変更

デザインはゆうう兄さんのを丸パクリで参考にさせていただきました。

#bottom-box div a {
    background-color:#40B3EC;/* 背景色 */
    padding:4px;/* 文字周りの余白 */
    font-size: 11px;/* 文字サイズ */
    border-radius:3px;/* 囲いの丸み */
    color: #fff;/* 文字色 */
    line-height: 2.5em;
}
#bottom-box div a:hover {opacity: 0.5;}/* マウスオーバー時薄く */
 

現在の記事名を非表示に

記事タイトルとも被ってしまうので一番最後の項目を消しました。

#bottom-box .breadcrumb-child:last-child{display:none;}/* 現在の記事名を非表示 */
 
 

記事タイトル

フォントサイズを変更し、ふい字・センタリング

記事タイトルもふい字にしてセンタリング。
色は#111111。
でも妻に説得力がなくなりそうと言われたので考え直すかも。

あとふい字フォントで一部対応していない文字や、ひらがなの「き」だけ別のフォントになってない!?ってのがあるので悩んでます。

/*記事タイトル*/
.entry-title{
    font-weight: bold;
    font-size: 250%;
    padding: 20px 0px;
    margin: 10px 0px 10px 0px;
    color: #111111;
    text-align: center;
    font-family: 'HuiFontP109', sans-serif;
}
 
 

目次

表示・非表示ボタン、枠を追加

哀愁dogさんのを色変えただけ。
/*-----もくじのカスタマイズ-----*/
/*既存のデザイン初期化*/
.entry-content .table-of-contents {
   background: none;
   border: none;
   border-radius: 0;
}
/*目次から中小見出しを消す*/
.table-of-contents ul ul{
    display: none;
}
.table-of-contents ul{
    display: none;
}
/* 最上部に「もくじ」を追加 */
.table-of-contents:before{
   content: "【もくじ】";
   font-size: 100%;
   font-weight: bold; /* 文字の太さ */
}
/*目次横に、番号をつける*/
.table-of-contents li,
.table-of-contents ul{
   list-style-type: decimal;/*見出し左の記号*/
}
/*目次の形・文字の位置・文字の大きさ*/
.entry-content .table-of-contents {
   font-size: 90%;
   font-weight: bold;
   background: #f8f8f8 ; /* 目次の背景色 */
   padding: 10px 10px 10px 50px;  /*上・右・下・左*/
   margin: 0;
   margin-bottom:1em;/*見出し下の文字との余白*/
   border-radius:5px; /* 目次の枠の角の丸さを調節 */
   box-shadow: 0 3px 15px rgba(0,0,0,0.2);
}
/*文字のリンク色変更*/
.table-of-contents a:link{
   color:#40B3EC; /*リンク色はここを変更*/
   text-decoration: none;
}
.table-of-contents a:visited{
   color: #B0AC87; /*訪問済みリンク色はここを変更*/
}
.table-of-contents a:hover{
   color: #d2b48c;
   text-decoration:underline; /*下線をつける*/
}
 /*============================================
     折りたたみの目次 ボタン部分のカスタマイズ
================================================*/
/*折りたたみの目次 目次を見る 記事挿入 カスタマイズ*/
.table-of-contents{
    display: none;/*元の目次を消す*/
}
/*ボタンの見た目について*/
.show-area{
    display: inline-block;  /*なくても動く、一応残してある*/
    cursor: pointer;  /*触れた時の、カーソル変化*/
    padding: 0.5em 1em;
    margin-bottom: 1em; /*ボタンと目次との余白*/
    text-decoration: none;/*アンダーラインを消す、多分要らない*/
    background: #f7f7f7;  /*背景色*/
    border-left: solid 6px #40B3EC;/*左線*/
    color: #40B3EC;/*文字色*/
    font-size: 120%;  /*ボタン内の文字サイズ*/
    font-weight: bold; /*文字を太くする*/
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*水平右・垂直下・ぼかし距離・広がり距離・red・green・blue・透明*/
}
.show-area:active{  /*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
}
 
 

見出し

大見出し

www.notitle-weblog.com

シロマさんの記事から見出しタイプ3を拝借。

.entry-content h3 {
  padding: 4px 10px;
  color: #222222;
  border-top: 3px solid #40B3EC;
  border-bottom: 3px solid #40B3EC;
}
 

中見出し

こちらのサルワカさんを参考に、下にラインを引いて色を調整。

.entry-content h4{
 position:relative;
 padding-left:30px;
 line-height: 140%; 
 border-bottom: 2px solid #bbbbbb;
 color: #222222;
}
h4:after, h4:before{
 content:''; 
 height:18px; 
 width:4px; 
 display:block; 
 background: #40B3EC; 
 position:absolute; 
 top:4px; 
 left:15px; 
 border-radius:10px;
 -webkit-border-radius:10px;
 -moz-border-radius:10px; 
 transform:rotate(45deg);
 -webkit-transform:rotate(45deg);
 -moz-transform:rotate(45deg);
 -o-transform:rotate(45deg);
 -ms-transform:rotate(45deg);
}
h4:before{
 height:10px; 
 transform:rotate(-45deg);
 -webkit-transform:rotate(-45deg);
 -moz-transform:rotate(-45deg);
 -o-transform:rotate(-45deg);
 -ms-transform:rotate(-45deg); 
 top:10px; 
 left:7px
}
 

小見出し

www.okuni.me

小見出しのデザインはオークニズムさんから。

一応デザインは決めたけどさ、小見出しって殆ど使わなくない!?

h5 {
padding-bottom: .5em;
color: #222222;
}
h5:first-letter {
margin-right: .1em;
font-size: 2em;
}
 
 

本文

サイズ・色を変更

naifix.com

この二つの記事を参考に読みやすいように設定。

サイズを17px、色を#444444に変更

.entry-content {
font-size:17px;
color:#333333;
}
.entry-content a:link {
text-decoration: underline;
color:#1A0DAB;/*リンク色*/
}
.entry-content a:visited {
text-decoration: underline;
color:#660099;/*訪問済みリンク色*/
}
.entry-content a:hover {
text-decoration: none;
}/*マウスオーバーリンク色*/
 

アプリによってpタグ、divタグが変わる問題 ※H30.10.6追記

あると思います。

私はPC、スマフォアプリ、evernoteを使い分けています。

それによって改行のされ方がpタグとdivタグで違ってくるのが気になったのでこちらの記事を参考にしてCSSで修正しました。

cimo1212pyth.hateblo.jp

 
.entry-content p,
.entry-content div{
    margin: 0.6em;
line-height: 1.7;
}
 

キーワード下線を消す

フクロウさんの記事を参考にキーワードリンクと下線で記事が読みづらいので消した。

はやくPROにすればいいのだけれども。

/* 邪魔なキーワード下線を消す */
a.keyword {
border: 0 !important;
text-decoration: none !important;
pointer-events: none !important;
cursor: default;
color: #333333;
}
 
 

画像のセンタリング

左寄せになってたようなのでセンタリング。

/* 写真中央寄せ */
.hatena-fotolife, .http-image {
display: block;
margin: 0px auto;
}
 
 

引用

saruwakakun.com

またサルワカさんのデザインを拝借して色を調整しました。 

blockquote {
    position: relative;
    padding: 10px 10px 10px 32px;
    box-sizing: border-box;
    font-style: italic;
    color: #464646;
    background: #cde4ff;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: -6px;
    left: -5px;
    vertical-align: middle;
    content: "“";
    font-family: sans-serif;
    color: #777777;
    font-size: 70px;
    line-height: 1;
    z-index: 2;
}

blockquote:after{
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    border-width: 0 0 40px 40px;
    border-style: solid;
    border-color: transparent #ffffff;
}

blockquote p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
blockquote a:link {
text-decoration: underline;
color:#1A0DAB;
}
blockquote a:visited {
text-decoration: underline;
color:#660099;
}
blockquote a:hover {
text-decoration: none;
}
 
 

サイドバー

サイドバータイトル

ふい字にして両端に線を。

/* サイドバータイトル 直線重ねる */
.hatena-module-title {
    color: #111111;
    font-size: 180%;/* 文字サイズ */
    position: relative;
    text-align: center;/* センタリング */
    display: -webkit-flex;
    display: flex;
    padding: 0;
    margin-bottom:15px;
    align-items: center;
    font-family: 'HuiFontP109', sans-serif;
    font-weight:bold;
}
.hatena-module-title::before,
.hatena-module-title::after {
    content: '';
    flex-grow: 1;
    background-color:#555;
    height: 1px;
}
.hatena-module-title::before {
     margin-right: .5em;
}
.hatena-module-title::after {
     margin-left:.5em;
}
 

プロフィールコメント

文字を若干大きくして、リンク色を変えた。

/*サイドバープロフィール*/
.hatena-module-profile {
color:#333333;
font-size: 17px;
}
.hatena-module-profile a:link {
text-decoration: underline;
color:#1A0DAB;/*リンク色*/
}
.hatena-module-profile a:visited {
text-decoration: none;/*訪問済みリンク色*/
color:#660099;}
.hatena-module-profile a:hover {text-decoration: none;}/*マウスオーバーリンク色*/
 

フォローボタン

ゆきひーさん丸パクリしましたごめんなさい。

/*サイドバーのフォローボタン*/
.follow-btn{
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.follow-btn a {
display: inline-block;
width: 70px;
height: 70px;
line-height: 32px;
font-size: 18px;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.follow-btn .hatena {
color: #3D3F44;
border: 2px solid #3D3F44;
background: #ffffff; 
}
.follow-btn .twitter {
color: #00ACEE;
border: 2px solid #00ACEE;
background: #ffffff; 
}
.follow-btn .feedly { 
color: #70CA3B;
border: 2px solid #70CA3B;
background: #ffffff;
}
.follow-btn .hatena:hover {
color: #ffffff;
background: #3D3F44;
transition: all .3s;
}
.follow-btn .twitter:hover {
color: #ffffff;
background: #00ACEE;
transition: all .3s;
}
.follow-btn .feedly:hover {
color: #ffffff;
background: #70CA3B;
transition: all .3s;
}
.text-small{
font-size: 15px;
}
 

カエレバ

rough-log.com

 こちらの記事のデザインを拝借してます。

時間があるときに他のデザインとの親和性を高めるよう調整する予定です。

/* カエレバ・ヨメレバ・トマレバ */
.cstmreba {
width: 98%;
height:auto;
margin:36px 0;
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
line-height: 1.5;
word-wrap: break-word;
box-sizing: border-box;
display: block;
}
.cstmreba a {
transition: 0.8s ;
color:#285EFF; /* テキストリンクカラー */
}
.cstmreba a:hover {
color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
}
.cstmreba .booklink-box,.cstmreba .kaerebalink-box,.cstmreba .tomarebalink-box {
width: 100%;
background-color: #fff;  /* 全体の背景カラー */
overflow: hidden;
border-radius: 0px;
box-sizing: border-box;
padding: 12px 8px;
}
/* サムネイル画像ボックス */
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
width:150px;
float:left;
margin:0 14px 0 0;
text-align: center;
}
.cstmreba .booklink-image a,
.cstmreba .kaerebalink-image a,
.cstmreba .tomarebalink-image a {
width:100%;
display:block;
}
/* サムネイル画像 */
.cstmreba .booklink-image a img,.cstmreba .kaerebalink-image a img,.cstmreba .tomarebalink-image a img {
margin:0 ;
padding: 0;
text-align:center;
}
.cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info {
overflow:hidden;
line-height:170%;
color: #333;
}
/* infoボックス内リンク下線非表示 */
.cstmreba .booklink-info a,
.cstmreba .kaerebalink-info a,
.cstmreba .tomarebalink-info a {
text-decoration: none;	
}
/* 作品・商品・ホテル名 リンク */
.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a,
.cstmreba .tomarebalink-name>a {
border-bottom: 1px dotted ;
font-size:16px;
}
/* タイトル下にPタグ自動挿入された際の余白を小さく */
.cstmreba .kaerebalink-name p,
.cstmreba .booklink-name p,
.cstmreba .tomarebalink-name p {
margin: 0;
}
/* powered by */
.cstmreba .booklink-powered-date,
.cstmreba .kaerebalink-powered-date,
.cstmreba .tomarebalink-powered-date {
font-size:10px;
line-height:150%;
}
.cstmreba .booklink-powered-date a,
.cstmreba .kaerebalink-powered-date a,
.cstmreba .tomarebalink-powered-date a {
border-bottom: 1px dotted ;
color: #333;
}
.cstmreba .booklink-powered-date a:hover,
.cstmreba .kaerebalink-powered-date a:hover,
.cstmreba .tomarebalink-powered-date a:hover {
color:#333;
}
/* 著者・住所 */
.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address {
font-size:12px;
}
.cstmreba .kaerebalink-link1 img,.cstmreba .booklink-link2 img,.cstmreba .tomarebalink-link1 img {
display:none !important;
}
.cstmreba .kaerebalink-link1,.cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 {
display: inline-block;
width: 100%;
margin-top: 5px;
}
.cstmreba .booklink-link2>div, 
.cstmreba .kaerebalink-link1>div, 
.cstmreba .tomarebalink-link1>div {
float:left;
width:31%;
min-width:125px;
margin:0.5% 1%;
}
/***** ボタンデザインここから ******/
.cstmreba .booklink-link2 a, 
.cstmreba .kaerebalink-link1 a,
.cstmreba .tomarebalink-link1 a {
width: 100%;
display: inline-block;
text-align: center;
box-sizing: border-box;
font-size: 13px;
font-weight: bold;
line-height: 180%;
padding:3% 1%;
margin: 1px 0;
border-radius: 4px;
box-shadow: 0 2px 0 #ccc;
background: -moz-linear-gradient(top,#fafafa,#EEE);
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eee));
}
.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover,
.cstmreba .tomarebalink-link1 a:hover {
text-decoration: underline;
}
/* トマレバ */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a { color: #76ae25; }/* 楽天トラベル */
.cstmreba .tomarebalink-link1 .shoplinkjalan a { color: #ff7a15; }/* じゃらん */
.cstmreba .tomarebalink-link1 .shoplinkjtb a { color: #c81528; }/* JTB */
.cstmreba .tomarebalink-link1 .shoplinkknt a { color: #0b499d; }/* KNT */
.cstmreba .tomarebalink-link1 .shoplinkikyu a { color: #bf9500; }/* 一休 */
.cstmreba .tomarebalink-link1 .shoplinkrurubu a { color: #000066; }/* るるぶ */
.cstmreba .tomarebalink-link1 .shoplinkyahoo a { color: #ff0033; }/* Yahoo!トラベル */
/* カエレバ */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a {color:#ff0033; letter-spacing:normal;} /* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { color:#84be24 ; }	/* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkcecile a { color:#8d124b; } /* セシール */ 
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a {color:#314995;} /* 価格コム */
/* ヨメレバ */
.cstmreba .booklink-link2 .shoplinkkindle a { color:#007dcd;} /* Kindle */
.cstmreba .booklink-link2 .shoplinkrakukobo a{ color:#d50000; } /* 楽天kobo */
.cstmreba .booklink-link2 .shoplinkbk1 a { color:#0085cd; } /* honto */
.cstmreba .booklink-link2 .shoplinkehon a { color:#2a2c6d; } /* ehon */
.cstmreba .booklink-link2 .shoplinkkino a { color:#003e92; } /* 紀伊國屋書店 */
.cstmreba .booklink-link2 .shoplinktoshokan a { color:#333333; } /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.cstmreba .kaerebalink-link1 .shoplinkamazon a, 
.cstmreba .booklink-link2 .shoplinkamazon a { color:#FF9901; } /* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a , 
.cstmreba .booklink-link2 .shoplinkrakuten a { color: #c20004; } /* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkseven a, 
.cstmreba .booklink-link2 .shoplinkseven a { color:#225496;} /* 7net */
/***** ボタンデザインここまで ******/
.cstmreba .booklink-footer {
clear:both;
}
/***  解像度480px以下のスタイル ***/
@media screen and (max-width:480px){
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
width:100%;
float:none;
}
.cstmreba .booklink-link2>div, 
.cstmreba .kaerebalink-link1>div, 
.cstmreba .tomarebalink-link1>div {
width: 49%;
margin: 0.5%;
}
.cstmreba .booklink-info,
.cstmreba .kaerebalink-info,
.cstmreba .tomarebalink-info {
text-align:center;
padding-bottom: 1px;
}
}
.cstmreba .booklink-box, .cstmreba .kaerebalink-box, .cstmreba .tomarebalink-box {
width: 100%;
background-color: #fff;  /* 全体の背景カラー */
overflow: hidden;
border: 1px solid #ddd;  /* 外枠 */
border-radius: 0px;
box-sizing: border-box;
padding: 12px 8px;
}
 
 

今後追加していきたいカスタマイズ

ふい字フォントの読み込み速度を上げる

ふい字フォントは気に入っているのですが、外部フォントを使用すると読み込み速度が気になる。
早くする方法があるようなので、研究中。
 

トップに戻るボタンの設置

スクロールが苦痛になるほどの長文はあまり書かないけど、あった方がなんとなく便利かなと。
 

目次デザインを変えたい

なんとなくこのブログの中で1箇所だけ浮いてるよなって思います。
今後1番最初に手をつけたいところ。
 
 

カエレバのデザインを変えたい

ここもブログの雰囲気と合っていない気がするので、もっと調整します。