最終更新:2021/9/17

オリジナル短編集サイト制作

2月にある進級展にむけて制作をしていました。まだ修正などはありますが、一通り見れる形まで完成したので、紹介したいと思います。

まずはサイトのURLです。

http://nikofu0410.zombie.jp/short-stories/

まず、一番こだわりを入れたのがトップページです。

今回、サイトを作るにあたって少し遊び心を取り入れたいと思い、あえてカテゴリーを画像にして、さらに丸く並べることを頑張りました。最初、グリッドレイアウトという方法で試そうと挑戦しましたが、4つなら綺麗にならぶのですが、6つになるとグリッドレイアウトではできませんでした。なので、今回はpositionを使い、このように並べました。ソースコードは以下のような感じです。

(クラス名は仮です)

.img{
  position: absolute;
  left: 560px;
  top: 60px;
}

position: absoluteは絶対配置を指定するプロパティです。position: relativeで起点を決めない限りは、サイト上の左上を基準として、そこからどの位置に配置するかを、top, bottom, right, left で値を指定します。このコードでいうと、左から560px、上から60pxの位置に配置します。

さらに、私がこだわったのはアニメーションです。実際にサイトを見てもらえば分かるのですが、ふわふわと浮いている感じに動いていると思います。個人的にアニメーションのあるサイトが好きなので、アニメーションもこだわってみました。今回自分で調べながらjQueryの書き方で制作しました。

//サイトを読み込んだときに表示される時間
jQuery('.img-1').fadeIn(2000);

function img_1() {
    jQuery('.img-1').animate({
        marginTop: '-=16px'//下に動く距離
    }, 800).animate({
        marginTop: '+=16px'//上に動く距離
    }, 800);
    setTimeout('img_1()', 1750); //アニメーションを繰り返す間隔

ここで、1つ注意すべきことは、上のコードにある jQuery というとこです。本来なら $ で書けるのですが、Wordpressで読み込んだ際、$で書くと反映されませんでした。そこで $ を jQuery にして書くとちゃんと反映されました。もし、Wordpressで編集する場合は気をつけてください。

サイトを制作してみた感想

とにかく最初はどうやって制作しようか分からず、戸惑うことばかりでした。また、予期せぬエラーが何回かあり心が折れそうになりました。(笑)でも、今までの授業で習ったことを活かして取り入れたり、自分で調べながらなんとか理想の形までもっていくことができたので良かったです。

短編集の話はまだまだ書けてないのでこれからどんどん書いていこうと思っているので、興味のある方はぜひ覗いてみてください。