Migaru-Days

身軽に暮らす、考える。

ーおすすめ記事ー

【はてなブログ無料版】3回目のブログカスタマイズのまとめ

スポンサーリンク

 

このブログははてなブログの無料版で、ブログテーマはMinimalismを使っています。

 

このたび、3度目のカスタマイズを行なったのでまとめておきます。

 

f:id:damarin:20180124155857j:plain

 

 

ブログカスタマイズの効果

これまで大きく分けると2回のブログカスタマイズをしてきました。

 

初めてのカスタマイズの記事はこちら

damarin.hatenablog.com

 

2回目のカスタマイズの記事はこちら

damarin.hatenablog.com

 

 

これまで2回の大きなカスタマイズを行い、その後、アクセス数が微妙に増加しました。

 

以前よりブログに人が来るようになり、過去記事を見られると恥ずかしい気持ちから記事のリライトやカテゴリーの集約などもしてきました。

そのことがSEO的に正解(気味?)だったようで、当ブログは検索からの流入が9割以上です。(とはいえ弱小ブログです)

 

これまでは好みのブログにしたくてカスタマイズをしていましたが、現在は好みプラスユーザーの滞在時間が長いブログにしたいな〜と思っています。

 

そのために行ったカスタマイズをまとめておきます。

 

 

ヘッダー

現在のヘッダーはこちらです。

f:id:damarin:20180325104318j:plain

変更した点は

  • グローバルメニューのカラー
  • ブログタイトルを画像(ロゴ)へ
  • ブログタイトルに記事一覧をリンクする
  • ナビゲーションバーの背景色

この4つ。

ブログタイトルを画像(ロゴ)にしたことでだいぶ雰囲気が変わったように思います。

 

グローバルメニュー

ちょこちょこ色を変えているグローバルメニューのカラーですが、#333で落ち着きました。

濃い色にすることで、ブログに締まり(?)が出たのかなと。

/* ### 上のあれ ### */
#globalheader-container{
background: #333;
}

 

 

ブログタイトルを画像(ロゴ)へ

なんの変哲も無いテキストタイプから、タイトル画像に変更しました。

 

Canvaで作りました。

www.oheya-migaru.com

 

ブログタイトルに記事一覧をリンクする

はてなブログの無料版では、ブログタイトルが最新記事にリンクされており、トップページも最新記事です。

 

どちらも記事一覧になるように変更したかったのですが、ひとひさんのブログカスタマイズ記事を見てできることを知り変更しました。

 

 

ナビゲーションバーのカラー変更

これまでヘッダーが真っ白だったことに飽きていたので、タイトル画像とナビゲーションバーを同じカラーに変更し、ヘッダーに色をつけました。

 

タイトル画像を作ったCanvaは、HTMLのカラーコードを使えるのでブログのカスタマイズが捗ります。

 

 

 

 

記事内

ヘッダーの次は記事内のカスタマイズについてです。

  • 記事タイトル付近
  • 記事中の装飾

大きく分けてこの2つを変更しています。

 

 

記事タイトル付近 

f:id:damarin:20180325111337j:plain

  • 日付
  • 記事のタイトル
  • カテゴリタグ

この3つをカスタマイズしています。

 

日付

デフォルトのアイコンを消す、日付のフォントや文字の色の変更などを行ないました。

.date:before {
content: none !important;/*アイコンを消す*/
}
.date {
font-family: 'Fira Sans', sans-serif;/*フォント*/
text-align: left;
font-weight: normal;/*字の太さ*/
letter-spacing: 0.1em ;/*文字間の距離*/
font-size: 8px;
color: #999;/*文字色*/
}

.date a{
color: #999;/*文字色*/
}

 

  

記事のタイトル

文字の大きさがが少し物足りなかったので変更しました。

*記事タイトルを大きくすると記事一覧ページのタイトルも大きくなってしまうので、そうならないようにしています。(サイドバーのカスタマイズにCSSあり)

.entry-title a {
letter-spacing: 0.05em ;/*字幅*/
font-size: 20px;
margin-top: 0px;
}

 

カテゴリータグ

これまでアイコンフォントや派手な色などを使っていましたが、ごちゃごちゃと目障りになってきたのでシンプルにしました。

 

 

 

記事中の装飾

記事中の装飾は

  • 見出し
  • リストデザイン
  • カエレバリンク
  • 記事の文字や画像
  • 上に戻るボタンの位置
  • 記事下にプロフィールを設置

この6つをカスタマイズしました。

 

見出し

現在の見出しはこちら(分かりにくいので色をつけています)

f:id:damarin:20180325114053j:plain

見出し(h3・h4・h5)はちょこちょこ変更しているのですがひとまず落ち着きました。シンプルを心がけました。

 

 

リストデザイン

リストボタンを(●)に、リストの中のリスト(入り子)のボタンをアイコンフォントへ変更しました。

 

リスト(ul)が難しくて難しくて。

何日も苦戦しながら入り子を作りました。(が、また弄ってしまって若干崩れている・・・)

 

こんな感じです

  • リスト1
    • リスト(入り子)
    • リスト(入り子)
  • リスト2
    • リスト(入り子)
    • リスト(入り子)
  • リスト3

 

 

カエレバリンク

カエレバリンクのボタンカラーやフォントを変更しました。

f:id:damarin:20180325140025j:plain

 

▼カエレバリンクのカスタマイズはこちらの記事を参考にしています。

www.ituore.com

 

 

記事の文字や画像など

記事が読みやすいように、記事の始まりの位置、文字サイズや行間、画像を貼り付けた位置などが見やすくなるように変更しました。

 

記事の始まりの位置は、表示される広告にピタッとくっついてしまわないようにしました。 

/* ### 記事中 ### */
.entry-content {
border-top: solid 2px #dadada;/*広告との間の線*/
padding: 20px 5px 5px 5px;/*線との距離*/
}

.entry-content p {
margin: 0;
font-size:16px;/*記事のフォントサイズ*/
line-height: 1.7;/*行間*/
background: #fff;
color: #333 !important; /*文字色*/
}
.entry-content img {
padding-left: 0px;
margin-top: 10px;
background: #none;
}

 

 

上に戻るボタンの位置

これまではてなブログのアプリでは見えにくい位置だったので、位置を変えました。

 

 

記事下にプロフィールを設置 

f:id:damarin:20180325140810j:plain

これまでサイドバーに設置していたプロフィールを記事下に移動しました。もうちょっとどうにかしたいけど今はこれが限界です。

 

CSS

/*記事下のプロフィール*/
.profile-box{
text-align: center;
padding: 0.5em 1em;
margin: 2em 0;
font-weight: normal;
color: #333;/*文字色*/
background: #e9e9e9;
border-radius: 10px;/*角の丸み*/
}

.profile a,.profile a:visited{
font-weight: normal;
letter-spacing: 0.2em ;
color: #333 !important;
}

.profile a:hover {
color: #999 !important; /* リンクにマウスを重ねた時の色 */
}

.profile-title {
font-family: 'Gudea', sans-serif;
font-family: "Rounded Mplus 1c";
margin-top: 5px ;
letter-spacing: 0.1em ;
color: #333;/*文字色*/
font-weight:bold;
padding-left: 0.5em;
padding-bottom: 0.5em;
border-bottom: solid 3px #fff;/*線の種類(実線) 太さ 色*/
font-size: 20px;
text-align: center;
position: relative;
color: #333;
line-height: 1.4;
padding: 0.5em 1em 0em 1em;
}

.profile-img {
text-align: center;
display: inline-block;
padding-top:20px;
}

.profile-img:before {
text-align: center;
border-radius: 50%;
border: solid 0px #333;/*丸いりんかくを作る*/
content: '';/*何も入れない*/
display: inline-block;/*忘れずに!*/
width: 100px;/*画像の幅*/
height: 100px;/*画像の高さ*/
background-image: url(画像のurl);
background-size: contain;
vertical-align: middle;
}

.profile {
line-height: 1.7em;
text-align: center;
display: block;/*忘れずに!*/
padding: 10px 0;
margin: 10px 0;
vertical-align: middle;/*縦の表示位置も指定できる*/
}

.profile p {
margin: 0;
padding: 0;
}

 

HTMLはこちら

<div class="profile-box">
<div class="profile-title">書いた人</div>
<div class="profile-img">
<div class="profile"><p>名前<br>コメント</p>
<a href="アバウトページのurl" >もっと詳しく
</a>
</div></div></div>

 

 

 

 

サイドバー

サイドバーでカスタマイズしたところはこちらです。

  • タイトル付近
  • 記事の画像
  • 日付

 

タイトル付近

こんな感じになっています。

f:id:damarin:20180325144759p:plain

テーマデフォルトのアイコンを消す、フォントや文字の大きさ、文字を真ん中に表示にするなどのカスタマイズをしています。

/* デフォルトをリセット */ 
.hatena-module-title,
.hatena-module-title::before,
.hatena-module-title::after {
background: none;
border: none;
border-radius: 0;
}
/* デフォルトのアイコンを消す*/
.hatena-module-title:before {
content: none !important;
}

.hatena-module-title a,
.hatena-module-title a:visited {
color: #333 !important;
text-decoration: none!important;
}
.hatena-module-title a:hover {
color: #333 !important;
}

.hatena-module-title {
font-family: 'Gudea', sans-serif;
font-family: "Rounded Mplus 1c";
margin-top: 5px ;
letter-spacing: 0.1em ;
color: #333;/*文字色*/
font-weight:bold;
padding-left: 0.5em;
padding-bottom: 0.5em;
border-bottom: solid 3px #e9e9e9;/*線の種類(実線) 太さ 色*/
font-size: 20px;
text-align: center;
position: relative;
line-height: 1.4;
padding: 0.5em 1em 0em 1em;
}

 

 

 

人気記事・新着記事などの画像

テーマのままでは丸みがある画像になっていますが、丸みのない真四角の画像に変更しました。

f:id:damarin:20180325145447p:plain 

記事一覧ページにも同じように反映させています。スマホ版で記事一覧を見ても画像に枠がなく、真四角になりました。

また、記事のタイトルを大きくすると記事一覧の記事タイトルも大きくなってしまっていたので、そうならないようにしました。

 

/* 画像の表示 */
.entry-thumb,.hatena-module-body img{
min-width: 80px;
min-height :80px;
border-radius: 0!important;/*丸みを無しに*/
border:0!important;/*枠線をを消す*/

}

/* 記事一覧ページのタイトル */
.archive-entry-header h1 a{
font-size:16px!important;/*フォントサイズ*/
letter-spacing: 0.05em ;/*文字間*/
padding: 0.5em;/*文字周りの余白*/
color: #333;/*文字色*/
text-decoration: none;
border-radius: 0 15px 15px 0;
}

 

スマホ版では記事一覧ページがこんな感じに見えています。

f:id:damarin:20180325145654p:plain

画像、日付、記事タイトルが変わりました。 

(日付のCSSはこの下です)

 

日付

日付横にアイコンがありましたがシンプルにしたかったのでアイコンを消しています。

/*サイドバーの日付*/
.urllist-date-link {
font-family: 'Fira Sans', sans-serif;/*フォント変更*/
letter-spacing: 0.1em ;/*文字間*/
font-size:10px;!important
color: #999;
}

.urllist-date-link a{
font-size:10px;!important
color: #999;
}

.urllist-date-link :before {
content: none !important;/*アイコンを消す*/
}

アイコン以外にも、フォントを変えたりしています。

 

 

 

フッター

f:id:damarin:20180325153303j:plain

今回はじめてフッターをカスタマイズしました。

  • フッターを消す
  • フッターもどきを作る
  • コピーライトを作る
  • アバウトページへリンクを貼る

 

▼全面的に、こちらの記事を参考にさせていただきました。

blog.minimal-green.com

これまでフッターを気にしたことがなかったのですが、意識して見てみると、一見して素敵なブログはフッターまでデザインされていることが多く勉強になります。

 

 

 

おわりに

以上、今回行ったカスタマイズのまとめです。

  

CSSはほぼ全てのことをサルワカさんで知りました。また、「progate」というアプリも勉強になりました。

 

もう少しカスタマイズしたい部分があるのでまた少しずつカスタマイズしていきたいです。

 

 

 

キーワードで探す