はてなブログの設定を色々弄ってたら重くなったので、、、

試行錯誤の結果、色々と二転三転したので纏めました。

最初にやったこと。
後日追記
- Pocket追加ボタンが重かったのかな？
後日追々記
- トップページの表示記事数を減らしてみました
- と言う事で、サイドバー付きのテーマに変更
まとめ

最初にやったこと。

なんかめちゃくちゃ重くなったので設定全部リセットしつつ、ついでに速度対策としてトップページ表示をアーカイブ飛ばしにしてみました。

参考情報

この辺の記事（と、記事から参照飛ばしされているリンク先など）を参考にしました。

はてなブログの記事一覧（アーカイブ）の表示件数を変更する方法（PC版） - ミニマムコラム

はてなブログのトップページを記事一覧表示にしたよ - ボム君.com

(*‘▽’)　ありがとうございます！

重かった原因（推測）

ところで、重かった原因ですが、たぶん【パズドラ】タグの記事で画像を貼り付けまくったのが根本原因かな、、、と。

pngで保存したのを直ブッ込んでたんですが、この辺、軽量なjpgに置き換えてった方が良いのかなぁ？？

まだ色々と試行錯誤中だし、デザインももう少し弄りたいんだけどどうしたものか。。。

(*‘▽’)　この辺も要勉強ですね

この後やりたい事メモ

取り敢えず、サイドバー表示を記事下部じゃなく、文字通り「横」にしたいんですよね。

テーマ変更で対応しようとしてるんですが、そもそも最新記事が重かったせいでデザイン弄りすらキツかったので断念。

こりゃー、読む側も書く側もヤル気無くなる奴だからとてもダメだ。

速度面も意識して記事書かないとダメですねぇ、、、。

(*‘▽’)　むずかしい！！

後日追記

Pocket追加ボタンが重かったのかな？

画像は画像で重かったのかもしれませんが、若しかしたらデザイン設定弄ってた時に、最近利用し始めたPocketの追加ボタンもチェック入れたんですよ。且つ、これらのガジェットを「記事下のみ（デフォルト）」から「記事上下」に変更したんですよ。

若しかしたら、、、重かったのはこれが原因、、、かなぁ？？

と言う事でPocketは外してみました、あ、あとFacebookのボタンも要らないから一緒に外しておくか。

取り敢えずこれで経過観察してみます。

後日追々記

トップページの表示記事数を減らしてみました

試しに設定画面で、速度面への影響度なんかを見ながら弄ってました。

トップページの記事数がデフォルトでは 7 だったんですが、これを一気に 3 まで減らしてみました。

すると、まぁ普通に使うには問題ないかな、と言うくらいの速度まで改善。

表示する記事が多過ぎて、それぞれに画像とかガジェットとかリンクとか入り込んでたから、単純にページが重くなりすぎちゃったのかなぁ？？

と言う事で、サイドバー付きのテーマに変更

ねんがんの　横サイドバー　を　てにいれたぞ！！

と言っても僕が欲しかったのは右サイドバーであって、今のテーマは左サイドバーなんすよねぇ、、、。

でも右サイドバーのものはその他のレイアウトやデザインが気に入らず、、、んーむ、自分でテーマを作るべきか、、、或いはテーマストアから何かしら拾って来るか、、、。

まぁ、これからもちょこちょこ弄って行こうかなと思います(*‘▽’)g

まとめ

(*‘▽’)　最終形はこんな感じになりましたん

ヘッダHTMLの追加

トップページに来たら強制的にアーカイブページへ飛ばすJavaScriptは削除しました。かわりに、下記HTMLを追加して、アーカイブページへの直リンクを貼っておきました。

  <p><a href="http://sugaryo1224.hatenablog.com/archive">(*'▽')　ぶろぐ の あーかいぶ なのです、我々は賢いので。</a></p>

CSSの変更

REACHのテーマを適用しつつ、下記カスタムCSSを追記します。

/* <system section="theme" selected="reach"> */
@import "/css/theme/reach/reach.css";
/* </system> */

/* <system section="background" selected="383838"> */
body{background:#383838;}
/* </system> */


/* テーマ補正：ページトップの見切れ */
#container {
    padding-top: 32px;
}
/* テーマ補正：記事のフォント指定 */
div.entry-content {
  font-family: "メイリオ",sans-serif;
}


/* ヘッダ */
#top-editarea {
  padding: 10px;
}
#top-editarea > p {
  margin: 0px;
  padding: 1px 16px;
}

/* 記事内の表 */
div.entry-content > table {
  width: 100%;
}

/* 見出しの設定 */
.entry-content h3,
.entry-content h4,
.entry-content h5 {
  padding: 5px;
}
.entry-content h3 {
  color: white;
  background-color: #646464;
  padding: 8px 16px;
  border-radius: 5px;
}
.entry-content h4 {
  border-left:   8px solid #338dff;
  border-bottom: 1px solid #338dff;
}

.entry-content h5 {
  position: relative;
  border-bottom: 3px solid #ccc;
  padding: 8px 10px;
}
.entry-content h5::before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 25%;
  height: 3px;
  background-color: #338dff;
  z-index: 2;
  content: '';
}