Hugoで小説サイトを作成する　その4

サマリーに「……」を付ける。

これです。なんかぶっ切れてて変ですよね。私はなんか気になります。ので、「……」を付け足して、まだ続きがありますよーという風に変更します。
テーマの_default/summary.html"をコピーし、ルートディレクトリのlayouts/＿defaurt/に入れます。

layouts/_defaurt/summary.html"

	<div class="content list__excerpt post__content clearfix">
		{{ .Summary }}…… ⇐　これを足すだけ
	</div>

15行目に「……」を足すだけです。

スタイルシートでレイアウトを変更し、ダークモードで表示きるようにする。

基本、小説サイトは字が大きいほうが見やすいので、いつも真っ先に変更しています。あとはそれぞれの好みです。
スマホの普及でレスポンシブ対応が当たり前になり、それに合わせてレイアウト変更、また、近年はダークモード対応というところも増えてきました。私も年のせいか明るい画面が苦手で、会社でも家でもダークモードで作業しています。
というわけで、重い腰を上げてダークモード対応にサイトを変えます。（必要なレイアウト変更は終了しているものとします）

（1）config.tomlでcustom.cssがどのように指定されているか見ます。大体はルートディレクトリのstaticフォルダの中です。

├─static
│  ├─css
│  |   ├─custom.css
│  | 　└─share.css

（2）custom.cssに「@media (prefers-color-scheme: dark) {}」と記述します。

static/custom.css

@media (prefers-color-scheme: dark) {
	}

（3）firefoxにサイト画面を表示させ、右クリックし、調査をクリックします。
一番左の矢印をクリックし、変更させたい部分のセレクタを表示させます。

次に、変更したい要素を入力すると、その要素だけ変わります。変更したセレクタをcustom.cssに記述します。

static/custom.css

@media (prefers-color-scheme: dark) {
  body {
    background: black; # #000でも可
  }
}

こんな感じで、ダークモードで変更したい部分を指定し、custom.cssの@media (prefers-color-scheme: dark) セレクタに記述していきます。
完成したのがこれです。 上の部分が普通のレイアウト変更、 ずいぶん下にダークモード変更が記述されています。 static/custom.css

body {
  font-family: "メイリオ", "Meiryo", 'Lucida Grande', "sans-serif";
  font-size: 16px;
  font-size: .98rem;
  line-height: 1.8;
  background: #f0f0f0;
  word-wrap: break-word;
}

.wrapper {
  padding: 50px;
  background: #f8f8f8;
}

.logo {
  background: #f8f8f8;
}

.menu__list {
  background: #333333;
}

a {
  color: #4682b4;
}

p {
  color: #444;
}

.kuhaku {
  margin: 50px 0;
  height: 2px;
  border: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 20px;
  margin: 0 0 1.25rem;
  font-weight: 300;
  line-height: 1.3;
  color: #333;
}

h1 {
  font-size: 32px;
  font-size: 1.8rem;
}

h2 {
  font-size: 1.6rem;
}

h3 {
  font-size: 1.4rem;
}

h4 {
  font-size: 1.2rem;
}

h5 {
  font-size: 0.9rem;
}

h6 {
  font-size: 0.7rem;
}

.toc {
  background: #f9f9f9;
}

.toc__title {
  padding: 1px 10px;
}

.post__title {
  color: #999;
}

pre {
  color: #f9f9f9;
}

pre, code {
  background-color: #555;
  border: 1px solid #555;
  line-height: 1;
}


/* Button */

.menu__btn-title {
  background: #333333;
}

.btn {
  font-weight: 200;
  background: #333333;
  color: #fff;
}

.tags__item {
  float: left;
  margin: 0 6px 6px 0;
  margin: 0 .375rem .375rem 0;
  text-transform: uppercase;
  background: #999999;
}

.tags__link, .tags__link:hover {
  padding: 5px 10px;
}

.clap {
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
}

.footer {
  background: #333333;
}

@media screen and (max-width: 900px) {
  .wrapper {
    padding: 40px;
  }
}

@media screen and (max-width: 620px) {
  .wrapper {
    padding: 20px;
  }
  h1 {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 1.3rem;
  }
  h3 {
    font-size: 1.1rem;
  }
  h4 {
    font-size: 0.9rem;
  }
  h5 {
    font-size: 0.7rem;
  }
  h6 {
    font-size: 0.5rem;
  }
  .main__title {
    font-size: 28px;
    font-size: 1.5rem;
  }
}

@media (prefers-color-scheme: dark) {　#　⇐　以下、ダークモード変更部分
  body {
    background: black;
  }
  .logo {
    background: #333;
  }
  .logo__title {
    color: white;
  }
  .logo__tagline {
    color: white;
    border-top: 1px solid white;
  }
  .menu__list, .js .menu__list {
    background: #000;
  }
  .menu__link {
    background: #000;
  }
  .wrapper {
    background: #333;
  }
  .widget-search__form {
    background: #333;
  }
  .widget-search__field {
    background: #e3d5d5;
    border: 1px solid #999;
  }
  a {
    color: #f7d28b;
  }
  a:hover {
    color: #fff;
  }
  .content a, .warning a, .authorbox__description a {
    color: #f7d28b;
  }
  .clearfix {
    display: block;
    color: #fff;
  }
  h1, h2, h3, h4, h5, h6 {
    color: #fff;
  }
  .post__title {
    color: white;
  }
  .meta, .meta a {
    color: silver;
  }
  .meta__text {
    color: silver;
  }
  p {
    color: #c8c7c7;
  }
  .toc {
    background: #555;
    border-color: #333;
  }
  .toc__menu a {
    color: #e1dada;
    border-bottom: 1px solid #333;
  }
  pre code {
    color: #d2cece;
  }
  .menu__btn-title {
    background: #555;
  }
  .tags__badge {
    background: #f7d28b;
  }
  .btn {
    background: #f7d28b;
    color: #3c2e2e;
  }
}

忘れてました。ソーシャルアイコンも変更しなければ。こちらはshare.cssの後半部分を変更するだけです。
static/css/share.css

#後半部分に記述
@media (prefers-color-scheme: dark) {

.sns_button {
  box-shadow: inset 0 0 0 2px #f7d28b;
}

.sns_button a {
  color: #f7d28b;
}

.sns_button:hover {
  box-shadow: inset 0 0 0 22px silver;
}

見事に変わっていますね。ようやく自分が望むサイトが作成されました！

後は、Filezillaで、soyo2フォルダの中にあるpublicフォルダの中身をアップロードするだけ です。

最後に

こんな感じで作れてしまいますが、hugoでサイト作成し、自分でサーバーを借りてサイト運営することは、自分で自分の面倒を見れる人に限られます。何が起こっても自己責任です。一方、有料ブログや投稿サイトだと、小説のバックアップだけでほぼ管理はありません。書くことに集中したい方はそちらのほうがよいでしょう。サイト運営はドツボにはまりやすいので、書くのも管理するのも好きという方にしかお勧めできませんね（＾＾）。 hugoはモジュールで管理すればぐんと楽になりますが、初心者の私にはエラーが多く、面倒なので当面は見送ります。こちらでは、原始的なhugoのサイトの作り方になります。ご了承ください。

広告と投稿サイトのルールが嫌なのが、サイト管理する一番の理由です。でも、読んでもらうにはいくつか投稿せざるを得ませんし、そのサイトの魅力もたっぷりあるのも否めません。何があっても、サーバーのルールさえ守っていれば小説は消えないのが、個人サイトの最大の強みです。