teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

sentence

2020/02/28 13:23

投稿

codemanvs
codemanvs

スコア45

title CHANGED
File without changes
body CHANGED
@@ -18,7 +18,8 @@
18
18
 
19
19
  <!-- Breadcrumb NavXT 6.4.0 -->
20
20
 
21
+ <span property="itemListElement" typeof="ListItem">
21
- <span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Go to site名" href="http://localhost:~~" class="home"><span property="name">ホーム</span></a></span>
22
+ <a property="item" typeof="WebPage" title="Go to site名" href="http://localhost:~~" class="home"><span property="name">ホーム</span></a></span>
22
23
 
23
24
  &gt;
24
25
 

2

sentence

2020/02/28 13:23

投稿

codemanvs
codemanvs

スコア45

title CHANGED
File without changes
body CHANGED
@@ -12,8 +12,24 @@
12
12
  ### 現在のコード「お知らせ」コードは以下です
13
13
 
14
14
  パンくずリスト「お知らせ」部分を検証でみた場合のコード
15
+
15
16
  ```
17
+ <div class="breadcrumbs">
18
+
19
+ <!-- Breadcrumb NavXT 6.4.0 -->
20
+
21
+ <span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Go to site名" href="http://localhost:~~" class="home"><span property="name">ホーム</span></a></span>
22
+
23
+ &gt;
24
+
25
+ <span property="itemListElement" typeof="ListItem">
26
+
27
+ <a property="item" typeof="WebPage" title="Go to ブログ." href="http://localhost:~~~" class="post-root post post-post"><span property="name">ブログ</span></a>
28
+
29
+ <meta property="position" content="2"></span>
30
+ &gt;
31
+
16
- <span class="archive taxonomy category current-item">お知らせ</span>
32
+ <span class="archive taxonomy category current-item">ブログ</span></div>
17
33
  ```
18
34
 
19
35
  パンくずリスト部分のCssコード(パンくずリスト全体をbreadcrumbsというclass名のdivタグで囲っています)

1

code

2020/02/28 13:22

投稿

codemanvs
codemanvs

スコア45

title CHANGED
File without changes
body CHANGED
@@ -11,11 +11,53 @@
11
11
 
12
12
  ### 現在のコード「お知らせ」コードは以下です
13
13
 
14
+ パンくずリスト「お知らせ」部分を検証でみた場合のコード
14
15
  ```
15
16
  <span class="archive taxonomy category current-item">お知らせ</span>
16
17
  ```
17
18
 
19
+ パンくずリスト部分のCssコード(パンくずリスト全体をbreadcrumbsというclass名のdivタグで囲っています)
20
+ ```
21
+ .breadcrumbs{
22
+ margin-left: 3em;
23
+ margin-top: 20px;
24
+ }
25
+
26
+ .breadcrumbs span{
27
+ font-size: 14px;
28
+ }
29
+
30
+ .breadcrumbs a{
31
+ text-decoration: underline;
32
+ color: #744775;
33
+ }
34
+ ```
18
35
 
36
+
37
+ 以下の部分は本来ブログカードのカテゴリ部分に当たっているcssなのですが、この部分がパンくずリストのカテゴリ部分にも反映されています。
38
+ ```
39
+ .category{
40
+ margin-left: 40px;
41
+ border: solid 2px #F4D03F;
42
+ background-color: #F4D03F;
43
+ width: 75px;
44
+ height: 25px;
45
+ color: white;
46
+ font-size: 18px;
47
+ border-radius: 10px;
48
+ text-align: center;
49
+ display: flex;
50
+ justify-content: center; /*左右中央揃え*/
51
+ align-items: center;
52
+ position: relative;
53
+ z-index: 2;
54
+ }
55
+
56
+ .category a{
57
+ color: white;
58
+ }
59
+ ```
60
+
19
61
  ### 試したこと
20
62
  上のコードのクラスに指定してcssを色々試してみましたが、うまくいきませんでした。
21
63
  そもそも指定のやり方が正しいのかが不明です。