@charset "UTF-8";
/* Base */
html {
"Helvetica Neue", "Arial", "Hiragino Kagu Gothic ProN", "Meiryo",
sans-serif;
font-size: 14px;
line-height: 1.5;
}
body {
background-color: rgb(245, 245, 245);
color: rgb(0, 0, 0);
}
h1 { font-size: 100%; margin: 0; }
img { vertical-align: middle; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
/* Page header */
.page-header {
background-color: rgb(255, 255, 255);
border-bottom: 1px solid rgb(230, 230, 230);
padding: 32px 0;
position: fixed;
width: 100%;
z-index: 10;
}
.page-header > .inner {
width: 950px;
padding: 8px 10px;
margin: auto;
}
site-logo {
float: left;
line-height: 1;
}
/* Page main */
.page-main {
margin: auto;
padding: 103px 10px;
width: 950px;
}
/*!
* Gallery
*/
.gallery {
margin: 0;
padding: 0;
}
.gallery-item {
list-style: none;
margin-top: 10px;
}
.gallery-item.is-loading {
opacity: 0;
}
.gallery-item a {
display: block;
}
.gallery-item .caption {
display: none;
}
/* フィルター */
.filter-form {
float: right;
}
.filter-form label {
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-left: 1em;
padding: 0 0.25em;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.filter-form label.ui-state-focus {
outline: 1px dotted;
}
.filter-form label .ui-icon {
background: url(../img/sprites.png) no-repeat 0 0;
display: inline-block;
height: 17px;
margin-right: 0.5em;
margin-top: 2px;
width: 17px;
vertical-align: top;
}
.filter-form label.ui-state-active .ui-icon {
background-position: -20px 0;
}
/* 追加読み込みボタン */
.load-more {
background-color: rgb(255, 255, 255);
border: 1px solid rgb(230, 230, 230);
display: block;
padding: 1em 0;
width: 100%;
margin-top: 10px;
}
/* jQuery UI helper */
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
【JSフォルダ】
main.jsファイルにコードを書く
$(function () {
/*
* ギャラリー
*/
$('#gallery').each(function () {
var $container = $(this),
$loadMoreButton = $('#load-more'), // 追加ボタン
$filter = $('#gallery-filter'), // フィルタリングのフォーム
addItemCount = 16, // 一度に表示するアイテム数
added = 0, // 表示済みのアイテム数
allData = [], // すべての JSON データ
filteredData = []; // フィルタリングされた JSON データ
$container.masonry({
columnWidth: 230,
gutter: 10,
itemSelector: '.gallery-item'
});
// JSON を取得し、initGallery 関数を実行
$.getJSON('./data/content.json', initGallery);
// ギャラリーを初期化する
function initGallery (data) {
// 取得した JSON データを格納
allData = data;
// 最初の状態ではフィルタリングせず、そのまま全データを渡す
filteredData = allData;
// 最初のアイテムを表示
addItems();
// 追加ボタンがクリックされたら追加で表示
$loadMoreButton.on('click', addItems);
// フィルターのラジオボタンが変更されたらフィルタリングを実行
$filter.on('change', 'input[type="radio"]', filterItems);
}
// アイテムを生成しドキュメントに挿入する
function addItems (filter) {
var elements = [],
// 追加するデータの配列
slicedData = filteredData.slice(added, added + addItemCount);
// slicedData の要素ごとに DOM 要素を生成
$.each(slicedData, function (i, item) {
var itemHTML =
'

' +
'' +
'' +
'' + item.title + '' +
'
item.date.replace(/-0?/g, '/') +
'' +
'' +
'' +
'' +
'';
elements.push($(itemHTML).get(0));
});
// DOM 要素の配列をコンテナーに挿入し、Masonry レイアウトを実行
$container
.append(elements)
.imagesLoaded(function () {
$(elements).removeClass('is-loading');
$container.masonry('appended', elements);
// フィルタリング時は再配置
if (filter) {
$container.masonry();
}
});
// 追加済みアイテム数の更新
added += slicedData.length;
// JSON データがすべて追加し終わっていたら追加ボタンを消す
if (added < filteredData.length) {
$loadMoreButton.show();
} else {
$loadMoreButton.hide();
}
}
// アイテムをフィルタリングする
function filterItems () {
var key = $(this).val(), // チェックされたラジオボタンの value
// 追加済みの Masonry アイテム
masonryItems = $container.masonry('getItemElements');
// Masonry アイテムを削除
$container.masonry('remove', masonryItems);
// フィルタリング済みアイテムのデータをリセットと
// 追加済みアイテム数をリセット
filteredData = [];
added = 0;
if (key === 'all') {
// all がクリックされた場合、すべての JSON データを格納
filteredData = allData;
} else {
// all 以外の場合、キーと一致するデータを抽出
filteredData = $.grep(allData, function (item) {
return item.category === key;
});
}
// アイテムを追加
addItems(true);
}
});
// jQuery UI Button
$('.filter-form input[type="radio"]').button({
icons: {
primary: 'icon-radio'
}
});
// Resize page header
$('.page-header').each(function () {
var $header = $(this),
headerHeight = $header.outerHeight(),
headerPaddingTop = parseInt($header.css('paddingTop'), 10),
headerPaddingBottom = parseInt($header.css('paddingBottom'), 10);
$(window).on('scroll', $.throttle(1000 / 60, function () {
var scroll = $(this).scrollTop(),
styles = {};
if (scroll > 0) {
if (scroll < headerHeight) {
styles = {
paddingTop: headerPaddingTop - scroll / 2,
paddingBottom: headerPaddingBottom - scroll / 2
};
} else {
styles = {
paddingTop: 0,
paddingBottom: 0
};
}
} else {
styles = {
paddingTop: '',
paddingBottom: ''
}
}
$header.css(styles);
}));
});
});
【imgフォルダ】
一部を表示

でもバナーがなかなか貼れなくて(涙)
教えて~