ぐっさんのブログ

ランニング5割、福岡3割、他2割くらいの雑記ブログ

ブログのデザインを変えていろいろといじりました

この記事をシェアする

どうもぐっさん(@goodsun_30)です。

ブログを始めて以来、デザインテーマは変えていなかったんですが、今回思い切ってデザインテーマを「Silence」に変更していろいろといじってみました。

Silence - テーマ ストア

デザインテーマを変える前にh3→h2にした

はてなブログのデフォルトの見出しは

  • 大見出し→h3
  • 中見出し→h4
  • 小見出し→h5

という風になっていてh2がありません。

h3をh2にして中見出し、小見出しもそれぞれ変えた方が自然だしSEO的にもいいらしいので、変えてみました。

といっても、全部手打ちでやるのは無理があるので、いったん記事を全部エクスポート([設定]→[詳細設定]→[記事のバックアップと製本サービス]からできます)して、それをテキストエディタに入れて、

  • <h3 → <h2
  • h3> → h2>

みたいな感じで順番に検索→置換とやっていきました。

h3とかh4で検索すると、他のファイルやらを巻き込んでしまう可能性があるので<>はしっかりつけましょう。

僕は失敗しかけました。

 

検索と置換が終わったら、ブログの記事をいったんすべて消去して、編集したファイルをインポートしてあげると全部の記事の見出しが変わります。

もし失敗したとしても、消去した記事は30日以内なら復元できるので大丈夫なはずです。

でも念のために別のバックアップはしておきました。

 

参考にしたのは↓こちらのブログ。

僕より丁寧に書かれています。

記事を全削除→再インポート!見出しh3→h2にするための道 - lisz-works

h3をh2にすると見出しのデザインも変わるので、同時にCSSをいじって変えてください。

 

テキストエディタは「Brackets」を使いました。

素人ながらはてなブログのデザインテーマを作りたいと思ってダウンロードだけしていたものです。

使い方は全然分かりませんでしたが、検索と置換くらいなんとかできました。

テキストエディタならなんでもいいと思います。

 

で、h3をh2にしたのはいいものの、もう一つ問題があって、僕は見たまま編集を使っているんですが、それで大見出しを付けるとh3になってしまうんです。

いちいちHTML編集でh3をh2に打ち直さないといけません。

そこで、見つけたのがChromeの拡張機能、「Chrome Add-on for Hatena - Chrome ウェブストア」です。

これがあればいちいちHTML編集をしなくてもクリックするだけで見たまま編集のままh2を入れることができます。

これぞ神ツール。

ほかにも機能があるので入れてみてください。

ちなみにこれを作ったのは僕が今回入れたデザインテーマ「Silence」を作った方でもあります。

shiromatakumiさんには感謝感謝です。

はてなブログ編集用のChrome拡張機能を作りました(使い方の説明) | NO TITLE

デザインテーマを「Silence」にしました

デザインテーマに関しては以前から変えたかったんですが、なんかピンとくるものがなくて、ずっと変えられずにいました。

そんな時に見つけたのが「Silence」です。

シンプルなところとSilenceのブログどおりにやればカスタマイズしやすいという点がよくて、すぐにダウンロードしてちょこちょこといじって今の感じに落ち着きました。(たぶんまだこまかくいじりますが…)

Silence

ブログに書いていること以外でカスタマイズしたことを箇条書きすると

  • タイトル下の二重線を消した
  • 日付の傾きをなくして、更新日をつけた
  • 記事一覧のディスクリプションを消した
  • 目次を表示している状態から非表示にできるようにした
  • 関連記事やリンクの囲み枠のデザインを変えた

こんな感じでです。

あとは文字の大きさや余白などの細かい部分を調整しました。

 

カスタマイズで一番苦労したのは目次の部分です。

「目次を表示する」という表記をつけて目次を出すコードはいろいろと出てくるんですが、僕は、その反対、つまり最初から目次が表示されていて、いらない場合は非表示にしますよ、って感じにしたかったので手間取りました。

ワードプレスのブログみたいにしたかったんです。

目次の表示と非表示の切り替え

こんなやつをしたかった

わかる人はチャチャっとできるんでしょうが、僕はかなり時間を要してしまいました。

 

実際にやったのは、ゆきひーさんの「はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム - Yukihy Life」この記事に一番下に書かれているコードの改変です。

 

if elseの部分を

if($Contents.css('display') == 'block'){

            $Contents.slideUp(400),

            $this.text("[表示]");

        }else{

            $Contents.slideDown(400),

            $this.text("[非表示]")

        };

こんな感じにして、このコードの少し上にあった[表示]を[非表示]に変えました。

意味としては「目次が出ている時にクリックしたらスライドアップして目次が折りたたまれて[表示]の表記が出て、目次が出ていない時にクリックすると目次がスライドダウンしてきて[非表示]の表記が出ますよ」みたいな感じだと思います。

 

そしてもう一つ、CSSの

.table-of-contents{

    display: none;

}

この部分を消去しました。

 

あとは、

<span style="font-size: 150%; color: #333;">目次</span><p class="show-area">[表示]</p>

if elseの前にある↑の部分のHTMLをいじってフォントサイズや背景を合わせて見た目は理想どおりにできました。

ただ、スマホから操作すると2回タップしないと反応しないので、そこは不満が残るところではあります。

※追記 たぶんこれ↓のことですが、僕には理解ができません

iOSでダブルタップしないとリンク反応しないバグ対応について - Qiita

追記おしまい。

 

僕はコードのことなんて素人に毛が生えた程度のことしか理解できていないので、一応動作はしているもののコード的に正しいかはわかりません。

なので、僕と同じようにして不具合が起きても保証はできないのであしからず。

さいごに

ここ2~3日、時間がある時にちょこちょことデザインをいじって自分の理想に近づいたかなと思います。

一からデザインテーマを作るのがほんとの理想なんですが、そこはボチボチやっていきます。

とういうわけで、シンプルなデザインテーマ「Silence」とchromeの拡張機能「Chrome Add-on for Hatena」はおすすめなのでぜひどうぞ。

以下のリンクはshiromatakumiさんのブログです。