UNIRRY

WEBデザインとホロスコープと宇宙のブログ

WordPressカスタマイズでやりたくてやったこと一覧 vol.1

chatchimg

いろいろつくる第3弾、というか、昔からちゃんと作りたかったwordpressの自分サイトです。もうずーっと前からドメインを考えて、ずーっと前からどうやったらwebと宇宙とホロスコープの話題を同じように掲載できるんだ、と無駄に悩んでいました。おまけにphpも勉強して理解してからちゃんとカスタマイズしたいし、そもそも載せるものないとなー・・・、作ってる最中にこのデザインあきたやり直し!・・・などなどで、作るのが予定より1年遅れた感じです。1年遅れましたけど、その間に身についたことを盛り込めたのでよかったなと思います。

以下、はじめてちゃんとwordpressカスタマイズなるものをしてみて、やってみたこと一覧になります。徐々に詳細記載してリンク貼りたいと思います。

WordPressカスタマイズでやりたくてやったこと一覧

固定ページによるページ別デザインカスタマイズ(トップページと記事一覧)

wpfz01_02

記事一覧は、ぱっと見でわかる感じがいいな、という思いがあったので、サムネイル付きでリストが並んだ表示に変更しました。トップについては、サイト全体の紹介がわかるようにしたかったので、考えあぐねつつ、①サイトタイトル、②記事一覧(ぼーっと見ててもいいように自動スライダーに)、③自己紹介(自己紹介って興味ない人が多いと思うので開閉式で)、④ホロスコープについて(わりと特殊なコンテンツになるので波デザインではさんでおきました)、⑤作ったコンテンツ、というブロックにしています。

記事サムネイルの表示

wpfz02_01

これはwordpress側でアイキャッチが指定できるみたいですが、設定を毎回するのはめんどくさそうだなと思ったので、記事の一番はじめの画像をとってくるコードで実装しています。参考にしたのは、株式会社LIGのこちらの記事(http://liginc.co.jp/designer/archives/3205)です。

プラグインによるソースビュー、SNSボタンの機能追加

wpfz03_01

どのブログにもみなさん大抵つけている機能だと思うので、私もつけました。やっぱりソースビューがあると見やすいです。記事別SNSボタンはあって当然といった感じですね。ただし、押されないと意味ないので、今のところなんの意味もないです^^

jQueryでUI関連のお楽しみ追加

wpfz04_01

「マウスオンしたらくらげとか星がでてくる」「サイト自体のSNSボタンが追随してくる」、など楽しいとか使いやすいと思ってもらえるように、ちょっとした仕掛けを盛り込んでおきました。こちらはそのうち記事で紹介したいなと思います。(ipadとかだとそのせいでリンク押しにくいんですけどね・・・!デバイス対応は今後徐々にやっていきたいと思います。)

SEO対策関連

wpfz05_01

SEO対策は早いうちにやっておいたほうがいいと思ったので、噂でこれがあればOKと聞いていたプラグイン「ALL in One SEO」を設定しています。そのほかGoogleAnalyticsやGoogleWebマスター 、サイトマップなど、プグラインレベルですごく簡単に設定できて、こういうところがWordpressでサイトを作ると便利なんだなと思いました。ただ、サイトの構造やメニューのつくりなどなど基本的な部分でしくっている気もしなくもないので今後調整していきたいと思います。

WEBフォント使用

wpfz06_05

もしかしてWEBフォント本格的にはやってる?という気配を感じて、早速とりいれてみました。見やすいし、かなりいいと思います。日本語フォントもいっぱいでてくるといいですね。このサイトもこのWEBフォントにだいぶ見た目助けられている気がしてなりません。使用したのは、GoogleWebフォント(http://www.google.com/fonts/)になります。使い方はめちゃめちゃ簡単でした。こちらもそのうち記事におこします。(追記: 記事におこしました http://unirry.com/webfont_webdesign-377.html


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3