This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://updategreasyfork.deno.dev/scripts/532855/1577176/hinatazaka46-lookandfeel.js
// ==UserScript==
// @name hinatazaka46-lookandfeel
// @namespace https://gf.zukizuki.org/ja/users/1328592-naoqv
// @description 日向坂46 ルックアンドフィール
// @version 0.10
// @icon https://cdn.hinatazaka46.com/files/14/hinata/img/favicons/favicon-32x32.png
// @compatible chrome
// @compatible firefox
// @grant none
// @license MIT
// ==/UserScript==
const PAGE_TYPE_ERROR_MSG = "Processing of out-of-scope pages. Check the settings @match.";
const isMobile = () => {
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
const mobileRegex = /Android|iPhone|iPad|iPod|BlackBerry|Windows Phone|Opera Mini|IEMobile/i;
return mobileRegex.test(userAgent) || window.matchMedia("only screen and (max-width: 768px)").matches;
}
/*
* inlineスタイルを適用する
* @param {string} styleText - スタイル定義
*/
document.appendStyle = (styleText) => {
const styleElem = document.createElement("style");
styleElem.setAttribute("rel", "stylesheet");
styleElem.textContent = styleText;
document.head.appendChild(styleElem);
};
const slimDownMenuBar = () => {
const styleElem = document.createElement("style");
styleElem.setAttribute("rel", "stylesheet");
const styleText = `.l-header {
height: 55px;
}
.p-header-wrap.is-fixed .p-header {
height: 30px;
}
.c-header__logo {
top: 5px;
width: 155px;
}
.p-header.p-header__in {
height: 60px;
position: relative;
}
nav.p-menu.p-menu--pc {
position: absolute;
top: 50%;
transform: translateY(-50%);
}`;
styleElem.textContent = styleText;
document.head.appendChild(styleElem);
};
/*
* リリース年リストを画面に配置する
* @param {string} releaseYearSelector - リリース年のセレクター
*/
const setReleaseYear = (releaseYearSelector) => {
let navText = `<header class="header" role="banner" style="z-index: 1000;">
<nav class="nav">
<div class="release">RELEASE<br/>YEAR</div>
<ul class="nav-list">`;
Array.prototype.forEach.call(document.querySelectorAll(releaseYearSelector), (x) => {
const year = x.innerText;
const id_year = "y_" + year;
x.parentNode.setAttribute("id", id_year);
navText += `<li><a href="#${id_year}">${year}</a></li>`;
});
navText += `</ul>
</nav>
</header>`;
const main = document.querySelector('.l-main');
main.setAttribute("style", 'padding-top:0; margin: 20px 0 0 40px; font-size: larger;');
main.insertAdjacentHTML('afterbegin', navText);
const header = document.querySelector('header');
const nav = document.querySelector('.nav');
const navHeight = nav.clientHeight;
window.onscroll = () => {
if (window.pageYOffset >= header.clientHeight) {
nav.classList.add('fixed');
main.setAttribute('style', 'padding-top:' + navHeight + 'px');
} else {
nav.classList.remove('fixed');
main.setAttribute('style', 'padding-top:0; margin: 20px 0 0 40px; font-size: larger;');
}
};
const latestYear = document.querySelector(releaseYearSelector);
const scrollTop = latestYear.parentNode.getBoundingClientRect().top;
// スクロール位置リセット 〜「再読み込み」ボタン押下時の位置ズレ対応
scrollTo(0, 0);
// リスト位置までページ内で縦スクロール
scrollTo({
top: scrollTop,
behavior: "smooth"
});
};
const COLOR_MODE = {DEFAULT_COLOR: "0", DARK_COLOR: "1"};
/**
* カラーモードを取得
* @returns {string} カラーモード
*/
const getColorMode = () => {
const currentMode = CookieUtils.getCookie('color_mode');
if (! currentMode) {
CookieUtils.setCookie('color_mode', COLOR_MODE.DEFALULT_COLOR);
return COLOR_MODE.DEFALULT_COLOR;
}
return currentMode;
}
/**
* カラーモードを設定
* @param {string} mode - カラーモード
*/
const setColorMode = (mode) => {
if (mode !== COLOR_MODE.DEFAULT_COLOR && mode !== COLOR_MODE.DARK_COLOR) {
throw new Error("Illegal parameter error. [HinatazakaSigthtStyleUtils#setColorMode]");
}
CookieUtils.setCookie('color_mode', mode);
};
/**
* カラーモードを切り替える
* @returns {string} 切り替え後のカラーモード
*/
const toggleColorMode = () => {
const mode = ((parseInt(getColorMode()) + 1) % 2).toString();
setColorMode(mode);
return mode;
};
const DEFAULT_FONT_CL = "#8babab";
const DARK_FONT_CL = "#eeeeee";
const DARK_BG_CL = "#202040";
const DARK_MENU_CL = "#404070";
const DARK_SVG_CL = "#eeeeee";
const DARK_IMG_BG_CL = "#eeeeee";
const HOVER_BG_UPPER_CL = "#5bbee4";
const HOVER_BG_LOWER_CL = "#ebf4f7";
const HOVER_BORDER_CL = "#5BBEE4";
const DARK_HOVER_BG_UPPER_CL = "#20cccc";
const DARK_HOVER_BG_LOWER_CL = "#202050";
const DARK_PAST_BG_CL = "#303040";
const DARK_TODAY_UPPER_CL = "#30aaaa";
const DARK_TODAY_LOWER_CL = "#303050";
const DARK_HOVER_BORDER_CL = "#79fcfc";
const DARK_STRONG_FONT_CL = 'crimson';
const DARK_STRONG_BG_CL = 'aquamarine';
const DARK_FC_TEXT_CL = 'rgb(99, 103, 103)';
const KEY_BACKGROUND = "backGround";
const KEY_MENUBAR = "manuBar";
const KEY_BREADCRUMB = "breadcrumb";
const KEY_LIST = "list";
const KEY_ARTICLE = "article";
const KEY_PASTDAY = "pastday";
const KEY_TODAY = "today";
const KEY_MEMBER_PROP = "memberProp";
const KEY_SVG_PATH = "svgPath";
const KEY_BLOG = "blog";
const KEY_STRONG = "strong";
const KEY_DISCO = "disco";
const KEY_AFTER = "after";
const KEY_BIOGRAPHY = "biography";
const KEY_FC_LOGO = "fc_logo";
const KEY_FC_TEXT = "fc_text";
const KEYS = [KEY_BACKGROUND, KEY_MENUBAR, KEY_BREADCRUMB, KEY_LIST, KEY_ARTICLE,
KEY_PASTDAY, KEY_TODAY, KEY_MEMBER_PROP, KEY_SVG_PATH, KEY_BLOG, KEY_STRONG, KEY_DISCO, KEY_AFTER, KEY_BIOGRAPHY, KEY_FC_LOGO, KEY_FC_TEXT];
const SELECTOR_DIC = {};
SELECTOR_DIC[KEY_BACKGROUND] = '.pages, .module-modal.js-member-filter .mordal-box, .l-container, .schedule__list-future';
SELECTOR_DIC[KEY_MENUBAR] = '.l-header, .p-header-wrap, .p-header-wrap.is-fixed';
SELECTOR_DIC[KEY_BREADCRUMB] = '.p-page-breadcrumb__list .c-page-breadcrumb__item:last-child span';
SELECTOR_DIC[KEY_LIST] = '.l-container, .p-news__list ';
SELECTOR_DIC[KEY_ARTICLE] = '.c-article__title, .p-article__text, .p-article__text span, .c-blog-article__text div *, .c-blog-article__text p span, .tbcms_program-detail__inner p, .c-tv-backnumber-kiji-time, .c-tv-backnumber-kiji-text';
SELECTOR_DIC[KEY_PASTDAY] = '.schedule__list-pastday';
SELECTOR_DIC[KEY_TODAY] = '.schedule__list-today';
SELECTOR_DIC[KEY_MEMBER_PROP] = '.c-member__name, .c-member__name--info, .c-member__info-td__text, .c-blog-member__name, .c-blog-member__info-td__text';
SELECTOR_DIC[KEY_SVG_PATH] = '.c-member__info-td__text a svg path';
SELECTOR_DIC[KEY_BLOG] = '.l-maincontents--blog, .p-blog-entry__group, .p-blog-entry__list, .s-blog__index, .p-blog-group, .p-blog-entry__list';
SELECTOR_DIC[KEY_STRONG] = '.p-article__text strong span, .p-article__text span strong';
SELECTOR_DIC[KEY_DISCO] = '.formation_image li i, .c-page-breadcrumb__item, .c-disco__title, .c-disco__date, .c-video-detail__title, .formation_image li i';
SELECTOR_DIC[KEY_AFTER] = '.l-other-contents--blog';
SELECTOR_DIC[KEY_BIOGRAPHY] = '.p-biography__text';
SELECTOR_DIC[KEY_FC_LOGO] = '.fc-logo';
SELECTOR_DIC[KEY_FC_TEXT] = '.fc-contents .text';
const CSS_DIC = {};
CSS_DIC[KEY_BACKGROUND] = new Array('background-color');
CSS_DIC[KEY_MENUBAR] = new Array('background-color');
CSS_DIC[KEY_BREADCRUMB] = new Array('color');
CSS_DIC[KEY_LIST] = new Array('color');
CSS_DIC[KEY_ARTICLE] = new Array('color');
CSS_DIC[KEY_PASTDAY] = new Array('background-color');
CSS_DIC[KEY_TODAY] = new Array('background');
CSS_DIC[KEY_MEMBER_PROP] = new Array('color');
CSS_DIC[KEY_SVG_PATH] = new Array('fill');
CSS_DIC[KEY_BLOG] = new Array('color', 'background-color');
CSS_DIC[KEY_STRONG] = new Array('color', 'background-color');
CSS_DIC[KEY_DISCO] = new Array('color');
CSS_DIC[KEY_AFTER] = new Array('color', '--bg-color');
CSS_DIC[KEY_BIOGRAPHY] = new Array('color');
CSS_DIC[KEY_FC_LOGO] = new Array('background-color');
CSS_DIC[KEY_FC_TEXT] = new Array('color');
const DEFAULT_COLOR_CONFIG = {};
const DARK_COLOR_CONFIG = {};
DARK_COLOR_CONFIG[KEY_BACKGROUND] = {"background-color": DARK_BG_CL};
DARK_COLOR_CONFIG[KEY_MENUBAR] = {"background-color": DARK_MENU_CL};
DARK_COLOR_CONFIG[KEY_BREADCRUMB] = {"color": DARK_FONT_CL};
DARK_COLOR_CONFIG[KEY_LIST] = {"color": DARK_FONT_CL};
DARK_COLOR_CONFIG[KEY_ARTICLE] = {"color": DARK_FONT_CL};
DARK_COLOR_CONFIG[KEY_PASTDAY] = {"background-color": DARK_PAST_BG_CL};
DARK_COLOR_CONFIG[KEY_TODAY] = {"background": `linear-gradient(${DARK_TODAY_UPPER_CL}, 10%, ${DARK_TODAY_LOWER_CL})`};
DARK_COLOR_CONFIG[KEY_MEMBER_PROP] = {"color": DARK_FONT_CL};
DARK_COLOR_CONFIG[KEY_SVG_PATH] = {"fill": DARK_SVG_CL};
DARK_COLOR_CONFIG[KEY_BLOG] = {"color": DARK_FONT_CL, "background-color": DARK_BG_CL};
DARK_COLOR_CONFIG[KEY_STRONG] = {"color": DARK_STRONG_FONT_CL, "background-color": DARK_STRONG_BG_CL};
DARK_COLOR_CONFIG[KEY_DISCO] = {"color": DARK_FONT_CL};
DARK_COLOR_CONFIG[KEY_AFTER] = {"color": DARK_FONT_CL, "--bg-color": DARK_BG_CL};
DARK_COLOR_CONFIG[KEY_BIOGRAPHY] = {"color": DARK_FONT_CL};
DARK_COLOR_CONFIG[KEY_FC_LOGO] = {"background-color": DARK_IMG_BG_CL};
DARK_COLOR_CONFIG[KEY_FC_TEXT] = {"color": DARK_FC_TEXT_CL};
const COLOR_CONFIGS = [DEFAULT_COLOR_CONFIG, DARK_COLOR_CONFIG];
const getSelectorStyle = (selector, cssProperty) =>
(((element, cssProperty) => (element != null) ? getComputedStyle(element).getPropertyValue(cssProperty) : 'rgb(0, 0, 0)')(document.querySelector(selector), cssProperty));
const getBeforeFirstComma = (str) => {
const index = str.indexOf(",");
return index !== -1 ? str.slice(0, index) : str;
};
const analyzeDefaultColor = () => {
Array.prototype.forEach.call(KEYS, (k) => {
DEFAULT_COLOR_CONFIG[k] = {};
Array.prototype.forEach.call(CSS_DIC[k], (c) => {
DEFAULT_COLOR_CONFIG[k][c] = getSelectorStyle(getBeforeFirstComma(SELECTOR_DIC[k]), c);
});
});
};
const setHoveredFontColor = (selector, originColor = '#8babab') => {
Array.prototype.forEach.call(document.querySelectorAll(selector), (x) => {
x.addEventListener('mouseover', () => {
if (getColorMode() === COLOR_MODE.DARK_COLOR) {
x.style.color = '#e0ffff';
} else {
x.style.color = '#5d5d5d';
}
});
x.addEventListener('mouseout', () => {
x.style.color = originColor;
});
});
};
/*
* ページに対応した色設定を行う
* @param {string} pageType - ページ種類
* @param {string} colorMode - カラーモード
*/
const setColor = (pageType, colorMode) => {
const configIndex = parseInt(colorMode);
Array.prototype.forEach.call(KEYS, (k) => {
Array.prototype.forEach.call(document.querySelectorAll(SELECTOR_DIC[k]), (e) => {
Array.prototype.forEach.call(CSS_DIC[k], (c) => {
e.style.setProperty(c, COLOR_CONFIGS[configIndex][k][c]);
});
});
});
// パンくずリスト
Array.prototype.forEach.call(document.querySelectorAll('.p-page-breadcrumb__list .c-page-breadcrumb__item:not(:last-child)'), (x) => {
x.addEventListener('mouseover', () => {
if (getColorMode() === COLOR_MODE.DARK_COLOR) {
x.children[0].style.color = '#e0ffff'
} else {
x.children[0].style.color = '#5d5d5d';
}
});
x.addEventListener('mouseout', () => {
if (getColorMode() === COLOR_MODE.DARK_COLOR) {
x.children[0].style.color = '#5d5d5d';
} else {
x.children[0].style.color = '#a9a9a9';
}
});
});
switch (pageType) {
case "news":
case "media":
setHoveredFontColor('.cale_prev a, .cale_month a, .cale_next a, .cale_table tbody tr td a');
Array.prototype.forEach.call(document.querySelectorAll('.p-news__item, .p-other__item, .p-schedule__item'), (x) => {
x.addEventListener('mouseover', () => {
if (getColorMode() === COLOR_MODE.DARK_COLOR) {
x.style.background = `linear-gradient(${DARK_HOVER_BG_UPPER_CL}, 20%, ${DARK_HOVER_BG_LOWER_CL})`;
x.style.outline = `1px solid ${DARK_HOVER_BORDER_CL}`
x.style.color = `${DARK_FONT_CL}`;
x.children[0].style.color = `${DARK_FONT_CL}`;
const time = x.querySelector('time');
if (time) { time.style.color = `${DARK_FONT_CL}`;}
} else {
x.style.background = `linear-gradient(${HOVER_BG_UPPER_CL}, 20%, ${HOVER_BG_LOWER_CL})`;
x.style.outline = `1px solid ${HOVER_BORDER_CL}`
x.style.color = `${DEFAULT_FONT_CL}`;
x.children[0].style.color = `${DEFAULT_FONT_CL}`;
const time = x.querySelector('time');
if (time) { time.style.color = `${DEFAULT_FONT_CL}`;}
}
});
});
Array.prototype.forEach.call(document.querySelectorAll('.p-news__item, .p-other__item, .p-schedule__item'), (x) => {
x.addEventListener('mouseout', () => {
x.style.background = `transparent`;
x.style.outline = `1px solid transparent`
x.style.color = `${DEFAULT_FONT_CL}`;
x.children[0].style.color = `${DEFAULT_FONT_CL}`;
const time = x.querySelector('time');
if (time) { time.style.color = `${DEFAULT_FONT_CL}`;}
});
});
break
case "diary/detail":
case "diary/member":
setHoveredFontColor('.cale_prev a, .cale_month a, .cale_next a, .cale_table tbody tr td a');
break;
// 動画
case "video":
case "contents":
// 動画タイトル
Array.prototype.forEach.call(document.querySelectorAll('.p-video__item.p-video__item--medium'), (x) => {
x.addEventListener('mouseover', () => {
if (getColorMode() === COLOR_MODE.DARK_COLOR) {
x.children[1].children[0].style.color = '#e0ffff'
} else {
x.children[1].children[0].style.color = '#5d5d5d';
}
});
x.addEventListener('mouseout', () => {
x.children[1].children[0].style.color = '#a9a9a9';
});
});
break;
case "event":
Array.prototype.forEach.call(document.querySelectorAll('.p-shakehands__item'), (x) => {
x.addEventListener('mouseover', () => {
if (getColorMode() === COLOR_MODE.DARK_COLOR) {
x.children[1].children[1].style.color = '#e0ffff'
x.children[1].children[2].style.color = '#e0ffff'
} else {
x.children[1].children[1].style.color = '#5d5d5d';
x.children[1].children[2].style.color = '#5d5d5d';
}
});
x.addEventListener('mouseout', () => {
x.children[1].children[1].style.color = '#8babab';
x.children[1].children[2].style.color = '#8babab';
});
});
Array.prototype.forEach.call(document.querySelectorAll('.p-other__item'), (x) => {
x.addEventListener('mouseover', () => {
if (getColorMode() === COLOR_MODE.DARK_COLOR) {
x.children[0].style.color = '#e0ffff'
} else {
x.children[0].style.color = '#5d5d5d';
}
});
x.addEventListener('mouseout', () => {
x.children[0].style.color = '#8babab';
});
});
Array.prototype.forEach.call(document.querySelectorAll('.c-pager__item--count a'), (x) => {
x.addEventListener('mouseover', () => {
if (getColorMode() === COLOR_MODE.DARK_COLOR) {
x.style.color = '#e0ffff'
} else {
x.style.color = '#5d5d5d';
}
});
x.addEventListener('mouseout', () => {
x.style.color = '#8babab';
});
});
break;
default:
;
}
};
const leftPosition = (colorMode) => (colorMode === COLOR_MODE.DEFAULT_COLOR) ? "-3px" : "36px";
/**
* カラーモードトグルのスイッチボタンを生成
* @param {COLOR_MODE} colorMode
* @returns
*/
const createSwitchButton = (colorMode) => {
const switchButton = document.createElement('div');
switchButton.classList.add("switch_button");
const left = leftPosition(colorMode);
switchButton.style.cssText
= `left: ${left};
margin-top: -5px;
width: 24px;
height: 24px;
border-radius: 50%;
position: absolute;
background-color: white;
box-shadow: 1px 1px 7px #B7B7B7, -1px -1px 4px #CECECE inset;
transition: left .3s ease-in-out;`;
return switchButton;
};
const initilizeColorToggle = (colorMode) => {
const menuList = document.querySelector('.p-menu__list');
if (menuList) {
const colorToggle = document.createElement('div');
colorToggle.classList.add("color_toggle");
menuList.appendChild(colorToggle);
colorToggle.style.cssText
= `margin-top: 2px;
margin-left: 16px;
width: 60px;
height: 18px;
border: solid 2px gray;
border-radius: calc(infinity * 1px);
background: linear-gradient(to right, #fff 0%, #fefefe 30%, #606080 70%, #404060 80%, #202040 100%);
position: relative;
cursor: pointer;
transition: background-color .2s ease-in-out;`;
const switchButton = createSwitchButton(colorMode);
colorToggle.appendChild(switchButton);
colorToggle.addEventListener("click", () => {
const colorMode = toggleColorMode();
switchButton.style.left = leftPosition(colorMode);
setColor(getPageType(), colorMode);
});
return true;
} else {
return false;
}
};
const initialiseStyles = () => {
const toggleSwitch = document.querySelector('.color_toggle');
if (! toggleSwitch) {
const colorMode = getColorMode();
initilizeColorToggle(colorMode);
analyzeDefaultColor();
setColor(getPageType(), colorMode);
}
};
const doProcessList = (func) => {
const isDetail = ((location.href).match(new RegExp('\/detail\/')) != null);
if (isDetail) {
return;
}
const PAGE_TYPE_ERROR_MSG = "Processing of out-of-scope pages. Check the settings @match.";
const pageType = (location.href).match(new RegExp('\/(media|news)\/'))[1];
if (! pageType) {
throw new Error(PAGE_TYPE_ERROR_MSG);
}
const SELECTORS = ((x) => {
switch (x) {
case "news":
return {"pArrow": ".p-news__pager-arrow",
"cArrowLeft": ".c-news_pager-arrow--left",
"cArrowRight" : ".c-news_pager-arrow--right",
"cPageMonth": ".c-news__page_month",
"cPageYear": ".c-news__page_year",
"lMainContentsUl": ".l-maincontents--news ul",
"pDate": ".p-news__page_date",
"lSubContents": ".l-sub-contents--news"};
case "media":
return {"pArrow": ".p-schedule__pager-arrow",
"cArrowLeft": ".c-schedule_pager-arrow--left",
"cArrowRight" : ".c-schedule_pager-arrow--right",
"cPageMonth": ".c-schedule__page_month",
"cPageYear": ".c-schedule__page_year",
"lMainContentsUl": ".l-maincontents--schedule ul",
"pDate": ".p-schedule__page_date",
"lSubContents": ".l-sub-contents--schedule"};
default:
throw new Error(PAGE_TYPE_ERROR_MSG);
}
})(pageType);
const pageYear = ((y) => {return (y === null || y === undefined) ? null : y.innerText;})(document.querySelector(SELECTORS['cPageYear']));
const now = new Date();
if (pageYear !== "年") {
//console.log("日向坂46 cal");
const daysOfWeek = ['Su', 'M', 'Tu', 'W', 'Th', 'F', 'Sa'];
const year = now.getFullYear();
const month = now.getMonth() + 1;
// 月初
const first = new Date(year, month - 1, 1);
// 月末
const end = new Date(year, month, 0);
// 月末の日
const endDate = end.getDate();
// 前月末
const endPrevMonth = new Date(year, month - 1, 0);
// 前月末の日
const endDatePrevMonth = endPrevMonth.getDate();
// 月初の曜日
const firstDayOfWeek = first.getDay();
let numOfDay = 1;
let calendarHtml = '';
const pageMonth = ((m) => {return m !== null ? m.innerText : "";})(document.querySelector(SELECTORS['cPageMonth']));
const leftArrowHref = document.querySelector(SELECTORS['cArrowLeft']).children[0].href;
const rightArrowHref = document.querySelector(SELECTORS['cArrowRight']).children[0].href;
calendarHtml += '<table class="cale_table" style="width: 210px; margin: -130px 0 20px -50px;">';
calendarHtml += `<tr><td></td><td class="cale_prev"><a id="cale_prev" href="${leftArrowHref}">＜</a></td>
<td class="cale_month" colspan="3">${pageYear} ${pageMonth}</td><td class="cale_next"><a href="${rightArrowHref}">＞</a></td><td></td></tr>`;
calendarHtml += '<tr>';
for (let i = 0; i < daysOfWeek.length; i++) {
calendarHtml += '<td class="cale_wek' + i + '">' + daysOfWeek[i] + '</td>';
}
calendarHtml += '</tr>';
for (let w = 0; w < 6; w++) {
calendarHtml += '<tr>'
for (let d = 0; d < 7; d++) {
if (w == 0 && d < firstDayOfWeek) {
// 前月
let num = endDatePrevMonth - firstDayOfWeek + d + 1;
calendarHtml += '<td class="cale_day' + d + ' is-disabled">' + num + '</td>';
} else if (numOfDay > endDate) {
// 次月
let num = numOfDay - endDate;
calendarHtml += '<td class="cale_day' + d + ' is-disabled">' + num + '</td>';
numOfDay++;
w = 99; // カレンダーの最下端が次月の日付のみになるのを防止
} else {
calendarHtml += '<td class="cale_day' + d + '">' + numOfDay + '</td>';
numOfDay++;
}
}
calendarHtml += '</tr>'
}
calendarHtml += '</table>';
document.querySelector(SELECTORS["lSubContents"]).insertAdjacentHTML('afterbegin', calendarHtml);
}
// 選択カテゴリ（ALL / 握手会・・・）
const categorySelectorSuffix
= ((c) => {
let value = "";
if (c.length == 0) {
value = "all";
} else {
const tempValue = c[0].value;
switch (tempValue) {
case "birthday":
value = "birth";
break;
case "fanclub":
value = "fanclubonly";
break;
default:
value = tempValue;
}
}
return value;
})(document.getElementsByName("cd"));
const categoryElem = document.querySelector('.c-button-category.category_' + categorySelectorSuffix);
const categoryStyles = window.getComputedStyle(categoryElem);
const categoryParent = categoryElem.parentElement;
categoryParent.style.marginLeft = "-5px";
categoryParent.style.paddingLeft = "4.5px";
categoryParent.style.marginRight = "40px";
categoryElem.style.color = `rgb(from ${categoryStyles.color} calc(r - 64) calc(g - 64) calc(b - 64))`;
categoryParent.style.backgroundColor = `rgb(from ${categoryStyles.color} calc(r + 64) calc(g + 64) calc(b + 64))`;
categoryParent.style.border = `solid 0.5px ${categoryElem.style.color}`;
// 詳細ページの場合 処理を終了
if (isDetail) {
return;
}
/*
* フルブラウザ上ではNEWS/スケジュールが多い月は見づらいため
* 自動スクロール、表示色を追加設定
*/
const PAGER_MARGIN_TOP = 20;
const PASTDAY_BG_CL = "#ededf0";
const TODAY_DATE_CL = "orange";
const TODAY_BG_CL = "#fafeff";
const TODAY_BORDER_CL_UPPER = "#d7eeff";
const TODAY_BORDER_CL_LOWER = "#5bbee5";
const styleElem = document.createElement("style");
styleElem.setAttribute("rel", "stylesheet");
let styleText = `
.is-disabled {
color: silver;
}
.p-page-head {
padding-top: 20px;
}
.c-pager__item a svg {
fill: #7ab6db;
}
.schedule__list-pastday {
background-color: ${PASTDAY_BG_CL};
}
.schedule__list-today {
background-color: ${TODAY_BG_CL};
border: 2px solid;
border-image: linear-gradient(to right bottom, ${TODAY_BORDER_CL_UPPER}, ${TODAY_BORDER_CL_LOWER}) 1;
}
.schedule__date-today {
color: ${TODAY_DATE_CL};
}
.p-news__item, .p-schedule__item {
outline-offset: 1px;
}
.module-modal.js-member-filter .mordal-box .member-box ul li p.check input[type=checkbox]:checked+label:before {
background-color:#6bcaea;
border:1px solid #6bcaea;
}`;
styleElem.textContent = styleText;
document.head.appendChild(styleElem);
// リスト上方 "xxxx年 yy月" 行
const pDate = document.querySelector(SELECTORS["pDate"]);
// "xxxx年" ではなく "年"のみの場合
if (pageYear === "年") {
const cPageYear = document.querySelector(SELECTORS["cPageYear"]);
cPageYear.innerText = String(now.getFullYear()) + "年";
cPageYear.style.fontSize = "4.8rem";
document.querySelector(SELECTORS["cPageMonth"]).remove();
document.querySelector(SELECTORS["pArrow"]).remove();
}
pDate.style.marginBottom = "5px";
// ニュース/スケジュール リスト
const lMainContentsUl = document.querySelector(SELECTORS["lMainContentsUl"]);
const lMainContentsUlTop = lMainContentsUl.getBoundingClientRect().top;
const pDateHeight = pDate.offsetHeight;
// リスト下方 前月/次月ページャ
const pPager = document.querySelector(".p-pager");
// "xxxx年" ではなく "年"のみの場合
if (pageYear === "年") {
pPager.innerText = "";
pPager.style.marginTop = "0px";
} else {
pPager.style.marginTop = `${PAGER_MARGIN_TOP}px`;
}
const pPagerHeight = PAGER_MARGIN_TOP + pPager.offsetHeight;
const lMainContentsUlHeight = document.documentElement.clientHeight - pDateHeight - pPagerHeight;
// スクロール表示
lMainContentsUl.setAttribute("style", `height:${lMainContentsUlHeight}px; overflow: scroll; border: solid 1px #32a1ce;`);
const scrollTop = lMainContentsUlTop - pDateHeight;
// スクロール位置リセット 〜「再読み込み」ボタン押下時の位置ズレ対応
scrollTo(0, 0);
// リスト位置までページ内で縦スクロール
scrollTo({
top: scrollTop,
behavior: "smooth"
});
const nowYearMonth = String(now.getFullYear()) + String(now.getMonth() + 1).padStart( 2, '0');
const dispYear = document.querySelector(SELECTORS['cPageYear']);
const dispMonth = document.querySelector(SELECTORS['cPageMonth']);
// 表示対象の年月（ex.202404）を取得。設定がなければ当月
const dispYearMonth
= ((y, m) => {return (y == null || m == null) ? nowYearMonth : y.innerText.replace('年', '') + m.innerText.replace('月', '')})(dispYear, dispMonth);
// NEWS/スケジュールが当月以前の月の場合
if (dispYearMonth < nowYearMonth) {
lMainContentsUl.classList.add('schedule__list-pastday');
}
const createAnchor = (y, d) => `<a href="javascript:document.querySelector('${SELECTORS['lMainContentsUl']}').scroll({top:${y}, behavior: 'smooth'});">${d}</a>`;
if (pageType === "news") {
doProcessNews(lMainContentsUlTop, createAnchor);
} else {
doProcessMedia(lMainContentsUl, lMainContentsUlTop, dispYearMonth, now, nowYearMonth, createAnchor);
}
};
const PENLIGHT_COLOR = {
"1": ["R", "O"],
"2": ["PU", "Y"],
"3": ["PG", "PG"],
"4": ["R", "R"],
"5": ["B", "B"],
"6": ["W", "W"],
"7": ["PB", "PU"],
"8": ["Y", "Y"],
"9": ["W", "PK"],
"10": ["PB", "SP"],
"11": ["SP", "SP"],
"12": ["Y", "PB"],
"13": ["SP", "Y"],
"14": ["V", "W"],
"15": ["PU", "PU"],
"16": ["O", "O"],
"17": ["O", "W"],
"18": ["SP", "PG"],
"19": ["R", "SP"],
"20": ["W", "PB"],
"21": ["R", "EG"],
"22": ["G", "PU"],
"23": ["O", "B"],
"24": ["PG", "Y"],
"25": ["SP", "O"],
"26": ["Y", "W"],
"27": ["PU", "B"],
"28": ["PB", "PK"],
"29": ["O", "R"],
"30": ["Y", "R"],
"31": ["PB", "O"],
"32": ["B", "Y"],
"33": ["SP", "B"],
"34": ["V", "R"],
"35": ["W", "EG"],
"36": ["B", "W"]
};
const COLOR_DIC = {
"PB": {"name": "pastel blue", "code": "49bdf0"},
"EG": {"name": "emerald green", "code": "50c878"},
"G": {"name": "green", "code": "00ff00"},
"PG": {"name": "prarl green", "code": "b4ddc0"},
"LG": {"name": "light green", "code": "90ee90"},
"Y": {"name": "yellow", "code": "ffff00"},
"O": {"name": "orange", "code": "ffa500"},
"R": {"name": "red", "code": "ff0000"},
"W": {"name": "white", "code": "ffffff"},
"SP": {"name": "sakura pink", "code": "ffdbed"},
"PK": {"name": "pink", "code": "ffc0cb"},
"PP": {"name": "passion pink", "code": "fc0fc0"},
"PU": {"name": "purple", "code": "800080"},
"V": {"name": "violet", "code": "ee82ee"},
"B": {"name": "blue", "code": "0000ff"}
};
HTMLElement.prototype.setPenlightColor = function(color_01, color_02) {
this.style.borderLeftColor = "#" + color_01;
this.style.borderTopColor = "#" + color_01;
this.style.borderRightColor = "#" + color_02;
this.style.borderBottomColor = "#" + color_02;
this.style.boxShadow = `
-8px 0px 8px -4px #${color_01},
0px -8px 8px -4px #${color_01},
8px 0px 8px -4px #${color_02},
0px 8px 8px -4px #${color_02},
inset 0px 2px 8px white,
inset 2px 0px 8px white,
inset 0px -2px 8px white,
inset -2px 0px 8px white,
inset 0px 8px 8px #${color_01},
inset 8px 0px 8px #${color_01},
inset 0px -8px 8px #${color_02},
inset -8px 0px 8px #${color_02},
inset 0px 8px 4px rgb(from #${color_01} calc(r + 128) calc(g + 128) calc(b + 128)),
inset 8px 0px 4px rgb(from #${color_01} calc(r + 128) calc(g + 128) calc(b + 128)),
inset 0px -8px 4px rgb(from #${color_02} calc(r + 128) calc(g + 128) calc(b + 128)),
inset -8px 0px 4px rgb(from #${color_02} calc(r + 128) calc(g + 128) calc(b + 128)),
-3px 0px 8px -4px white,
0px -3px 8px -4px white,
3px 0px 8px -4px white,
0px 3px 8px -4px white,
-5px 0px 8px -4px rgb(from #${color_01} calc(r + 128) calc(g + 128) calc(b + 128)),
0px -5px 8px -4px rgb(from #${color_01} calc(r + 128) calc(g + 128) calc(b + 128)),
5px 0px 8px -4px rgb(from #${color_02} calc(r + 128) calc(g + 128) calc(b + 128)),
0px 5px 8px -4px rgb(from #${color_02} calc(r + 128) calc(g + 128) calc(b + 128))
`;
};
const doProcessMember = () => {
document.appendStyle(`
.p-member__item a div img {
border: 1px solid;
border-radius: 8px;
padding: 0.2rem;
}`
);
Array.prototype.forEach.call(document.querySelectorAll('.p-member__item'), (m) => {
const color_set = PENLIGHT_COLOR[m.dataset.member];
const code_01 = COLOR_DIC[color_set[0]]["code"];
const code_02 = COLOR_DIC[color_set[1]]["code"];
const img = m.children[0].children[0].children[0];
img.setPenlightColor(code_01, code_02);
});
};
const doProcessMemberDetail = () => {
const img = document.querySelector('.c-member__thumb > img:nth-child(1)');
if (img) {
document.appendStyle(`
.c-member__thumb img {
border: 3px solid;
border-radius: 8px;
padding: 0.2rem;
}`
);
const ct = (location.href).match(/artist\/([0-9]{2})/)[1];
const color_set = PENLIGHT_COLOR[ct];
const code_01 = COLOR_DIC[color_set[0]]["code"];
const code_02 = COLOR_DIC[color_set[1]]["code"];
img.setPenlightColor(code_01, code_02);
}
};
const DELTA = 2;
const doProcessNews = (lMainContentsUlTop, createAnchor) => {
const newsList = Array.prototype.map.call(document.getElementsByClassName("c-news__date"),
(x) => [parseInt(x.innerText.match(new RegExp(/\d{4}\.\d{2}\.(\d{2})/))[1]), x.getBoundingClientRect().top] );
const dayMap = new Map();
Array.prototype.forEach.call(newsList, (x) => {
if (! dayMap.has(x[0]) || x[1] < dayMap.get(x[0])) {
// Map(day, top)
dayMap.set(x[0], x[1]);
}
});
Map.prototype.forEach.call(dayMap, (top, day) => {
Array.prototype.some.call(document.querySelectorAll("table.cale_table tbody tr td"), (td) => {
if (!td.classList.contains("is-disabled") && day === parseInt(td.innerText)) {
td.innerHTML = createAnchor((top - lMainContentsUlTop - DELTA), day);
return true;
}
});
});
};
// SCHEDULE
const doProcessMedia = (lMainContentsUl, lMainContentsUlTop, dispYearMonth, now, nowYearMonth, createAnchor) => {
const today = now.getDate();
lMainContentsUl.scroll(0, 0);
let isScrolled = false;
Array.prototype.forEach.call(document.getElementsByClassName("c-schedule__date--list"), (dayElem) => {
// 日付(innerText)の文字列 '(日付)\n(曜日)' から日付を抽出
let day = ((x) => {return parseInt(x.substr(0, x.indexOf(`\n`)));})(dayElem.innerText);
Array.prototype.some.call(document.querySelectorAll("table.cale_table tbody tr td"), (td) => {
if ( !td.classList.contains("is-disabled") && day === parseInt(td.innerText)) {
td.innerHTML = createAnchor((dayElem.getBoundingClientRect().top - lMainContentsUlTop - DELTA), day);
return true;
}
});
// 表示スケジュールが当月の場合
if (dispYearMonth === nowYearMonth) {
// 過去日
if (day < today) {
dayElem.parentElement.classList.add("schedule__list-pastday");
// 「今日」（ページを表示した日付）
} else if (day === today) {
dayElem.classList.add("schedule__date-today");
dayElem.parentElement.classList.add("schedule__list-today");
}
if (day >= today) {
dayElem.parentElement.classList.add("schedule__list-future");
if (!isScrolled) {
// 「今日」以降（「今日」を含めて）で最早のスケジュール日要素にスクロール
lMainContentsUl.scroll({
top: dayElem.getBoundingClientRect().top - lMainContentsUlTop - DELTA,
behavior: "smooth"
});
isScrolled = true;
}
}
}
});
};
const doProcessDiscography = () => {
setReleaseYear('.c-disco__year');
styleText = `
.fixed {
width: 12rem;
position: fixed;
top: 60px;
left: 40px;
z-index: 1;
font-size:larger;
}
.release {
line-height: 20px;
}
.l-container {
margin-top: -280px;
}
.c-disco__year {
padding-top: 20px;
}
.c-disco__year {font-size: 4rem; width: 12rem;}
.c-disco__category {font-size: 14px;}
.p-page-head-sub--first {padding-top: 10px;}
`;
document.appendStyle(styleText);
};
const doProcessFormation = () => {
setReleaseYear('.c-page-subtitle');
styleText = `
.l-container {
margin-top: -240px;
}
.formation_image :not(.small_f) li:hover {
height: 120px;
margin: -15.5px;
width: 110px;
}
.formation_image li:hover i {
font-size: 16px;
}
.formation_image li i {
font-size: 14px;
}
.small_f span:hover {
height: 120px;
margin: -16px -0;
width: 116px;
}
.fixed {
width: 12rem;
position: fixed;
top: 60px;
left: 40px;
z-index: 1;
font-size:larger;
}
.release {
line-height: 20px;
}
.p-page-head-sub--first {
padding-top: 20px;
}`;
document.appendStyle(styleText);
};
// Blog
const NAME_ICON_MAP = {
"井口 眞緒" : "🍷",
"潮紗 理菜" : "🍀",
"柿崎 芽実" : "🐱",
"影山 優佳" : "⚽",
"加藤 史帆" : "🐻",
"齊藤 京子" : "🍜",
"佐々木 久美" : "🦒",
"佐々木 美玲" : "🍞",
"高瀬 愛奈" : "🐶",
"高本 彩花" : "🍒",
"東村 芽依" : "🍓",
"金村 美玖" : "🍣",
"河田 陽菜" : "🐼",
"小坂 菜緒" : "🦕",
"富田 鈴花" : "🛣️",
"丹生 明里" : "🐸",
"濱岸 ひより" : "🐣",
"松田 好花" : "🐙",
"宮田 愛萌" : "⛩️",
"渡邉 美穂" : "🏀",
"上村 ひなの" : "●🔻●",
"髙橋 未来虹" : "🌈",
"森本 茉莉" : "🐨",
"山口 陽世" : "⚾",
"石塚 瑶季" : "💎",
"岸 帆夏" : "⛵",
"小西 夏菜実" : "📞",
"清水 理央" : "🫶",
"正源司 陽子" : "🍫",
"竹内 希来里" : "🌟",
"平尾 帆夏" : "⛵️",
"平岡 海月" : "🪼",
"藤嶌 果歩" : "🐏",
"宮地 すみれ" : "🦥",
"山下 葉留花" : "🌱",
"渡辺 莉奈" : "🎀",
"五期生リレー" : "五",
"ポカ" : "🐦️"
};
/** yyyy → 'yy */
const shortenYear = (x) => {
Array.prototype.forEach.call(document.querySelectorAll(x), (y) => {
const text = y.innerText;
y.innerText = "'" + text.replace(/\d{2}(\d{2}\.)/, '$1');
});
};
const getBackgroundImageUrl = (el) => {
const bg = window.getComputedStyle(el).backgroundImage;
const urlMatch = bg.match(/url\(["']?(.*?)["']?\)/);
return urlMatch ? urlMatch[1] : null;
}
const getComplementaryColor = (r, g, b, threshold = 30) => {
const isNearlyWhite = r >= 255 - threshold && g >= 255 - threshold && b >= 255 - threshold;
if (isNearlyWhite) {
return '#202040';
}
const isNearlyBlack = r <= threshold && g <= threshold && b <= threshold;
if (isNearlyBlack) {
return '#eeeeee';
}
// 通常の補色
const compR = 255 - r;
const compG = 255 - g;
const compB = 255 - b;
return `rgb(${compR}, ${compG}, ${compB})`;
};
const updateFontColorOnImage = (selector, imageUrl) => {
const img = new Image();
img.crossOrigin = "anonymous"; // CORS対策（必要）
img.src = imageUrl;
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
let r = 0, g = 0, b = 0, count = 0;
for (let i = 0; i < data.length; i += 4) {
r += data[i];
g += data[i + 1];
b += data[i + 2];
count++;
}
r = Math.round(r / count);
g = Math.round(g / count);
b = Math.round(b / count);
Array.prototype.forEach.call(document.querySelectorAll(selector), (e) => {
e.style.color = getComplementaryColor(r, g, b);
});
};
img.onerror = () => {
console.error("画像の読み込みに失敗しました");
};
};
const updateHeaderFontColor = (imgSelector, textSelector) => {
const blogContainer = document.querySelector(imgSelector);
const imageUrl = getBackgroundImageUrl(blogContainer);
if (imageUrl) {
updateFontColorOnImage(textSelector, imageUrl);
}
}
const createRelayPhoto = () => {
const relayPhoto = document.createElement('div');
relayPhoto.style.backgroundImage = "url(https://cdn.hinatazaka46.com/images/14/fa2/dcd3c79b9d66efeed5a13af038129.jpg)";
relayPhoto.style.backgroundSize = "cover";
relayPhoto.style.backgroundPosition = "center";
relayPhoto.style.backgroundRepeat = "no-repeat";
relayPhoto.style.width = "220px";
relayPhoto.style.height = "122px";
relayPhoto.style.position = "relative";
relayPhoto.style.zIndex = "2";
return relayPhoto;
};
/** ブログ */
const blogDetail = () => {
const pBlogArticleHead = document.querySelector('.p-blog-article__head');
const articleHeight = document.documentElement.clientHeight - pBlogArticleHead.getBoundingClientRect().bottom + 20;
const styleElem = document.createElement("style");
styleElem.setAttribute("rel", "stylesheet");
styleElem.textContent = `
.c-blog-article__title {
--height: auto;
height: var(--height);
transition: height .3s ease-out;
}
.c-blog-article__title.open {
height: var(--height);
overflow: visible;
white-space: wrap;
}
.c-blog-article__title.hidden {
height: 58px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis "… 🔽";
}
.c-blog-article__text {
height: ${articleHeight}px; width: 640px; overflow: scroll; border: none;
}
.p-pager {
margin-top: 10px;
}
.p-button--center {
padding-top: 0;
margin-top: -20px;
}
.c-button-grad.c-button-grad--big {
min-width: 280px;
}`;
document.head.appendChild(styleElem);
const articleTitleDiv = document.querySelector('.c-blog-article__title');
const height = articleTitleDiv.scrollHeight + 'px';
articleTitleDiv.style.setProperty("--height", height);
articleTitleDiv.style.marginBottom = "0px";
articleTitleDiv.classList.add("hidden");
if (articleTitleDiv.offsetWidth < articleTitleDiv.scrollWidth) {
const articleTitle = articleTitleDiv.innerText;
articleTitleDiv.innerText = articleTitle + "🔼";
articleTitleDiv.style.cursor = "pointer";
articleTitleDiv.addEventListener('click', function() {
articleTitleDiv.classList.toggle("hidden");
articleTitleDiv.classList.toggle("open");
});
}
};
/** 記事一覧 */
const blogList = () => {
const blogGroupHeight = document.documentElement.clientHeight;
const styleText = `
html {
scroll-behavior: smooth;
}
.c-blog-member__icon--all {
height: 60px;
}
.p-button {
padding-top: 0;
}
.d-article {
line-height: 20px;
margin-bottom: 8px;
}
.s-member-icon {
font-size: larger
}
.s-article-title {
font-size: smaller;
}
.s-datetime {
font-size: smaller;
}
.l-maincontents--blog {
height: ${blogGroupHeight}px;
overflow: scroll;
border: none;
}
.c-blog-article__title {
margin-bottom: 0px;
}`;
document.appendStyle(styleText);
shortenYear('.c-blog-article__date');
const titleList = document.createElement('div');
titleList.setAttribute("class", "s-blog__index");
const memberName = document.querySelector('.c-blog-member__name');
if (memberName) {
if (memberName.innerText == "ポカ") {
const profileTable = document.querySelector('.p-blog-member__info-table');
profileTable.after(titleList);
} else {
const profileButton = document.querySelector('.p-button');
profileButton.after(titleList);
}
// リレーブログ
} else {
const info = document.querySelector('.p-blog-member__info');
info.after(titleList);
}
const createAnchor = (idx, datetime, icon, articleTitle) => `<div class="d-article"><a href="#article${idx}">
<span class="s-member-icon">${icon}</span>
<span class="s-article-title">${articleTitle}</span><br/><span class="s-datetime">${datetime}</span>
</a></div>`;
const lMainContentsBlogTop = document.querySelector('.l-maincontents--blog').getBoundingClientRect().top;
Array.prototype.forEach.call(document.querySelectorAll('.p-blog-article'), (x, i) => {
x.setAttribute('id', "article" + i);
const datetimeDiv = x.childNodes[1].childNodes[3].childNodes[1];
const datetime = datetimeDiv.firstChild.textContent.trim();
const articleTitleDiv = x.childNodes[1].childNodes[1];
const articleTitle = articleTitleDiv.firstChild.textContent.trim();
// メンバー混合リストの場合があるので名前を取得
const memberName = x.childNodes[1].childNodes[3].childNodes[3].innerText;
const icon = NAME_ICON_MAP[memberName];
titleList.insertAdjacentHTML('beforeend', createAnchor(i, datetime, icon, articleTitle));
});
};
const doProcessBlog = (blogPageType) => {
const body = document.querySelector('body');
// 内容が空のページ（卒業メンバーのブログなど）
if (body.getElementsByTagName('*').length === 0) {
body.innerHTML = 'This page is no longer available';
return;
}
// ひなたフェス/握手会 は非メンバーブログ
const isNotMemberBlog = (location.search).match(/(cd=hinafes_blog|cd=event)/g);
if (isNotMemberBlog) {
return;
}
if (isMobile()) {
return;
}
updateHeaderFontColor('.p-blog-head-container', '.c-blog-page__title, .c-blog-page__subtitle, .c-blog-main__name');
if (blogPageType == "blog_top") {
return;
}
const blogEntryItem = document.querySelector('.p-blog-entry__item');
const blogEntryItemStyles = window.getComputedStyle(blogEntryItem, null);
const blogEntryItemHeight = parseInt(blogEntryItemStyles["height"].replace('px', ''));
const blogEntryItemMarginBottom = parseInt(blogEntryItemStyles["margin-bottom"].replace('px', ''));
const blogEntryItemHeightWithMargin = blogEntryItemHeight + blogEntryItemMarginBottom;
const styleText = `
.l-other-contents--blog {
margin-top: -160px;
padding-top: 20px;
--bg-color: #ffffff;
background-color: var(--bg-color);
}
.c-button-grad {
padding: 6px 40px 6px 32px;
}
.l-other-contents--blog::after, .c-button-grad.c-button-grad--big::after {
background-color: var(--bg-color);
}
.p-blog-head {
padding-top: 0;
}
.c-blog-page__title {
margin-bottom: 0;
}
.c-blog-member__icon {
margin-bottom: 10px;
}
.p-blog-member__head {
margin-bottom: 5px;
}
.c-blog-member__info-td__name {
padding-bottom: 5px;
}
.s-blog__index {
position: relative;
z-index: 50;
margin: 0 0 0 -50px;
height: 160px;
width: 290px;
overflow: scroll;
}
.cale_table {
margin-top: 0px;
}
.p-blog-article__head {
background-color: #f6ffff;
border: 1px solid #a0d8ef ;
border-radius: 10px;
}
.c-blog-article__title {
font-size: 2.5rem;
line-height: 58px;
color: #636767;
background-color: #e0ffff;
border-radius: 10px;
}
.c-blog-article__title, .c-blog-article__date {
text-indent: 5px;
}
.l-maincontents--blog {
margin-top:-160px;
padding-top: 20px;
}
.l-contents--blog-list {
padding-bottom: 0;
}
.c-blog-entry_area__title {
margin-bottom: 2px;
}
.p-blog-article {
padding-bottom: 0;
margin-bottom: 15px;
}
.p-blog-article__info {
margin-bottom: 10px;
}
.c-pager__item__text time {
font-size: 1.4rem;
}
.p-button--center {
padding: 0;
}
.p-blog-face__title {
margin-bottom: 10px;
}
.p-blog-face__group {
padding-top: 20px;
height: 460px;
width: 1100px;
overflow: scroll;
}
.p-blog-face__list {
width: 122px;
height: 162px;
}
.c-blog-face__item:hover {
margin-top: -6px;
margin-left: -6px;
width: 134px;
height: 134px;
}
.p-blog-entry__group {
padding-bottom: 0;
}
.p-blog-entry__list {
height: ${blogEntryItemHeightWithMargin * 3}px;
width: 230px;
overflow: scroll;
border: none;
margin-bottom: 20px;
}
.c-blog-entry__name {
font-size: 1.3rem;
}`;
document.appendStyle(styleText);
shortenYear('.c-blog-article__date time');
shortenYear('.c-blog-entry__name');
shortenYear('.c-pager__item__text time');
const memberIcon = document.querySelector('.c-blog-member__icon');
if (! memberIcon) {
const info = document.querySelector('.p-blog-member__info');
const relayPhoto = createRelayPhoto();
info.prepend(relayPhoto);
}
switch (blogPageType) {
case "blog_detail":
blogDetail();
break;
case "blog_list":
blogList();
break;
default:
throw new Error(PAGE_TYPE_ERROR_MSG);
}
// 半透明ヘッダーメニュー 高さ
const headerHeight = document.querySelector(".p-header-wrap").offsetHeight;
// スクロール位置リセット リロード時のズレ対応
scrollTo(0, 0);
// 文頭までスクロール
scrollTo({
top: document.querySelector(".p-blog-article__head").getBoundingClientRect().top - headerHeight,
behavior: "smooth"
});
};
const doProcessEvent = () => {
updateHeaderFontColor('.p-section--shakehands', '.c-shakehands-calender.pc, .c-shakehands-calender.pc a');
};
const doProcessFc = () => {
const styleText = `
.fc-logo {
padding: 15px;
}`;
document.appendStyle(styleText);
};
