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

創作・同人サイトに特化した多機能WordPressテーマ フォーラム 雑談フォーラム EASELを小説サイト用に少しだけカスタムする

  • このトピックには4件の返信、1人の参加者があり、最後にtocoにより1週、 2日前に更新されました。
4件の返信スレッドを表示中
  • 投稿者
    投稿
    • #1065 返信
      カド
      ゲスト

      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で小説サイト作ってる方にお役に立てば幸いです。

    • #1066 返信
      カド
      ゲスト

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

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

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

    • #1071 返信
      gtgt
      キーマスター

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

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

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

    • #1104 返信
      Y
      ゲスト

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

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

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

      本当に助かりました。

    • #1167 返信
      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などで囲むとよいかと思われます

4件の返信スレッドを表示中
返信先: EASELを小説サイト用に少しだけカスタムする
あなたの情報: