【Yealicoのサイトルールを作ろう!】詳細ページとギャラリーページ編

前回の基本設定とリストページの定義編から結構期間が空いてしまいましたが、続きの詳細ページとギャラリーページ編を解説していきます。

Yealicoの基礎から解説しているため、まだ読んでいない方はそちらから読んでください。

関連記事

この記事ではYealicoサイトルールの作成方法について解説します。以前、YealicoサイトルールWikiの記事を出しましたが、Wikiだけではよく分からない方も多いかと思うので、実際に作成してみましょう!という記事で[…]

 

前回はリストページと言ってタイトルとカバー画像、作者名を表示する所まで作成しました。

この記事ではその先の詳細ページ(チャプター一覧など)とギャラリーページ(漫画などの画像を閲覧するページ)を作成していきます。

 

いよいよ、読めるようにするステップです。

 

詳細ページの定義

詳細ページはリストページにて選択したコンテンツ(漫画タイトルなど)の詳細情報を表示するためのページになります。

 

Titleセレクタの定義

詳細ページのタイトルを定義するセレクタになります。

ジャンプルーキーの作品タイトルはseries-titleクラスがついているh1タグにて定義されているので、

 

Selector欄には

h1.series-title

と入力します。

そしてTitleの場合は特に加工も必要なく、要素内の文字列を取得するだけでいいのでFunction欄には「text」を入力します。

 

Deacriptionセレクタの定義

ここは作品の説明テキストを定義するセレクタになります。

ジャンプルーキーの作品の説明はseries-descriptionクラスがついているpタグにて定義されているため、

 

Selector欄には

p.series-description

と入力します。

先ほどと同じく、特に加工も必要なく、要素内の文字列を取得するだけでいいのでFunction欄には「text」を入力します。

 

Coverセレクタの定義

これは言うまでもなく、カバー画像の定義ですね。

カバー画像はcover-imageクラスがついているimgタグにて定義されているため、

 

Selector欄には以下のように入力します。

img.cover-image

さらに、今回の場合はsrc属性内のURLを取得する必要があるため、Functionに「attr」、Paramに「src」を設定します。

 

他にもカテゴリ、作者など諸々定義する箇所がありますが、今回は最低限にしておきたいので省きます。

応用力を上げる為、自分で考えてそれぞれ定義してみてください。

 

ChapterRuleの定義

チャプタールールは、詳細ページに表示されているチャプターを定義するためのルールになります。

 

Itemセレクタの定義

ジャンプルーキーのチャプターは、IDがepisode-listのulタグ内にliタグで定義されています。

 

Selector欄には以下のように入力します。

#episode-list>li

 

ID Codeセレクタの定義

HTMLとURLの構造を見てみましょう。

それぞれのチャプター情報が入っているliタグの中にaタグがあり、そこに漫画を読むページのURLが存在します。

 

よって、ID Codeは以下のように設定します。

ちなみに、ブックマーク機能を使わない場合はチャプタールールのID Codeは不要です。

 

Titleセレクタの定義

各チャプターのタイトルですね。

先ほどの画像にも写っていましたが、episode-titleクラスがついているspanタグにて定義されています。

 

Selector欄には以下のように入力します。

span.episode-title

そして、Function欄には「text」。

 

URLセレクタの定義

漫画を読むページのURLを設定します。

これですね。

 

以下のように設定します。

ほとんどID Codeと同じですね。

 

これで詳細ページの定義は終わりです。

保存し、詳細がきちんと表示されたか、チャプターは表示されるか開いて確認してみましょう。

ちなみに、タイトルとカバー画像はリストページにてきちんと定義されていれば詳細ページのルールで定義していなくても流用されます。

 

ギャラリーページの定義

いよいよ漫画を読むための部分。ここが本命ですね。

ここを使うために今までの定義を行ってきたといっても過言ではないです。

 

構造を見てみましょう。

 

image-containerクラスをもつdivタグの中にpタグがあり、さらにその中にjs-page-imageクラスをもつimgタグが存在します。

そのimgタグのsrc属性に画像のURLが設定されているようです。

Itemの定義

色々簡略化していますが、Selectorには以下のように入力します。

.image-container img.js-page-image

ちなみに、以下のなSelectorでも動作します。

div.image-container p.page-area img.js-page-image
div.image-container>p>img.js-page-image

 

Image URLの定義

ここで画像のURLを指定します。

Itemにてimgタグを指定しているため、あとはsrc属性を取得するように指定すればいいだけ。

Selectorは「this」、Functionに「attr」、Paramに「src」でOK。

 

これでチャプターを選択すると画像が表示され、漫画が読めるようになりました。

 

お疲れ様です

これで最低限の設定ができました。

あとは検索機能をつけたり、タグに対応させたりと色々ありますが、今回はここまで。

 

また時間があるときに続きを書きます。

管理人がオススメするお得な情報

1,000円→無料

登録時にもらえる1000円分のポイントで毎日オリパが引ける。

課金するとさらにお得な損しないオリパも引けるので激アツ!!

 

3,000円→無料

AudibleはAmazonが出している本を聴くサービス。

作業をしながら本を読む(聴く)事が出来るので、効率良く情報のインプットが可能に。

 

1,960円→99円980円→無料

漫画・小説・雑誌などが読み放題のKindleUnlimited。

即解約しても、期間中は利用できるので心配な方は即解約でもOK。