{block:PostTitle}{PostTitle} - {/block:PostTitle}{Title}{block:IndexPage}{block:If03lCircleName} - {text:03 l Circle Name}{/block:If03lCircleName}{/block:IndexPage}

├── .gitattributes ├── site.json ├── images ├── hero.jpg ├── banner.jpg ├── jacket.jpg ├── title.png ├── favicon.png ├── ogimage.jpg ├── sticker.png ├── circle-logo.png └── intro-heading.png ├── templates ├── _footer.ejs ├── _header.ejs └── index.ejs ├── sass ├── style-light.scss ├── style-dark.scss └── lib │ ├── _theme-dark.scss │ ├── _variable.scss │ ├── _button.scss │ ├── _common.scss │ ├── _grid.scss │ ├── _normalize.scss │ └── _core.scss ├── README.md ├── .gitignore ├── package.json ├── LICENSE ├── js └── scripts-core.js └── gulpfile.js /.gitattributes: -------------------------------------------------------------------------------- 1 | *.css -diff -------------------------------------------------------------------------------- /site.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /images/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanographix/tokusetsu3/HEAD/images/hero.jpg -------------------------------------------------------------------------------- /images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanographix/tokusetsu3/HEAD/images/banner.jpg -------------------------------------------------------------------------------- /images/jacket.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanographix/tokusetsu3/HEAD/images/jacket.jpg -------------------------------------------------------------------------------- /images/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanographix/tokusetsu3/HEAD/images/title.png -------------------------------------------------------------------------------- /images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanographix/tokusetsu3/HEAD/images/favicon.png -------------------------------------------------------------------------------- /images/ogimage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanographix/tokusetsu3/HEAD/images/ogimage.jpg -------------------------------------------------------------------------------- /images/sticker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanographix/tokusetsu3/HEAD/images/sticker.png -------------------------------------------------------------------------------- /images/circle-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanographix/tokusetsu3/HEAD/images/circle-logo.png -------------------------------------------------------------------------------- /images/intro-heading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanographix/tokusetsu3/HEAD/images/intro-heading.png -------------------------------------------------------------------------------- /templates/_footer.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /sass/style-light.scss: -------------------------------------------------------------------------------- 1 | @import "lib/normalize"; 2 | @import "lib/variable"; 3 | @import "lib/button"; 4 | @import "lib/common"; 5 | @import "lib/grid"; 6 | @import "lib/core"; -------------------------------------------------------------------------------- /sass/style-dark.scss: -------------------------------------------------------------------------------- 1 | // ダークモード 2 | @import "lib/normalize"; 3 | @import "lib/variable"; 4 | @import "lib/theme-dark"; 5 | @import "lib/button"; 6 | @import "lib/common"; 7 | @import "lib/grid"; 8 | @import "lib/core"; 9 | -------------------------------------------------------------------------------- /sass/lib/_theme-dark.scss: -------------------------------------------------------------------------------- 1 | // Color Variables 2 | 3 | $bg: #232426; // Background color 4 | $bg-light: rgba(255,255,255,.07); 5 | $base: #fff; // Base text color 6 | $light: #999; // Light text color 7 | 8 | $link: #ed1c24; // Link text color 9 | $hover: lighten($link,10%); // Link text color(hover) 10 | 11 | $border: #666; // Border color 12 | 13 | $btn-tw: #55acee; 14 | $btn-fb: #3b5998; 15 | 16 | $globalheader-mask: rgba(0,0,0,.6); 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tokusetsu3 2 | 3 | The fastest way to make doujin landing page 4 | 5 | - 6 | 7 | ## Set Up 8 | 9 | $ npm install 10 | $ gulp 11 | 12 | `/build` 以下に出力される 13 | 14 | ## 開発 15 | 16 | - gh-pages 開発時、 `gh-pages` ブランチでは作業せず `gh-pages-dev` を使うこと 17 | 18 | # License 19 | 20 | - MIT 21 | 22 | # Author 23 | 24 | - [@sanographix](https://twitter.com/sanographix) 25 | - 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | # 3 | # If you find yourself ignoring temporary files generated by your text editor 4 | # or operating system, you probably want to add a global ignore instead: 5 | # git config --global core.excludesfile ~/.gitignore_global 6 | 7 | # Ignore bundler config 8 | /.bundle 9 | 10 | # Ignore node modules 11 | node_modules 12 | 13 | # Ignore cache 14 | /.sass-cache 15 | /.cache 16 | 17 | # Ignore .DS_store file 18 | .DS_Store 19 | 20 | # Logs 21 | logs 22 | *.log 23 | npm-debug.log* 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tokusetsu3", 3 | "version": "3.0.0", 4 | "description": "Template for dojin music website", 5 | "author": "sanographix", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/sanographix/tokusetsu3" 10 | }, 11 | "browserslist": [ 12 | "last 2 versions" 13 | ], 14 | "devDependencies": { 15 | "autoprefixer": "^9.6.1", 16 | "browser-sync": "^2.26.7", 17 | "gulp": "^4.0.2", 18 | "gulp-concat": "^2.6.1", 19 | "gulp-ejs": "^4.1.1", 20 | "gulp-imagemin": "^6.0.0", 21 | "gulp-plumber": "^1.2.1", 22 | "gulp-postcss": "^8.0.0", 23 | "gulp-rename": "^1.4.0", 24 | "gulp-sass": "^5.0.0", 25 | "imagemin-pngquant": "^6.0.0", 26 | "normalize.css": "^8.0.1", 27 | "sass": "^1.42.1" 28 | }, 29 | "dependencies": { 30 | "gulp-uglify-es": "^2.0.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 SANOGRAPHIX 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /js/scripts-core.js: -------------------------------------------------------------------------------- 1 | // Add target="_blank" when user opens external link 2 | (function() { 3 | var a = document.querySelectorAll('a'); 4 | for (var i = 0; i < a.length; i++) { 5 | if (a[i].host !== location.host) { 6 | a[i].setAttribute('target', '_blank'); 7 | } 8 | } 9 | }()); 10 | 11 | (function() { 12 | var samples = document.querySelectorAll('.bookSample-content'); 13 | var lightboxes = document.querySelectorAll('.bookSample-lightbox'); 14 | if (samples.length < 1) { return false; } 15 | Array.prototype.forEach.call(samples, function (sampleElem) { 16 | sampleElem.addEventListener('click', function () { 17 | var sampleIndex = sampleElem.dataset['index']; 18 | var lightbox = document.querySelector('.bookSample-lightbox[data-index="' + sampleIndex + '"]'); 19 | lightbox.classList.add('is-open'); 20 | document.body.classList.add('is-open'); 21 | }); 22 | }); 23 | Array.prototype.forEach.call(lightboxes, function (lightboxElem) { 24 | lightboxElem.addEventListener('click', function () { 25 | lightboxElem.classList.remove('is-open'); 26 | document.body.classList.remove('is-open'); 27 | }) 28 | }) 29 | })(); 30 | -------------------------------------------------------------------------------- /sass/lib/_variable.scss: -------------------------------------------------------------------------------- 1 | // Color Variables 2 | 3 | $bg: #fff; // Background color 4 | $bg-light: rgba(0,0,10,.07); 5 | 6 | $base: #36393d; // Base text color 7 | $light: #878ea0; // Light text color 8 | 9 | $link: #5289DB; // Link text color 10 | $hover: darken($link,8%); // Link text color(hover) 11 | 12 | $border: #ddd; // Border color 13 | 14 | $btn-tw: #55acee; 15 | $btn-fb: #3b5998; 16 | 17 | $globalheader-mask: rgba(255,255,255,.6); 18 | 19 | // Media Queries - Breakpoints 20 | 21 | $mq-lg: "(min-width: 1200px)"; // Media queries - Large display 22 | $mq-md: "(min-width: 992px)"; // Media Queries - Tablet 23 | $mq-sm: "(min-width: 768px)"; // Media Queries - Small tablet & smartphone 24 | 25 | 26 | // Media Queries - Retina display 27 | $at2x: "(-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx)"; // All retina devices 28 | 29 | $at2x-tablet: "(-webkit-min-device-pixel-ratio: 2) and (min-device-width: 768px),(min-resolution: 2dppx) and (min-device-width: 768px)"; // Larger than iPad display 30 | 31 | $at2x-pc: "(-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1025px),(min-resolution: 2dppx) and (min-device-width: 1025px)"; // Larger than PC display (1025px) 32 | -------------------------------------------------------------------------------- /sass/lib/_button.scss: -------------------------------------------------------------------------------- 1 | // buttons 2 | @mixin btn { 3 | display: inline-block; 4 | text-align: center; 5 | padding: .6em 1.2em; 6 | cursor: pointer; 7 | line-height: 1.5; 8 | font-size: 90%; 9 | border-radius: .25em; 10 | overflow: hidden; 11 | color: $link; 12 | background-color: transparent; 13 | text-decoration: none; 14 | border: 1px solid $link; 15 | transition: all .2s; 16 | &:hover { 17 | background-color: $link; 18 | color: #fff; 19 | text-decoration: none; 20 | border-color: transparent; 21 | } 22 | } 23 | @mixin btn-light { 24 | border-color: $light; 25 | color: $base; 26 | &:hover { 27 | background-color: $base; 28 | color: #fff; 29 | } 30 | } 31 | @mixin btn-primary { 32 | background-color: $link; 33 | color: #fff; 34 | border-color: $link; 35 | &:hover { 36 | background-color: $hover; 37 | color: #fff; 38 | } 39 | } 40 | @mixin btn-large { 41 | padding: .7em; 42 | font-size: 110%; 43 | box-sizing: border-box; 44 | border-width: 2px; 45 | width: 100%; 46 | margin: .2em 0; 47 | @media #{$mq-sm} { 48 | padding: .7em 2em; 49 | width: auto; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /sass/lib/_common.scss: -------------------------------------------------------------------------------- 1 | // mixin 2 | @mixin clearfix() { 3 | &:after { 4 | content: " "; 5 | display: block; 6 | clear: both; 7 | } 8 | } 9 | 10 | // Common 11 | body { 12 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 13 | background: $bg; 14 | color: $base; 15 | -webkit-font-smoothing: antialiased; 16 | line-height: 1.3; 17 | font-size: .9rem; 18 | word-wrap: break-word; 19 | } 20 | a { 21 | color: $link; 22 | transition: all .2s; 23 | text-decoration: none; 24 | &:hover:not(.btn) { 25 | text-decoration: underline; 26 | } 27 | } 28 | p { 29 | line-height: 1.6; 30 | } 31 | h1,h2,h3,h4,h5,h6 { 32 | a,a:hover { 33 | color: $base; 34 | text-decoration: none; 35 | } 36 | } 37 | 38 | .l-section { 39 | margin: 2.5em auto; 40 | @media #{$mq-md} { 41 | margin: 4em auto; 42 | } 43 | img { 44 | max-width: 100%; 45 | } 46 | } 47 | .section-header { 48 | text-align: center; 49 | margin-bottom: 2em; 50 | h2 { 51 | margin: .5em auto; 52 | font-size: 1.6rem; 53 | @media #{$mq-sm} { 54 | font-size: 2rem; 55 | } 56 | } 57 | } 58 | 59 | // ヘッダいらんので消す 60 | .tmblr-iframe, 61 | .tmblr-iframe--mobile-loggedin-controls, 62 | .iframe-controls--phone-mobile { 63 | display: none !important; 64 | } 65 | .tmblr-iframe--controls-phone-container, 66 | .tmblr-iframe-pushdown { 67 | padding-top: 0 !important; 68 | } 69 | -------------------------------------------------------------------------------- /sass/lib/_grid.scss: -------------------------------------------------------------------------------- 1 | // grid 2 | .l-container { 3 | width: auto; 4 | margin-left: 10px; 5 | margin-right: 10px; 6 | @media #{$mq-sm} { 7 | width: 720px; 8 | margin-left: auto; 9 | margin-right: auto; 10 | } 11 | @media #{$mq-md} { 12 | width: 940px; 13 | } 14 | @media #{$mq-lg} { 15 | width: 1140px; 16 | } 17 | 18 | } 19 | .l-row { 20 | @include clearfix(); 21 | @media #{$mq-sm} { 22 | margin-left: -15px; 23 | margin-right: -15px; 24 | } 25 | } 26 | [class*="l-span"] { 27 | margin-bottom: 1em; 28 | @media #{$mq-sm} { 29 | float: left; 30 | padding-right: 15px; 31 | padding-left: 15px; 32 | min-height: 1px; 33 | box-sizing: border-box; 34 | margin-bottom: 0; 35 | } 36 | img { 37 | max-width: 100%; 38 | } 39 | } 40 | @media #{$mq-sm} { 41 | .l-span1 { 42 | width: 8.33333333%; 43 | } 44 | .l-span2 { 45 | width: 16.66666667%; 46 | } 47 | .l-span3 { 48 | width: 25%; 49 | } 50 | .l-span4 { 51 | width: 33.33333333%; 52 | } 53 | .l-span5 { 54 | width: 41.66666667%; 55 | } 56 | .l-span6 { 57 | width: 50%; 58 | } 59 | .l-span7 { 60 | width:58.33333333% 61 | } 62 | .l-span8 { 63 | width: 66.66666667%; 64 | } 65 | .l-span9 { 66 | width:75% 67 | } 68 | .l-span10 { 69 | width:83.33333333% 70 | } 71 | .l-span11 { 72 | width:91.66666667% 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const sass = require('gulp-sass')(require('sass')); 3 | const postcss = require('gulp-postcss'); 4 | const autoprefixer = require('autoprefixer'); 5 | const concat = require('gulp-concat'); 6 | const uglify = require('gulp-uglify-es').default; 7 | const imagemin = require('gulp-imagemin'); 8 | const pngquant = require('imagemin-pngquant'); 9 | const browserSync = require('browser-sync'); 10 | const reload = browserSync.reload; 11 | const ejs = require('gulp-ejs'); 12 | const plumber = require('gulp-plumber'); 13 | const rename = require('gulp-rename'); 14 | 15 | // Sass 16 | gulp.task('sass', function (done) { 17 | gulp.src('sass/**/*.scss') 18 | .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) // Keep running gulp even though occurred compile error 19 | .pipe(postcss([ 20 | autoprefixer({ 21 | cascade: false 22 | }) 23 | ])) 24 | .pipe(gulp.dest('build/css')) 25 | .pipe(reload({stream:true})); 26 | done(); 27 | }); 28 | 29 | 30 | // Js-concat-uglify 31 | gulp.task('js', function(done) { 32 | gulp.src(['js/*.js']) 33 | .pipe(concat('scripts.js')) 34 | .pipe(uglify({ 35 | output:{ 36 | comments: /^!/ // Keep some comments 37 | } 38 | })) 39 | .pipe(gulp.dest('build/js')) 40 | .pipe(reload({stream:true})); 41 | done(); 42 | }); 43 | 44 | // Imagemin 45 | gulp.task('imagemin', function(done) { 46 | gulp.src(['images/**/*.{png,jpg,gif,svg}']) 47 | .pipe(imagemin({ 48 | optimizationLevel: 7, 49 | use: [pngquant({ 50 | quality: '60-80', 51 | speed: 1 52 | })] 53 | })) 54 | .pipe(gulp.dest('build/images')); 55 | done(); 56 | }); 57 | 58 | // ejs 59 | 60 | var fs = require('fs'); 61 | var json = JSON.parse(fs.readFileSync("site.json")); // parse json 62 | gulp.task("ejs", function(done) { 63 | gulp.src(['templates/**/*.ejs','!' + 'templates/**/_*.ejs']) // Don't build html which starts from underline 64 | .pipe(plumber()) 65 | .pipe(ejs(json)) 66 | .pipe(rename({ 67 | extname: '.html' 68 | })) 69 | .pipe(gulp.dest('build')) 70 | done(); 71 | }); 72 | 73 | // Static server 74 | gulp.task('browser-sync', function(done) { 75 | browserSync({ 76 | server: { 77 | baseDir: "build/", // Target directory 78 | index : "index.html" // index file 79 | } 80 | }); 81 | done(); 82 | }); 83 | 84 | /* Watch */ 85 | gulp.task('watch-files', function(done) { 86 | gulp.watch('sass/**/*.scss', gulp.task('sass')); 87 | gulp.watch('js/**', gulp.task('js')); 88 | gulp.watch('images/**', gulp.task('imagemin')); 89 | gulp.watch('build/**/*.html', gulp.task('bs-reload')); 90 | gulp.watch('templates/**/*.ejs', gulp.task('ejs')); 91 | gulp.watch('site.json', gulp.task('ejs')); 92 | done(); 93 | }); 94 | 95 | // Reload all browsers 96 | gulp.task('bs-reload', function (done) { 97 | browserSync.reload(); 98 | done(); 99 | }); 100 | 101 | // Build 102 | gulp.task('build', gulp.series('ejs', gulp.parallel('sass', 'js', 'imagemin'))); 103 | 104 | // Task for `gulp` command 105 | gulp.task('default', gulp.series('browser-sync', 'watch-files', function(done){ 106 | done(); 107 | console.log('Default all task done!'); 108 | })); 109 | -------------------------------------------------------------------------------- /templates/_header.ejs: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | 11 | 12 | 13 | 14 | <%# テーマオプション類 %> 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | <%# 挿入されるコンテンツが画像かテキストか判別できないので手動でオンオフさせてる %> 44 | 45 | <%# ブックモード %> 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | <%# テキストエリアのオプション %> 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | {block:PostTitle}{PostTitle} - {/block:PostTitle}{Title}{block:IndexPage}{block:If03lCircleName} - {text:03 l Circle Name}{/block:If03lCircleName}{/block:IndexPage} 129 | 130 | 131 | {block:Description} 132 | 133 | 134 | {/block:Description} 135 | 136 | 137 | 138 | 139 | {block:IndexPage} 140 | 141 | 142 | {/block:IndexPage} 143 | {block:PermalinkPage} 144 | 145 | 146 | {/block:PermalinkPage} 147 | 148 | {block:IfOgImageImage} 149 | 150 | 151 | {block:IfOgImageImage} 152 | {block:IfNotOgImageImage} 153 | 154 | 155 | {block:IfNotOgImageImage} 156 | 157 | {block:IfNot00lEnableDarkMode} 158 | 159 | {/block:IfNot00lEnableDarkMode} 160 | {block:If00lEnableDarkMode} 161 | 162 | {/block:If00lEnableDarkMode} 163 | 164 | 165 | 166 | 167 | 172 | 173 | 198 | -------------------------------------------------------------------------------- /sass/lib/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Change the default font family in all browsers (opinionated). 5 | * 2. Prevent adjustments of font size after orientation changes in IE and iOS. 6 | */ 7 | 8 | html { 9 | font-family: sans-serif; /* 1 */ 10 | -ms-text-size-adjust: 100%; /* 2 */ 11 | -webkit-text-size-adjust: 100%; /* 2 */ 12 | } 13 | 14 | /** 15 | * Remove the margin in all browsers (opinionated). 16 | */ 17 | 18 | body { 19 | margin: 0; 20 | } 21 | 22 | /* HTML5 display definitions 23 | ========================================================================== */ 24 | 25 | /** 26 | * Add the correct display in IE 9-. 27 | * 1. Add the correct display in Edge, IE, and Firefox. 28 | * 2. Add the correct display in IE. 29 | */ 30 | 31 | article, 32 | aside, 33 | details, /* 1 */ 34 | figcaption, 35 | figure, 36 | footer, 37 | header, 38 | main, /* 2 */ 39 | menu, 40 | nav, 41 | section, 42 | summary { /* 1 */ 43 | display: block; 44 | } 45 | 46 | /** 47 | * Add the correct display in IE 9-. 48 | */ 49 | 50 | audio, 51 | canvas, 52 | progress, 53 | video { 54 | display: inline-block; 55 | } 56 | 57 | /** 58 | * Add the correct display in iOS 4-7. 59 | */ 60 | 61 | audio:not([controls]) { 62 | display: none; 63 | height: 0; 64 | } 65 | 66 | /** 67 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 68 | */ 69 | 70 | progress { 71 | vertical-align: baseline; 72 | } 73 | 74 | /** 75 | * Add the correct display in IE 10-. 76 | * 1. Add the correct display in IE. 77 | */ 78 | 79 | template, /* 1 */ 80 | [hidden] { 81 | display: none; 82 | } 83 | 84 | /* Links 85 | ========================================================================== */ 86 | 87 | /** 88 | * 1. Remove the gray background on active links in IE 10. 89 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 90 | */ 91 | 92 | a { 93 | background-color: transparent; /* 1 */ 94 | -webkit-text-decoration-skip: objects; /* 2 */ 95 | } 96 | 97 | /** 98 | * Remove the outline on focused links when they are also active or hovered 99 | * in all browsers (opinionated). 100 | */ 101 | 102 | a:active, 103 | a:hover { 104 | outline-width: 0; 105 | } 106 | 107 | /* Text-level semantics 108 | ========================================================================== */ 109 | 110 | /** 111 | * 1. Remove the bottom border in Firefox 39-. 112 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 113 | */ 114 | 115 | abbr[title] { 116 | border-bottom: none; /* 1 */ 117 | text-decoration: underline; /* 2 */ 118 | text-decoration: underline dotted; /* 2 */ 119 | } 120 | 121 | /** 122 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 123 | */ 124 | 125 | b, 126 | strong { 127 | font-weight: inherit; 128 | } 129 | 130 | /** 131 | * Add the correct font weight in Chrome, Edge, and Safari. 132 | */ 133 | 134 | b, 135 | strong { 136 | font-weight: bolder; 137 | } 138 | 139 | /** 140 | * Add the correct font style in Android 4.3-. 141 | */ 142 | 143 | dfn { 144 | font-style: italic; 145 | } 146 | 147 | /** 148 | * Correct the font size and margin on `h1` elements within `section` and 149 | * `article` contexts in Chrome, Firefox, and Safari. 150 | */ 151 | 152 | h1 { 153 | font-size: 2em; 154 | margin: 0.67em 0; 155 | } 156 | 157 | /** 158 | * Add the correct background and color in IE 9-. 159 | */ 160 | 161 | mark { 162 | background-color: #ff0; 163 | color: #000; 164 | } 165 | 166 | /** 167 | * Add the correct font size in all browsers. 168 | */ 169 | 170 | small { 171 | font-size: 80%; 172 | } 173 | 174 | /** 175 | * Prevent `sub` and `sup` elements from affecting the line height in 176 | * all browsers. 177 | */ 178 | 179 | sub, 180 | sup { 181 | font-size: 75%; 182 | line-height: 0; 183 | position: relative; 184 | vertical-align: baseline; 185 | } 186 | 187 | sub { 188 | bottom: -0.25em; 189 | } 190 | 191 | sup { 192 | top: -0.5em; 193 | } 194 | 195 | /* Embedded content 196 | ========================================================================== */ 197 | 198 | /** 199 | * Remove the border on images inside links in IE 10-. 200 | */ 201 | 202 | img { 203 | border-style: none; 204 | } 205 | 206 | /** 207 | * Hide the overflow in IE. 208 | */ 209 | 210 | svg:not(:root) { 211 | overflow: hidden; 212 | } 213 | 214 | /* Grouping content 215 | ========================================================================== */ 216 | 217 | /** 218 | * 1. Correct the inheritance and scaling of font size in all browsers. 219 | * 2. Correct the odd `em` font sizing in all browsers. 220 | */ 221 | 222 | code, 223 | kbd, 224 | pre, 225 | samp { 226 | font-family: monospace, monospace; /* 1 */ 227 | font-size: 1em; /* 2 */ 228 | } 229 | 230 | /** 231 | * Add the correct margin in IE 8. 232 | */ 233 | 234 | figure { 235 | margin: 1em 40px; 236 | } 237 | 238 | /** 239 | * 1. Add the correct box sizing in Firefox. 240 | * 2. Show the overflow in Edge and IE. 241 | */ 242 | 243 | hr { 244 | box-sizing: content-box; /* 1 */ 245 | height: 0; /* 1 */ 246 | overflow: visible; /* 2 */ 247 | } 248 | 249 | /* Forms 250 | ========================================================================== */ 251 | 252 | /** 253 | * 1. Change font properties to `inherit` in all browsers (opinionated). 254 | * 2. Remove the margin in Firefox and Safari. 255 | */ 256 | 257 | button, 258 | input, 259 | select, 260 | textarea { 261 | font: inherit; /* 1 */ 262 | margin: 0; /* 2 */ 263 | } 264 | 265 | /** 266 | * Restore the font weight unset by the previous rule. 267 | */ 268 | 269 | optgroup { 270 | font-weight: bold; 271 | } 272 | 273 | /** 274 | * Show the overflow in IE. 275 | * 1. Show the overflow in Edge. 276 | */ 277 | 278 | button, 279 | input { /* 1 */ 280 | overflow: visible; 281 | } 282 | 283 | /** 284 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 285 | * 1. Remove the inheritance of text transform in Firefox. 286 | */ 287 | 288 | button, 289 | select { /* 1 */ 290 | text-transform: none; 291 | } 292 | 293 | /** 294 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 295 | * controls in Android 4. 296 | * 2. Correct the inability to style clickable types in iOS and Safari. 297 | */ 298 | 299 | button, 300 | html [type="button"], /* 1 */ 301 | [type="reset"], 302 | [type="submit"] { 303 | -webkit-appearance: button; /* 2 */ 304 | } 305 | 306 | /** 307 | * Remove the inner border and padding in Firefox. 308 | */ 309 | 310 | button::-moz-focus-inner, 311 | [type="button"]::-moz-focus-inner, 312 | [type="reset"]::-moz-focus-inner, 313 | [type="submit"]::-moz-focus-inner { 314 | border-style: none; 315 | padding: 0; 316 | } 317 | 318 | /** 319 | * Restore the focus styles unset by the previous rule. 320 | */ 321 | 322 | button:-moz-focusring, 323 | [type="button"]:-moz-focusring, 324 | [type="reset"]:-moz-focusring, 325 | [type="submit"]:-moz-focusring { 326 | outline: 1px dotted ButtonText; 327 | } 328 | 329 | /** 330 | * Change the border, margin, and padding in all browsers (opinionated). 331 | */ 332 | 333 | fieldset { 334 | border: 1px solid #c0c0c0; 335 | margin: 0 2px; 336 | padding: 0.35em 0.625em 0.75em; 337 | } 338 | 339 | /** 340 | * 1. Correct the text wrapping in Edge and IE. 341 | * 2. Correct the color inheritance from `fieldset` elements in IE. 342 | * 3. Remove the padding so developers are not caught out when they zero out 343 | * `fieldset` elements in all browsers. 344 | */ 345 | 346 | legend { 347 | box-sizing: border-box; /* 1 */ 348 | color: inherit; /* 2 */ 349 | display: table; /* 1 */ 350 | max-width: 100%; /* 1 */ 351 | padding: 0; /* 3 */ 352 | white-space: normal; /* 1 */ 353 | } 354 | 355 | /** 356 | * Remove the default vertical scrollbar in IE. 357 | */ 358 | 359 | textarea { 360 | overflow: auto; 361 | } 362 | 363 | /** 364 | * 1. Add the correct box sizing in IE 10-. 365 | * 2. Remove the padding in IE 10-. 366 | */ 367 | 368 | [type="checkbox"], 369 | [type="radio"] { 370 | box-sizing: border-box; /* 1 */ 371 | padding: 0; /* 2 */ 372 | } 373 | 374 | /** 375 | * Correct the cursor style of increment and decrement buttons in Chrome. 376 | */ 377 | 378 | [type="number"]::-webkit-inner-spin-button, 379 | [type="number"]::-webkit-outer-spin-button { 380 | height: auto; 381 | } 382 | 383 | /** 384 | * 1. Correct the odd appearance in Chrome and Safari. 385 | * 2. Correct the outline style in Safari. 386 | */ 387 | 388 | [type="search"] { 389 | -webkit-appearance: textfield; /* 1 */ 390 | outline-offset: -2px; /* 2 */ 391 | } 392 | 393 | /** 394 | * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. 395 | */ 396 | 397 | [type="search"]::-webkit-search-cancel-button, 398 | [type="search"]::-webkit-search-decoration { 399 | -webkit-appearance: none; 400 | } 401 | 402 | /** 403 | * Correct the text style of placeholders in Chrome, Edge, and Safari. 404 | */ 405 | 406 | ::-webkit-input-placeholder { 407 | color: inherit; 408 | opacity: 0.54; 409 | } 410 | 411 | /** 412 | * 1. Correct the inability to style clickable types in iOS and Safari. 413 | * 2. Change font properties to `inherit` in Safari. 414 | */ 415 | 416 | ::-webkit-file-upload-button { 417 | -webkit-appearance: button; /* 1 */ 418 | font: inherit; /* 2 */ 419 | } 420 | -------------------------------------------------------------------------------- /sass/lib/_core.scss: -------------------------------------------------------------------------------- 1 | // Core (Main Style) 2 | 3 | // global header 4 | .globalHeader { 5 | &.is-transparent { 6 | background-color: $bg !important; 7 | @media #{$mq-sm} { 8 | background-color: transparent !important; 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | width: 100%; 13 | z-index: 2; 14 | } 15 | } 16 | &.is-dark, 17 | &.is-light, 18 | &.is-accent { 19 | @media #{$mq-sm} { 20 | position: static; 21 | } 22 | .btn-tw, 23 | .btn-fb { 24 | @media #{$mq-sm} { 25 | border: none; 26 | box-shadow: none; 27 | } 28 | } 29 | } 30 | &.is-dark { 31 | background-color: #232426 !important; 32 | a { 33 | color: #fff; 34 | } 35 | } 36 | &.is-light { 37 | background-color: #fff !important; 38 | a { 39 | color: #36393d; 40 | } 41 | } 42 | &.is-accent { 43 | a { 44 | color: #fff; 45 | } 46 | } 47 | } 48 | .globalHeader-inner { 49 | display: flex; 50 | justify-content: space-between; 51 | padding: .7em 0; 52 | } 53 | .globalHeader-shareBtns { 54 | display: flex; 55 | align-items: center; 56 | .btn-tw, 57 | .btn-fb { 58 | @media #{$mq-sm} { 59 | border: 1px solid #fff; //あえてダークテーマでも白 60 | box-shadow: 0 4px 10px rgba(0,0,0,.4); 61 | } 62 | } 63 | } 64 | .btn-tw, 65 | .btn-fb { 66 | display: inline-block; 67 | border-radius: 50%; 68 | margin-left: 1em; 69 | width: 36px; 70 | height: 36px; 71 | display: flex; 72 | align-items: center; 73 | justify-content: center; 74 | &:first-child { 75 | margin-left: 0; 76 | } 77 | svg { 78 | width: 18px; 79 | height: 18px; 80 | } 81 | @media #{$mq-sm} { 82 | width: 40px; 83 | height: 40px; 84 | } 85 | } 86 | .btn-tw { 87 | background-color: $btn-tw; 88 | } 89 | .btn-fb { 90 | background-color: $btn-fb; 91 | } 92 | .globalHeader-labelName { 93 | display: flex; 94 | align-items: center; 95 | max-width: 60%; 96 | word-break: break-all; 97 | a { 98 | color: $base; 99 | } 100 | } 101 | .labelName-logoImg { 102 | max-width: 100%; 103 | } 104 | 105 | // hero header 106 | .heroHeader { 107 | background-color: $bg; 108 | } 109 | .heroHeader-inner { 110 | background-repeat: no-repeat; 111 | background-position: center center; 112 | background-size: cover; 113 | margin-left: auto; 114 | margin-right: auto; 115 | max-width: 1800px; 116 | position: relative; 117 | display: flex; 118 | align-items: center; 119 | // ヒーローヘッダ画像が存在する場合は高さを指定する 120 | &.has-headerImage { 121 | height: 55vw; 122 | @media (min-width: 1800px) { 123 | height: 1000px; 124 | } 125 | } 126 | // ブラウザ幅が広すぎる場合、左右にグラデーションをかける 127 | @media (min-width: 1800px) { 128 | &:before { 129 | content: ""; 130 | position: absolute; 131 | top: 0; 132 | left: 0; 133 | width: 10vw; 134 | height: 100%; 135 | background: linear-gradient(to right, $bg, rgba(0,0,0,0)); 136 | } 137 | &:after { 138 | content: ""; 139 | position: absolute; 140 | top: 0; 141 | right: 0; 142 | width: 10vw; 143 | height: 100%; 144 | background: linear-gradient(to left, $bg, rgba(0,0,0,0)); 145 | } 146 | } 147 | // タイトル位置 148 | &.is-position-top { 149 | align-items: flex-start; 150 | .header { 151 | margin-top: 3%; 152 | @media #{$mq-sm} { 153 | margin-top: 7%; 154 | } 155 | @media #{$mq-md} { 156 | margin-top: 5%; 157 | } 158 | } 159 | } 160 | &.is-position-middle { 161 | align-items: center; 162 | } 163 | &.is-position-bottom { 164 | align-items: flex-end; 165 | .header { 166 | margin-bottom: 3%; 167 | } 168 | } 169 | } 170 | .header { 171 | text-align: center; 172 | width: 100%; 173 | .header-logo { 174 | max-width: 100%; 175 | } 176 | h1 { 177 | margin: 0; 178 | } 179 | } 180 | 181 | // intro 182 | .section-introduction { 183 | text-align: center; 184 | .section-content { 185 | text-align: left; 186 | @media #{$mq-sm} { 187 | text-align: center; 188 | } 189 | } 190 | } 191 | 192 | // spec 193 | .section-spec { 194 | .jacket-image { 195 | max-width: 300px; 196 | display: block; 197 | margin: 0 auto 1.5em; 198 | @media (max-width: 319px) { 199 | max-width: 100%; 200 | } 201 | @media #{$mq-sm} { 202 | max-width: 100%; 203 | } 204 | } 205 | .jacket-noimage { 206 | height: 40vw; 207 | width: 100%; 208 | letter-spacing: .3em; 209 | border: 1px solid $border; 210 | display: flex; 211 | align-items: center; 212 | justify-content: center; 213 | } 214 | } 215 | .spec-dl { 216 | margin: 0; 217 | dt { 218 | font-weight: bold; 219 | position: relative; 220 | margin-bottom: .5em; 221 | &:after { 222 | content: ""; 223 | position: absolute; 224 | top: 50%; 225 | left: 0; 226 | z-index: 1; 227 | width: 100%; 228 | background-color: $border; 229 | height: 1px; 230 | display: block; 231 | } 232 | } 233 | .spec-dl-label { 234 | background-color: $bg; 235 | display: inline-block; 236 | position: relative; 237 | z-index: 2; 238 | padding-right: 1em; 239 | } 240 | dd { 241 | margin-left: 0; 242 | margin-bottom: 2em; 243 | &:last-child { 244 | margin-bottom: 0; 245 | } 246 | } 247 | } 248 | 249 | // Book Mode 250 | .bookSample-container { 251 | @media #{$mq-sm} { 252 | display: flex; 253 | justify-content: space-around; 254 | flex-wrap: wrap; 255 | align-items: center; 256 | } 257 | } 258 | .bookSample-content { 259 | text-align: center; 260 | margin-bottom: 1em; 261 | @media #{$mq-sm} { 262 | cursor: zoom-in; 263 | } 264 | .bookSample-image { 265 | max-width: 100%; 266 | } 267 | // サンプル画像数によって幅変えるやつ 268 | @media #{$mq-sm} { 269 | .bookSample-items1 & { 270 | width: 100%; 271 | } 272 | .bookSample-items2 & { 273 | width: 48%; 274 | } 275 | .bookSample-items3 & { 276 | width: 31%; 277 | } 278 | .bookSample-items4 & { 279 | width: 48%; 280 | } 281 | .bookSample-items5 & { 282 | width: 31%; 283 | } 284 | .bookSample-items6 & { 285 | width: 31%; 286 | } 287 | } 288 | } 289 | 290 | .bookSample-lightbox { 291 | display: none; 292 | @media #{$mq-sm} { 293 | cursor: zoom-out; 294 | &.is-open { 295 | display: flex; 296 | align-items: center; 297 | justify-content: center; 298 | position: fixed; 299 | top: 0; 300 | left: 0; 301 | width: 100%; 302 | height: 100%; 303 | z-index: 10; 304 | background-color: rgba(0,0,0,.8); 305 | img { 306 | max-width: 100%; 307 | max-height: 100%; 308 | } 309 | } 310 | } 311 | } 312 | 313 | // Lightboxが開いてるときはスクロールさせない 314 | body.is-open { 315 | @media #{$mq-sm} { 316 | overflow: hidden; 317 | } 318 | } 319 | 320 | // buy-button 321 | .section-buy { 322 | background-color: $bg-light; 323 | padding: 1em 0 1.5em; 324 | } 325 | .spec-buy-container { 326 | text-align: center; 327 | } 328 | .spec-buy-button { 329 | @include btn; 330 | @include btn-large; 331 | } 332 | 333 | // tracklist 334 | .section-tracklist { 335 | .section-content { 336 | display: flex; 337 | justify-content: center; 338 | } 339 | } 340 | .tracklist { 341 | display: table; 342 | width: auto; 343 | margin: 0; 344 | padding: 0; 345 | li { 346 | display: flex; 347 | list-style: none; 348 | margin-bottom: 1.5rem; 349 | @media #{$mq-sm} { 350 | margin-bottom: 2em; 351 | } 352 | .track-title { 353 | display: block; 354 | } 355 | } 356 | } 357 | .track-number { 358 | color: $link; 359 | margin-right: .5em; 360 | font-size: 1.1rem; 361 | @media #{$mq-sm} { 362 | font-size: 1.3rem; 363 | } 364 | } 365 | .track-title { 366 | font-size: 1.1rem; 367 | font-weight: bold; 368 | @media #{$mq-sm} { 369 | font-size: 1.3rem; 370 | } 371 | } 372 | .track-meta { 373 | color: $light; 374 | } 375 | 376 | // youtube 377 | .section-youtube, 378 | .section-nicovideo { 379 | .section-content { 380 | max-width: 700px; 381 | margin: auto; 382 | } 383 | } 384 | .video-wrap { 385 | position: relative; 386 | padding-bottom: 56.25%; 387 | padding-top: 30px; 388 | height: 100%; 389 | overflow: hidden; 390 | text-align: center; 391 | iframe, 392 | object, 393 | embed { 394 | position: absolute; 395 | top: 0; 396 | left: 0; 397 | width: 100%; 398 | height: 100%; 399 | } 400 | } 401 | .nicovideo-player { 402 | text-align: center; 403 | & > embed,div,iframe { 404 | margin-left: auto; 405 | margin-right: auto; 406 | } 407 | } 408 | 409 | // Additional Content 410 | .section-additionalContent { 411 | text-align: center; 412 | .section-content { 413 | text-align: left; 414 | @media #{$mq-sm} { 415 | text-align: center; 416 | } 417 | } 418 | } 419 | .additionalContent-image-wrapper { 420 | margin-top: 1.5em; 421 | margin-bottom: 1em; 422 | text-align: center; 423 | } 424 | 425 | // credit 426 | .credit { 427 | display: flex; 428 | flex-direction: column; 429 | justify-content: space-between; 430 | margin: 0; 431 | padding: 0; 432 | @media #{$mq-sm} { 433 | flex-direction: row; 434 | flex-wrap: wrap; 435 | } 436 | li { 437 | list-style: none; 438 | text-align: center; 439 | margin-bottom: 1.5rem; 440 | @media #{$mq-sm} { 441 | width: 30%; 442 | margin-bottom: 2rem; 443 | } 444 | } 445 | } 446 | .credit-role, 447 | .credit-title, 448 | .credit-website { 449 | display: block; 450 | } 451 | .credit-role { 452 | color: $light; 453 | } 454 | .credit-title { 455 | font-weight: bold; 456 | margin: .4em 0; 457 | font-size: 1.1rem; 458 | @media #{$mq-sm} { 459 | font-size: 1.3rem; 460 | } 461 | } 462 | .credit-website-link { 463 | @include btn; 464 | font-size: .7rem; 465 | padding: .2em .7em; 466 | } 467 | 468 | // banner 469 | .section-banner { 470 | .section-content { 471 | text-align: center; 472 | } 473 | } 474 | 475 | // footerのシェアボタン 476 | .footer-shareBtns { 477 | display: flex; 478 | justify-content: center; 479 | .btn-tw, 480 | .btn-fb { 481 | width: 50px; 482 | height: 50px; 483 | } 484 | } 485 | 486 | // footer 487 | .section-footer { 488 | margin-bottom: 1em; 489 | @media #{$mq-sm} { 490 | margin-bottom: 2em; 491 | } 492 | } 493 | .footer-content { 494 | font-size: .75rem; 495 | text-align: center; 496 | color: $light; 497 | a { 498 | font-weight: bold; 499 | text-decoration: none; 500 | color: $light; 501 | } 502 | span { 503 | line-height: 1.4; 504 | } 505 | @media #{$mq-sm} { 506 | display: flex; 507 | justify-content: space-between; 508 | } 509 | } 510 | .footer-copyright { 511 | margin-bottom: 2em; 512 | align-items: center; 513 | @media #{$mq-sm} { 514 | text-align: left; 515 | margin-bottom: 0; 516 | } 517 | } 518 | .footer-theme { 519 | text-align: left; 520 | display: flex; 521 | margin: auto; 522 | align-items: center; 523 | & > div { 524 | vertical-align: middle; 525 | } 526 | @media #{$mq-sm} { 527 | margin: 0; 528 | text-align: right; 529 | } 530 | } 531 | .footer-title { 532 | display: block; 533 | font-size: 1rem; 534 | } 535 | .footer-theme-author { 536 | padding-right: 1em; 537 | @media #{$mq-sm} { 538 | min-width: 250px; 539 | } 540 | } 541 | .footer-text { 542 | margin-bottom: 0; 543 | } 544 | .footer-theme-tokusetsu3 { 545 | display: block; 546 | } 547 | .footer-install-btn { 548 | @include btn; 549 | border-color: $border; 550 | white-space: nowrap; 551 | &:hover { 552 | text-decoration: none !important; 553 | background-color: $border; 554 | } 555 | } 556 | 557 | // demo 558 | .section-demo { 559 | .l-container { 560 | border: 2px dashed $border; 561 | padding: 1em; 562 | box-sizing: border-box; 563 | } 564 | h3 { 565 | text-align: center; 566 | font-size: 150%; 567 | } 568 | } 569 | -------------------------------------------------------------------------------- /templates/index.ejs: -------------------------------------------------------------------------------- 1 | <% var 2 | pageId = "index"; 3 | %> 4 | <% include _header %> 5 | 6 | 36 | 37 |

38 | 52 |

53 | 54 | {block:If02lIntroduction} 55 |

56 |

57 | {block:If02lIntroductionHeading} 58 |

59 |

60 | {block:If02lIntroductionHeadingImageImage} 61 | 62 | {/block:If02lIntroductionHeadingImageImage} 63 | {block:IfNot02lIntroductionHeadingImageImage} 64 | {text:02 l Introduction Heading} 65 | {/block:IfNot02lIntroductionHeadingImageImage} 66 |

67 |

68 | {/block:If02lIntroductionHeading} 69 |

70 |

71 | {text:02 l Introduction} 72 |

73 |

74 |

75 |

76 | {/block:If02lIntroduction} 77 | 78 | {block:If04lSoundcloudEmbedCode} 79 |

80 |

81 | 82 |

83 |

84 | {/block:If04lSoundcloudEmbedCode} 85 | 86 |

87 |

88 |

89 |

90 | {block:IfJacketImage} 91 | {Title}

92 | {/block:IfJacketImage} 93 | {block:IfNotJacketImage} 94 |

95 | NOW PRINTING 96 |

97 | {/block:IfNotJacketImage} 98 |

99 |

100 |

TITLE

{title}

CIRCLE

{text:03 l Circle Name}

SPECIFICATION

{text:03 l Spec}

RELEASE DATE

{text:03 l Release Date}

BOOTH

{text:03 l Booth Number}

PRICE

{text:03 l Price}

STORE

121 |

123 | {text:03 l Store01 Name} 124 |
128 | {text:03 l Store02 Name} 129 |
133 | {text:03 l Store03 Name} 134 |

139 |

142 |

143 |

144 |

145 |

146 | 147 | {block:IfBookModelSampleImage01Image} 148 |

149 |

150 |

151 |

{text:Book Mode l Book Sample Heading}

152 |

153 |

162 |

163 |

164 |

165 | {/block:IfBookModelSampleImage01Image} 166 | 167 | {block:IfBookModelSampleImage02Image} 168 |

169 |

170 |

171 | {/block:IfBookModelSampleImage02Image} 172 | 173 | {block:IfBookModelSampleImage03Image} 174 |

175 |

176 |

177 | {/block:IfBookModelSampleImage03Image} 178 | 179 | {block:IfBookModelSampleImage04Image} 180 |

181 |

182 |

183 | {/block:IfBookModelSampleImage04Image} 184 | 185 | {block:IfBookModelSampleImage05Image} 186 |

187 |

188 |

189 | {/block:IfBookModelSampleImage05Image} 190 | 191 | {block:IfBookModelSampleImage06Image} 192 |

193 |

194 |

195 | {/block:IfBookModelSampleImage06Image} 196 | 197 | {block:IfBookModelSampleImage01Image} 198 |

199 |

200 |

201 | {/block:IfBookModelSampleImage01Image} 202 | 203 | <%# Lightbox用 %> 204 | {block:IfBookModelSampleImage01Image} 205 | 208 | {/block:IfBookModelSampleImage01Image} 209 | 210 | {block:IfBookModelSampleImage02Image} 211 | 214 | {/block:IfBookModelSampleImage02Image} 215 | 216 | {block:IfBookModelSampleImage03Image} 217 | 220 | {/block:IfBookModelSampleImage03Image} 221 | 222 | {block:IfBookModelSampleImage04Image} 223 | 226 | {/block:IfBookModelSampleImage04Image} 227 | 228 | {block:IfBookModelSampleImage05Image} 229 | 232 | {/block:IfBookModelSampleImage05Image} 233 | 234 | {block:IfBookModelSampleImage06Image} 235 | 238 | {/block:IfBookModelSampleImage06Image} 239 | 240 | {block:If03lStore01Name} 241 |

242 |

243 |

244 |

{text:03 l Store Buttons Heading}

245 |

246 |

247 | {text:03 l Store01 Name} 248 | {/block:If03lStore01Name} 249 | {block:If03lStore02Name} 250 | {text:03 l Store02 Name} 251 | {/block:If03lStore02Name} 252 | {block:If03lStore03Name} 253 | {text:03 l Store03 Name} 254 | {block:If03lStore03Name} 255 | {block:If03lStore01Name} 256 |

257 |

258 |

259 | {/block:If03lStore01Name} 260 | 261 | {block:If05lTrack01Title} 262 |

263 |

264 |

265 |

TRACKLIST

266 |

267 |

268 |

270 |
01
271 |
272 | {text:05 l Track01 Title} 273 | {text:05 l Track01 Description} 274 |
275 |
279 |
02
280 |
281 | {text:05 l Track02 Title} 282 | {text:05 l Track02 Description} 283 |
284 |
288 |
03
289 |
290 | {text:05 l Track03 Title} 291 | {text:05 l Track03 Description} 292 |
293 |
297 |
04
298 |
299 | {text:05 l Track04 Title} 300 | {text:05 l Track04 Description} 301 |
302 |
306 |
05
307 |
308 | {text:05 l Track05 Title} 309 | {text:05 l Track05 Description} 310 |
311 |
315 |
06
316 |
317 | {text:05 l Track06 Title} 318 | {text:05 l Track06 Description} 319 |
320 |
324 |
07
325 |
326 | {text:05 l Track07 Title} 327 | {text:05 l Track07 Description} 328 |
329 |
333 |
08
334 |
335 | {text:05 l Track08 Title} 336 | {text:05 l Track08 Description} 337 |
338 |
342 |
09
343 |
344 | {text:05 l Track09 Title} 345 | {text:05 l Track09 Description} 346 |
347 |
351 |
10
352 |
353 | {text:05 l Track10 Title} 354 | {text:05 l Track10 Description} 355 |
356 |

363 |

364 |

365 |

366 | {/block:If05lTrack01Title} 367 | 368 | {block:If04lYoutubeEmbedCode} 369 |

370 |

371 |

372 |

373 | 374 |

375 |

376 |

377 |

378 | {/block:If04lYoutubeEmbedCode} 379 | 380 | {block:If04lNicovideoEmbedCode} 381 |

382 |

383 |

384 |

385 | 386 | 387 |

388 |

389 |

390 |

391 | {/block:If04lNicovideoEmbedCode} 392 | 393 | {block:If06lFooterAdditionalContent} 394 |

395 |

396 | {block:If06lFooterAdditionalHeading} 397 |

398 |

{text:06 l Footer Additional Heading}

399 |

400 | {/block:If06lFooterAdditionalHeading} 401 |

402 | {block:If06lFooterAdditionalText} 403 |

{text:06 l Footer Additional Text}

404 | {/block:If06lFooterAdditionalText} 405 | {block:If06lFooterAdditionalImageImage} 406 |

407 |

408 |

409 | {block:If06lFooterAdditionalImageImage} 410 |

411 |

412 |

413 | {/block:If06lFooterAdditionalContent} 414 | 415 | {block:If07lStaff01Name} 416 |

417 |

418 |

419 |

CREDIT

420 |

421 |

422 |

424 | {text:07 l Staff01 Role} 425 | {text:07 l Staff01 Name} 426 | 427 | Website 428 | 429 |
433 | {text:07 l Staff02 Role} 434 | {text:07 l Staff02 Name} 435 | 436 | Website 437 | 438 |
442 | {text:07 l Staff03 Role} 443 | {text:07 l Staff03 Name} 444 | 445 | Website 446 | 447 |
451 | {text:07 l Staff04 Role} 452 | {text:07 l Staff04 Name} 453 | 454 | Website 455 | 456 |
460 | {text:07 l Staff05 Role} 461 | {text:07 l Staff05 Name} 462 | 463 | Website 464 | 465 |
469 | {text:07 l Staff06 Role} 470 | {text:07 l Staff06 Name} 471 | 472 | Website 473 | 474 |

481 |

482 |

483 |

484 | {/block:If07lStaff01Name} 485 | 486 | {block:IfBannerImage} 487 | 497 | {block:IfBannerImage} 498 | 499 | {block:If01lEnableShareButtons} 500 | 512 | {/block:If01lEnableShareButtons} 513 | 514 | 516 | 552 | 553 | <% include _footer %> 554 | --------------------------------------------------------------------------------