コメントの編集

Edit a comment

Name:

Subject:

Mail:

URL:

Comment:

こちらこそ、助かりました。有難うございました。(^-^)
…で、修正された簡易表示（3行表示）のスタイルシートですが、記事修正・更新前のものだと思います。
一度急いで記事を書いてアップし、その後追記修正して再度記事更新しています。(^^;
なので、お手数掛けて大変申し訳ございませんが、1点だけ追記をお願い致します。m(__)m

.moji-c の -webkit-line-clamp:3; が適用されるのは、webkit系（GoogleChrome,Safari）のみでIEやFirefoxでは効きません。
iPhoneやAndroidスマホで閲覧する場合は ほぼChromeかSafariなので、webkit系のベンダープレフィックス（識別子）で問題無く表示されます。
しかし、PC等で閲覧する場合は色んなブラウザが有るので皆同じ表示という訳にはいきません。
なので、webkit系以外のブラウザでは高さの最大値までしか表示しないように、且つ相対値にして(フォントサイズによって）可変するように変更しました。
（CSSが効かないブラウザでは、FC2の独自タグ<%topentry_description>で出力される200文字の要約文がそのまま表示されます。その200文字の文量から3行の高さを超えた分を非表示にするという方法です。）

height:70px; /* 文字表示部分の高さ(3行分 文字数は200字で省略) */
↓
max-height:5.4em; /* IE,Firefox対策（4行は7.2em、5行は9.0em) */

pxは絶対値なので可変してくれませんが、emは相対値なので親要素のfont-sizeを基準に大きさを計算して高さを可変します。
このページの記事も修正してございますので同様に、スタイルシート編集枠を2/5程スクロールした所の .moji-c{ の最後に下記を追加して下さい。

max-height:5.4em; /* IE,Firefox対策（4行は7.2em、5行は9.0em) */

次にハンバーガーボタンですが、貴殿ブログの改変後のボタンと参考サイトのボタンを見ながら調整してみました。
ただ、参考サイトはボタンが固定されておらず一緒にスクロールされていく表示なので外の枠を大きく取れますが、弊テンプレでは固定させる事でスクロールしていても押下でき、且つ文面を邪魔しないようにボタン背景を透過にしております。
タップできる範囲を少し大きくしましたので、下記スタイルに変更した後、ご確認下さいませ。m(__)m
該当箇所はスタイルシート編集枠3/4程スクロールした所に
/* ドロワーメニュー部分 */
という文言が有りますので、その下辺りを修正して下さい。（沢山有るので、不安な場合は複製を作っておくと安心です。）

#btn1 {
   overflow: hidden;
   height: 30px;
   top: 0;
   right: 0;
   width: 40px;
   position: absolute;
}
#nav_open {
   right: 5px;
   padding-bottom: 10px;
   position: fixed !important;
   cursor: pointer;
   width: 35px;
   height: 40px;
   z-index: 3;
}
#nav_open span, #nav_open span:before, #nav_open span:after {
   position: absolute;
   bottom: 30px;
   right: 0;
   height: 4px; /* ハンバーガーボタン 線の太さ */
   width: 21px; /* ハンバーガーボタン 線の長さ */
   background: #000;
   display: block;
   content: '';
   transform: translate3d(0,0,0);
}
#nav_open span:before {
   bottom: -7px;
}
#nav_open span:after {
   bottom: -14px;
}

もう少し下↓

.css-cancel {
   display: inline-block;
   position: relative;
   margin: 2px 12px 0 23px;
   padding: 0;
   width: 4px; /* キャンセルボタン 線の太さ */
   height: 24px; /* キャンセルボタン 線の長さ */
   background: #000; /* 線の色 */
   transform: rotate(45deg);
}
.css-cancel:before {
   display: block;
   content: "";
   position: absolute;
   top: 50%;
   left: -10px; /* 左からの位置 */
   width: 24px; /* キャンセルボタン 線の長さ */
   height: 4px; /* キャンセルボタン 線の太さ */
   margin-top: -2px; /* 上からの位置 */
   background: #000; /* 線の色 */
}

以上です。ご不明な点がございましたら再度ご連絡下さいませ。m(__)m

Password:

Secret:非公開コメント