きみとイギリス暮らし

読者です 読者をやめる 読者になる 読者になる

きみとイギリス暮らし

イラストレーターkimixのイギリス留学&ワーホリブログ

{ FOR A GIRL } コラージュでイギリスのトレンドをお届けします。

spring & adidas

イギリスで受けたインスピレーションをもとに、コラージュやイラストで現地の情報をお届けしたいと思います。

ファッションにかぎらずインテリアや他にもいろいろ、ブランドとかも紹介できたらなあと思案中。

なまえは…いまのところ未定なんですが。。

世界中の誰かに、それがたった1人の人であっても、まるで少女のようにワクワクしてくれるようなコトやモノをお伝えしたいなあと思ったので仮で「FOR A GIRL」としました。

とりあえず作ったもの・気づいたことを週1〜2日くらいでぽこぽこ載せていく予定です。

コラージュという原点に一度もどり、発信することを何より楽しみたいと思っているので気長に見守ってやってください…!



今回のテーマは、春とadidas。

こちらの気温はまだまだ寒いですが街に繰り出せばすっかり春色の洋服がずらり。

淡いパステルカラーにadidasのスニーカーやリュックを合わせてスポーティにするのが流行っているようです。

キャップやレギンスを合わせたり、ショート丈のトレーナーを合わせたり。

えっ寒いのにおへそ見えてるよ!?みたいな人もたまに見かけます。笑


ああさすがにわたしはできない、、、でもadidasのスニーカーは一足欲しいなあ。

そんなイギリスのファッション事情でした。




ほいではまた今度。




\更新通知はこちらから/

【お知らせ】ベジタリアン向け雑誌「Veggy」で挿絵を描かせていただきました

veggy (ベジィ) vol.52 2017年6月号

本日はイラストレーターらしく、お仕事のお知らせを…!

ベジタリアン向け雑誌「Veggy」さんで挿絵を描かせていただきました。

▼公式サイトはこちら
Veggy Online

5月10日発売予定です。

わたしもちょうどイギリスに来てからベジタリアンになりかけていたのでお声をかけていただけてとても嬉しいお仕事でした。

veggy (ベジィ) vol.52 2017年6月号

veggy (ベジィ) vol.52 2017年6月号

こうしてイギリスに住みながらも日本からお仕事をいただくことができとても嬉しく思っています。

本当に、ありがとうございます。。

最近お仕事について気付くことがありました。

ずっと自信がなかったのですが、自分の価値は自分で決めるものではないし、人からご依頼いただいてる時点でなにかしら価値を感じていただいている。

だから期待値を超えなくてはとプレッシャーをかけるのではなく、淡々とこなすのが一番よいのだと、気付きました。


絵を描くこと、とても好きです。
好きになれてきました。



なにかお手伝いできることがありましたらご依頼お待ちしております☺︎


▼これまでのお仕事履歴

▼ご依頼はこちらまで
kimix.ximik@gmail.com

はてなブログのデザインをシンプルにカスタマイズするためにやった10のこと

f:id:kimix:20170424021541p:plain

シンプルだけど整ったデザインにしたいなあという悩みを抱えて早数ヶ月…

ついに!カスタマイズしてみました〜〜!

ということでめずらしくWEB屋さんっぽいことを書いていきます。

別にたいしたことはしてないですが…なにをやっていったかちょっと説明してみます。


はじめにやること

テンプレート「DUDE」をインストール!

テンプレートストアにある色んなテンプレートの中から1番好みだった「DUDE」をインストールしました。

ちなみにDUDEはレスポンシブルテンプレート(スマホ対応)じゃないので自分でスマホに対応させました。

個人的におすすめなテンプレート

今回は過去にDUDEをインストールしてたのでそれをいじくるのが前提でしたが

はじめからスマホ対応しているテンプレートのほうが楽ちんだと思うのでそっちがオススメ。


はい、ここからがメインです。カスタマイズするためにやった10のことを紹介します。


1.ナビゲーションをつけた

メニュー(ナビゲーション)をつけました。

PCでは大カテゴリにマウスを当てると(ホバーすると)小カテゴリが表示されるようになっています。

設置方法はシンプルなブログテーマで有名な「Innocent」のカスタマイズ記事を参考に。

(ちなみに現在リンク貼られてないメニューもありますが改造中ということで見逃してください…!)


スマホではアコーディオンナビゲーションを表示。

スマホでも小カテゴリを表示させたかったのでLIGの記事を参考にしました。


2.見出しを変えた

そのまんまです。見出しを変えました。

中見出しだよ

小見出しだよ

中見出しにハートとか使ってみました。ふふふ。

でも可愛くなりすぎないように色はグレーで控えめにしています。


3.太字をマーカー風にした

太字だよ

薄いピンクのマーカーが引かれているようなデザインに変更。

ひかえめに、ひかえめに。


4.はてなブログ専用WEBフォントを使ってみた

FontAwesomeを使ってアイコンを表示させるのがはてなブログ内で流行っていますが(?)

はてなブログ内には専用WEBフォントがあるのご存知ですか!?

はてな内に標準搭載されてるcssで読み込まれるようになっているのでこっちの方が表示早いとのことです。

ということでナビゲーションのアイコンたちは「はてなアイコンフォント」をつかっています。


5.日本語WEBフォントをつかってみた

ちょっと雰囲気を変えたくて「Noto Sans Japanese」を使ってみました。

読み込みが重いな…読みにくいな…と感じたら変えるかも。

1番の問題点は重さです。2バイト文字のため、1つのウエイトで、1MB以上あります。Noto Sans JPの場合でも6つのウエイトがあり、全てをダウンロードする場合、9MBにもなります。昨今の通信環境は高速化傾向にありますが、それでも「ありえない重さ」です。
Google Fontsの日本語フォント「Noto Fonts」の使い方 | OXY NOTES

はい、この方がおっしゃてる通りちょっと読み込みが遅くなるのです。

あと可読性が悪いような気もします。(なんで変更したんや)

▼公式サイトはコチラ
Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access



6.カテゴリを階層化・表示させた

はてなブログってカテゴリを大カテゴリ、小カテゴリ…って階層化して選択できないんですよね。

ですが!

↓この記事を参考にJavaScriptを書くことによって記事上下に入れ子式のパンくずリストを表示させることができます。

とっても簡単にカテゴリ管理ができるようになるのでお困りの皆さん、ぜひやってみてください〜。


7.サイドバーが固定されるようにした

PCで下までスクロールしたとき、サイドバーにある「人気の記事」の項目が固定されるようにしました。


8.トップを記事一覧ページにした

はてなブログのトップページ、、、見にくくないですか?

http://kimix.hatenablog.com/

(URLにアクセスしたら一番初めに表示されるindexページのことです!)

これにずっと悩んでいたので▼この記事を発見した時飛び上がっちゃいました。


はてなブログのトップページって、「続きを読む」を本文内に記入しない限り

設定画面で指定した個数の最新記事の全文が出ちゃうんですよね。

「じゃあ続きを読むを設定すればいいじゃん!」って思う人も多いと思うんですが、これがまあめんどくさくて…。

レスポンシブONにしないで、はてなブログ標準のスマホデザインを使えば記事一覧が表示されるんだけどね、なんだかね、、って思っていました。

こちらも記事の通りに設定するだけで簡単に設定することが出来ます〜


9.サムネイル画像を角丸にした

すこし優しい雰囲気を出したかったのでサイドバーに表示されるサムネイル画像たちは角丸にしました。


10.Twitterのフォロワー数を表示させた

PCだとサイドバーにあたる「ABOUT」の欄にTwitterフォローボタンをつけているんですが

Twitterのフォロワー数を表示させてみました。

フォロワー数が出てると「フォローしたいな!」って気持ちが湧きませんか?

あれ、わたしだけ?

  • 一般的に人は、他者の口コミや評判を加味して良し悪しを判断します。(心理学用語で「ハロー効果」と呼びます。)
  • SNS上でのシェア数など、どれだけ影響力を持っているのかが把握できる数値は、記事を見たユーザーの心象に少なからず影響すると考えられます。

Twitterの公式フォローボタンでフォロワー数を表示する方法|ferret [フェレット]

ふむふむ。調べてみたらやっぱり心理的効果があるみたい。

ツイート数は表示できなくなりましたが、実はフォロー数であれば表示させることができます。

そうそう、いつからか記事が何回ツイートされているかカウント数が表示されなくなっちゃいましたよね。

ですが、フォロー数は表示できるようです。

ってことで表示させてみました。

ぜひフォローしてみてくださいね〜!


▼詳しいやり方はこちら


今後やりたいこと

フッターをつくりたい…

※ごめんなさいこれまだできてません。

PCではフッターに読んでもらいたい記事や詳細なんかを載せたいなーと思って絶賛カスタマイズ中。

ソーシャルボタンを変えたい…

いろんなブログで配布されてるものはあるものの、いまいちこれ使いたい!っていうものがないので自分でつくりたいなーと思っています…

デザインを完成させたい…

今回はデザインから手をつけるのではなくはじめに白黒グレーでコーディングをして、あとから少しだけ色を足していきました。

Photoshop開いてデザインからはじめるとどうしても時間がかかっちゃうんですよね…

この状態では味気ないのでまだまだこれから色をつけたり画像を入れたりして装飾していく予定ですが、この状態でも充分良さそう……

へなちょこカスタマイズだけど何かcssとか需要があればいつか公開したいな〜〜



この記事が少しでもお役に立てれば幸いです。

それではまた~!