『ラゴン・ジュルナル』に来てくださってありがとうございます!

「JavascriptをOn」にしていない端末やブラウザで閲覧しているかたに、このアラートが表示されるようになっております。Javascriptを許可してからおたのしみくださいませ。

Chrome「設定」→「詳細設定」→「プライバシーとセキュリティー」→「サイトの設定」→「Javascript」を許可 iPhone「設定」→「Safari」→「セキュリティ」→「Javascript」をオン iPad「設定」→「Safari」→「詳細」→「Javascript」をオン Android「メニュー」→「設定」→「高度な設定」→「Javascriptを有効」など

おなじセクション内での前後の記事を記事フッターに追加しました。

サイト改善記録 #16

サイト

Lagon Journal

なにをどうしたか

おなじセクション内での前後の記事を記事フッターに追加しました。

具体的な変更 - html

各single.html内に以下を記述。Hugoでは「with .PrevInSection」でセクション内の前の記事を呼び出せます。

<!--セクション内前後記事-->
<div class="prev-next-link">
   {{ with .PrevInSection }}
   <div class="prev-link">
      <a href="{{ .Permalink }}" class="">『{{ .LinkTitle }}』</a>
   </div>
   {{ end }}

   {{ with .NextInSection }}
   <div class="next-link">
      <a href="{{ .Permalink }}" class="">『{{ .LinkTitle }}』</a>
   </div>
   {{ end }}
</div>

具体的な変更 - css

あまり特徴的なことはせず、左右にわかれるようにしました。

.prev-next-link{
    width: 100%;
    margin: 20px 0;
}
.prev-next-link a{
    text-decoration: underline;
}
.prev-link,
.next-link{
    display: block;
    font-size: 85%;
}
.prev-link{
    text-align: left;
}
.next-link{
    text-align: right;
    margin-top: 10px;
}
.prev-link:before{
    content: '\'
}
.next-link:after{
    content: '/'
}

@media screen and (max-width: 768px){
    .prev-link{
        margin-left: 4%;
    }
    .next-link{
        margin-right: 4%;
    }
}

Written by Dev. Team
Copyright LagonGlaner and Author