*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

Top Page › Template › テンプレ修正等 › テンプレートの修正・更新致しました。4/26
2019-04-26 (Fri) 04:30

テンプレートの修正・更新致しました。4/26

レスポンシブテンプレート、『al_responsive』『ct_responsive』『candy』『green』『lace_al』をご利用頂き、誠に有難うございます。m(__)m
ユーザー様よりご連絡を頂きまして、本日HTMLの記述ミス部分を修正・更新を致しました。

修正したのは2点。
1) ドロワーメニュー下の Title list 及び RSS のリンク先URLの誤記述。
2) 文字サイズを任意で大きくした際の、下方文字はみだしをしないように修正。

1) ドロワーメニュー下の Title list 及び RSS のリンク先URLの誤記述。
修正が必要なテンプレート 『ct_responsive』『candy』『green』の2カラム・3カラム。

画面幅が狭く、サイドメニューがドロワーメニューになった際、メニュー最下段に【 Admin * Title list * RSS 】が表示されます。
そのうちの【 Title list 】と【 RSS 】のリンク先が、弊ブログURL「https://sorauta1.blog.fc2.com/」になっておりました。
表示確認に入れたものですが、いつから、どの時点でこうなっていたのか、全く気付きませんでした。ひょっとして初めから…?(…共有申請時に審査で撥ねられるからそれは無いか…)
大変申し訳ございませんでした。そして、お気付き頂いた方へ、誠に有難うございました。m(__)m

修正する箇所ですが、下記に掲載致しますHTMLを修正お願い致します。

FC2管理画面左メニュー『テンプレートの設定』より、該当テンプレート名のHTML.CSS編集をクリック。
[ 該当テンプレート名 ] のHTML編集枠を3/4程スクロールした所に

<!-- 1カラム時のメニュー下管理ページリンク-->
<ul class="admin">
<li>* <a href="https://admin.blog.fc2.com/control.php" title="管理ページトップ">Admin</a> * </li>
<li><a href="https://sorauta1.blog.fc2.com/?all" title="全記事一覧">Title list</a> * </li>
<li><a href="https://sorauta1.blog.fc2.com/?xml" title="RSS">RSS</a></li>
</ul>
<!--/ 1カラム時のメニュー下管理ページリンク-->


という部分が有りますので、そこを下記のように変更して下さい。(コピペ可)

<!-- 1カラム時のメニュー下管理ページリンク-->
<ul class="admin">
<li><a href="<%server_url>control.php" title="管理ページトップ">Admin</a> * </li>
<li><a href="<%url>?all" title="全記事一覧">Title list</a> * </li>
<li><a href="<%url>?xml" title="RSS">RSS</a></li>
</ul>
<!--/ 1カラム時のメニュー下管理ページリンク-->


(若しくは <%url> の部分をご自身のブログURLに変更でもOK。)


2) 文字サイズを任意で大きくした際の、下方文字はみだしをしないように修正。
カスタマイズで文字サイズを大きくされる方も多いと思いますので、もう少し簡単に・文字のはみ出し無く表示されるように修正致しました。
修正・更新したテンプレート 『al_responsive』『ct_responsive』『candy』『green』『lace_al』の2カラム・3カラム。
('19/04/05 修正まとめ記事にHTML該当部分が有りましたので記事修正致しました。併せてテンプレートのCSS修正をお願い致します。m(__)m '19/04/26 )

FC2管理画面左メニュー『テンプレートの設定』より、該当テンプレート名のHTML.CSS編集をクリック。
[ 該当テンプレート名 ] のHTML編集枠を3/1程スクロールした所に

<div class="right">
<div class="text_overflow">
<p class="moji-c"><%topentry_description></p>
<p class="right-txt"><a href="<%topentry_link>">... 続きを読む</a></p>
</div>
</div>
</div>


という部分が有りますので、そこを下記のように変更して下さい。(コピペ可)

<div class="right">
<div class="text_overflow">
<p class="moji-c"><%topentry_description></p>
</div>
<p class="right-txt"><a href="<%topentry_link>">... 続きを読む</a></p>
</div>
</div>


(上記青文字HTMLの4行目と5行目の上下を変更しています。)
そしてもう1点、[ 該当テンプレート名 ] のスタイルシート編集枠を2/5程スクロールした所に

.moji-c{
height:70px; /* 文字表示部分の高さ(3行分 文字数は200字で省略) */
overflow:hidden;
line-height:1.8;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3; /* 3行表示末尾に3点リーダー表示(webkit系のみ) */
}


というような部分(heightの数値、3点リーダーの数値が違う場合も)が有りますので、下記のように変更して下さい。(コピペ可)

.moji-c{
overflow:hidden;
padding-bottom:1.8em;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3; /* 3行表示末尾に3点リーダー表示(webkit系のみ) */
max-height:5.2em; /* IE,Firefox対策(4行は7.0em、5行は8.8em) */
}


(上記青文字CSSの height:70px; を削除し、line-height:1.8; を padding-bottom:1.8em; に変更、最後に max-height:5.2em; という行を追加しています。また、-webkit-line-clamp:3; が4と記述されていた場合は4にし、max-height:7.0em; にして下さい。)
そして、文字サイズを大きくする場合は、スタイルシート編集枠内上の方に

html{
font-size:83%; /* フォントサイズは1em(16px)の83% */
overflow-x:hidden;
}

という部分が有りますので、ここのフォントサイズのパーセントの数値を調整して下さい。

HTML/CSSの修正に不安が有る場合は、複製を作成してから作業すると安心です。
この度の修正も、大変お手数とは存じますが、宜しくお願い致します。m(__)m

2019/05/13 修正
.moji-c の max-height数値を0.2emずつ減らしました。(ギリギリだとちょっぴりはみ出る文字が有るようなので…)m(__)m
Super源さん 様へ * by aki
修正・更新の新記事を書いている時にコメント頂いたのですね。^^;
また修正してました。スミマセン。。
昔テンプレートを作っていた頃と違って、HTML5・CSS3、レスポンシブ、JQuery、多様の閲覧デバイス等々と色々不勉強な事が多過ぎて覚えきれない&覚えられない…。
時代の流れの速さに追いつけず、且つ頭の中は経年劣化しております。(-_-;)

まぁ、言い訳はこれくらいで…分からないなりに不具合の解決方法を探して考える事が楽しいので(ご利用されている方には迷惑ですが)、修正・更新は今後も続きます!(^-^;
申し訳ございませんが、何卒お付き合いの程 宜しくお願い致します。
Super源さん、当方JSは明るくないので教えて下さいませ。m(__)m

akiさん、こんばんは!(^^)/ * by Super源さん
久しぶりにやってきたところ、テンプレートがまた進化してるようですね。(^^)v
過去記事を少しずつ読ませていただき、遅れを取り戻したいと思います。【><】

というより、もしかしたら、テンプレートの修正等で、GWが終わってしまったのではないでしょうか。
複数のブラウザに対応させるのは、ホント大変ですよね。
どうもお疲れさまでした。m(__)m

それでは、またお邪魔します。(@^^)/~~~

* - 様へ * by aki
> scriptどうしがどこかで衝突しているからかもしれません。
正にその通りでした。
何度も申し訳ございませんでした。
詳細はメールでお送りしておりますのでご覧下さいませ。m(__)m

管理人のみ閲覧できます * by -

トーフスキー 様へ * by aki
無事に表示出来ましたか?不具合無ければ何よりです。(^_^)
また何かお気付きの点等がございましたら、どうぞ気兼ね無くお教え下さいませ。

修正・更新ばかりしている素人テンプレですが、どうぞ末永くお付き合い下さいます様、宜しくお願い致します。m(__)m

No Subject * by トーフスキー
うわぁ!ありがとうございますぅ。

私のような初心者にもわかる丁寧な説明をいただき感激です。
おかげさまで思っていたような形になりました。

この度はお手数をおかけしました。
あらためて御礼申し上げます。

今後ともよろしくお願いいたします。

トーフスキー 様へ * by aki
こちらこそ、助かりました。有難うございました。(^-^)
…で、修正された簡易表示(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

No Subject * by トーフスキー
修正ありがとうございます。
該当の箇所修正しました。

2点質問です。
スマホ表示の際、右上に表示されるハンバーガーボタンを大きくしたいんですがどうすればいいでしょう。一応太さと長さは変更しましたがもうちょっと大きくしたい。
このサイトくらいのサイズです。
http://pattayalife.net/

もう1点、ボディに表示される各記事の行数がWindows10上でfirefoxとchromeで異なります。
chromeは3行でちょうどいいんですが、firefoxは7行ほど表示されてちょっと間延びした感じになります。
できれば3行程度で揃えたいと思います。

教えてクレクレ君で申し訳ありません。

Comment-close▲

Comment







管理者にだけ表示を許可

aki Super源さん 様へ

修正・更新の新記事を書いている時にコメント頂いたのですね。^^;
また修正してました。スミマセン。。
昔テンプレートを作っていた頃と違って、HTML5・CSS3、レスポンシブ、JQuery、多様の閲覧デバイス等々と色々不勉強な事が多過ぎて覚えきれない&覚えられない…。
時代の流れの速さに追いつけず、且つ頭の中は経年劣化しております。(-_-;)

まぁ、言い訳はこれくらいで…分からないなりに不具合の解決方法を探して考える事が楽しいので(ご利用されている方には迷惑ですが)、修正・更新は今後も続きます!(^-^;
申し訳ございませんが、何卒お付き合いの程 宜しくお願い致します。
Super源さん、当方JSは明るくないので教えて下さいませ。m(__)m
2019-05-14-12:47 * aki [ 返信 * 編集 ]

akiさん、こんばんは!(^^)/

久しぶりにやってきたところ、テンプレートがまた進化してるようですね。(^^)v
過去記事を少しずつ読ませていただき、遅れを取り戻したいと思います。【><】

というより、もしかしたら、テンプレートの修正等で、GWが終わってしまったのではないでしょうか。
複数のブラウザに対応させるのは、ホント大変ですよね。
どうもお疲れさまでした。m(__)m

それでは、またお邪魔します。(@^^)/~~~
2019-05-13-23:20 * Super源さん [ 返信 * 編集 ]

aki * - 様へ

> scriptどうしがどこかで衝突しているからかもしれません。
正にその通りでした。
何度も申し訳ございませんでした。
詳細はメールでお送りしておりますのでご覧下さいませ。m(__)m
2019-05-03-15:48 * aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-05-02-15:21 * - [ 返信 * 編集 ]

トーフスキー 様へ

無事に表示出来ましたか?不具合無ければ何よりです。(^_^)
また何かお気付きの点等がございましたら、どうぞ気兼ね無くお教え下さいませ。

修正・更新ばかりしている素人テンプレですが、どうぞ末永くお付き合い下さいます様、宜しくお願い致します。m(__)m
2019-04-28-19:49 * aki [ 返信 * 編集 ]

No Subject

うわぁ!ありがとうございますぅ。

私のような初心者にもわかる丁寧な説明をいただき感激です。
おかげさまで思っていたような形になりました。

この度はお手数をおかけしました。
あらためて御礼申し上げます。

今後ともよろしくお願いいたします。
2019-04-28-08:17 * トーフスキー [ 返信 * 編集 ]

aki トーフスキー 様へ

こちらこそ、助かりました。有難うございました。(^-^)
…で、修正された簡易表示(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
2019-04-27-20:25 * aki [ 返信 * 編集 ]

No Subject

修正ありがとうございます。
該当の箇所修正しました。

2点質問です。
スマホ表示の際、右上に表示されるハンバーガーボタンを大きくしたいんですがどうすればいいでしょう。一応太さと長さは変更しましたがもうちょっと大きくしたい。
このサイトくらいのサイズです。
http://pattayalife.net/

もう1点、ボディに表示される各記事の行数がWindows10上でfirefoxとchromeで異なります。
chromeは3行でちょうどいいんですが、firefoxは7行ほど表示されてちょっと間延びした感じになります。
できれば3行程度で揃えたいと思います。

教えてクレクレ君で申し訳ありません。
2019-04-27-09:48 * トーフスキー [ 返信 * 編集 ]