たこさんちゃんねる

WEBであったり、写真であったり、カメラであったり、旅行とか、なんかそんな感じとかでどうでしょうか。

MENU

はてなブログのデザインをカスタマイズしました。

まあやっぱり使っていると気になってくるわけでして…

かといって1からテーマを作るのはめんどくさいので、
ちょろっとデザインに手を加える程度でいじりました。

 デザイン設定のところの、デザインCSSに貼り付ければよかでござる。

f:id:tako3ch:20160217143432p:plain

テーマはこちらを使わせてもらってます。

shiromatakumi.hatenablog.com

 

変更したところですー。

サイト全体のフォントを変更

html,body {
  font-family: Avenir, 'Open Sans', 'Helvetica Neue', "游ゴシック", YuGothic, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', メイリオ, Meiryo, serif;
}

f:id:tako3ch:20160217143654p:plain

f:id:tako3ch:20160217143706p:plain

最近は游シリーズにはまっているので、游ゴシック体に。

文字選択した時の色を変更

::selection { background: #FF6B6B; }
::-moz-selection { background: #FF6B6B; }

f:id:tako3ch:20160217143722p:plain

f:id:tako3ch:20160217143731p:plain

まぁtako3.xyzの時のものをそのまま流用。
#~~のところに好きなからコードで。

タイトル部分の背景色の変更

#blog-title {
background: #556270;
}

#blog-description {
color: #fff;
}

f:id:tako3ch:20160217143752p:plain

f:id:tako3ch:20160217143801p:plain

これ別にここじゃなくてもできるのかな…?普通に設定でできるかも。

タイトル下のNAVメニューの色変更

#global-menu {
background-color: #F1F1F1;
border-bottom: none;
}

.global-menu-list li a {
background-color: #F1F1F1;
color: #666;
}

 

f:id:tako3ch:20160217144751p:plain

f:id:tako3ch:20160217144758p:plain

トップページの記事一覧部分

下線を消したり、記事下の余白調整したり。

.page-index .entry-header {
padding: 0 0 10px 0;
margin-bottom: 0;
border-bottom: none;
position: relative;
}

.page-index .entry-content {
font-size: 100%;
line-height: 1.7;
padding-bottom: 40px;
border-bottom: 1px solid #666;
}

.page-index .entry {
position: relative;
margin-bottom: 50px;
}

 

f:id:tako3ch:20160217150508p:plain

f:id:tako3ch:20160217150519p:plain

続きを読むの前にはてなカードを消す

.page-index iframe.embed-card {
display:none!important;
}

f:id:tako3ch:20160217150552p:plain

f:id:tako3ch:20160217150602p:plain

トップページのスター・コメントを消す

.page-index .entry-footer{
display:none!important;
}

f:id:tako3ch:20160217145012p:plain

f:id:tako3ch:20160217150621p:plain

「続きを読む」ボタンのデザイン変更

.entry-see-more {
padding: 5px 10px;
background-color: #111;
border: 2px solid #111;
text-decoration: none;
color: #fff;
-webkit-transition: all 0.4s;
transition: all 0.4s;
text-align: center;
display: block;
width: 50%;
margin: auto;
}

f:id:tako3ch:20160217150631p:plain

f:id:tako3ch:20160217150639p:plain

スマホの時の、上のNAVメニューの黒い帯

#mobile-head {
height: 43px;
}
#global-menu {
opacity: 1;
}
#global-menu.open {
top: 43px;
}

f:id:tako3ch:20160217145029p:plain

f:id:tako3ch:20160217145037p:plain

ページャー

.page-index .pager .pager-next a {
color: #333;
-webkit-transition: color 0.3s;
transition: color 0.3s;
border: 1px solid #666;
padding: 5px 20px;
}

.page-index .pager .pager-next a:hover {
background:#666;
color:#ccc;
}

 

f:id:tako3ch:20160217150649p:plain

f:id:tako3ch:20160217150657p:plain

記事タイトルのデザイン変更

#title a {
font-size: 1.5em;
font-weight: 100;
color: #fff;
font-family: Avenir, 'Open Sans', 'Helvetica Neue', 游ゴシック, YuGothic, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', メイリオ, Meiryo, serif;
}

.entry-content h2:before {
content: none;
}

 

スマホ時にカテゴリーがかぶっていたので、被らないように変更

.categories a {
padding: 5px 12px;
background-color: initial;
border: 1px solid #ccc;
display: inline-block;
margin: 3px 0;
}

f:id:tako3ch:20160217144417p:plain

f:id:tako3ch:20160217144427p:plain

記事中の見出しのデザイン変更

.entry-content h2 {
color: #333;
background: none;
border-left: 3px solid #C44D58;
padding: 15px;
font-size: 1.4em;
}

.entry-content h4 {
font-size: 135%;
padding-left: 10px;
border-left: 3px solid #111;
border-bottom: none;
color: #333;
font-weight: 400;
}

 

f:id:tako3ch:20160217144823p:plain

f:id:tako3ch:20160217144833p:plain

日付の表示部分の変更

.date a {
color: #666;
background-color: inherit;
font-size: 100%;
}

f:id:tako3ch:20160217144355p:plain

f:id:tako3ch:20160217144404p:plain

サイドバーのプロフィールのテキストを一段ずらす処置

.hatena-module-profile .profile-description {
font-size: 100%;
clear: both;
}

 

f:id:tako3ch:20160217144328p:plain

f:id:tako3ch:20160217144337p:plain

 

まとめ

まあ、あんまり手を加えすぎても、はてなでやってる意味なくなるし、こうしたデザイン修正している間に記事書けますわよねって話だし…

まあいいか!

 

*うちのブログもなんか変えたいーとかあれば相談乗ります。お気軽にどうぞ。

 

 

 

blog.tako3.xyz

blog.tako3.xyz