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

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

  • このトピックには2件の返信、1人の参加者があり、最後にgtgtにより3ヶ月前に更新されました。
2件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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をよろしくお願いいたします。

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