ブログのデザインを変えていろいろといじりました2019-03-04ブログのデザインを変えていろいろといじりましたブログのことこの記事をシェアするbookmarkFacebookTwitterPocketどうもぐっさん(@goodsun_30)です。ブログを始めて以来、デザインテーマは変えていなかったんですが、今回思い切ってデザインテーマを「Silence」に変更していろいろといじってみました。ストアデザインテーマを変える前にh3→h2にしたデザインテーマを「Silence」にしましたさいごにデザインテーマを変える前にh3→h2にしたはてなブログのデフォルトの見出しは大見出し→h3中見出し→h4小見出し→h5という風になっていてh2がありません。h3をh2にして中見出し、小見出しもそれぞれ変えた方が自然だしSEO的にもいいらしいので、変えてみました。h2>みたいな感じで順番に検索→置換とやっていきました。h3とかh4で検索すると、他のファイルやらを巻き込んでしまう可能性があるので<>はしっかりつけましょう。僕は失敗しかけました。検索と置換が終わったら、ブログの記事をいったんすべて消去して、編集したファイルをインポートしてあげると全部の記事の見出しが変わります。失敗したとしても、消去した記事は30日以内なら復元できるので大丈夫なはずです。念のために別のバックアップはしておきました。参考にしたのは↓こちらのブログ。僕より丁寧に書かれています。lisz-worksh3をh2にすると見出しのデザインも変わるので、同時にCSSをいじって変えてください。テキストエディタは「Brackets」を使いました。素人ながらはてなブログのデザインテーマを作りたいと思ってダウンロードだけしていたものです。使い方は全然分かりませんでしたが、検索と置換くらいなんとかできました。テキストエディタならなんでもいいと思います。h3をh2にしたのはいいものの、もう一つ問題があって、僕は見たまま編集を使っているんですが、それで大見出しを付けるとh3になってしまうんです。いちいちHTML編集でh3をh2に打ち直さないといけません。これがあればいちいちHTML編集をしなくてもクリックするだけで見たまま編集のままh2を入れることができます。ほかにも機能があるので入れてみてください。ちなみにこれを作ったのは僕が今回入れたデザインテーマ「Silence」を作った方でもあります。shiromatakumiさんには感謝感謝です。TITLEデザインテーマを「Silence」にしましたデザインテーマに関しては以前から変えたかったんですが、なんかピンとくるものがなくて、ずっと変えられずにいました。そんな時に見つけたのが「Silence」です。シンプルなところとSilenceのブログどおりにやればカスタマイズしやすいという点がよくて、すぐにダウンロードしてちょこちょこといじって今の感じに落ち着きました。(たぶんまだこまかくいじりますが...)SilenceSilenceブログに書いていること以外でカスタマイズしたことを箇条書きするとタイトル下の二重線を消した日付の傾きをなくして、更新日をつけた記事一覧のディスクリプションを消した目次を表示している状態から非表示にできるようにした関連記事やリンクの囲み枠のデザインを変えたこんな感じでです。あとは文字の大きさや余白などの細かい部分を調整しました。カスタマイズで一番苦労したのは目次の部分です。「目次を表示する」という表記をつけて目次を出すコードはいろいろと出てくるんですが、僕は、その反対、つまり最初から目次が表示されていて、いらない場合は非表示にしますよ、って感じにしたかったので手間取りました。ワードプレスのブログみたいにしたかったんです。こんなやつをしたかったわかる人はチャチャっとできるんでしょうが、僕はかなり時間を要してしまいました。Life」この記事に一番下に書かれているコードの改変です。};こんな感じにして、このコードの少し上にあった[表示]を[非表示]に変えました。意味としては「目次が出ている時にクリックしたらスライドアップして目次が折りたたまれて[表示]の表記が出て、目次が出ていない時にクリックすると目次がスライドダウンしてきて[非表示]の表記が出ますよ」みたいな感じだと思います。none;}この部分を消去しました。elseの前にある↑の部分のHTMLをいじってフォントサイズや背景を合わせて見た目は理想どおりにできました。スマホ(safariとはてなの公式アプリ)から操作すると2回タップしないと反応しないので、そこは不満が残るところではあります。これ↓のことで、いろいろ試してみたんですが、解決できず...僕には理解ができませんでした。Qiita追記おしまい。僕はコードのことなんて素人に毛が生えた程度のことしか理解できていないので、一応動作はしているもののコード的に正しいかはわかりません。僕と同じようにして不具合が起きても保証はできないのであしからず。さいごにここ2~3日、時間がある時にちょこちょことデザインをいじって自分の理想に近づいたかなと思います。一からデザインテーマを作るのがほんとの理想なんですが、そこはボチボチやっていきます。Hatena」はおすすめなのでぜひどうぞ。以下のリンクはshiromatakumiさんのブログです。Webデザインなどについて書いています。ぐっさんのブログスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。