はてなブログのテーマを「Silence」へ変更してからやったことまとめ

このブログのテーマを「minimalism」から「Silence」へ変更しました。

「minimalism」もミニマムでシンプルなデザインが素敵でしたが、「Silence」はパソコンのトップページがカードタイプになっていて、全体的にモノトーンでミニマムなデザインが特徴です。

特に、シェアボタンや

サイドバーのフォローボタンのデザインが素敵♪

ということで、今日ははてなブログのテーマを「Silence」へ変更してからやったことをまとめます。

※ HTMLもCSSもわからない素人のおばちゃんが書いている記事なので、間違っていることがあるかもしれませんが、そんな時はコメント欄でもこっそりと教えていただけると嬉しいです。

はてなブログテーマ「Silence」のリンクと作者さんのサイトのリンク
はてなブログでテーマを変更するときの注意点
テーマストアからインストールする
公式サイトにあるカスタマイズをやる
このブログでやったカスタマイズの備忘録
- サイドバーのプロフィールを変更
フォローボタンに楽天roomとPinterestを追加
- 人気記事に順番をつける
- 関連記事を記事よりも下に
サイドバーの下線を消す
トップへ戻るのボタンをつける
目次の背景を斜線にしてみた
雑感

はてなブログテーマ「Silence」のリンクと作者さんのサイトのリンク

テーマストア
Silence - テーマストア

デモサイト
Silence

作者さんのサイト
No Name

作者さんのサイト
SHIROMAG | – シロマグ – 映画、社会、Webデザインなどについて書いています。

はてなブログでテーマを変更するときの注意点

テーマを変更する際は、CSSやヘッダー、フッターなど、バックアップを取ってから行なってください。

テーマストアからインストールする

テーマストア（Silence - テーマストア）にアクセスして、「プレビューしてインストール」をクリックし、変更したいブログを選択してテーマを適用させます。

公式サイトにあるカスタマイズをやる

公式サイトに丁寧にカスタマイズ方法が掲載されていますので、順番に1つずつやっていきます。

デザインテーマ「Silence」にグローバルナビを設置する - Silence
グローバルナビゲーションは作者さんが簡単に作れるようにツールを用意してくれているので利用して作りました。

デザインテーマ「Silence」にフォローボタンを設置する - Silence
フォローボタンも作者さんが簡単に作れるようにツールを用意してくれているので利用して作りました。

デザインテーマ「Silence」にシェアボタンを設置 - Silence
記事にあるソースをコピペするだけです。

デザインテーマ「Silence」でできるテキストのカスタマイズ一覧 - Silence
定型文に入れておくと便利かもしれないです。

デザインテーマ「Silence」にコピーライトを表示 - Silence
フッターのCSSは用意されているのでHTMLを貼るだけで簡単にフッターが出来上がります。

簡単にカスタマイズできてありがたいです

このブログでやったカスタマイズの備忘録

※ちなみにわたしははてなブログProを利用しています。無料版だとできないこともあるかもしれません。

サイドバーのプロフィールを変更

サイドバーのプロフィールに使ったHTMLとCSSのメモです。プロフィール欄の画像を丸くしたかっただけです。

プロフィールに使用する画像はアカウント設定で設定した画像を使っています。

1．使用する画像を準備します

アカウント設定→変更する→プロフィール画像の大きい方の画像を右クリックして画像のURLをコピー（大きい画像の方がピンぼけしにくくなります）してテキストエディタに貼り付けておきます。

2．プロフィール編入画面でHTMLを記述します

デザイン→カスタマイズ→サイドバー→プロフィールの編集

プロフィール編集は「HTML」モードにして、タイトルに「プロフィール」

その下の枠に

<div class="author" align="center"><a href="プロフィールのURL" class="design1-icon-link"><figure class="design1-profile_icon"><img src="画像のURL" alt="あなたのニックネーム" width="100" height="100"></figure></a></div>
<div align="center"> author: <a href="プロフィールのURL" class="design1-link">あなたのニックネーム</a><br />短い自己紹介文</div>
<p>自己紹介文</p>

「プロフィールのURL」「画像のURL」「あなたのニックネーム」「短い自己紹介文」「自己紹介文」のところを変更して貼り付けてください。

画像のURLはプロフィール画面のURLをコピペします。

3．スタイルシートを記述します

デザイン→カスタマイズ→サイドバー→デザインCSS

.author img {
  border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
  width:  120px; /* ※縦横を同値に *
  height: 120px; /* ※縦横を同値に */
}
.design1-link {
  font-weight: bold;
  font-size: 18px;
  color: #333;
  text-decoration:none;
}

はてなブログの読者登録がわかりにくかったみたいで、プロフィール欄にはてなブログの読者登録ボタンを追加しました。

フォローボタンに楽天roomとPinterestを追加

公式サイト（デザインテーマ「Silence」にフォローボタンを設置する - Silence）ではフォローボタンのコードが簡単に作れるツールが用意されています。

公式サイトのツールを利用して、はてなブログの登録ボタンとfeedlyのアイコンを作ってサイドバーに貼り付けました。

ただ、わたしの場合は、Twitterもfacebookもしていないので、楽天roomとPinterestのアイコンをフォローボタンに追加しました。

<a class="si-follow-btn si-follow-rakuten" href="楽天roomのURL" target="_blank"><i class="blogicon-rakuten lg"></i></a>
<a class="si-follow-btn si-follow-pinterest" href="ピンタレストのURL" target="_blank"><i class="fa fa-pinterest"></i></a>

楽天roomのアイコンははてなブログのアイコンフォントを利用して、ピンタレストはFont Awesomeを利用しています。

サイドバーの下線を消す

サイドバーのリンクの下線が気になったので消しました。

.hatena-module-category a {
  text-decoration:none;
}
.hatena-module-recent-entries a {
  text-decoration:none;
} 
.hatena-module-archive a {
  text-decoration:none;
}
.hatena-module-links a {
  text-decoration:none;
}
.hatena-module-archive a {
  text-decoration:none;
}
.hatena-module-entries-access-ranking a {
  text-decoration:none;
}

トップへ戻るのボタンをつける

記事が長くなるとトップへ戻るボタンが欲しくなります。

参考サイト

はてなブログで上に戻るボタンを設置し、さらに常時表示のリンクボタンをカスタマイズする方法【iPhone対策済み最新版】 - Simple Life Navi 　

↑こちらのサイトさんを参考にしてトップへ戻るボタンを作りました。

色だけ、このテーマに合うようにグレーっぽいボタンの色に変更。コピペだけで簡単に実装できて本当にありがたいです。

/* ページトップへ戻るボタン */
#pagetop {
　　：
　　：
  color:rgba(245,245,245,0.8);
  background-color:rgba(105,105,105,0.9);
  border: 2px solid rgba(105,105,105,0.1);
　　：
　　：
}

/* ページトップへ戻るボタン：ホバー時 */
#pagetop:hover{
  background-color:rgba(105,105,105,0.3);
}

目次の背景を斜線にしてみた

目次の背景を斜線にしてみました。追加したCSSは以下の通り。

.entry-content .table-of-contents {
  background: repeating-linear-gradient( -35deg, #EEE, #eee 1px, #fff 0, #fff 5px );
  border-top: double 5px #eee;
  border-bottom: double 5px #eee;
}

参考サイト

【HTML/CSS】CSSのみで背景に斜線を入れる方法 | GOKAN DESIGN STUDIO 　

雑感

はてなブログを始めて3ヶ月で、最初はわからないことばかりでしたが、だいぶ慣れてきました。

でも、素人なのでわからないことは調べながらゆっくりとやって行こうと思います。

なにぶん、HTMLもCSSもわからない素人がやっていますので、表示がおかしかったりしたら教えてくれると嬉しいです。

LIFELOG

40代のダイエッターでプチミニマリストの雑記ブログです。ご訪問いただきありがとうございます。