メッセージの編集
タイトル
お名前
本文
検索してみたものの疑問が解決しなかったため新規トピを作らせていただきます。 検索漏れの可能性もあるのでその際はご誘導頂けるとありがたいです。 小説機能で本文の特定の単語にletter-spacingを作用させたく、本文中で<span class="HN">単語</span>と囲みました。当初はうまく作用したのですが、その後他の部分のCSSやHTMLを変更する内に作用しなくなってしまいました。一度作用したため他の記述に何らかの原因があるとは思うのですが、自分では原因を見つけられませんでした。 テンプレをお借りし、自分で弄ったものです。タグミスをご指摘頂きたいです。よろしくお願い致します。 【HAED内】 <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style type="text/css"> @import url('GoogleフォントURL?family=Alice|Kosugi+Maru|Montserrat'); @font-face {font-family: PixelMplus12 Regular; src: url('leafscapeURL') format("woff2");} * { margin: 0; padding: 0; font-size: 100%; font-weight: normal; list-style-type: none; } .clearfix:after { visibility: hidden; display: block; content: " "; clear: both; height: 0; } a { color: #ffc1c1; text-decoration: none; transition: .4s; } strong { font-weight: bold; } body { font-size: 13px; font-family:'Kosugi Maru', "メイリオ", "Meiryo", sans-serif; color: #5B5B5B; letter-spacing: 0.8px; line-height: 24px; text-align: justify; } header { font-family: "PixelMplus12 Regular",'Kosugi Maru', "メイリオ", "Meiryo", cursive; text-align: center; background: repeating-linear-gradient( 45deg, #fff, #fff 6px, rgba(255,188,188,0.5) 6px, rgba(255,188,188,0.5) 12px ); } header::after { display: block; content: ''; width: 100%; height: 10px; border-top: 6px double #FFF; } header h1 { display: inline-block; font-size: 30px; padding: 72px 10px 10px 10px; background: url(#素材urlです#) no-repeat center 20px; background-size: 188px; height: 140px; } header h1 span { display: block; margin-top: 15px; font-weight: bold; } .icon { letter-spacing: 2px; font-size: 10px; text-align: center; } .icon i:nth-child(odd) { color: #DFDFDF; } .icon i:nth-child(even) { color: #ffc1c1; } .more, .main { max-width: 350px; width: 60%; margin: 40px auto; } .main .head { text-align: center; } .main .head a { display: inline-block; color: #FFF; background: #ffc1c1; border: 1px solid #ffc1c1; width: 150px; padding: 4px 10px; border-radius: 30px; font-family: "Montserrat", 'Kosugi Maru', "メイリオ", "Meiryo", sans-serif; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; } .main .head a:hover { background: #FFF; color: #ffc1c1; } .main .list { margin: 30px 0; padding: 30px 0; border-top: 1px dashed #E9E9E9; border-bottom: 1px dashed #E9E9E9; } .main .list a { counter-increment: num; color: #5B5B5B; font-size: 12px; letter-spacing: 1px; } .main .list a::before { font-family: "Alice",'Kosugi Maru', "メイリオ", "Meiryo", cursive; content: counter(num); display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; color: #FFF; background: #ffc1c1; border-radius: 3px; margin-right: 8px; } .main .list a:nth-child(odd)::before { background: #DDD; } .main .list a::after { display: block; height: 5px; content: ''; } .main .list a:hover { color: #CCC; } .story footer { padding-top: 20px; border-top: 1px dashed #E9E9E9; text-align: right; } .story p { letter-spacing: 0; margin-bottom: 20px; } .story .icon { margin-bottom: 30px; } form { text-align: center; margin-bottom: 30px; } form br { display: none; } input[type=submit], input[type=text] { display: inline-block; color: #5B5B5B; background: #EFEFEF; border: none; width: 150px; padding: 3px 10px; border-radius: 30px; font-family: "Montserrat", 'Kosugi Maru', "メイリオ", "Meiryo", sans-serif; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; width: 120px; } form input[type=submit] { color: #FFF; background: #ffc1c1; border: 1px solid #ffc1c1; -webkit-appearance: none; -moz-appearance: none; appearance: none; } ::-webkit-scrollbar { display:none; } h2 { font-size: 12px; word-spacing: -4.5px; letter-spacing: 0.7px; } h2 span { font-size: 10px; letter-spacing: -1.5px; } h2:before { font-size: 11px; display: inline-block; content: '▲'; margin-right: 3px; transform: rotate(90deg); } .min { max-width: 500px; width: 90%; margin: 40px auto; } .mn { max-width: 400px; width: 80%; margin: 40px auto; .bun { line-height: 22px; } span.HN { letter-spacing: -4.4px; } </style> 【文章画面レイアウト】 <header></header><div class="min story"><div class="icon"><i class="fa fa-heart" aria-hidden="true"></i> <i class="fa fa-heart" aria-hidden="true"></i> <i class="fa fa-heart" aria-hidden="true"></i></div><div class="bun">#text#</div> <footer><h2>To Be Continued <span>...</span></h2></footer></div>
編集パス
編集
記事削除
×
「#エロ」のBL小説を読む
BL小説 BLove
- ナノ -