Custom Styling Guide

最近のコメントウィジェットは、サイト全体または特定のページに対する最新コメントの一覧を表示します。

このウィジェットには最小限のデフォルトスタイリングが含まれており、独自のCSSで簡単にカスタマイズできるように設計されています。

ウィジェットの構造

ウィジェットは次のHTML構造でレンダリングされます：

<div class="fastcomments-recent-comments">
    <div class="comment">
        <div class="user-details">
            <img src="..." alt="Avatar" class="avatar" />
            <span class="user-name">Username</span>
            <span class="reply-date-time">2 hours ago</span>
        </div>
        <div class="comment-text">Comment content...</div>
        <div class="link-wrapper">
            <a class="link" href="...">Page Title</a>
        </div>
    </div>
    <!-- More comments... -->
</div>

最近のコメントウィジェットのデフォルトCSSリファレンス

ウィジェットには次の最小限のデフォルトスタイリングが含まれています：

最近のコメントウィジェットのデフォルトCSS

Copy

1

2.fastcomments-recent-comments {

3 font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;

4 text-align: left;

5}

6.fastcomments-recent-comments .comment {

7 padding-top: 5px;

8}

9.fastcomments-recent-comments .comment .user-details img {

10 width: 20px;

11 margin-right: 5px;

12 vertical-align: middle;

13}

14.fastcomments-recent-comments .comment .user-details .user-name {

15 vertical-align: middle;

16 font-size: 12px;

17}

18.fastcomments-recent-comments .comment .user-details .reply-date-time {

19 vertical-align: middle;

20 padding-left: 5px;

21 font-size: 10px;

22}

23.fastcomments-recent-comments .comment .comment-text {

24 position: relative;

25 line-height: 22px;

26 font-size: 14px;

27 text-align: justify;

28 margin: 8px -1em 8px 0;

29 padding-right: 1em;

30}

31.fastcomments-recent-comments .comment .comment-text .inline-image {

32 display: block;

33 max-width: 500px;

34 margin: 3px 0 3px 0;

35}

36.fastcomments-recent-comments .comment .comment-text .inline-image img {

37 max-width: 100%;

38 max-height: 400px;

39}

40.fastcomments-recent-comments .comment .comment-text:before {

41 position: absolute;

42 content: "...";

43 right: 0;

44 bottom: 0;

45}

46.fastcomments-recent-comments .comment .comment-text:after {

47 position: absolute;

48 content: "";

49 right: 0;

50 width: 1em;

51 height: 1em;

52 margin-top: 0.2em;

53 background: #fff;

54}

55.fastcomments-recent-comments .comment > .link-wrapper {

56 margin: 5px 0 0 0;

57}

58.fastcomments-recent-comments .comment > .link-wrapper .link {

59 font-size: 13px;

60}

61

カスタマイズ例

アバターサイズの変更

.fastcomments-recent-comments .comment .user-details img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
}

コメント本文の切り詰めを変更

デフォルトのスタイリングはCSSのトリックを使用して長いコメントを "..." で切り詰めます。無効にするには：

.fastcomments-recent-comments .comment .comment-text:before,
.fastcomments-recent-comments .comment .comment-text:after {
    display: none !important;
}

コメントに境界線を追加

.fastcomments-recent-comments .comment {
    border-bottom: 1px solid #eee !important;
    padding-bottom: 10px !important;
}

Top Pagesウィジェットは、コメント数が最も多いページの一覧を表示します。

このウィジェットには最小限のデフォルトスタイルが含まれており、独自のCSSで簡単にカスタマイズできるように設計されています。

ウィジェットの構造

ウィジェットは次のHTML構造でレンダリングされます:

<div class="fastcomments-top-pages">
    <div class="page">
        <a class="title-link" href="...">Page Title (42)</a>
    </div>
    <!-- More pages... -->
</div>

Top Pages のデフォルトCSS参照

ウィジェットには次の最小限のデフォルトスタイルが含まれます:

Top Pages ウィジェットのデフォルト CSS

Copy

1

2.fastcomments-top-pages {

3 font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;

4}

5.fastcomments-top-pages .page {

6 padding-top: 5px;

7}

8

カスタマイズ例

リンクにスタイルを追加

.fastcomments-top-pages .title-link {
    color: #0066cc !important;
    text-decoration: none !important;
    font-size: 14px !important;
}

.fastcomments-top-pages .title-link:hover {
    text-decoration: underline !important;
}

ページ間にボーダーを追加

.fastcomments-top-pages .page {
    border-bottom: 1px solid #eee !important;
    padding: 10px 0 !important;
}

.fastcomments-top-pages .page:last-child {
    border-bottom: none !important;
}

コメント数のスタイル

.fastcomments-top-pages .title-link {
    display: flex !important;
    justify-content: space-between !important;
}

React、Angular、Vue などの FastComments 公式フロントエンドライブラリはすべて、customCSS 設定 パラメーターを受け取り、同じ HTML 構造を持つバニラ js ライブラリのラッパーになっています。