Webサイトのブックマーク集「AD-Bookmarks」制作しました

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">&copy; 2014 {Title}</small>
	</footer>
</div>
<!-- #page END -->
</body>
</html>

参考サイト

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

関連記事

コメントを残す

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

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31