サイトデザインリニューアルしました[2017春]

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

主なリニューアルの内容

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

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

サイト名の変更

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

AMPプラグイン導入

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

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

SSL対応

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

その他

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

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

サイトデザインリニューアルしました[2016冬]

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

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

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

変わった部分

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

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

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

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

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

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

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

Yochi MATERの復活

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

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

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

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

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

サイト名変更のお知らせ

この度、このサイトの名前が変わりましたので、お知らせいたします。
以前に訪れたことがある方はどこが変わったんだよ!?と思われるかもしれませんが…

以前は「YochiYochi」というサイト名でしたが、新しく「Yochi×Yochi」という名前に生まれ変わります。

変えるきっかけ

変えようと思ったきっかけは、スマスマを見ていたときです。
スマスマって「SMAP×SMAP」とグループ名の繰り返しで、そういえば私のサイトも自分の名前の繰り返しで一緒じゃん!という共通点を見つけ、それならスマスマに合わせて自分も×を付けちゃおうという思いつきから生まれました。残念ながらスマスマが終わってしまったので、それを受け継ぐと思いもわずかながらあるかもしれません。サイトの内容は全く関係ないものですけど(笑)

元々サイト名は以前から変えたいなぁと思っていて、いくつか候補も浮かんではいたのですが、この「Yochi×Yochi」もペケがついたことでかわいらしくなった感じがして、案外気に入っています。

ちょこっと変わっただけなので、お知らせするほどのことではないかもしれませんが、これからは「Yochi×Yochi」としてがんばりますのでよろしくお願いします。

追記

2017年よりYochi×2と名前が変わりました。Yochi×2でYochiYochiと覚えてください。

このサイトを再編しようかと検討中

今回はひとり言のような記事となっております。

最近になってというか、いま思いついたことなのですが、このサイトのつくりを再編しようかと検討しています。
現在、このサイトはWordPressでフロントページでトップページをつくっているのですが、それを止めてブログページだけにしようかなぁと考えています。
最初にWordPressをはじめたとき、WordPressレッスンブックを見ながらつくってフロントページを追加していたのですが、あんまりこのサイトのトップページの必要性がないですよね。
ブログページだけのほうが分かりやすくて良さそうですし。

自分でつくったサイトも徐々に増えてきているので、つくったサイトを紹介する一覧を載せたサイトを別に用意しようかと思っています…

また、このサイトもVファーレンの試合記録の記事が多くなってきているので、それをまとめたいと思ってますし、いっそのことV・ファーレンに特化した専用のサイトをつくってしまおうかとも思っています。
もし専用サイトとしてつくるなら、何か新たなコンテンツでも追加しなければ需要なんてないよなぁと思うのですが、私に実装できる力があるかどうかが問題ですね(爆)

思っていることばかりで、実現するとしても来年になっちゃうかもしれませんが、一応予定として書いておきます。
今も新たなサイトをつくってる途中なもんでして…(笑)
サイトをつくってばっかりで、運営がまわらなくなってしまう恐れもありますが、頑張ってやりくりしていこうと思います。

YochiYochiサイトデザインリニューアルしました[2016秋]

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

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

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

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

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

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

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

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

Webページの高速化も意識

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

以前のデザインのときの速度
今回のテーマデザインの速度

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

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

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

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

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

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