*Essence

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

Top Page › Category - Template
2019-06-12 (Wed)

serene_resp 2c,3c のカスタマイズ(エントリー要約表示)

serene_resp 2c,3c のカスタマイズ(エントリー要約表示)

レスポンシブテンプレート、serene-resp2c(2カラム), serene-resp3c(3カラム)の記事表示の変更方法です。共有テンプレートDL時のトップページのエントリー表示は、2・3カラムとも記事毎の全文表示になっています。これを要約表示に変更する方法です。↑これを↓こんな風に(見本は3カラム。クリックでちょっと大きく表示します。)◎ テンプレートの設定画面を開いてHTMLを編集する。管理画面左の『テンプレートの設定』 →[seren...

… 続きを読む

トップ画像について * by どなるど
akiさん、またまた今晩は(^-^)

こちらのテンプレート【serene-resp】のトップ画像のことで質問です。

下記のゆきゆず様への返信を拝見した時に思ったのですが、
トップ画像は、はみ出た部分は非表示されると書いてありましたが、切れないように表示させることはできないでしょうか?

今、使っているテンプレート【ct_responsive】だと
表示画像の高さ ÷ 表示画像の幅 × 100 で計算して%を書き換えれば、どんな大きさの画像でもオッケーだったので、ちょっと悩んでおります(T^T)
(見る側の環境によって切れ方が違うのでトップ画像デザインの難易度が高くて。。。)

出来るようであれば、教えていただきたいです。
度々すみませんm(_ _)m

どなるど 様へ * by aki
当方のテンプレート管理画面は、滅茶苦茶沢山の複製が有ります。^^;
ああでもない・こうでもない、でも忘れると困るから、いやいつかのために、等々…そのうち整理しないといけないなぁ~と思いつつ増えていってます。。

色々不備・不具合の更新も有って、ユーザーの方々にはご迷惑をお掛けしております。
皆様のお気付きが有ってのテンプレートと言いますか、当方もテンプレートも一緒に成長させてもらっております。(^-^;

本当に、いつも有難うございます。m(__)m

ありがとう御座います。 * by どなるど
akiさん、こんばんは(^-^)

詳しくいろいろ教えてくださり、ありがとう御座います。
コピペなら私でも出来そうなので、
複製いっぱい作って頑張ってみます(^^)v

カスタマイズ記事にしていただけるのは嬉しいです♪
テンプレートがバージョンアップして更新された時に、
過去のカスタマイズの仕方を教えていただいたコメントを
毎回、探しながら貼り替え作業してたので助かります(≧∇≦*)

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

どなるど 様へ * by aki
テンプレート内に既に記述して有るscript(コメントOpen用)を使って、トップページでの追記開閉が出来ます。
昔作った(更新2014年の)テンプレートには付いているのですが、それだと個別ページに誰も来てくれないからという事で、レスポンシブ化に伴って個別記事での開閉に変更しておりました。
『個別記事への移動→クリックして開く』という追行為が面倒な場合も有りますので、後日カスタマイズとして記事にさせて頂きますね。
で、先にコメントとして掲載させて頂きます。(^-^)

HTML編集枠1/3程スクロールした所に
<!--more_link-->
という部分が有ります。
(PCのキーボードで『Ctrl+Fキー』を押して開いた窓に<!--more_link-->を入れて検索すると一ヵ所だけ有ります。)
場所を見付けて頂いたら、その個所から
<!-- 全文表示用HTMLの貼り換え ここまで-->
を下記に貼り換えて下さい。

<!--more_link-->
<p><a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Read More</a></p>
<noscript>
<a href="<%topentry_link>#readmore">Read More</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<%topentry_more>
<p><a href="#more<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a></p>
</div>
<!--/more_link-->
<!--more-->
<p id="readmore" style="padding-top:1.8em;margin-top:-3em;margin-left:-5px;">​</p>
<%topentry_more>
<!--/more-->
</div>
<!-- 全文表示用HTMLの貼り換え ここまで-->

後は更新ボタンを押して頂ければ完了です。
それと、このテンプレートはスマホ等小さい画面で表示する際(420px以下)で要約表示に変化します。
https://sorauta1.blog.fc2.com/blog-entry-320.html
このページに小さい画面でも全記事表示方法が有りますので、必要であれば追加カスタマイズをお願い致します。(お手数おかけしますが、簡単です(^-^;)
不具合が有った時のために、複製を作ってから作業して頂くと安心です。m(__)m

Read Moreについて * by どなるど
akiさん、こんにちは(^-^)

今回のテンプレート【serene-resp】のRead Moreなのですが…個別ページに飛ぶことなく、トップページのまま開閉させる事はできないでしょうか?

全文表示のテンプレートなので、
出来ればそのままニョーンとさせたいのですが…
出来そうなら教えていただきたいですm(_ _)m

ゆきゆず 様へ * by aki
いつもご愛顧有難うございます。(^-^)
折角の可愛い猫にゃん達のトップ画像でしたのに…(ちょっと勿体無い気が。^^;)
では、またカスタマイズしてゆきゆず様用に彩って下さい♪
因みにトップに使っている画像サイズは750px×350pxになっていて、
padding-top:40%; /* トップ画像の高さ */
の数値で、縦横比を保ちつつはみ出た部分を非表示にして拡大縮小します。
このテンプレートは背景色のみで画像を設定しておりませんので、必要な場合はスタイルシートの body に
background: url(画像のURL) repeat fixed;
を追加して下さい。(記述が分からない場合は、カスタマイズされる時にお問い合わせ下さいね。)

今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m

p.s. 別件で、貴ブログに鍵コメ入れましたのでご確認下さいませ。

No Subject * by ゆきゆず
ご無沙汰しています。
久しぶりにパソコンを開いたら
こんな素敵なテンプレートが!!
さっそく使わせて頂きます。
いつもありがとうございます♪
要約表示にしてみました~!!
バッチリです( *´艸`)

2019-06-11 (Tue)

serene_resp テンプレート共有化しました。

 serene_resp テンプレート共有化しました。

本日、申請していたテンプレート [serene_resp3c] [serene_resp2c-r(右メニュー)] [serene_resp-l(左メニュー)] の3点が共有化致しました。今回の共有化は早かったです。が、実は昨日CSSで一ヵ所(FC2ブログ上部に有る検索バーの表示が)崩れる問題が有って、FC2に却下されたんですけどね。(^-^; 直ぐに修正して再申請し、無事共有化致しました。昔は共有テンプレートを申請する人もいっぱいいて、共有化するまで一週間位掛か...

… 続きを読む

2019-05-16 (Thu)

投稿時間と最終更新日を表示&追記開閉CSS

投稿時間と最終更新日を表示&追記開閉CSS

2019/5/14 の記事に有りますように、修正及び装飾機能を追加致しましたのでカスタマイズのご案内を致します。対象テンプレート『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』の2カラム,3カラム。1) 記事の投稿時間表示の追加。2) 記事の最終更新日表示の追加。3) コメントの投稿時間表示の追加。4) 折り畳み追記の表示方法変更。投稿時間や最終更新日表示については、ユーザー様の要...

… 続きを読む

* - 様へ * by aki
ご訪問頂き有難うございます。(^_^)
不躾に訪問して、勝手に色々書き込んで大変失礼致しました。
そして、可愛くカスタマイズして頂き感謝致します。(ヘッダー画像のお手々がセンス良いです♪)
時々カスタマイズや修正・更新記事を掲載しておりますので、是非見に来て下さいね。
また、ご不明な点やお気付きの点なども、どうぞ気兼ね無くコメント下さいませ。

この度は素敵な出会いを有難うございました。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m

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

* - 様へ * by aki
大変失礼致しました。
テンプレートの種類やDL時期によって、タグのclassやid名が違ったりコメントアウトが記述されていない場合も有りますね。
(…というご質問と受け取りましたが、 違っておりましたらお教え下さい。)
先程この記事の内容を修正致しましたので、文字検索でカスタマイズの位置を探し、必要タグを追記述して下さい。
宜しくお願い致します。m(__)m

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

2019-05-14 (Tue)

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

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

レスポンシブテンプレート、『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』をご利用頂き、誠に有難うございます。m(__)mユーザー様よりご連絡を頂きまして、本日HTMLの記述ミス部分を修正・更新を致しました。その他、記事及びコメント投稿時間(個別記事ページ)の表示、最終更新日(個別記事ページ)の表示、折り畳み追記表示部(ReadMore部分)をJavaScriptからCSSに変更、の追加を致しました。...

… 続きを読む

koubeiwata19 様へ * by aki
koubeiwata19様、初めまして♪
テンプレートのダウンロード、誠に有難うございます。
FC2ブログには沢山のテンプレートが有りますので、気分で変更しても楽しいですよね。
色々なものをお試し頂いて、是非お気に入りを見つけて下さい。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m

No Subject * by koubeiwata19
今晩は

素敵なテンプレートを

お借りしました

有難う御座います

素姓乱雑 様へ * by aki
この度の縦表示の件、お問い合わせ頂かなかったら 当方の気付きも無く、改善も無いまま利用を諦める方がいらっしゃったかもしれません。
改めてお礼申し上げます。有難うございました。m(__)m

テンプレート、ご利用頂いてるんですね♪嬉しいです。(^-^)
FC2のアクセス解析も問題無い位置です。(<body>直下でOKです)
一応、設置のマニュアルURLです。
https://help.fc2.com/analysis/manual/Home/secchi.html

ブログ記事を拝見させて頂いて気付いたのですが、当方のテンプレートはIEとEdgeも対応です。
ただ、IEで閲覧時に 記事内の画像が大きく枠をはみ出てしまっていますので、スタイルを一つ追加して下さい。(これを加えればIE9~11でも崩れ無く表示出来ます。開発者ツールにて確認)

.shadow-attachment {
box-shadow: 6px 6px 6px rgba(0,0,0,0.4);
max-width: 100%; /* 最大表示幅 */
}

画像の影スタイルに、max-width: 100%; を追加して下さい。
そうしますと新しいブラウザは素より、当方の手持ちブラウザ(確認用に敢えて古いバージョン。win10)IE,Edgeの他 Opera27.0,Firefox40.0,Safari5.1 でもはみ出さずに表示出来ます。(^_^)

No Subject * by 素姓乱雑
一つ書き忘れました。FC2アクセス解析をどこに放り込んだら最適か、
ご教示ください。

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

2019-04-26 (Fri)

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

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

レスポンシブテンプレート、『al_responsive』『ct_responsive』『candy』『green』『lace_al』をご利用頂き、誠に有難うございます。m(__)mユーザー様よりご連絡を頂きまして、本日HTMLの記述ミス部分を修正・更新を致しました。修正したのは2点。1) ドロワーメニュー下の Title list 及び RSS のリンク先URLの誤記述。2) 文字サイズを任意で大きくした際の、下方文字はみだしをしないように修正。1) ドロワーメニュー下...

… 続きを読む

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行程度で揃えたいと思います。

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