報告記事を書くのが遅れましたが、1週間ほど前に当ブログ「OBOLOG」のリニューアル作業を終えました。今回は「無駄なスペースを減らして読みやすく!」をテーマにデザインの変更をおこないました。▼リニューアル前のトップページ▼リニューアル前の記事ページブツ切りしてますが、あくまで雰囲気の参考ということで。この画像から分かるように無駄な空白がページ上部に多いですよね。記事ページでは、PCから閲覧してもファーストビューが「ヘッダーと記事タイトルのみ」なんてことに。スクロールしてもアイキャッチ画像がドーン。本文まで遠いこと遠いこと。こんなところが気になって、リニューアルを思い立ったわけです。完成したものがこちら。▼リニューアル後のトップページ▼リニューアル後の記事ページ見たまんまの違いですね。主な変更点を以下で説明していきたいと思います。全体レスポンシブデザインはリニューアル前から採用しているのですが、画面幅が1279px以下の時は1カラム、1280px以上の時は2カラムデザインになるようにしました。以前は画面幅によらず15pxとしていたフォントサイズを、タブレット・PCを想定した画面幅では16pxに指定し直しました。その方が全体のバランスが良く、1行あたりの文字数も多くなりすぎず読みやすいかなと思ったためです。画面幅768px以上ではページ全体を引き締めることを期待し、暗い色で横幅いっぱい塗りつぶしています。1色だけだとのっぺりした感じが強かったので、#1a1c21と#3a3c41の2色を使って斜めストライプにしました。画面幅1280px以上の時には、推しカテゴリとして「場面緘黙」「ヒゲ脱毛」、ABOUTページである「当ブログについて」、検索フォームやカテゴリ一覧(という名のメニュー)をスライドインさせるリンクを表示しています。画面幅767px以下では背景を#f2f2f3と#ededeeの2色を使って斜めストライプにしており、右側にメニューをスライドインさせるハンバーガーボタンを設置しました。記事ページのタイトル周り以前の記事ページデザインは、アイキャッチ画像ありきのものでした。そのため、記事を書くたびにアイキャッチ画像を探したり、あるいは作ったりする必要がありました。毎回ぴったりな画像を見つけるのは難しく、「無理があるだろ」「こじつけだろ」っていう画像を設定することも多くありました。IMAGE」と書かれた画像を作成してアイキャッチに利用したこともあります。こんなのいらないよなと思うと、こじつけレベルのアイキャッチ画像の必要性にも疑問符が。そこで、いっそのこと記事タイトル周りのデザインを変えてしまおうと思い立ちました。以前ほど大きなスペースをとらないようにするアイキャッチ画像がなくても統一感を持たせる記事の属するカテゴリを表示する記事の投稿日と最終更新日を表示する上記の条件を満たすために試行錯誤した結果、現在のデザインになりました。↑こんな感じ(画面幅768px以上の時)ですね。背景にアイキャッチ画像(リサイズ済)を指定しています。CSSでぼかしているのではなく、小さい画像が引き伸ばされてぼやけた感じに見えるようになっています。アイキャッチ画像を指定しない場合は、次のようになります。背景を2色による斜めストライプにしています。ブログ全体の統一感を出すために、画面幅が768px以上か未満かで色の指定を変えています。シェアボタンは記事下だけに付けていたのですが、上にも付けた方がまとまりが良く見えたのでそうしています。カエレバ・ヨメレバの導入これまで商品を紹介する際には「AmazonJS」というプラグインを利用していたのですが、このリニューアルを機に「わかったブログ」のかん吉さんが作ったカエレバ・ヨメレバへと置き換えました。Amazonだけでなく楽天へのリンクも一緒に張れるのがいいですね。デフォルトでも十分その機能を果たしますが、僕はCSSでカスタマイズして使っています。5件」「人気記事10件」を表示させていましたが、「広告」と「人気記事20件」のみのシンプルな構成にしました。検索フォームは使われることがゼロに近かったし、最新記事が気になる人はトップページに行くだろうと思ったため、サイドバーからなくしてしまいました。フッターページ全体を引き締めることを期待し、#1a1c21と#3a3c41の2色を使った斜めストライプにしています。画面幅768px以上では、フッターメニューとしてABOUTページやコンタクトフォーム、SNSアカウントへのリンクなどを表示させています。おわりに特筆するようなことではないものの、これらの他にも様々なところを修正しており、その結果かなり気に入ったデザインにすることができました。昨年のリニューアル時に課題として挙げていた「記事の適切なカテゴライズ」は解決できていません。(もっと記事が増えたら再分類すると言ったものの10記事ちょっとしか増えていない)ともかく、心機一転ブログを書いていきたいと思いますので、これからもOBOLOGをよろしくお願いします。0シェア1ツイート0ブックマーク-LINE-Pocket-フィード-タイトルとURLをコピーこの記事を書いた人エヌジマ三十代の唐変木。学校など特定の社会的状況で話せなくなる場面緘黙(ばめんかんもく)を過去に経験。現在も雑談は大の苦手で、時に緘黙の症状が出ることも。このブログでは自分の日常や「紹介したい!」と思ったものを中心にいろいろ書いています。詳しくは当ブログについてをご覧ください。お問い合わせはこちらのフォームからどうぞ。話したいのに話せない。