作り方まとめ

Rick Astleyが現在の個人的大本命のマイブーム。
によって、ファンページを作ってしまうあたりがweb1.0時代な感じです。
作り方説明とか蛇足だから、いらない。と思って書いてなかったんですが、
案外、需要があるようなので記載しておきます。

ページを作るきっかけ

  • 今年8月上旬に、好きだった曲と歌い手がくっついて、当時の気分が復活
  • ちょうど歌い手は今年ソロデビュー25周年にあたる
  • お祝いページってあってもいいなあ
  • jQueryのタブ使えば1ページで語れる

勢いとネタと手段が揃ったので作ることに。
思いつくのは一瞬なんですが、実現までは何時間もかかります。

モチベーションの維持

  • 脳内テーマソング
  • 締め切りの設定
  • こんなん描いちゃったよ見て見てー(小学生のノリで)

あくまで今回は個人的な事情で作成するので、個人の意志ひとつなのであります。
作業自体は孤独な山籠り(ex.空手バカ一代)に等しいので、
ゴールを常に見つめられるようにしておかないとならなかったわけですが、
ちょうど「ミックミクにしてやんよ〜」が思い出され、
今の自分は「リックリック」でんがな。とツッコミ。
それでページ作る目的に「リックリックにしてやんよ〜」を掲げることに。
更に、好きだった「当時」が小学生だったもので、「これは『夏休みの自由研究』で」。
そうしたら必然的に夏休み最終日がデッドラインに決定。
とどめは「リック可愛く描けたからお披露目しよう」。
しかしこの3番目はおまけです。

素材作り
こういう絵が欲しい→手で描く→PCで作業
の段取りですが、今回手描きトレースはチビキャラ化リックだけ。
まずはロゴ作り

Illustratorのみ。
ワッペンは完成ビジュアルが脳内にしっかりあったので、
それに合わせて素材集並べるだけなら5分もかからないのですが、
配色と書体で悩んで最初1時間かかりました(作り直しは10分)。
タイトル文字はウキウキした感じにしたかったので、単語で区切って作成。
文字選んで並べて、こっちは15分ほどでこのスタイルに。

ワッペン画像の保存待ちの間にラクガキして、


もうチョイ線がすっきりしてて欲しいので、
純化したり…

…してたらPCブルーアウトorz

めげずにIllustratorで素材化

自分の絵は添え物なので、ワンポイントで使用。
このサイズ(10%にリサイズ)のこれだけで、
実は5時間かかっています…。

ソースは以下の通り。
《index.html》

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
<title>RickRickFanPage</title>
		<link type="text/css" href="css/jquery-ui-1.8.22.custom.css" rel="stylesheet">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
		<script src="js/smoothScroll.js"></script>
		<script type="text/javascript">
			$(function(){

				// Tabs
				$('#tabs').tabs();

				//hover states on the static widgets
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); },
					function() { $(this).removeClass('ui-state-hover'); }
				);

			});
		</script>
	</head>
	<body>
<a id="top"> </a>
<header>
<h1>Rick Astley fever taking over.<br>Sorry,This Page Text Japanese Only!!</h1>
</header>
		<!-- Tabs -->
		<h1 class="tabheaders">リックリックにしてやんよ♪(このページの目的)</h1>
		<section id="tabs">
			<ul>
				<li><a href="#tabs-1">1987〜</a></li>
				<li><a href="#tabs-2">〜1993</a></li>
				<li><a href="#tabs-3">2002〜</a></li>
				<li><a href="#tabs-4">リックロール</a></li>
				<li><a href="#tabs-5">現在</a></li>
			</ul>
			<div id="tabs-1">
<!--1-->
<article>
<h1>Never Gonna Give You Up</h1>
<iframe width="480" height="360" src="http://www.youtube.com/embed/UGS8re8cIVI" frameborder="0" allowfullscreen></iframe>
            <div class="rank">
            <ul>
            <li class="rank1"><a href="http://www.number-ones.co.uk/Rick-Astley-number-ones/Never-Gonna-Give-You-Up.html" target="_blank">全英シングルチャート1位(5週)</a></li>
            <li class="rank1">英国で最も売れたシングル(1987年度)</li>
            <li class="rank1">全米ビルボード1位(1週)(1988年)</li>
<li class="memo2">リック21歳のデビュー曲。<br>音楽プロデューサー集団「ストック・エイトキン・ウォーターマン」のプロデュースのもとに世に送り出されました。<br>当時ちょっと外で有線など聞こえてくると、ほとんどこの人たちの作った曲だったりして、<br>良くも悪くも彼らの音楽育ち、と後から思い知ることに。<br>日本にたとえると、90年代の「小室ファミリー」みたいな売れ方、でしょうか。</li>
</ul>
</div>
</article>
<!--2-->
<article>
<h1>Together Forever</h1>
<iframe width="480" height="270" src="http://www.youtube.com/embed/WWSaRsBB3rY" frameborder="0" allowfullscreen></iframe>
            <div class="rank">
            <ul>
            <li class="rank2">全英シングルチャート2位(1988年)</li>
<li class="memo2">デビュー曲に引き続き「ストック・エイトキン・ウォーターマン」プロデュースの、直球ど真ん中ラブソング。<br>しかしサビの<br>「I would move heaven and earth」に、</br>デーモン小暮閣下の「<a href="http://youtu.be/HrbVMAK6gsU" target="_blank">天地逆転唱法</a>」を結びつけてしまったあたり、<br>自分は日本人ていうか…ラブソング向きの思考回路ではないことが判明。</li>
</ul>
</div>
</article>
/*省略*/
</div>
/*中略*/
<div id="tabs-5">
<article>
<h1>2012年はデビュー25周年です</h1>
<iframe width="480" height="270" src="http://www.youtube.com/embed/6r2Ckc0rM3Y" frameborder="0" allowfullscreen></iframe>
            <div class="rank">
            <ul>
            <li class="rank4"><a href="http://www.rickastley.co.uk/" target="_blank">リック・アストリー公式(英語)</a><br>※音楽自動再生なのでアクセス時は注意のこと</li>
<li class="memo2">2009年に入って死亡説が流れたり(人違い)、新シングル発売したり、アルバム制作中っぽかったり、2012年も忙しい、働き者のリックたんの最新情報はやっぱり公式で。</li>
</ul>
</div>
</article>
</div>
		</section>

<div id="totop"><p class="right"><a href="#top">▲ このページの先頭へ</a></p></div>
<footer>
	<small>Copyright &copy; <a href="http://2012fight.hotcom-web.com/index.html">2012fight.hotcom-web.com</a> 2012</small>
</footer>
	</body>
</html>

ページの性格上、sectionとarticleが盛り込めそうだったので、記述に気をつけてみました。

sectionをタブ全体に持ってきたことで「Untitled SECTION」になってしまったのが残念。
articleはキレイにナンバリングされているのでThumbsUp!(ex.ツインピークス
あと、YouTubeの「共有」を使ってみる練習ができたので、作った甲斐がありました。
広告付きの動画を貼った上で再生すると「YouTubeで見て下さい」と砂嵐になってしまうこともわかったし。
UKロック好きのはずが、UKポップのファンページっていうのも、
人生よくあることっぽい気がします。

さて今回「短縮URL」の記事から、「URL短縮サービス p.tl - pixiv」を使って
「ThumbsUp」の検索結果URLを作成しました。
せっかく短くしたのに、そのまま使うとクッションページが開きます。
そしてこのクッションページに「クッションページ無しのURL」が表示されるので、
やっとダイレクトに使えるという。ちょっと注意が必要かも。