EASELを小説サイト用に少しだけカスタムする

[カド]

twitterでの情報の奔流に疲れ、「むかしなつかしいひきこもりサイトを…できるだけ楽に…」と探していてEASELにたどりつきました。「作品」機能はまさに探していたものそのもので、こまかなショートコードなども素晴らしく使わせていただいています。

が、いろいろ流し込むうちにちょっと気になるところがいくつかあったので子テーマでカスタムしました。
小説サイトで同様のカスタムをしたい方がいらっしゃるかもなので共有します。

主にwindowsでの閲覧用が多いです。

■ページネーションの中身を逆にする

常に最新を見ていきたい、といった日記ブログやイラストアーカイブ式のサイトでは新しいほうが左、古いほうが右で良いのですが、小説で連作を投稿する際は直感的に逆にしたいなーと思ったため入れ替えました。
ついでにスマホでは横並びでなく上下に並ぶ形にしています。

方法は下記トピックに記載しています。

pagination singleの中身を逆にしたい

 

■windowsでフォントをかすれさせない

デフォルトでは游ゴシックというウェブデザインで今いけてるとされるおしゃれフォントを設定されているのですが、これはmacだとそのままでもきれいに表示されるもののwindowsだと細字として表示され、かすれてしまいます。
子テーマのstyle.cssに下記を記載することで、winでもmacでも中字が表示されます。
（正確にはmacだとうっすら太くなるのですが、winでのかすれかたに比べると許容範囲です）

body{
font-weight: 500;
}

 

■そもそも別のフォントにしたい

游ゴシックはいまどきのおしゃれフォントなのですが、日本語の可読性がいまいちという声も根強く、また、日々の小説をpixivや小説家になろうやnoteなどで読んでいるとどうにも違和感が出てしまいます。それらのサイトでは游ゴシックではないからです。

なのでおしゃれフォントに感謝しつつ、上記サイトと同様のフォントに変えてしまいました。
記述するのは子テーマのstyle.cssで、内容は下記です。
イラスト系サイトなら変えないほうがおしゃれだと思います。

body{font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;
}

 

■ついでにちょっと文字をでかくしたい

noteのフォントサイズが長文するする読めていいなーと思ったので。
記述するのは子テーマのstyle.cssで、内容は下記です。
これはあまり要らない人も多いかもです。

body{font-size: 115%;line-height:}

 

■パソコンのコンテンツ幅も短くしたい

イラスト、漫画サイト用テーマとしてはたっぷりとられたコンテンツ幅は最適なのですが、小説サイトでは一行あたりの文字数が多くなってパソコンで読むと視線移動が長くなり少ししんどめになりがちです。

pixivや小説家になろうやnoteなどを見比べつつ、コンテンツ幅せまめになるように調整しました。
引き換えに、サイドバーの入る日記系コンテンツだと文章部分がすごく狭くなるんですが、見ようによってはスマホっぽくていいんじゃないでしょうか（ポジティブ）。
記述するのは子テーマのstyle.cssで、内容は下記です。

@media only screen and (min-width: 768px) {
.wrap {
width: 760px;
}}
@media only screen and (min-width: 1030px) {
.wrap {width: 780px;
}}

 

■スムーススクロールのバグ

2021年4月24日の段階で、「最上部へ戻る」ボタンにバグがあります。トピック下記の方法で対処できます。

最上部へ戻るボタンのスムーズスクロールが効かない件

 

 

以上、EASELで小説サイト作ってる方にお役に立てば幸いです。

[カド]

■ついでにちょっと文字をでかくしたい

の、記述抜けてました。下記です。

body{font-size: 115%;line-height:2;}

[gtgt]

EASELのご利用ありがとうございます。

貴重なカスタマイズ例の情報共有、ありがとうございます。
実際にサイト運用されている方目線でのカスタマイズ、開発者として参考にさせていただきます。
また、別のトピックでも申し上げましたが、バグについてもご報告ありがとうございました。
今後のアップデートで対応したいです。

今後ともEASELをよろしくお願いいたします。

[Y]

わあ…情報提供ありがとうございます！

当方はEASELをずっと小説サイトで使わせていただいていて、フォントどうしようかな…見辛いな…とずっと思っていたのですが、カスタマイズを思いつきませんでした。

早速カスタマイズしたところ。確かにお洒落ではなくなりましたが、グッと読みやすい…！

本当に助かりました。

[toco]

ほんの少しのカスタマイズですが一応おいておきます
抜粋を注意書きとして機能させたい人向けカスタマイズです

【やりたいこと】
・抜粋に注意書きを挿入する。抜粋欄になにも書いてない場合には非表示にする
・上の注意書きをアーカイブページと小説本文両方に表示させる

【どのページを編集するのか】
①library>> parts>> works-text.php（アーカイブページ）
②single-works.php（小説本文ページ）

それぞれ子テーマにアップロードして親テーマはいじらないようにしてください（アーカイブページはディレクトリごとアップロードしてください）

【編集箇所】
使うコードは以下の通りです
<?php
$excerpt = get_the_excerpt();
if ( has_excerpt() ) : ?>
<i class=”fas fa-info-circle”></i><?php echo nl2br($excerpt); ?>
                                         <?php endif; ?>

<i class>～</i>はfont awosomeの表記に合わせております。必要ない方は削除してください。

①の場合
<div class=”excerpt”></div>の中身を上のタグと入れ替えてください

②の場合
<section class=”entry-content cf”>の下部に挿入してください
注意書きと小説本文とが分かりにくくなると困るという方はboxなどで囲むとよいかと思われます

[投稿者]

投稿