Tumblrの勉強も兼ねて、Webサイトのブックマーク集を作成してみました。
アニメ・ゲーム系で、見せ方が面白いと思ったサイト(JavaScriptやCSSでのアニメーション多め)を中心にストックしています。
サイトについて
作成したサイトはこちらです。
AD-Bookmarks
基本的には一覧ページのみのシンプルな構成だったので、制作は1日もかかりませんでした。
サイト毎に登録するものは、キャプチャ画像・サイトタイトル・サイトURL・カテゴリーの4つです。
最初はリンク投稿でもいいかなと思ったのですが、キャプチャ画像の部分が少し面倒かなと思ったので
今回は画像投稿で作成しました。
以下、制作する上で気になった点のメモ。
記事毎のclassにタグ名を追加したい時
今回カテゴリー毎に色を変えたりしているので、記事毎にカテゴリーを判別する必要がありました。
classにタグ名を追加する場合、{TagsAsClasses}で追加できます。
<article class="article {PostType} {TagsAsClasses} postid{PostID}">
～
</article>
aタグの中にブロック要素は含むことができない
投稿でHTMLタグを使う時、aタグの中にブロック要素を含むと、aタグが省略されてしまうようです。
spanタグなどのインライン要素だと問題ないようなので、spanタグを入れてCSSでブロック要素にするなどの対応が必要なようです。
Webフォントを使う時
サーバーにフォントを置いて使用する場合、そのままだとクロスドメインになるので
Webフォントが使用できません。
Tumblrで用意されているアップローダーでも駄目っぽいです。
調べてみて、以下の記事を見つけました。
FirefoxとIEでwebfontが表示されない時の対処法
Webフォントを置いている場所に.htaccessを置いて、下記を記述でうまくいきました。
header add Access-Control-Allow-Origin *
Google fontsを読み込んでいる場合は特に対応の必要はありません。
追加ページ
追加ページはテキスト投稿のテンプレートが使用されるようです。
今回は画像投稿の分しか作成していなかったので、追加でテキスト投稿の分も作成しました。
追加ページは「テーマの編集 > ページの追加」から追加できます。
サンプルコード
今回作成したサイトのコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>{Title}</title>
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" href="http://cly7796.net/bookmarks/normalize.css">
<link rel="stylesheet" href="http://cly7796.net/bookmarks/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cly7796.net/bookmarks/script.js"></script>
</head>
<body>
<!-- #page START -->
<div id="page">
<header id="header">
<div class="inner">
<div class="header-info">
{block:Description}
<p class="header-lead">{Description}</p>
{/block:Description}
<h1 class="header-logo"><a href="/">{Title}</a></h1>
</div>
<nav id="gnav">
<ul>
<li class="gnav-all"><a href="/"><span>ALL</span></a></li>
<li class="gnav-anime"><a href="/tagged/anime/"><span>ANIME</span></a></li>
<li class="gnav-game"><a href="/tagged/game/"><span>GAME</span></a></li>
<li class="gnav-game18"><a href="/tagged/game18/"><span>R18</span></a></li>
</ul>
</nav>
</div>
</header>
<section id="contents">
{block:IndexPage}
<div id="bookmark-list">
{block:Posts}<article class="article {PostType} {TagsAsClasses} postid{PostID}">
{block:Photo}
<a href="{LinkURL}" target="_blank">
<img src="{PhotoURL-400}" alt="{PhotoAlt}" />
{block:Caption}
<span>{PhotoAlt}</span>
{/block:Caption}
</a>
{/block:Photo}
<div class="sns">
{block:NoteCount}
<span class="action">{NoteCountWithLabel}</span>
{/block:NoteCount}
<span class="reblog">{ReblogButton}</span>
<span class="like">{LikeButton}</span>
</div>
</article>{/block:Posts}
</div>
{block:Pagination}
<div class="pager">
{block:NextPage}
<a href="{NextPage}">NEXT >></a>
{/block:NextPage}
</div>
{/block:Pagination}
{/block:IndexPage}
{block:PermalinkPage}
{block:Posts}
{block:Photo}
<div id="bookmark-list">
<article class="article {PostType} postid{PostID}">
<a href="{LinkURL}" target="_blank">
<img src="{PhotoURL-400}" alt="{PhotoAlt}" />
{block:Caption}
<span>{PhotoAlt}</span>
{/block:Caption}
</a>
<div class="sns">
{block:NoteCount}
<span class="action">{NoteCountWithLabel}</span>
{/block:NoteCount}
<span class="reblog">{ReblogButton}</span>
<span class="like">{LikeButton}</span>
</div>
</article>
</div>
{/block:Photo}
{block:Text}
<div id="single">
<article class="article {PostType} postid{PostID}">
{block:Title}
<h2>{Title}</h2>
{/block:Title}
<div class="description">{Body}</div>
</article>
</div>
{/block:Text}
{/block:Posts}
{/block:PermalinkPage}
</section>
<footer id="footer">
<ul id="fnav">
<li><a href="/">ALL</a></li>
<li><a href="/tagged/anime/">ANIME</a></li>
<li><a href="/tagged/game/">GAME</a></li>
<li><a href="/tagged/game18/">R18</a></li>
<li><a href="/about/">ABOUT</a></li>
</ul>
<small class="copyright">© 2014 {Title}</small>
</footer>
</div>
<!-- #page END -->
</body>
</html>
コメントが承認されるまで時間がかかります。