赤穂屋本館

赤穂屋サイト構築メモ

この記事は2023年に執筆したもので、現在は情報が古くなっています。
参考にされる際は最新の情報を確認してからご利用ください。

当サイトで使用している素材、CSSやJavaScriptのコードを紹介する記事です。
※紹介しているコードはご自由にお使いいただいて構いません。報告はあると嬉しいくらいです。
※このページで紹介しているプラグインやコードをインストール・実行して発生した不具合について、管理人は責任を全て負わないものとします。お使いの際は自己責任でお願いします。
※また、可能な限り正確な情報を載せるようにしておりますが、誤った情報が含まれている可能性があります。


🍚サイト全体

基本

レンタルサーバー：WitchServerさん
構築　　　　　　：WordPressとてがろぐ
WPテーマ　　　：EASEL
当サイトのJavaScript、一部のCSSはWordPressプラグイン『Scripts n Styles』で管理しています。
本館、別館ともに配色はHappy Huesを参考にしています。


アイコン

随所で使っている絵文字以外のアイコンはFont Awesome、Phosphor Iconsです。


メイリオがメインフォントのページで斜体を適用させる

当サイトのfont-familyにはメイリオを指定しています。
そのため環境によってはメイリオで表示されますが、メイリオは斜体指定することができません。
でも斜体は使いたいので斜体のみfont-familyを変更しています。
em {
font-family: ‘Avenir’,’Helvetica Neue’,’Helvetica’,’Arial’,’Hiragino Sans’,’ヒラギノ角ゴシック’,YuGothic,’Yu Gothic’,’メイリオ’, Meiryo,’ＭＳ Ｐゴシック’,’MS PGothic’,sans-serif;
font-weight: 500;
}
▲Wordpress用。EASELのデフォルトのfont-familyを呼び出しています。

i.decorationI {
font-family: ‘ヒラギノ角ゴ Pro W3’, ‘Hiragino Kaku Gothic Pro’,’游ゴシック’, ‘Yu Gothic’, sans-serif;
font-weight: 500;
}
▲てがろぐ用。メイリオを消しただけ。


フッター


WordPressのウィジェット機能で、全ページに自動で挿入されるようにしています。

▼EASELではフッター左／中央／右から選べるので中央に配置しています。
<p class=”has-text-align-center”>
<a class=”pagebacklink” onclick=”window.history.back(); return false;” href=””><strong>前のページに戻る</strong></a>
<a href=”#”><strong>ページ最上部へ</strong>
</a>
</p>

「前のページに戻る」リンクはブラウザの戻る機能と全く同じ働きをするため、このリンクを表示したくないページがいくつか出てきます（トップページ、感想フォーム送信後お礼ページなど）。
このため、戻るリンクにclassを振ることで簡単に非表示にできるようにしています。
.pagebacklink{
display: none;
}
▲これで「前のページに戻る」リンクのみ非表示にできます。

.page-id-18 footer.footer #footer_widget {
display: none;
}
▲どちらのリンクも非表示にしたい場合はウィジェットごとdisplay:noneにします。
（この記述はトップページのもの）

🌟はじめに



年齢確認ページ：パスワード入力


てくてく様の簡易ログインをお借りしました。
CSSで入力欄などをカスタムできるのでオススメです。BASIC認証でもいいですが、個人的には設置の難度がどちらもあんまり変わらない気がします。
紹介されている手順通りに進めればできるはずですが、login.jsを作成する際に、
/* 入力されたパスワードが合っていたら、Cookieに保存 */
$.cookie(‘loginpass’,pass);
$.cookie(‘loginhash’,hash);
if(location.pathname.includes(‘index.html‘)){
▲ここの’index.html’の部分だけ、JavaScriptの記述法の都合で相対パスじゃないと動作しないので気を付けてください。
WordPressで管理されたサイトでも、Webアドレスを元に記述すればちゃんと動作します。

/* 入力されたパスワードが合っていたら、Cookieに保存 */
$.cookie(‘loginpass’,pass);
$.cookie(‘loginhash’,hash);
if(location.pathname.includes(‘/age-verification‘)){
▲当サイトだとこんな感じです。

/* index.htmlにいたらコンテンツページへ飛ぶ */
window.location.href = ‘https://ako-ya.in.net/example/‘;
▲直後のこちらは絶対パスでも飛べます。難しい。

.blur {
filter: blur(20px);
}
▲あと、紹介されているコードのままだと自分は心もとなかったのでぼかしを強くしています。


スパムに拾われないmailtoリンク


管理人紹介のスペースにmailtoリンクを貼っていますが、スパムにアドレスを拾われないように工夫しています。

<a class=”mto” href=”example+domain.com”>メール</a>
▲HTMLでは以上のようにaタグにmtoクラスを付与します。
メールアドレスの＠部分は＋で記述します。

// HTML要素をクラス名で取得
var elements = document.querySelectorAll(‘.mto’);
// 各要素にクリックイベントリスナーを追加
elements.forEach(function(element) {
element.addEventListener(‘click’, function(event) {
// デフォルトのクリック動作を無効にする
event.preventDefault();
// href属性の値を取得
var address = this.getAttribute(‘href’).replace(‘+’, ‘@’);
// メールリンクを生成して移動
location.href = ‘mailto:’ + address;
});
});
▲以上のコードを記述すればJavaScriptによって＋を＠に変換してもらえます。
【参考：mailtoでメールアドレスにリンクを貼る際にスパム対策をする】
jQueryの動かし方が分からなかったのでchatGPTに書き起こしなおしてもらいました。


メールフォーム

Contact Form 7とFlamingoで管理しています。
CSSでスタイルを変更できるのと、固定ページへの埋め込みが容易なので使用。
ヘルプを参照した際に英語のページに飛ばされることがありますが、日本人の方による開発なので日本語ページがあります。
span.wpcf7-list-item {
display: block;
}
▲チェックボックス・ラジオボタンを縦並びにするCSSコード。

.wpcf7-spinner {
background-color: #fffffe;
}
▲「送信」ボタン押下後のローディングアニメを非表示にするCSSコード。
display:noneにしていないのは多分理由があったはず……。
背景色と同化させるだけなので各々の背景色を入力してください。今気付いたけどtransparentでいいかも。

document.addEventListener(‘wpcf7mailsent’, function (event) {
location = ‘https://example’;
}, false);
▲送信ボタンを押してもらった後、お礼ページに飛ばすJSコードです。
【参考】送信後に異なる URL にリダイレクトさせるには

🎨イラスト


イラストの総枚数を表示する

外道のはからい様の【EASEL】サムネ右上にページ内の画像枚数を表示するを元にPHPを改造しました。


アイキャッチ画像を線で囲むCSS

figure.eye-catch img , figure.has_pass{
border-radius: 0.3em;
border: 1px solid #000;
}
▲イラスト（パスワード保護あり含む）と小説のアイキャッチ画像を線で囲めます。
恐らく投稿のアイキャッチも囲まれると思いますが未検証です。

📚小説


アイキャッチ画像をクリックして作品に遷移

EASELのPHPを触ります。※PHPファイルの改変は自己責任で行ってください。
library\parts\works-text.php
<?php if ( has_post_thumbnail() ) : ?>
<figure class=”eye-catch” itemprop=”image” itemscope itemtype=”https://schema.org/ImageObject”>
▲25行目くらいの記述を、以下のように書き換えます。

<?php if ( has_post_thumbnail() ) : ?>
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title_attribute(); ?>” class=”text”>
<figure class=”eye-catch” itemprop=”image” itemscope itemtype=”https://schema.org/ImageObject”>


🚩オフライン


固定ページは基本的にクラシックエディタで書いていますが、このページだけブロックエディタで書いています。
ブロックエディタは直感的に編集できる分、新しく本を書いたときに編集しやすそうだからです。

でも通販やサンプルへのリンクはEASEL謹製の機能を使っているのでクラシックエディタじゃないと呼び出せません……。
ちょっと難儀です。

🎠別館


基本

・本館とは違いてがろぐのみで構成・管理されています。
・スキンはテキストエディタで個人サイトをつくろう！様で配布されていたものを元に改造してます。

前のページに戻る　ページ最上部へ