遂に!Stingerをカスタマイズしまくってレスポンシブデザインに対応させました。

Written by Joe
materialdesign-goals-landingimage_large_mdpi

これで僕のブログも流行のデザインに乗れたはず….

デザイン、カスタマイズ関係の記事↓(古い順なので、一番古いものと現在のものは結構違います)

レスポンシブ対応しました

いつかはやろうと考えていたものの、なかなか実行に移せなかったレスポンシブデザイン対応。コードを書き換えるのが面倒で手が出せませんでした。

昨日の夜から、やり続け、6時間だけ寝て、結局本日の予定も潰れ更新もできませんでしたが、対応することが出来ました!

きっかけ

しかし、このサイトをレスポンシブ対応させるきっかけがありました。

この間友人の家に行った時、そこにあった10インチのHPのノートパソコンを貸してもらい、自分のサイトを見てみました。すると、表示が途切れている!下の画像のように表示されていました。

イメージ:

無題

どうしてこうなってしまう事態が起きたのかというと、そのノートパソコンの画質が低かったというためでした。

おそらく、横幅が1024pxくらいなのだとおもいますが、その有り様を見て、比較的ブログのデザインにこだわる僕は「コレはレスポンシブ対応し無くてはならない!」と決心しました。

一応Stingerを元にしているブログである

StingerというWordpressのテーマがあるのですが、SEO向きだということで多くのブログで愛用されていて、それをカスタマイズしまくるブロガーもいます。

僕もその一人を目指し、以前からカスタマイズを続けていました。そのかいあってか、副業ハックさんで紹介も頂きました。

もはやStingerには見えない!参考にしたいWordPressカスタマイズブログ集|副業ハック

もともとStingerにはモバイル用にデザインを分ける機能があったのですが、物足りないと感じてはいました。

Stingerの面影もかなり減ってしまったと思います。

スマホ版メニューのアコーディオンも自作し、おそらく元のままになってるコードといえばスタイルシートの、基本構造くらいでしょうか。あとは、フッターのリンクですね。

フッターはまだ手を付けていないので、何かいいアイデアがあったらそれを実践してみようと思います。

憧れた、参考にしたサイト

今まで、デザインが素晴らしいブログを見て、それに憧れてカスタマイズをしてきました。こんかいはそんなサイト様方を紹介させていただきます。

参考にしたい!レスポンシブ×WordPress ブログ7選
http://www.arc-web.com/picxpic/responsive-wordpress-blog/

この記事は、いろいろなアイデアや例を学ぶのに参考にさせていただきました。

もはやStingerには見えない!参考にしたいWordPressカスタマイズブログ集|副業ハック
 http://www.medi-qa.com/wp/stinger_blog.html

このサイトも今回もお世話になりました。

ゴリミー
 gori.me

こちらは、レスポンシブが凄いということでもないのですが、サイトの雰囲気やデザインがとても好きで、以前のカスタマイズの際にとても参考にしたサイト様です。

前回の記事:Stingerに見える?僕が目指したサイトデザイン、参考にした記事。
http://azapedia.net/2348.html

Material Design | Google
 http://www.google.com/design/spec/material-design/introduction.html

そして、コチラ。Android Lから導入されるというマテリアルデザインというものを見て、「コレっぽいものをウェブサイトでもやってみたい!」そう思いレスポンシブ対応するきっかけにもなったものです。

はたしてコレっぽくなったかはわかりませんが、今のところ自己満足はできていますww

まとめ

  1. レスポンシブ対応しました

 

タダの、デザインの更新の告知をしたいだけだったのですが、少し長くなってしまいました。

これからも当ブログをよろしくお願いします!

 

分からない事がある?質問しよう!