これで気分が上がってブログの更新もはかどる！はず！

やはり自分を現す物があるというのは良いものですね。

ロゴの意味

Jは当ブログ名『JUST IN CASE』の頭文字。

じゃあ三角は何なんだという話ですが「好きな図形：三角形」なだけです。

ホーム画面のアイコンに反映（ファビコン）

ということで、もしホーム画面に追加してくださるようなことがあれば新しいアイコンが見られます！

左上です。ちなみにホーム画面もロゴにしちゃいました。

作成方法

僕はデザインソフトみたいなものはほとんど扱えないので、iPhoneのアプリを使用して作成しました。とは言っても意外とレイヤーとかも使えてしっかりしていました。

CREATE – クリエイト: デザイン,描画とグラフィックスを作成します
Anything is
価格： 0円
posted with sticky on 2017.3.28

三角は正三角形にしたかったけど、やり方がわからず目分量。そしてその中にフォントはGeorgeaのJを配置。配置をこだわったつもりです。背景色もビネットを少しつけています。

しかしシンプルなので佐野さんパターンになっていないことを祈るばかり。

ボツ案

実際これの方に2時間くらいかかり、やっぱりイマイチ…とやってみたJは10分で完成。という感じでした。

こっちのイメージは三角は同じで、丸はなんとなく、色は日本国旗っぽく。と全くブログ関係ありませんが…。嫁に見せたらおにぎりみたいと言われ…確かに、とその時気付く。

まとめ

ということでブランディングではないけど、このブログにも多少存在感が出たような気が自分で勝手にしています。

これから更新していくモチヴェーションが高まりました。

変化

PCブラウザでの表示
header

footer

header

footer

iPhoneでの表示

SNS系のリンクをアイコンフォントで作成

一番ぱっと見わかる変化はこれでしょうか。今までSNSのリンクは後で何か作ろうと思ってナヴィゲーションに入れるという荒技で適当に設置していたのですが、最近アイコンフォントなどという、とてつもなく便利な物を知ったので導入。Fontelloというサイトを使いました。

フォントを変更

ナヴィゲーション、記事タイトルの英語、フッターのコピーライト表示のフォントを変更しました。フッターのはかわいげもあって中々好きでした。ちなみにGoogle Fontsを使っています。

ナヴィゲーション：　Rokkitt
記事タイトル：　Cardo
コピーライト：　Cookie

よりヴィンテージ感を出していきたいですが、日本語が入ってしまうとどうにもこうにも難しそうです…でも可能な限りの所まではやって行きたいです。今回変更したフォントはどれもタイプで特にCardoが好きでした。WがVとVをちょっとずらして重ね合わせたみたいな感じになるのが良かったです！

トップに戻るリンクを右下に

しばらく下にスクロールすると右下にトップに戻るリンクが出るようにしました。jQueryとCSSで実装する一般的なやつです。

あんまり右下とかにいきなり出すのは好きじゃないけどこれくらいならいいかなと。たまに関連記事とか結構大きめな要素が右下から出てくる時あるけど僕は嫌いです。だっていかにもこの地区に住んでなさそうな外国人女性が「ヘイ！私も今その地区にいるの！今晩私と遊んじゃえばいいじゃない！？」的なチャット風なやつが現れるのを思い出させるからです。

まとめ

それはさておき、早く本番の環境に反映させたくてブラウザはChrome, FireFox, Safariの新しめのブラウザの動作しか確認してません。微修正はまた徐々にやっていきたいと思います。

Pinterest風グリッドレイアウトとは

これ！このいかした個々のグリッドがうまい具合に積み重なってくれる様なレイアウト。

Masonryとは

そのグリッドレイアウトを簡単に実現してくれるJavaScriptのライブラリ。

ウィンドウの横幅に合わせてグリッドがうにゅうにゅとアニメーションしてくれます。

どのように動くかはこちら。

設定後

ウィンドウの横幅を狭めるとそれにあわせてグリッドのサイズもアニメーション付きで変わってくれます（PCブラウザのみ）。ある程度の狭さまでいくと２列になるように設定しました。

このページは関連記事がないのでこちらで動きが確認できます。

iPhoneから見るとウィンドウサイズは変えられないのでアニメーションは無いけどグリッドレイアウトにはなってくれます。

若干の問題発生

でもiPhoneからだとたまにグリッドがかぶってしまう時があってそれが悩みです。JavaScriptがうまく動いてくれてないのか、masonry系のコードを差し込む場所が悪いのかなんなのかわからず…PCブラウザからだと全く問題はないのだけれども。ウィンドウのサイズを変えないとJavaScriptが走ってない時があるんじゃないか疑惑もあるようなないような…でもいつもって訳でもなさそうだしちょっとよくわかりません…

救世主現る

と思いきやすごく参考になる記事を見つけましてそちらの解決策を試してみたら解決したような！

jQuery Masonryを使う際にわりと大事なimagesLoadedプラグイン（ウェブ、ショウジンさんの記事）

どうやら画像の読み込みがmasonryに影響してたようです。画像が読み込まれてないうちにmasonryが動いちゃうと高さがうまくとれないとか。PCだと大丈夫でiPhoneだとよく起こったのもその辺の処理速度が原因だったりしたのかななんて。でもこれでなんとか綺麗に表示されるようになってすごく感謝！

レイアウトでなにか問題があるなら描画のタイミングをまず疑ってみるのがいいのかもしれないと改めて実感です。

基本的にはwordpress既存のテーマであるtwentytwelveのカスタマイズですが。それにしてもtwentytwelveのテーマはシンプルで自分好みだったのもあるし、とにかくレスポンシヴデザインなのがたまらない！自分で一から作ってたらなかなか時間がかかるのでtwentytwelveは利用しない手はありませんでした。

デザインの方向性

とにかくヴィンテージなデザインな私ですので（tumblr参照）よりヴィンテージ感を目指して行きました。でも今の所絵を書いたりとかいう予定はないので、全てはCSSでなんとかしてやろうという作戦です。

ワタクシ、仏像や寺など古風なものが好きでありつつも最新のガジェットなども大好きなので、ヴィンテージでありつつもモダンな感じもどこかで出したいななんて思っております。

色や配置や要素のなどはヴィンテージ風で。でも結局それを実現するのはCSSになってくるので、それでどこか若干のモダン感が出てしまって、フラット感がでているような気がしないでもない。

今回の主な変更

今までは見た感じtwentytwelveのテーマは使ってるんだなっていうのがぱっと見ですぐわかった感じだけど、今回は前よりはそこから離れられたかなと。

やっぱりナヴィゲーションのメニューに色を付けたのがなかなか前と見た目がかなり違って新鮮。それに今まで全体的にぼやけた色の印象があったから（好きでそうしてたのもあるけども）、濃いめの色を一色入れるだけでもずいぶんとシマリが出た。若干細めにしたのもポイント。

本当は#000で真っ黒の色でもいいかなと思ったけど、その勇気が無く、今の所は若干のグレーのような紺のような色にしてあります。飽きたら真っ黒になるかも。やっぱり真っ黒を使うというのはよほどの何かがない限り戸惑っちゃう。でもそこでバシッと黒を使えるような男、憧れます！

あとはトップページの個別記事の一覧はよりシンプルにわかりやすく。ホバーでその記事を強調する背景色変更のアニメーションを入れたり。やり過ぎ感もあるけどあるけどどうもやってみたくて！

ということでちょっと触っただけであんっ…といった反応が返ってくるような若干の敏感デザインになっておりますが、小豆を箸でつまんでお茶碗に入れるゲームをするくらい暇な時はぜひ遊んでみてください。でもコンピュータのあんっ…は嘘のことがないから安心ですね！

ブラウザはモダンなやつじゃないとだめなはずです。IEは知りません！ごめんなさい！でも新しいのなら大丈夫なはず！

変更点

1. 全般系
• リンク系のホバーにアニメーション（やっぱりリンクはふわっと色が変わった方が綺麗なので）
• ヘッダー系はテキストを中央寄せ（ヴィンテージ感といったらセンターアライン）
• コンテンツとサイドバーの間に区切り線（前より見やすくなるかなと思って）
2. ナヴィゲーションバー（メニュー）
• 帯風に、色もつけた（全体的にもしまりが出るかなと）
• 要素のホバーでふわっとした感じのアニメーション（割とお気に入り）
3. メインコンテンツエリア
• トップページの個別記事紹介のホバーでその記事の背景色を強調するアニメーション（やり過ぎ感もあるけどアニメーションさせたくて）
• 「コメントをどうぞ」はトップページには表示させない（まだ記事読んでないのにコメントする人もいないし）
• 小見出しのヘッダーにも下部にボーダー（左ボーダーの見出しはありきたりで嫌いだし下部の方がかっこいい）
• 「続きを読む」を四角にしてより見やすく押しやすく（ヴィンテージでありがちな囲い法）
4. サイドバー
• サイドバーのリストには下部にボーダー（今まで区切りがわかりずらかったので）
• 幅を若干広く（今まで狭かった）
5. 著作権表示（ブログの最下部）
• 既定の「powered by wordpress」じゃなくてちゃんと自分用に（なんか様になってきた風）
6. 意味があるかわからない系
• ブログの最上部と最下部に少しの幅のボーダー（全体的に要素系の区切りを少なくしたブログデザインにしてるので、ちょっとシマリを出すため）

万が一検索エンジンからきてくれた場合

twenty-twelveをカスタマイズしたくて、これどうやるの！的な質問などありましたらお気軽に！！