MasterPeace21あらためMasterPeace21、自作テーマで再スタートです!

2012/11/11
Written by: EISUKE
Category: Life

NewImage

当Blogも開設から1年半経ちました(記事は消えちゃったけど)。
そこで、そろそろ始めたいと思ったのが自作テーマです。今までは、2度ほどテーマを変えて、ちょこちょこいじってきましたけど、1から自分で作ってみたかったので実践してみました。

テーマは「シンプル&フラット」

NewImage

ロゴも一新

今回を機にロゴも変えました。今までのロゴのフォントとは違い、細めの書体です。スタイリッシュを意識しました。( ー`дー´)キリッ

白と水色を基調に2カラム構成。記事一覧では「サムネイル・タイトル・抜粋」と結構ありふれた構成に。いろいろ試行錯誤した結果、これが一番見やすいのがわかりました

ちょっとアレンジを加えて、直近2日の記事にはサムネイルに”New”マークが付くよううになっています。

[CSS]画像やパネルに斜めにしたリボンを重ねるスタイルシート | コリス

WordPressでトップページに最新記事5件をリスト表示 –

NewImage

また、単一記事ページでは思い切って1カラム構成にしました!横幅を大きく取り、画像も目一杯大きく表示できるようにしてます。

スマートフォン表示

NewImage

同時にスマートフォンのテーマも一新しました。まだ途中ではありますが。前回はWordPressプラグインのWpTouchをベースにカスタマイズしましたが、今回はPC表示のテーマをカスタマイズしてスマートフォン表示にしました。

ほとんど、CSSを書き換えるだけで完了したので、ほとんど時間もかからず出来たのオススメです。

NewImage

次の記事一覧の表示には、@Goryugoさんのこの記事を参考にタップすると記事一覧を読み込むのを設定しました。


jQueryを使ってWordpressの追加記事をページ遷移無しで読み込む | ごりゅご.com

とりあえず、今はコレくらいです。今後もカスタマイズしていきますが、出来るだけテーマである「シンプル&フラット」を崩さないように頑張ります。

今回テーマを作る上で参考にしたのは、「WordPress レッスンブック」が一番大きいです。

エビスコム
ソシム 2010-09-08
¥ 2,940


後は、ちょこちょこと”高橋のり”さんのページなどを参考にしました。

WordPress ::: Webデザインレシピ

自作テーマを作った感想

こんなけでテーマがなりたってしまうのか!って思うくらい軽いです。
現在のテーマの総容量を確認してみると、わずか100KB程度でした。

また、自分で作ったことにより次のカスタマイズも容易になのが嬉しいですね。


Back To Top