パラレルブログリニューアルオープンしました！せっかくなのでリニューアル作業する上での工程や手順、注意点なども参考にご紹介します！
ブログのリニューアルした理由
まず、このパラレルブログがスタートしたのが2019年4月。
作者はブログ経験はほとんどなく、ざっくりと「作品が観れる場所」「ポップな感じがいい」ぐらいの感覚で始めました。
ところが初めて見るとそれだけではない要素が多く、また様々なブログやサイトを観る機会も増え、「これ素敵だな」「面白いな」など思うことも多く、勉強していくなかで文章力がない作者でもブログとしての形を大事にしないといけないなと感じていました。
そこでブログは３カ月が一つの区切りという話をよく目にしたので３カ月たってみて改めてパラレルブログを振り返えりリニューアルする必要性があるなという流れでした。
まあ、あとは記事が増えてからのリニューアルで全記事をいじるようなことになるとかなり面倒くさいことになりそうなので100記事いかないうちに変えておいた方がいいなというのも正直なところです。
振り返った際に気になった点
ブログのメインビジュアルがない
パラレル作品のメインビジュアルとしてはあるんですが記事に飛ばないと見れないという感じでヘッダーにもっと作品をわかりやすくアピールできる画像が必要だなとおもいました。
キャラクターのサイトだとまずメインのキャラクター達が目に入らないと何のサイトかわかりにくいですもんね。
記事が読みにくい
いつもPCで記事を書いているのでPCでの見た目重視になっていたんですがふとスマホでみてみると致命的に読みにくい!?
これはテーマやデザインの問題ではなく、自分の文章を書く技術の問題が多いんですがこの辺も踏まえリニューアルと共に記事の整理が必要だなと。
サイト内がごちゃごちゃしている
パラレルが一番アピールしたいところはアニメやイラストの作品ですがちょっとわかりにくい気がしたのでその辺も整理が必要だと思いました。
これ以外にも気になる点はありますが大きく項目にするとこんな感じでした。
ブログリニューアルの事前準備
はてなブログの方々ならわかると思いますがブログのテーマ（デザイン）を別のにインストールし直してちょっといじればリニューアルできる！と思っていたのですがこだわりがあるとやはりそんなに甘くはないですよね。
ブログリニューアルの際の準備や手順はとても大事だと感じたのでご紹介！
ブログリニューアルの準備と手順
仮ブログを作る
はてなブログは無料版なら3コ、プロ版（有料）なら10コブログが作れます。
新しいブログを作るには「ダッシュボード」→「新しいブログを作成」で作れます。これはリニューアルのテスト版なので公開設定を「自分のみ」にしておくといいです。
仮ブログにいくつか同じ記事や設定を行う
実際どのような見え方をテストしたいのでいくつか今公開している記事を複数（バリエーションあるといい）記事をコピーしておくとわかりやすいです。
パラレルでは5つぐらい記事コピーして設定もサイドバーなど一部ですが同じようにしてみました。
テーマをプレビュー
はてなブログのテーマはプレビューできるので便利ですよね。
テーマの選び方はそれぞれだと思いますがパラレルの場合はアニメやイラストの作品がメインなのでビジュアルをわかりやすく見える「カード型」で絞ってみました。
あとはスマホでも見やすいようにレスポンシブデザイン対応もポイントでした！
はてなブログ テーマストア
http://blog.hatena.ne.jp/-/store/theme/
バックアップをとる
テーマが決まってプレビューするとすぐ変えたくなりますよね。
ただ、いざ変えてみたけど前のに戻したいと思っても別のテーマをインストールしてしまうとデザインやコードなど上書きされてしまうのでバックアップは保険でとっておいた方がいいです。
パラレルの場合はデザインcssやヘッダーへのhtmlコードなど必要最低限のバックアップだけ取っておきました。
リニューアルした内容や工程
リニューアル時の確認項目ポイントとして参考にしてもらえればと思います。
テーマをインストールする
今回ブログのテーマ（デザイン）に使わせていただいたのがこちら。
「ZENO-TEAL」作者：c-miya様
http://blog.hatena.ne.jp/-/store/theme/10328749687225937733
このテーマを選んだ理由
・カード型、レスポンシブデザイン対応
・シンプルでカスタマイズしやすい、カスタマイズ解説も丁寧
・利用者も多くカスタマイズ情報が多い
＜ZENO-TEALをご検討・カスタマイズしたい方＞
ここから先の内容はほとんどc-miya様のサイトでカスタマイズ方法が丁寧に解説されていますので気になる方はそちらをご覧ください。
ヘッダーの調整
まずやはり気になっていたブログの顔、ヘッダー画像の調整をしましたが正直このヘッダー画像一番調整に時間がかかりました。
単純に画像を張り付けるだけなら簡単なのですがせっかくリニューアルするのであれば自分の納得する形にしたい。ちなみに条件としては下記です。
・画像内に文字も含める（タイトルを入れる）
・ブログ横幅全体を使う
・スマホでもきれいな見た目
これ一つ一つはテーマ作者が丁寧に解説しているページがあるのですが組み合わさった時にうまくいかない部分が出てきてそこは自力にで解決するしかないんですよね。
画像が見切れたり、コードコピペしても機能しない？などほとんどが自分のミスだったりするんですが試行錯誤しました。（ヘッダ―画像関連で3時間ぐらいは使ってる思います）
まだ多少納得いかない部分はありますがひとまず形にはなったかなと思います。
グローバルナビゲーション（メニュー）の調整
ヘッダ下のメニューです。
こちらは多段式や枠のサイズ調整などのやり方が解説されていたのでそこまで苦労してませんがPC表示とスマホ表示のバランスを考えて調整しました。
あとはだいぶ悩んだのが「ドロップダウン」するかどうか。
ドロップダウンメニューとはメニューをクリックするとさらにサブメニューが出てくる方式のものです。
結局採用しませんでしたが理由は「ワンクリックでわかりやすく」です。
オススメコンテンツの調整
こちらはグローバルナビゲーションのしたのおススメ記事です。コンテンツ重視のパラレルにとってはにぎやかさも出ていい感じにできました。
サイドバーの調整
こちらはほぼいじってませんがせっかくなのでプロフィールも更新してみました。
フッターの調整
こちらはブログ一番下の部分です。こちらも作り方を解説されているのでそちらを参考に作ってみました。
最近はフッターが結構重要な役割を果たしている気がします。
なぜならプロフィールや次の記事を読みたくなるのはその記事を読み終わった後だからなのでブログ下の方に情報があるのはやっぱり重要ですよね。
SNSへのシェアボタンをきれいに配置
facebookやTwitterなどのシェアボタンをきれいに配置するコードもあったので配置してみました。デザインとしてもカラフルで綺麗な感じになったと思います。
全記事の調整
これがめちゃくちゃしんどかったですがテーマを変えると対応してない面が出てくるんですよね。今回テーマ変更で全記事行った作業は下記です。
・「続きを読む」を設置
・見出し<h〇>つけなおし
・記事トップに必ず画像を配置
・文章を読みやすいように調整
＊詳細は下記の注意点で説明
細かい微調整などはありますがリニューアル内容に関しては以上です。
リニューアルする際の注意点
リニューアルする内容にもよりますがテーマ（デザイン）などを変えると様々な問題がでてきます。今回は使用されていただいている「ZENO-TEAL」での注意点を参考にご紹介。
全記事に「続きを読む」をつける
これはこのテーマの仕様ですが「続きを読む」をつけておかないとトップページにリンクが張られずクリックしても記事に移動できないので注意！
記事トップに画像を張る
トップページはカード型の仕様で表示される画像はトップに配置されているものです。トップに画像がないとデフォルトの画像になります。アイキャッチ画像に指定していてもトップページだと反映せず、最初ほとんど画像なしの状態で焦りました。
（これの回避方法は解説があります）
トップページを全文表示形式
これ意外と落とし穴ですが今まではカード型で「一覧表示」のままでしたが「全文表示」の形式にしないとカード表示されません。「設定」→「詳細設定」→「トップページの表示形式」で変更できます。
テーマとは違う部分が崩れる？cssコードの確認
使わないものはいいですが引き続き使いたいcssなどありますよね。これはテーマインストールで上書きされてしまうので個別にいれたcssは消えてしまいます。気づいたら機能していない！ということが多々あったのでここでバックアップとっておくと復帰できます。
ここで紹介したのは主に「ZENO-TEAL」のテーマがメインですが参考にできるものも多いかと思うのでいろいろリニューアルの際に参考にしてみてください。
まとめ
まだまだベテランのブロガーさんに比べると全然足りない面は否めないですが今回のリニューアルでもいろいろと勉強になりました。
今回リニューアルの内容・工程などを紹介してきましたがリニューアルする際に何かの参考になればと思います。
正直まだやってみたいことはあるので今後増やしていきたいと思います。
このリニューアル作業は本当に大変な作業でしたが「ここにこれを設置しよう」とか「こうしたら面白いかも」などなんだか「秘密基地」を作っているようでわくわくしました。
興味があればせっかくの機会なので昔の記事も読みやすく調整したので読んでくれたらうれしいです！
それではまた。
★こんな記事もあります。