1
00:00:00,420 --> 00:00:05,520
このレッスンでは、最後のビデオの最後にキャンプグラウンドショーページのスタイリングを完成させていきます。

2
00:00:05,520 --> 00:00:06,550
 

3
00:00:06,630 --> 00:00:08,540
私が必要とする変更のいくつかについて言及しました。

4
00:00:08,640 --> 00:00:10,970
それは純粋なブートストラップで対処できません。

5
00:00:10,980 --> 00:00:13,050
いくつかのカスタムスタイルを追加する必要があります。

6
00:00:13,050 --> 00:00:18,570
そのため、サムネイルの100％を占めるように、この画像の幅を変更する必要があります。

7
00:00:18,750 --> 00:00:21,050
ここにいくつかのパディングを追加したかったのです。

8
00:00:21,120 --> 00:00:25,050
これはパディングがある場所のように見えるはずで、イメージがコンテナ全体を占めるのが分かります。

9
00:00:25,050 --> 00:00:25,880
 

10
00:00:26,280 --> 00:00:31,810
それを達成するために、それぞれYesでショーに入り、ここにスタイルタグを追加することができます。

11
00:00:32,280 --> 00:00:34,050
しかし、それは本当に素晴らしい考えではありません。

12
00:00:34,050 --> 00:00:39,840
その代わりに、私たちは最初のカスタムスタイルシートを追加し、それを前のレッスンと同じようにパブリックディレクトリにする予定です。

13
00:00:39,840 --> 00:00:42,960
 

14
00:00:43,110 --> 00:00:48,790
だから私はディレクトリを公開するつもりだ、そして私は公開の中に別のディレクトリを作るだろう。

15
00:00:48,870 --> 00:00:55,350
styleシートスラッシュと私たちはこのような意味のDotsie

16
00:00:55,350 --> 00:01:00,810
SSと呼んでいます。

17
00:01:00,810 --> 00:01:09,210
これはスタイルシートと呼ばれるので、パブリックスラッシュスタイルシートと私たちは最終的に私たちのJavaScriptとJavascriptのために別のものを持っているでしょう、そして私たちはenterを押してから、スタイルシートの中で一つのファイルをpublic sosh

18
00:01:09,210 --> 00:01:10,000
 

19
00:01:10,470 --> 00:01:11,260
OK。

20
00:01:11,520 --> 00:01:13,040
今、私たちはそれを開こうとしています。

21
00:01:13,380 --> 00:01:19,830
 

22
00:01:19,830 --> 00:01:26,790
 

23
00:01:26,790 --> 00:01:28,140
私たちはスタイルシートを大事にして、そのファイルを開いて、体の背景色を紫色にして保存するような、ここに本当に明白な何かを加えることから始めましょう。

24
00:01:28,140 --> 00:01:36,790
だから、アプリの場合、私たちは静的なアプリドットを使うExpressをここに追加する必要があります。

25
00:01:37,380 --> 00:01:41,790
そして、私たちが前回したことは、単に公開するだけでしたが、実際にやってみると、やっかいな方法で、すぐに見せたくありませんでした。

26
00:01:41,790 --> 00:01:44,380
 

27
00:01:44,400 --> 00:01:50,370
 

28
00:01:50,880 --> 00:01:57,050
しかし、今私たちがしなければならないことは、下線を追加することです。ディレクトリ名とスラッシュの公式ディレクトリ名は、このスクリプトが実行していたディレクトリを参照してください。

29
00:01:57,180 --> 00:01:58,630
だから私はあなたにそれがどのように見えるか教えてください。

30
00:01:58,800 --> 00:02:07,920
私はちょうどコンソールを行うが、ログにアンダースコアがあなたの名前にアンダースコアを付けて、サーバを保存して再起動する。

31
00:02:07,920 --> 00:02:10,190
 

32
00:02:12,000 --> 00:02:13,440
私がここで何を得ているか注目してください。

33
00:02:13,530 --> 00:02:19,560
これは、キャンプスラッシュv5のlushly全体のパスワークスペースのディレクトリ名です。

34
00:02:19,710 --> 00:02:26,940
だからdirの名前とスラッシュのパブリックを追加することによって、潜在的に何らかの形でこれが現在のディレクトリを変更した場合、私たちが期待していなかった不思議なことが起きたからです。

35
00:02:26,940 --> 00:02:30,390
 

36
00:02:30,450 --> 00:02:36,210
それがうまくいけないことはありませんが、あなたの名前は常にスクリプトが住むディレクトリになります。

37
00:02:36,210 --> 00:02:36,650
 

38
00:02:36,900 --> 00:02:41,240
だから私たちはもっと安全になり、スラッシュパブリックを追加しているだけです。それはもっと一般的なやり方です。

39
00:02:41,250 --> 00:02:41,860
 

40
00:02:42,060 --> 00:02:43,820
私たちは全く違いは見ません。

41
00:02:43,860 --> 00:02:44,920
だから私たちは救うでしょう。

42
00:02:44,930 --> 00:02:50,140
私たちはこれを取り除くことができ、私たちがやったことは私たちの単純な心に加えられます。

43
00:02:50,190 --> 00:02:52,390
SSしかし、我々はまだそれにリンクしていない。

44
00:02:52,530 --> 00:02:54,500
私たちはパブリックディレクトリを提供しました。

45
00:02:54,600 --> 00:02:59,460
私たちは現在、そのディレクトリ内のすべてのものを提供しています。これは実際には単一のフォルダースタイルシートであり、単一のファイルが最終的に私たちになる可能性があります。

46
00:02:59,460 --> 00:03:01,540
 

47
00:03:01,620 --> 00:03:05,510
しかし今、そのファイルへのリンクを見て、ヘッダファイルでそれをやってみましょう。

48
00:03:05,580 --> 00:03:14,920
だから、私はC9ビューにParshallのスラッシュヘッターをスラッシュし、ブートストラップ後に頭上に上げます。

49
00:03:14,980 --> 00:03:22,200
私は別のリンクタグを追加するつもりですが、これはH refと同じになります。スラッシュスタイルシートはメインC

50
00:03:24,660 --> 00:03:31,330
Ssをスラッシュし、次にここで行を追加してスタイルシートにします。

51
00:03:31,950 --> 00:03:32,500
OK。

52
00:03:32,850 --> 00:03:38,340
だから私たちは現在、私たちが公開ディレクトリから提供しているうまくいけば私たちのスタイルシートにリンクしました。

53
00:03:38,340 --> 00:03:40,680
それがうまくいけば、それを試してみましょう。

54
00:03:40,740 --> 00:03:45,350
ヘッダーが部分的に含まれているすべてのページが存在するため、1ページごとに表示されます。

55
00:03:45,630 --> 00:03:46,380
それを試してみましょう。

56
00:03:46,380 --> 00:03:48,450
私たちはリンク先ページに行きます。

57
00:03:48,450 --> 00:03:48,980
そこに行く。

58
00:03:48,990 --> 00:03:55,230
それはすべて紫色で、私たちのキャンプ場を見に行けば、あなたはそれを紫色にしておきたいならば、紫色の背景もあなた次第です。

59
00:03:55,230 --> 00:03:56,510
 

60
00:03:56,610 --> 00:03:57,620
私はそれを元に戻すつもりです。

61
00:03:57,750 --> 00:04:03,210
しかし、私が獲得したスタイルを追加し、それらのスタイルがサムネイルに影響を与えることになります。

62
00:04:03,210 --> 00:04:07,050
これはサムネイルとサムネイルです。

63
00:04:07,080 --> 00:04:13,170
イメージを幅の100％にするようにします。ショーページとインデックスページの両方でこれを実行して、元に戻って変更して評価することができます。

64
00:04:13,170 --> 00:04:18,000
 

65
00:04:18,180 --> 00:04:21,750
そこで、サムネイル内のすべての画像を選択することから始めます。

66
00:04:21,900 --> 00:04:25,300
ブートストラップクラスなので、サムネイルが必要です。

67
00:04:25,550 --> 00:04:31,290
そしてサムネイルの中にあるすべてのイメージタグであるそれらの間のスペースをイメージタグに入れます。

68
00:04:31,290 --> 00:04:36,180
そして、そのように幅を100％に設定したいだけです。

69
00:04:36,300 --> 00:04:42,420
保存して更新してショーページに移動すると、画像がこのサムネイルの100％を占めるようになります。

70
00:04:42,420 --> 00:04:43,510
 

71
00:04:43,860 --> 00:04:48,210
次に、このパディングの問題を解決する必要があります。この問題は、実際に修正するのが簡単で、サムネイル自体を選択するために必要なスペースを取り除きたいところです。

72
00:04:48,210 --> 00:04:51,820
 

73
00:04:51,870 --> 00:04:56,350
サムネイルdivは、パディングを取り除き、ゼロに設定します。

74
00:04:56,490 --> 00:05:01,580
だからドットサムネイルパディング0。

75
00:05:01,890 --> 00:05:02,930
保存しましょう。

76
00:05:03,120 --> 00:05:05,260
そこにこのパディングを見てください。

77
00:05:05,280 --> 00:05:06,130
今は消えてしまった。

78
00:05:06,510 --> 00:05:11,230
私たちのインデックスページに戻ると、これらのページが今も一様であることがわかります。

79
00:05:11,280 --> 00:05:12,980
私たちにはパディングもありません。

80
00:05:13,320 --> 00:05:17,100
私は個人的には、ここにスペースを入れずにパディングなしで好む。

81
00:05:17,250 --> 00:05:22,290
 

82
00:05:22,320 --> 00:05:27,910
しかし、それは個人的な好みの問題であり、あなたがそのスペースをそこに戻すことを望むのであれば、これらのスタイルをこのスタイルをすべての単一のサムネイルに特に適用することはできません。

83
00:05:27,990 --> 00:05:34,290
代わりに、このサムネイルをIDまたは特別なクラスに与えることができるショーページを与えることができます。そして、このパディングゼロをそのクラスに適用するか、2つのIDに適用します。

84
00:05:34,290 --> 00:05:39,280
 

85
00:05:39,480 --> 00:05:44,970
しかし、私はそれらのすべてにそれを行うつもりですし、私たちが解決する必要があるもう一つの問題は、ここでのパディングです。

86
00:05:45,780 --> 00:05:53,970
だからこのキャプションの中でfulを調べれば、作成したdivがここに表示され、divクラスのキャプションがいっぱいになる。

87
00:05:53,970 --> 00:05:55,560
 

88
00:05:55,770 --> 00:06:00,870
そこにいくつかのパディングを追加したいと思います。最後のビデオで決めた数は9ピクセルでした。

89
00:06:00,930 --> 00:06:02,830
だから私は罪を閉めることができます。

90
00:06:03,030 --> 00:06:08,850
ここに戻って、私はすべてのキャプションの子猫よりもむしろ選択するつもりです。サムネイルの中のキャプションの折り目を選択するつもりです。

91
00:06:08,850 --> 00:06:11,100
 

92
00:06:11,220 --> 00:06:21,690
だから、サムネイルスペースのキャプションがいっぱいになり、このように9ピクセルのパディングを与えて、ページを更新してみましょう。

93
00:06:21,690 --> 00:06:23,130
そこに行く。

94
00:06:23,130 --> 00:06:23,750
我々は、我々が探している間隔を取得します。

95
00:06:23,760 --> 00:06:26,130
大丈夫。

96
00:06:26,130 --> 00:06:26,390
それが私がしたかったのです。

97
00:06:26,400 --> 00:06:27,610
私たちが達成したことをすばやく要約しましょう。

98
00:06:27,780 --> 00:06:29,910
 

99
00:06:29,910 --> 00:06:36,470
 

100
00:06:36,840 --> 00:06:41,490
私たちは新しいファイルのメインナチスSSを作成し、それをスタイルシートのパブリックディレクトリの内側に置きました。そして、最終的には、特にランディングページのスタイルシートが増えました。また、ここにもjavascriptがあります。

101
00:06:41,490 --> 00:06:43,560
 

102
00:06:43,680 --> 00:06:49,740
実際に公開ディレクトリを使用するには、公開ディレクトリを提供するためにexpressと明示的に対話する必要があります。

103
00:06:49,740 --> 00:06:50,410
 

104
00:06:50,520 --> 00:06:55,230
そして私はあなたにこのアンダースコアがあなたの名前を強調していることを示しました。そして最後のことはヘッダーファイルにそれを含めたことです。

105
00:06:55,230 --> 00:06:56,660
それはちょうどここにあり、スラッシュスタイルシートでそれにリンクしています。

106
00:06:56,680 --> 00:07:01,300