【初心者向け】サイトのカスタマイズ方法

ある程度完成した状態のウェブサイトを、自分好みにカスタマイズしたいと感じることは少なくありません。

しかし、どこにどんなコードを書けば思った通りに反映されるのか、具体的な方法がわからない方もいると思います。

今回は、サイトをカスタマイズする方法についてお話します。

おおまかな手順

すべての場合においてやるべきことは共通しています。

1. カスタマイズしたい部分のコードを見つけて
2. 希望を実現するためのコードを入れる

以下では記事一覧のタイトルの上に画像を挿入する場合を例にして解説していきます。

カスタマイズしたい部分のコードを見つける

カスタマイズしたい部分の近くにマウスポインタをもってきてから、右クリックしてデベロッパーツールを開きます。

そうするとその部分の HTML の構造が見られるようになります。

例えば、記事一覧のページにあるひとつの記事のタイトルを右クリックしてデベロッパーツールを開くと、HTML は次のようになっていたとします。

1
<ul class="post-list">
2
    <li class="list-item">…</li>
3
    <li class="list-item">
4
        <h2 class="title"><a href="/posts/example-page2">Title 2</a></h2>
5
        <summary class="summary">…</summary>
6
    </li>
7
    <li class="list-item">…</li>
8
    <li class="list-item">…</li>
9
</ul>

タイトルの直前に画像を挿入したいなら、３行目と４行目の間にコードを入れればいいとわかります。

そこで、HTML を表すファイルの中からこの部分を表現している部分を探すことになります。

検索のかけ方

ファイル名だけでなくファイルの内容も含めて検索する必要があります。

Visual Studio Code を使っているなら、File > Open Folder または Open Workspace からフォルダを開いた状態で検索をかけると、

そのフォルダ以下にあるすべてのファイルの内容も含めて検索してくれます。

検索をするときに使用するキーワードにも注意が必要です。

動的な情報を含まないようにしましょう。

例えば記事一覧における各記事のタイトルや要約文、カテゴリやタグなどは、記事によって変化するので、

HTML ではループ処理など特殊な構文を使って記述されている可能性が高く、検索にかかりません。

特定には id 属性や class 属性が便利です。

今回の例では、<li class="list-item">で検索をかけるとよいでしょう。

ただし、これらの属性も動的に操作されている可能性があり、

（例えばclass 属性に post が追加されていて、デベロッパーツールではclass="list-item post"になっているなど）

必ずしももとの HTML で書かれているものと一致するとは限りません。

その場合、検索キーワードの範囲を変えてみましょう。

検索結果に複数の候補ファイルが表示された場合

まずはファイル名からだいたいあたりをつけます。

とはいえ、ファイルを開いて間違い探しをするのが一番確実です。

希望を実現するためのコードを入れる

該当の箇所を見つけたら、実際にコードを入れていきます。

今回の例では、該当部分は次のようになっていたとします。（Hugo の例です。）

1
<ul class="post-list">
2
    {{ range .Site.RegularPosts }}
3
        <li class="list-item">
4
            <h2 class="title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
5
            <summary class="summary">{{ .Summary }}</summary>
6
        </li>
7
    {{ end }}
8
</ul>

さて、タイトルを表すのは４行目なので、その直前に画像（img タグ）を挿入すれば OK です。

1
<ul class="post-list">
2
    {{ range .Site.RegularPosts }}
3
        <li class="list-item">
4
            <img src="/images/{{ .File.ContentBaseName }}.jpg" alt="{{ .Title }}">
5
            <h2 class="title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
6
            <summary class="summary">{{ .Summary }}</summary>
7
        </li>
8
    {{ end }}
9
</ul>

あとは実際のサイトを見ながら微調整をしていけばいいでしょう。

  関連記事プログラミングで何ができる？ 新初心者がおさえておくべき６つの考え方

お役に立てたなら幸いです。

それではまた