タグ: リニューアル

2017年に入っても、未だにリニューアルに懲りない私。
またまた今回も、サイトをリニューアルしてしまいました（笑）

主なリニューアルの内容

主なリニューアルした内容は以下の通りとなっています。

• サイト名の変更
• AMPプラグイン導入
• SSL対応

サイト名の変更

去年の末に、Yochi×Yochiとサイトを変更したばかりなのですが、再びサイト名を変えてみました。Yochi×Yochiだと長ったらしい感じがしたので、Yochi×2と短くしてみました。ドメイン名に合わせた形になりましたね。Yochi×2でYochiYochiと覚えてください。

AMPプラグイン導入

AMPプラグインを導入しました。なんでかというと、私の好きなエビスコムからAMPレッスンブックが出たから。
早速このサイトで試してみたくなって。今回、リニューアルしたのはこれが一番の理由となりますね。

サイトの色使いは本当は違う形にする予定でしたが、あることがきっかけでこのようなデザインに急遽変更してしまいました。
分かる方には分かるかもしれませんが、アレをモチーフにしています。

SSL対応

AMPを導入するついでに、SSLにも対応させたかったので行ってみることにしました。
httpsに切り替えるだけなら簡単ですが、その後の修正作業が面倒ですね。まだ全体を見きれていないので、表示がおかしくなっている場所もあるかもしれません。

その他

これまではフロントページを利用していたのですが、普通のブログサイトにフロントページは必要ないよな、ということで今回から省いてみることにしました。SSL化に合わせて、ちょうどいいかなぁと思って。

そろそろいい加減にサイトをいじるのばっかりはやめて、書くことに専念したいですね。でも、したいと思ってもやめられないんですよねぇ～?

2016年春、夏、秋とお届けしてきたサイトデザインリニューアルの情報。何とか年内に冬のリニューアルのお知らせをすることができました（笑）
ほんとうは変える予定はなかったのですが、利用していたデザインの飽きが早かった…
前のデザインのトップページはこんな感じでした。

読みやすいデザインを意識

前のものもシンプルで悪くなかったのですが、質素すぎて何か寂しいなぁ～と思っていたんですよね。なので、今回は見た目に関する変更が多いです。

変わった部分

新しく追加された主な部分はこんな感じになっています。

• 本文にもWebフォントの使用
• 目次・サイドバー追尾の導入
• Yochi MATERの復活

本文にもWebフォントの使用

今回はブログの記事などの部分に日本語Webフォントを取り入れてみました。本文まで全部Webフォントを使うと表示されるまでに時間がかかるのが難点ですが、そこは割り切ったというか速度より見た目を取ったという形ですね。
最近は格安SIMなども普及していて速度が心配なときもあるので、パソコンで見たときだけ反映させてあります。フォントが変わっただけで、サイトが締まってみえて好みです。

目次・サイドバー追尾の導入

私のサイトに目次が必要かどうかは分かりませんが、QiitaやUX MILKのサイトの記事ページでサイドに目次が付いてくるのがかっこよかったので、真似してみました?
目次と追尾は全部プラグインまかせでやっております。いや～、プラグインって便利ですね。オリジナルでつくる目次などはネットで探せば出てくるんでしょうけど、コードを理解する知識もまだないですし、何より実装するのに時間がかかりますからね…

あと、パンくずリストもプラグインにおまかせしました。私のサイトはフロントページを使っているので、階層がややこしいんですよね。記事ページだけとかなら何とかなるけど、他のページでもやろうとしたら相当面倒くさいことになる…
でもプラグインなら一発で反映してくれるので楽チンでありがたいです。
これまではプラグインはなるべく使わない派だったのですが、これからは多少はプラグイン使う派としてやっていこうかと思います。

Yochi MATERの復活

皆さん、おまたせしました！一時期このサイトに設置していた、あのYochi MATERが復活いたしました！
ちなみにYochi MATERとは、私のブログの投稿数を表示していたボードのようなモノのこと。（詳しく知りたい方はこちらの記事をどうぞ）
トップページにデデンと書いてある数字がそうなのですが、最初に訪れた方は何のことかさっぱり❓でしょうね

上記以外にもアイコンを変えていたり（仮）、めったに書かれることのなかったコメント欄をカットする?など行っています。

2017年はこのテーマと共に?

2017年はこのテーマと共にできるだけ長く付き合っていく予定です、多分…
この記事が2016年最後の投稿になるかと思うので、ちょっとだけご挨拶を。

いつも私のサイトを見に来てくれている皆さんありがとうございます。本来はもっと皆さんの役に立つような有益な情報を載せていきたいのですが、いつの間にかサッカーの観戦記録がメインの日記のようなブログとなってしまいました。
一応SNSもやってはいますが、未だに使い方を理解しきれていないので、Twitterは主にブログの更新情報、Instagramは気が向いたときだけ、その他はほぼ放置となっております?
飽きっぽい私なので投稿頻度もバラバラで、来年もこのようなスタイルでお送りすることになるかと思いますが、これからもよろしくお願いいたします。

もはやこのサイトの恒例行事となりつつあるサイトデザイン変更のお知らせです（笑）

1ヶ月ほど前に、「6ステップでマスターする 「最新標準」HTML+CSSデザイン」の本を使ってサイトデザインを変えてみたのですが、いじっている内にいろいろと装飾を付け足してしまって、ごちゃごちゃしたと感じになってしまったのが気になっていました。
6ステップでマスターする 「最新標準」HTML+CSSデザイン

シングルページは1カラムでの表示でしたが、文章に集中できるというメリットはありますが、中央にデデンと文字が並んでいるのは意外と読みにくいような気がしたので、よくあるブログサイトの2カラムに変更することにしました。

また、これまで変えていなかったサイトアイコンも今回ちょっぴり変えてみました。

今回のテーマはシンプル・ベーシック

今回考えた、サイトデザインのテーマはなるべくシンプル・ベーシックなものにしようと思い、作成することにしました。
先ほどにも書いたようにレイアウトもよく見る形の2カラムとなっていますし、色の種類もあまり使いすぎないように心がけました。
サイトのレイアウトは「WordPressデザインブック」と同じような形になっていますね。
WordPressデザインブック

最近は、自分の好きな色であるネイビーをサイトのデザインに取り入れていたのですが、元々の考えていた（予定していた）サイトカラーは緑でしたので、ところどころ緑を使ってアクセントにしてみました。

文字も大きめにして、デザイン性よりも読みやすさ、分かりやすさを重視しています。
特にパソコン上からなら、文字の大きさが感じられるかもしれません。
文字サイズをpxでなく、remで指定しているので、ブラウザ設定から行える文字サイズの変更にも対応しています。
詳しく試してはいないため、拡大したらどこかしら崩れたりすることがあるかもしれませんが、もしそのような所を見つけたら教えていただけるとありがたいです。

Webページの高速化も意識

Webページ表示の高速化することも今回意識して取り組んだことで、GoogleのPageSpeed Insightsでのモバイルの速度が、以前よりも20ポイント近く上がりました。

参考にしたのはもちろん、エビスコム本（笑）の「これからの「標準」を学ぶ マルチデバイス対応サイト構築」という本の情報を元に行っています。
これからの「標準」を学ぶ マルチデバイス対応サイト構築

正直、まだレンダリングとか意味を分かっていないまま対策しているので、それはそれでどうかとは思いますが、実際スマホで自分のサイトを見てみても、速度は体感でも上がっている気がするので自己満足しています。

とりあえずはこのデザインでいきます

個人的には満足の出来だと思っているので、しばらくはこのデザインテーマでやっていきます。（いつもアテにならない…）
気になったところがあったら、その都度ちょこっと修正する感じでやっていきましょうかね。

今回も、無駄にFlexboxを使ってレイアウトしているので、もし表示がおかしくなっているところがありましたら、ぜひ教えてください。
私はapple製品持っていないので、iPhoneでの表示がどうなっているかとか確かめられないんですよね…

コロコロとデザインを変えているため、毎回見ているには迷惑をかけているかもしれませんが、これからもよろしくお願いします。