*Essence

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

Top Page › Category - カスタマイズ
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-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-04-06 (Sat)

lace-al3,al2 のカスタマイズ(エントリー要約表示)

lace-al3,al2 のカスタマイズ(エントリー要約表示)

レスポンシブテンプレート、lace-al3(3カラム), lace-al2(2カラム)の記事表示の変更方法です。共有テンプレートDL時のトップページのエントリー表示は、2・3カラムとも記事毎の全文表示になっています。これを要約表示に変更する方法です。'19年4月5日の更新で、記事表示変更箇所を分かり易くするよう、HTML編集枠内のソースにコメントアウトを入れました。クリックで見本を表示↑3カラムクリックで見本を表示↑2カラム◎ テンプ...

… 続きを読む

2019-03-28 (Thu)

candy,green 2c 3c のカスタマイズ(エントリー全文表示)

candy,green 2c 3c のカスタマイズ(エントリー全文表示)

レスポンシブテンプレート、candy,green 3c(3カラム), 2c(2カラム)の記事表示の変更方法をです。共有テンプレートDL時のトップページのエントリー表示は、2・3カラムとも記事毎の要約表示になっています。これを従来の全文表示に変更する方法です。green-3c のカスタマイズ後見本レスポンシブテンプレートなので、ブラウザの幅を狭めてカラムの変化をご確認下さい。◎ テンプレートの設定画面を開いてHTMLを編集する。管理画面...

… 続きを読む

2019-03-12 (Tue)

春っぽいテンプレートに衣替え

春っぽいテンプレートに衣替え

3月も中旬、暖かい日和も増えて参りましたので、当ブログもそろそろ春めいた色のテンプレートにカスタマイズ。今年は桜の開花が早いらしいので、着せ替えCSSを掲載致しました♪桜の背景画像とメニューの背景色を変えてみただけですが、ちょっとだけでも春を感じて頂ければ幸いです。(^-^)*桜CSS適用済み見本『sakura1.html』←クリック!『ct_responsive』桜CSS(3カラム用)『ct_responsive』桜CSS(2カラム右用)『ct_responsive...

… 続きを読む

yasuko 様へ * by aki
益々春らしく変わりましたね♪
後はタイトルの文字色…を明るくしてみますか?
その場合は、スタイルシート編集枠の上の方に

/* ブログタイトル */
header a,
header a:link,
header a:visited{
color:#777; /* ブログタイトルの文字色 */
font-size:2.0em;
text-decoration:none;
}

という部分が有りますので、ここの文字色という部分を変更して下さい。
カラーコード、カラーネームは↓こちらをご参考に。
https://e-ssence-main.jp/tips-page/t-colorname.html (当方の素材サイトです)
スタイルシートで#777; というように数字が3つ記述して有るものは、同じ数字が6つの場合に省略しているものです。
なので、#fff; と書いて有るものは #ffffff; (白)の略で、#000; と書いて有るものは #000000;(黒)の略です。カラーネームで表記する場合は、
color:white;
というように記述します。(記述はカラーコードもカラーネームも全て半角英数です。)
ただ、タイトル文字色を白にした場合、1カラム(スマホでの表示設定)で表示する際に背景色と同じになって見えなくなってしまうので、スタイルシート編集枠を2/3弱下にスクロールした所に

/* 1カラム(ドロワーメニュー左) */

@media only screen and (max-width:749px) {
header a,
header a:link,
header a:visited{
font-size:1.4em;
}

という部分が有りますので、ここに1行追加して下さい。(↓こんな感じに)

/* 1カラム(ドロワーメニュー左) */

@media only screen and (max-width:749px) {
header a,
header a:link,
header a:visited{
font-size:1.4em;
color:#777; /* 追加 */
}

(タブレット端末やスマホでの見え方は、PCのブラウザ画面の幅を縮小してみる事で確認できます。)
勝手に書き連ねましたが、カスタマイズ不要であれば上記は読み捨てて下さいませ。
ドンドン、自分色のブログに変えて楽しんで下さいね。(^-^)

No Subject * by yasuko
春っぽい背景使わせて頂きました。
うまくかわりました。

とらのすけ 様へ * by aki
とらのすけ様 こんばんは♪
テンプレートのご利用・そしてコメント、有難うございます。m(__)m

時々 訪問頂いた方のブログを訪ねてみる事が有りまして、テンプレの使用未使用問わず面白そうなブログは拝読させて頂いております。(^-^)
またその際に(ご利用頂いている場合は)不具合が無いかも目視確認しています。
この度の件、記事にまでして頂いてかえって申し訳無いです。
お使い頂いて、また何かお気付きの点などがございましたら、どうぞ気兼ね無くお声掛け下さいね。
当方の分かる範囲ですが、お応えできる様 努力致します。(^^;

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

No Subject * by とらのすけ
ふぁー!おらのブログなんかに来ていただいて、ありがとうございます…!
はじめまして、とらのすけと申します。

こちらにコメントを残したわけでもないのに、
助言まで頂けるなんて、ほんにありがたいです。
どうしていいのか全然わからなかったので、とっても助かりました。(´;ω;`)
早速試してみたいと思います!

Akiさんのテンプレート素敵なものばっかりなので、これからもきっと、こちらにたくさんお世話になると思います。
よろしくお願いします。(*ノωノ)