Hobby

How to make this site !! このサイトのデザインについてご紹介します。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

知ってる人がいるかもしれないけど、このサイトはWordPressっていう簡単にサイトの構築ができるソフトウェアを使って作った。

WordPressはたしか全世界のシェアが30%もあるらしい。

参照元:ニコニコニュース

そんでWordpressにはテーマっていうデザインのテンプレートがあってほとんどの人が時間短縮のためにテーマを使うよ。

そんで今回ぼくが使ったテンプレートが「Xeory Extension」っていうSEOで有名なバズ部が作ったWordpressテーマを使ったよ。

WordPressテンプレートのXeoryには普通のブログ形式のバージョンもあるけど、今回ぼくは、ポートフォリオサイト的な意味も持たせたかったから、Xeory Extensionの方を使ったんだ。

最初は下の写真みたいな感じだったんだけど、頑張ってデザインを変更したよ。

デザインのポイント

My life is my art .について

一番上の“ My life is my art .”はジョンレノンの“ Our life is our art ”ってのを「英語 名言」でググって見つけたよ。

下の文章もその名言の解説に載ってたやつをほぼそのままコピーした。

採用ポイントは

  1. 短い

だよ。。。。

Please message meについて

ラフな感じのサイトだってことをアピールしたかった。

「ぼくのTwitterを見てね」ボタンには触った時にボタンの色がブラックになるようにアニメーションをつけた。可愛くなるようにね。

Timelineについて

ここにまじで時間を使ってしまった。

それぞれのブログ記事をファッション雑誌「POPEYE」っぽくしたかったんだけど、なんか上手くいってない気がする。

写真の上のタイトルとか日にちは自動で取ってくるようにPHPを使った。あと「OREREO」っていう雑誌のタイトルの部分はCSSで1°だけ斜めにしてオシャレ感を漂わせた。

写真は自由に設定できるように汎用性が高くなるようにデザインした。

あとはレスポンシブ対応(スマホ対応)させるためにもすごく時間がかかった。

ぼくは基本的にはメディアクエリを書かないようにして、サイズ指定にpx(ピクセル)とかを使わないようにしてるよ。具体的には、emとかremとか画面幅に合わせてサイズが自動で変動するタイプの単位を使うんだ。

そうすることでCSS(装飾コード)の管理が楽になると考えてるからね。

👇 ちなみにこんな感じを目指した。

 

ランキングについて

ここはあんまりいじってない、正直。

もっと可愛い感じのデザインにしていく予定。

追記:ここもデザインをPOPEYEっぽくしたよ。あとは順位のリボンの色をカラフルにした。

グラフィカルなディスクリプション

デザインのポイントを一枚の写真にまとめたよ。

 

ひとこと

ブログ一覧を雑誌みたいに見せるってのは他のサイトでは見たことがなかったので、新しいことができた感じがして嬉しい。以上。

※ちゃんと調べてないだけでホントは雑誌風のブログ記事一覧あるのかもしれない。

次のアクション

このWordpressのテンプレートを作成して販売する。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

人気の記事

コメントを残す

*