イエス！バージョン２になった 冒険者Lv.1（@boukenshaLv1)です
この度、当ブログ『人生RPG』のデザインをテーマごと変更しました！
デザインを整えるのに半月以上、試行錯誤しましたよぉ～
目的は、
・見やすくする
・統一感を出す
・どんなブログか分かりやすくする
・夢（目的）への信憑性・活動状況を知ってもらうため
などがあります。
この記事では、私が施したデザインを詳しく知ってもらうための記事です。
デザインのビフォー／アフター
まずどのようにブログデザインが変わったか、見てください
旧ブログデザイン
最初はヘッダー画像でブログの世界観をだそうとしていたので、ファーストビューの半分がヘッダー画像というかなり大きめに設定していましたが、最近は若干幅を細くして小さめにしていました。
トップページはカード型でした。
新ブログデザイン
カード型は一緒ですが、記事一覧の横幅（コンテンツ幅）は広くなりました。
コンテンツ幅が狭いと文章がすぐ改行されるし、縦に長くなってしまうのが気になっていたので、広くとれてよかったです。
それでは、各箇所ごとに詳しく解説していきます。
テーマ（テンプレート）
一番大きな変更は、テーマの変更です。
新しいテーマに変更するということは、CSSコードは消えるので必ずバックアップを取っておかないといけません。
私の場合は「テスト用ブログ」を開設して、そっちでデザインコードを全て整えました。
こうすることで、カスタマイズミスが起こっても実際のブログには影響がないし、＋バックアップで致命的なミスもなくなります。
コードが全て完成して、移行したいテーマが決まれば、移行後にテスト用ブログで使っているコードをコピペしたら一瞬で完成されたデザインに出来るので、楽ですね！
旧デザインでは『DUDE』というテーマを使わせていただきました。
オシャレなんですがコンテンツ幅が若干狭いのと、勉強不足で満足いくデザインに出来ていませんでした。
「DUDE」はカスタマイズしやすいテーマで有名なので、初心者にもおすすめですよ。
新デザインは『ZENO-TEAL』というテーマです。
記事一覧カード型が特徴のテーマでDUDEよりコンテンツ幅が広いです。
またテーマ著者がカスタマイズコードを色々紹介していたので自分のしたいカスタマイズが出来そうと思い選びました。
「ZENO-TEAL」は人気テーマで多くのユーザーが使っています。
中でも、[あいまいみー（id:imyme_999）]さんが運営されているブログ
は、統一された「優しい色」・「アイキャッチ」・「バナー画像」とどこをとっても素敵なデザインです。
私が求めていた、「はてなブログ感が無い」や「オリジナリティ」が実現されていてとても魅力を感じました。
これが決め手になり「ZENO-TEAL」になり、あいまいみーさんのデザインを参考に私もこだわってカスタマイズを行いました。
『ZENO-TEAL』は少し特殊で、広告表示関係ではてなブログPro推進のテーマになっています。
このテーマを使いたい方ははてな有料会員になってから使いましょう。
また、カスタマイズで分からないことがあれば著者に直接聞くとすぐお返事がもらえて色々助けてもらいました。ありがとうございます。
ヘッダー
以前のデザインではヘッダーで世界観を出そうとしていました。
しかし、そうなるとキャラや背景などのイラストを入れたくなってどうしても縦の幅が大きくなっちゃうんですね。
どんな記事があるのかすぐ分かるように、記事を早く読めるようにと「自分の理想」ではなく「読者の理想」を優先した結果、細くシンプルなデザインになりました。
私がよく訪問するブログのほとんどはヘッダーはブログタイトルの文字だけとシンプルなデザインのかたばかりなので、見習って同じようにシンプルにしました。
本当は前みたいなのがいいんですけどね！
ヘッダーに関しては、今後もデザインが変わるかもしれません！
ヒーローヘッダー（スライダー）
今回のデザインの目玉カスタマイズは、ヒーローヘッダーです。
一般的な呼び名は「スライダー記事」の方ですかね？
以前FC2ブログで運営していたころに使っていたテーマにこの自動で記事がスライド表示する機能があったんです。
結構気に入っていてはてなでも取り入れられないかなぁと勉強しまくりましたよ！
他のカスタマイズと設定方法が違うので苦労しましたが、完成させれました！
現段階では「見てほしい記事」や「看板記事」などを設置していますが、将来的にはブログ内ミニサイトを作りそれらを設置していこうかなと思います。
また、わざと記事タイトルを表示させていません。
表示される画像をタイトル代わりにして、簡潔に文字とイラストで記事内容を把握できるようにしました。
画像もフリー画像は使わず、「人生RPG」の世界観・ブランドを表現できるように１から作成しました。
固定記事
以前のデザインでも設置はしていましたが、画像サイズや設置記事の統一感がありませんでした。
新デザインでは、プロフィールから始まり、「私のこと」「このブログのこと」について多くの方に知ってもらえるように設定しました。
画像もこれ様に作り直してサイズを統一してバラバラにならないようにしました。
PCでみて頂けると最大５つの記事が表示され、観覧するデバイスのディスプレイサイズによって表示される記事数は変わります。
スマホでは横にスライドさせることで設置している記事が見れるようにしています。
記事一覧
記事一覧表示では、カード表示になっています。
ここで意識したことは、アイキャッチ画像が切れずに表示されること。（上の画像はテストブログでのスクリーンショットなので画像は切れています！すみません）
以前のデザインでは画像切れがありアイキャッチに入れた文字やイラストなどが中途半端に表示されカッコイイとは言えない状態でした。
このテーマでも以前から設定しているアイキャッチは切れたままですが、「ZENO-TEAL」に変更すると決めたときからサイズを設定してアイキャッチ画像を作成していたので最近の記事は綺麗に表示されていると思います。
見出しデザイン
大見出し・中見出しのコード自体は前回のものと同じです。
変わったのは色だけです。
ブログの統一感を出すためにヘッダーやグローバルメニューで採用している色に変更しました。
この大見出し・中見出しデザインはあまり見たことがないと思います。
セットデザインではなく別々の好きなデザインを採用しているのですが、コード自体複雑で見出しのくせにかなり長いコードが使われているんですよ。
大見だしをよく見て頂けると分かると思いますが、うっすら斜めに線が入っていたり、コンテンツ幅いっぱいに見出しが広がって区切りが分かりやすくなっていたり、見出しタイトル文字に影が付いて少し立体感があったり。
中見出しは、左の縦棒の半分で色を変えたり、アンダー線を大見出しと違いコンテンツの５０％までにしたり。
読者はそんなに気にしないかもしれませんが、ひそかに私がこだわっているデザインです。
サイドバー
サイドバーの項目名部分は四角く、色が付いています。
四角なので記事一覧のカード型と相性が良く統一感がありますよね。
著者が発表しているカスタマイズの中にブログ全体の色を変更できるコードがあるので参考にして、色を変更しました。
プロフィール
プロフィールは意外とみられる項目です。
どんなデザインにしようかなと数日考えた末、パッと降りてきたデザインがこちら！
背景に丸アイコンはよく見かけますが、背景丸アイコンをプレートの様に持っているデザインは見たことが無い！
画像自体は多少大きくなってしまいますが、画像加工好きの血が騒いでちょっとしたオモシロに走ってしまいました。
もちろんリンク画像なのでクリックしていただけると通常の「aboutページ」に飛びます。
また、以前も設置ししていた「詳しいプロフィール」「欲しいものリスト」「お問い合わせ」を『ボタン風リンクバナー画像』にして、パっとみてすぐ分かるようにしました。
全力で画像加工を楽しんでます。
自分で作ることで、ブログの雰囲気にマッチしたものを設置できるし、他のブログには絶対ないオリジナリティが出せます。
活動エリア
私の『夢の記事』やツイッターでもちょくちょく言っていますが、８月から私にも出来る募金・支援活動に積極的に参加しています。
活動している物をサイドバーに設置した目的は
・私の活動を知ってもらいたい
・こんな簡単なことでも支援することが出来ることを多くの人に知ってもらい、支援を求める人の助けに少しでも影響を与えたい
・将来のために経験を積み私自身の視野を広げれるように
・同じ考えの方と繋がりたい
という感じです。
色んな団体・企業のバナーだと大きさも違うので、自分でバナー作ってリンクを設定しました。
サイドバーにこういった活動バナーを設置するアイデアは
[わっと（id:watto）]さんのブログ
【しいたげられたしいたけ】のデザインから参考にさせてもらっています。
はてなブログをネットサーフィンしていたらたまたま行きついたブログだったんですが、衝撃を受けました。
サイドバーに募金・支援のバナーを設置している！
記事を拝読してもいろんな支援活動に参加している！
私は将来、地元の教育制度関係で支援を行う予定でしたが、「将来」という遠い、不明確な考えでいて、まだまだ自分の考えや知識が浅いことを痛感しました。
別に「ブログで成功してから支援活動しよう」と待たなくていいんだ！
今の自分でもできることが色々あるんだ！と考えが新しくなり、気づいたらわっとさんのツイッター宛にメンションを付けてメッセージを送っていました。
「バナーは良心で貼っているのか？それともアフィリ系か？」
「バナーの貼り方はどのようにすればいいか？」
いきなりのメッセージ＆字数制限でちょっと荒い文章になってしまいました。その節は失礼しました。
返事はすぐいただけて、とても丁寧に教えて下さったので疑問は解決し、今回のデザイン変更のタイミングで、私も活動状況を全面的にブログに取り入れることにしました。
わっとさんは私の募金・支援活動の師匠と思っています。（勝手に）
今後もこういった情報をやり取りできたらと思いますので、どうぞよろしくお願いします。
リンクバナー先では、クリックだけで募金が出来るんですよ！こちらは支払う金額はないんですよ！
リスクが無いのだから誰でも支援はできます。
強力お願いします。
フォローボタン
はてな・ツイッター・Feedlyのよくある３種類のフォローボタンです。
本来ならこの３つのボタンは横並びに設定されていて、マウスが上に乗るとびよーんとボタンが大きく伸びるアクションがあるボタンです。
そのままで十分オシャレなのですが、カード型の「ZENO-TEAL」は画面が小さめのデバイスで見ると、サイドバーが記事一覧の下側に設置され２列になるんですね。
そうなった場合フォローボタンの横に来た項目内容が長い場合、フォローボタンエリアの余白が広くなり見た目が悪いと考えたので、わざと分解して縦に並べて縦幅を稼ぎました。
マウスが乗るとボタンが伸びるアクションはとりいれたかったので、若干ですが伸びる余白を作りちょこっと伸びるようにしました。（全体の5％だけ右に伸びます）
おそらく同じデザインはないと思います。
最新武器（記事）・人気武器（記事）
今更なんですが、ここに表示されるアイキャッチ画像のサイズが変更できることに気づきました！←っおい!!
デフォルトでは、100×100の正方形画像だったので普通にアイキャッチ画像切れてたんですよねー。
アイキャッチ画像に力を入れている身としては不満だったのですが、最初から変更機能はありましたね。
ここの設定はアイキャッチ画像と同じ160×90で設定したので、サイドバーでも綺麗に表示されます。
武器の属性（カテゴリー一覧）
あまり増えないように意識していましたが、じわじわとカテゴリーも増えてきたのでカテゴリー一覧だけで長くなってしまいます。
スマホ表示だとズラーと文字が並ぶと見にくいと思うので、レンガの様なデザインにカスタマイズして縦幅を縮小しました。
本当はこれをフッターに埋め込みたかったのですが、カスタマイズ方法が分からず今は諦めてこの状態です。
どなたか詳しい方、伝授してください。
フッター
ここも結構時間を費やしてしまった項目です。
フッターってブロガーからしたらあまり関心がない項目ですよね。
コピーライトくらいは入れているブログはありますが、大体の人は触れずに何もない状態です。
私のデザイン変更の目的の中に「はてなブログ感を無くす」という小さな意図もありました。
色んなサイトを見ていると企業とかHPとかって必ず何かしらのフッターを設置しているんですね。
意識すると意外とかっこよく見えたので私もフッターを取り入れることにしました。
フッターカスタマイズを紹介している方のコードを色々試しましたが、フッター全体が左よりになりデザインが崩れたり、色がうまく変えれなかったり、ディスプレイサイズによっては文章が縦長になったりと、こだわりが強いとちょっとしたことが問題になってしまいます。
結局のところテーマ著者の方が紹介しているコードを使わせてもらい、少しいじったものになりました。
最初は３コンテンツが横に並ぶデザインでしたが、画面が小さくなるにつれコンテンツ①の「ABOUT」文章が縦に長くなりかっこ悪くなったので、コンテンツ①の下にコンテンツ②を持ってきて、画面サイズが小さくなっても違和感なく綺麗に表示されるよういじりました。
ここでは、どんなブログで管理人がどんな考えで運営しているかを簡単に説明し、サイドバー同様、バナー画像を使いフォローやお問い合わせが分かりやすくなるように工夫しました。
フッターを付けるということは、その分ブログが長くなるので、スマホではフッターを表示させない設定もしています。反映されているかな？
自分で言うのもなんですが、私バナー画像センスあるんじゃね？自分のブログデザイン大好き！！と思いました。
と、自己満ですが、もし私のバナー画像が気に入ってもらえるような需要があるなら仕事として依頼を受けるのもアリかなぁと考えています。
デザイン変更のまとめ
形・見た目から入る冒険者なのでカスタマイズ愛が炸裂しちゃいました。
簡潔にまとめると今回のデザイン変更はこのようになります。
・ヘッダーをシンプルにした
・スライド記事を設置した
・固定記事はブログと私をより知ってもらう為の場所にした
・アイキャッチ画像のサイズを統一し見栄えよく
・見出しの色もブログに合わす
・サイドバーのプロフィールはユニークに
・活動内容を設置して知ってもらう
・バナー画像を使って分かりやすく・オリジナリティをだす
・あえてデザインを大きく改造してフォローボタンを目立てせる
・フッターを設置して公式っぽいデザインにした
パッと見カード型が引き継がれているので大きな変化は見えないかもしれませんが、私自身の気持ちは、全体をガラッと変更した達成感があります。
特に「ボタン風バナー画像」は前からとりいれたかったのでやっと実現できてよかったです。
今悩んでいるのは、はてな純正の「読者ボタン」と「スター」表示をどうするか。
はてなブログって感じを消したいなら外してしまおうかとも考えています。
読者ボタンは、カスタマイズやバナーがあるので迷わないかな。
スターは付けてもらうと嬉しいので外したくない感はあるけど、読み込みが重いという理由でない方がいい？って感じです。
この辺は、もう少し考えて判断します。
プログラマーを目指しているわけではないですが、経験を重ねていくうちにコードが多少読める様になりつつある私。
いつかテーマを作って投稿するなんてこともあるかもしれません。（たぶんない）
かなり理想のデザインに近づけてモチベーションも上がりいいことずくしです。
この新デザインを良いと思ってくれたら是非コメントを下さい。
「〇〇の部分が良かったよー」とか「〇〇の部分が好きー」とかコメントくれると、すごい嬉しいです。
また、「〇〇のところもっとこうした方が良いんじゃない？」的なアドバイスも是非お願いします。
今回はデザインの発表がメインでしたが、需要がありそうならカスタマイズ方法なども紹介していきたいですね！
最後まで読んでいただきありがとうございました。
