6ステップでマスターする 「最新標準」HTML+CSSデザインを使って、サイトをリニューアルしてみました

この前の記事にも書いていたのですが、「6ステップでマスターする 「最新標準」HTML+CSSデザイン」を基にしてこのサイトに反映させようということで、何とかやっと形になったので変えてみました。
flexを使ったレイアウトを学ぶならこの本!6ステップでマスターする 「最新標準」HTML+CSSデザイン

本のサンプルサイトのデザインのままだとちょっと寂しいかなぁと思って、いろいろと装飾を付け足していったのでごちゃごちゃしてしまった感もありますが、とりあえずはこれをベースにしていこうかと思います。
ブログサイトなので若干レイアウトを変更している部分もあるのですが、基本はサンプルと同じような形となっています。
クラス名なども変えるのが面倒くさくて、本に書いてあるままの状態です…
修正しやすくするように変えなきゃなとは思っているんですけどね。

これからも思いつく度にいじっていくかもしれませんが、いずれはもうちょっと削っていってシンプルな形にしたいと考えています。
もし、表示などに不具合などがありましたら、こちらに報告していただけるとありがたいです。
主にFlexboxを使ってレイアウトしているのですが、時々レイアウトが崩れてしまっているときがあるので…
これからは一旦サイトのデザインには目を伏せておいて、ブログを書くことに集中しようかと思います。(できるかな…?)

一時的にサイトデザインの変更

Material Design Liteでテーマを作っていたのですが、ちょっと動作が気になっていたので一旦、以前使っていたデザインに戻そうと思います。

でも、近いうちに新しいテーマを作成する予定です。
どれだけサイトのデザインを変えてるんだよって話ですが(笑)
ちなみにテーマは、近いうちに発売される本を参考にして作るつもり。(エビスコム信者の私ですから…)

それまではこのテーマでいきます。以前作ったこのテーマも結構好きなんですけどね。

BootstrapからMaterial Design Liteに乗り換えてみた[WordPress]

これまでこのサイトのWordPressのテーマにはBootstrapを使っていたのですが、今回はMaterial Design Liteというフレームワークを使って、テーマを作成してみました。

※2015年9月現在、私のサイトでは動作がおかしくなるのが気になったため、Material Design Liteを使うのをやめてしまいました。

Material Design Liteとは

Material Design LiteはGoogleが公開している、お手軽にマテリアルデザインを扱うことができるフレームワークです。

Material Design Lite

Bootstrapと同じようにグリッドシステムやボタンなどのパーツが揃っています。
ですが、Bootstrapにはあったパンくずリストやページネーションといったあたりはないので、より簡素的なものになっています。

Material Design Liteを使ってみた理由

ここではなぜ私が、Material Design Liteを使ってみたかったかということを書いていきます。

コードサイズが小さい

約27キロバイトとBootstrapよりもかなり軽量だということ。

おしゃれ!

なんといってもこれがいちばんの理由です!
サイトの各部品を見ていたのですが、どれもおしゃれで使ってみたくなりました。

特にいちばんやりたかったが、ボタンのエフェクトです。

クリックすると、波紋のように広がっていくエフェクトがかっこいいですよね。
クリックする位置によって動作がかわるところも素敵です。
ネットで調べれば、やり方も載っているのでしょうが、Googleのが公式で使えるならそっちを使いたいよね~ってことで選びました。

Material Design Liteを使ってみて

ここからはMaterial Design Liteを、WordPressのテーマに組み込んでいったときのお話です。

情報が少ない

有名なBootstrapだとネットや本でも情報が載っていますが、Material Design Liteについての情報はまだ少ないようです。
調べていても、Material Design Liteを使っている人も少ない気がします。

あまり情報が載ってないので、Material Design Liteのサイトからコードを調べてたのですが、全部英語…
Material Design Liteはシンプルなほうだとは思いますが、英語が大の苦手な私にとっては、これでも理解するのに時間がかかるし、しんどいです。

ニュースでもやってますけど、技術者が足りない理由って英語が分からないからというのが一番大きいのでは?

うまくいかないことだらけ

私の技術不足なだけかもしれませんが、Material Design Liteを使ってあれこれやろうとしてみたんですけど、うまくいかないことが多かったです。

スクロール関係がうまくできない

LINEブログの関連記事のように、スマホ画面だと横スクロールできるようにさせたいと思い、overflow-x: auto;を記述してみたのですが、私のスマホでみるとうまくいかない…

パソコンのブラウザを小さくしてみると、ちゃんと横スクロール画面が出てくるし、スマホでも読み込んでる途中までは横スクロールできてるみたいなので、Material Design Liteの何かが悪さしてるはずだと思います。

でもどうやったら解決できるか、今の私にはまったくわからない…

あとフロントページでスクロールすると、要素が動いてアニメーションするようにさせたくて、WOW.jsを使ってみたのですがそれもうまくいかない…
私のサイトにこれまであった、トップに戻るボタンもうまくなりませんでした…

試行錯誤しても全然うまくならないから、Material Design Liteのことがちょっと嫌いになりましたよ。

でもかっこいい

Material Design Liteのスクロールうまくいかないんだって
もぅ 全然わかんないよね
いいよね!(by レ○クのCMより)

いろいろと文句もありますが、それでも実装してみればかっこいい!
私はこれまでテーマは毎回自作しているのですが、今まででいちばんおしゃれ~なサイトになってるんじゃないかな?

正直、自作でテーマなんか作るより、すでに提供されているテーマを利用したほうが時間も労力もかからず楽だと思います。
Material Design Liteを使っているテーマもあります。

まぁ、私はもともとHTML&CSSの勉強するためにWordPressをはじめたようなものですし、自分で作ってるほうが楽しいですからね。
今回は、Material Design LiteのソースをWordPressに合わせるのにも苦戦しまして、カスタムメニューなど使わず主に直書きになってるのが情けないですが、とりあえずちゃんとなっていればオッケーでしょ(笑)

最後にひとこと

多少の問題もありましたが、使い方次第ではおしゃれでかっこいいサイトをお手軽につくれるので、ぜひ試してみてください。

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

またもサイトのデザインをいじってしまった私。

これは私が飽き性だからでしょうか。
前回、リニューアルしたとき書いた記事をみると、わずか3ヶ月しか経ってないという事実…(笑)

あまりいじりすぎるのはよくないとはわかってるんですけどねぇ。

今回のリニューアルの主な内容

デザインをV・ファーレン仕様に

今回のリニューアルで一番目立つのが、カラーリング。

私のブログをよくよく見てみると、大抵V・ファーレン長崎の記事しか書いてない…
これだったら、いっそサイトのデザインもV・ファーレンっぽくしたほうが読みやすくなるんじゃないの?と考え、サイトの色にV・ファーレンのユニフォームのカラーを取り入れてみました。

作っているうちに、いろいろと付け加えてごちゃごちゃしちゃった感じはありますが、以前よりは明るくなったのではないでしょうか。

ブログを2カラムに戻す

前回のリニューアル時に1カラムにしてみたのですが、2カラムに再び戻しました。

記事を読むときは、1カラムだと文章に集中できるので良いとは思いますが、私が他サイトで1カラムのブログを読んでいて、別の記事も読みたいとなったときに、カテゴリなどが下などにあって離れてると、スクロールしなきゃいけないし面倒に感じちゃうんですよね。

スマホならわかるけど、わざわざパソコンでも1カラムにする必要はないかなと思って、変更することにしました。
ブログによくある、ありきたりな構成になってしまったのはちょっと寂しいですけどね…

プラグインTheme Checkをつかってみる

今回ははじめて、プラグインのTheme Checkを使ってテーマを修正してみました。
といっても、日本語関連や翻訳の部分は、英語が苦手な私にとってはかなりの苦痛であったので、修正はそれ以外の部分を行いました。

コメント欄のページャーやCSSのクラスの設定など今までやってなかったところが結構あったので、テーマを提出する必要がなくても、勉強になるのでやってみるといいかもしれません。

パンくずリストをプラグインまかせに

これまでパンくずリストは本に載っていたものをそのまま使っていて、構造化でマークアップしたいと思ったためコードをいじろうとしたのですが、面倒だったためプラグインのYoast SEOのパンくずリストを使って配置しました。

私はできるだけプラグインは使わず、自分でコードを書いて使いたいと思っていたのですが、プラグインだと簡単に配置できるので楽で便利ですね。
時にはプラグインまかせにするのもいいですね。

アイコンを多用してみる

Font Awesomeを使って、サイトのナビゲーションなどにもアイコンを入れてみました。

アイコンを入れることで、より親しみやすくなればいいかなあと思って。

ほかにもいろいろといじってみたのですが、もし次つくるなら今度は完全オリジナルなデザインにしたいなあと思ってます。
いっそ、別のサイト用につくったりするのもありかも?

作成の際、参考にした本・サイト

ICHI-METERならぬ、YOCHI-METERが出現!?

以前、このサイトにお越しいただいた方は分かるかもしれませんが、またサイトのデザインを変えてみました。

ブログの投稿より、サイトのデザインに時間を割いているのに定評あるわたくし。

そんな私のサイトのトップページに、ICHI-METERならぬ、YOCHI-METERが出現!

YOCHI-METER現る

イチメーターといえば、大のイチローファンであるエイミー・フランツさんがつくった、安打数を記録したボードのことである。

そんなイチメーターとそっくりな、YOCHI-METERなるものが出現しました!?

きっと、このサイトにも大のファンがいてくれて、その方が置いてくれたのでしょう。
(2016年9月現在、Yochi-METERは撤去されております…自分の心の中で数えるのだ…)

って、そんな冗談は置いといて、今年のイチロー選手の活躍ぶりに乗じてパクって…つくってみました!

いつかはイチローの数字超え?

いまのところ、このYOCHI-METERの数字には私のブログの投稿数が表示されています。

最初はアクセス数を表示しようかと思っていたのですが、私のサイトの乏しいアクセス数を表示させるのは恥ずかしい…
ということなので、それなら投稿数でも表示してみようかなということになりまして。
普段あまりブログを投稿しない、私への戒めにもなりますしね。

さすがにイチロー選手の安打数越えはなかなか難しいものがありますが、まず目標とするのは、川崎フロンターレ大久保選手のYOSHI-METERの数字。(2016年12月時点では、ゴール数は171となっています)

このYOCHI-METERはいつまで載せているかわかりませんが、とりあえず飽きるまでは表示させておこうかなぁと思ってます。
まずは、ブログの投稿を怠らないことが大切ですね(笑)