やっとやったった!ブログテーマ自作しました!!

このエントリーをはてなブックマークに追加

Blogtheme2013 01 27 2

こんばんは!mati6166です!

昨日の朝、念願のこの瞬間を迎えました!
前々から言っていたブログのオリジナルテーマ、やっと公開に至りました!
はっぴー!うれぴー!よろぴk(ry

製作過程は、後日ちゃんと記事として挙げたいと思いますが、今回はオリジナルテーマがどんな構成になっているかと現状をお知らせしたいと思います!

ファーストビューはこんな感じ!

ファーストビュー(サイトを表示した時、一番始めに表示される画面、又は領域のこと)はこんな感じになっております。

Blogtheme description

①ロゴ付きのタイトル!

オリジナルテーマを考えるにあたって、そのブログの特徴たるものが欲しかったんですよね!
でも自分ではなかなか作れない。どうしよう?と思っていた時に偶然見つけた記事がこちら!
デザインができなくても簡単にオリジナリティのあるロゴを作るにはGraphicSpringsがオススメ! | masaya5923.com

「GraphicSprings」というWebサービスでさくっと作れました!こういう自分の至らない領域のものを簡単に作ってもらえるサービスはありがたいですね!

②ナビゲーションバーをつけました!

前のテーマでもおそらくバー自体はありましたが、コンテンツが「ホーム」ぐらいしかありませんでした。(バーにコンテンツを追加するのを面倒くさってサボっていましたw)

現状ではホームの他に「About me」「ブログ」「活動」と、固定ページとカテゴリーへのリンクを設置していますが、バーに何を追加するか又は置き換えるかはこれから随時変わっていく予定です。

③記事表示欄です。

前テーマと比べて、フォントの大きさを読みやすいように調整しています。
前テーマは全体的に文字が大きすぎて読みにくかったように思います。

いろんなブログを見て、本文中のフォントは「0.875em ※」に落ち着きました。
※ピクセルでいうと14pxぐらい。

④自己紹介エリア

だいたいのブロガーさんのブログにはありますよね。
でも私のブログには今までなかったんです。。

念願の自己紹介エリアでございやす!

⑤人気記事Top5エリアを設けました!

前テーマでは、カレンダーを表示していたんですが消しました。
だってカレンダーなんてあっても見ないでしょ、きっと。

本ブログを見に来てくれた方に何を見てもらいたいのかを考えたら自然と人気記事を載っける運びとなりました。

これはWordPressのプラグイン「WordPress Popular Posts」で実現しています。

残りのサイドバーはこんな感じ!

NewPost

⑥最新の記事もちゃっかり紹介!

これは前テーマにもあったものです。人気記事もチェックしてほしいけど、もちろん最近の記事も読んでもらいたい。欲張りなんです、はい。

これもWordPressプラグインで実現しています。「Newpost Catch」というプラグインです。

サムネイル画像を設定していない記事用に「NO Thumbnail」という画像を用意しました。(ブログトップのロゴを加工したものです。)

⑦RSSフィードを設置はしていますが、、

RSS登録をして頂きたいのでRSSフィードを設置こそしてはいますが、このまんまじゃダメですよね。。
私が良く分かってないだけなんですが、普通、RSSフィードボタンってクリックひとつでRSSに登録するよう誘導しますよね?
ユーザーのRSS登録を助けるサービスとして「Feed Burner」というグーグルのサービスがあること自体は知っているのですが、まだ手つかず。。
今後対応します!

フッターはこんな感じ!

Footer
前テーマではサイドバーに表示させていたものをフッターに移動しました。
「サイドバーには一番見てほしい情報を、フッターにはブログの全体像が分かるような情報を」と考え、こんな感じになりました!

固定ページに詳細な自己紹介を載せました!

AboutMePage

自分の紹介と、本ブログの名前の由来、最後に自分の今のITスキルを載せました。

「ITスキル」欄は現状は、悲しすぎるくらいスペックが低いですが、現状をしっかり認識し、少しずつ力をつけていこうと恥を承知で書きました!

この欄が充実していくことを期待していてください!
(そういう本人が一番切望していますw)

似顔絵は、有名似顔絵イラストレーター ふじもなおさん作!

さて、ここまで読んでみなさん気になっていることがあるかと思います!

「この似顔絵は誰が書いたのか!?」

そう、これは知る人ぞ知る、「ふじもなおのアトリエ」のふじもなおさんに書いてもらったのです!
SNSにも最適 / 2,000円からオーダーできるかわいい似顔絵『ふじもなおのアトリエ』

前々からずっと気になっていたんですが、注文するまでに至っていませんでした。

今回テーマを自作するにあたって、やっぱ個人ページにあると嬉しいよなぁと思い、「注文するタイミングは今しかない!」と依頼させて頂きました!

注文状況にもよるかと思いますが、私の似顔絵は2日で送って頂きましたよ!
可愛めな「ポップ」と、少しリアルな「シンプル」の絵柄が選べるのですが、本ブログではポップを採用させてもらってます。

私のことをリアルで知ってる人は「こんなに目がキラキラしてない!」とか「こんなに顔のラインがシャープじゃない!」とか思うかもしれませんが、でもそうとは言っても似てませんか!?

「似てない」という声が多数の場合はきっと私が似顔絵に似せる努力を怠っているからだと思いますw

とにかくとても素敵な似顔絵です!ふじもなおさんありがとうございました!!
(「シンプル」も注文していたんですが、あまりにも似すぎてて逆に載せるのは恥ずかしかったので自粛しましたw
それぐらいのクオリティーの高さってことです!)

気になる方はぜひご注文を!
※1月末までに注文すると5%OFFですよ!

現状の問題点

最後に、本テーマで確認されている問題をご紹介します。

本テーマ、100%の完成度で公開できれば良かったんですが、描画の部分で上手くいっていない箇所があります。
(一応本テーマは、公開前にChrome, Safari, Firefoxで検証しています)

・Chromeで表示した際、widthが指定幅より全体的に広く表示されている。
CSSで指定しているピクセル以上の幅を取っちゃってるんですよねー。。
SafariとFirefoxは、ちゃんと指定通りの幅をとっているようなんですが。

ローカルで検証していた時は問題なかったのに何でなんでしょ?

・割と多くの記事でレイアウトに支障が出ている。
上の問題と関連がありそうなんですが、記事によってはサイドバーが記事の下まで回り込んでしまっています。。

「記事によって」なので、無事な記事もあります。
これはSafariでもFirefoxでも出ている問題です。

この問題も上の問題も、共通しているのは、
「ローカル環境では問題ないのに、サーバーにあげたら起きた」ということ。

本ブログはレンタルサーバー「ロリポップ」を使用しているのですが、果たして関係があるのかどうか?それともそれ以前の初歩的なミスをしているのか?
おいおい調査していきたいと思います!

 

さて、問題点もあることはありますが、念願のオリジナルテーマが出来ました!

やっぱ自分で作ったテーマはなんか愛着がわきますね!
現状ではHTML×CSSのシンプルなテーマですが、これからJavaScriptやjQuery等を勉強して、より魅力的なテーマを作成していきたいと思います!

これからも「あがくナマケモノ.net」をよろしくお願いします!!

このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

WP-SpamFree by Pole Position Marketing

コメントフィード