05≪ 2019/06 ≫07
123456789101112131415161718192021222324252627282930
2019-06-12 (Wed) | カスタマイズ | COM(8) | TB(0)
レスポンシブテンプレート、serene-resp2c(2カラム), serene-resp3c(3カラム)の記事表示の変更方法です。
共有テンプレートDL時のトップページのエントリー表示は、2・3カラムとも記事毎の全文表示になっています。
これを要約表示に変更する方法です。

serene-全文画面

↑これを↓こんな風に(見本は3カラム。クリックでちょっと大きく表示します。)

serene-要約画面


◎ テンプレートの設定画面を開いてHTMLを編集する。
管理画面左の『テンプレートの設定』 →[serene_resp2c(3c)]のHTML編集枠を開いて、枠内の上から1/4程スクロールした所に有る <!-- 全文表示用HTMLの貼り換え ここから--> という所から <!-- 全文表示用HTMLの貼り換え ここまで--> という所までを、下記↓Read More に掲載しているHTMLに変更して下さい(コピー&ペースト)。
不具合が有った時のために『複製』を作成して作業する事をお勧め致します。m(__)m >> ReadMore
スポンサーサイト
2019-06-11 (Tue) | テンプレート | COM(0) | TB(0)
本日、申請していたテンプレート [serene_resp3c] [serene_resp2c-r(右メニュー)] [serene_resp-l(左メニュー)] の3点が共有化致しました。
今回の共有化は早かったです。が、実は昨日CSSで一ヵ所(FC2ブログ上部に有る検索バーの表示が)崩れる問題が有って、FC2に却下されたんですけどね。(^-^;
直ぐに修正して再申請し、無事共有化致しました。
昔は共有テンプレートを申請する人もいっぱいいて、共有化するまで一週間位掛かってたんですが…今は作る人減っちゃったからすぐに審査してもらえるのかな~?(;´∀`) それとやっぱり Yahoo!ブログ閉鎖の影響も有るのかも?
FC2ブログには沢山の素敵なテンプレートが有りますよ~♪…っていうのも売りですし。
まぁ、うちのは相変わらず昔ながらのデザインですが…そういうのもたまには有りでしょ。^^;

serene-2clm← [serene-2cl(2カラム・左メニュー)]
ディスプレイサイズによって、カラム数が 2 → 1 と変化します。

serene-2crm← [serene-2cr(2カラム・右メニュー)]
ディスプレイサイズによって、カラム数が 2 → 1 と変化します。

serene-3cm← [serene-3c(3カラム)]
ディスプレイサイズによって、カラム数が 3 → 2 → 1 と変化します。

1カラムになるとメニューがドロワー表示になり、ドロワー内のメニューは、他を開くと閉じる仕様。
また2・3カラムとも、記事上に表示されていたプラグイン3は、個別記事画面を表示すると記事下に表示され読み易くなります。
トップページのエントリー内 Comment-open でコメントを10件まで表示、個別記事ページの追記記述部分も展開式になっております。
PC及びモバイル端末で表示した際、420pxまでは全文表示しますが、それ未満の画面サイズでは要約表示になります。
これは、スマートフォンなどの小さい画面サイズで長文を表示すると、表示が重くなる・データ量が大きくなる・読みたい記事を探すのが大変等が憂慮されますので、このように表示するようにメディアクエリのブレークポイントを設定しております。
420px未満でも全文表示されたい場合は、スタイルシート編集枠内を下の方までスクロールさせ(7/8位)
@media only screen and (max-width:420px) {
という部分以下の
.kiji1{
display:block; /* 1カラム時要約表示 */
}
.kiji2{
display:none; /* 1カラム時記事非表示 */
}

を削除するか、若しくは下記のように変更して下さい。
.kiji1{
display:none; /* 1カラム時要約非表示 */
}
.kiji2{
display:block; /* 1カラム時記事表示 */
}


DLされた方は是非、テンプレートのHTMLとCSSの編集枠内をご覧になって下さい。
カスタマイズし易いようにコメントアウトを付けておりますので、追加したり・削除したり・変更したり、ご自身のお好みに近付ける事が出来ます。
その際にご不明な点などが有りましたら、どうぞ気兼ね無くお声掛け下さいませ。m(__)m


レスポンシブテンプレートは表示サイズ可変対応になっておりますので、パソコン・タブレット・スマートフォン等での表示のために、以下の設定をして下さい。

1) レスポンシブテンプレートはパソコン・スマホ共通なので設定を変更する。
PCやモバイル端末等の閲覧で、画面サイズが変化するレスポンシブデザインテンプレートを使う場合、初めに「スマートフォン版の表示設定」を変更して下さい。
管理画面左の『環境設定』 → 『ブログの設定』 →『スマートフォン版の表示設定』を無効にして更新。

2) 検索バーはレスポンシブ未対応なので非表示にする。
FC2ブログ上部に有る検索バーはレスポンシブ未対応なので、画面の表示サイズによっては途切れて表示されてしまうため表示を無効にします。
管理画面左の『環境設定』 → 『ブログの設定』 →『検索バーの設定』で[利用しない]を選択して『更新』。

先ず、上記2点の設定をお願い致します。m(__)m


2019-06-09 (Sun) | その他 | COM(2) | TB(0)
宇都宮駅西口側に用事が有って、うちから5km!運動がてら歩いて出掛けました。
その途上、昨年『餃子通り』と命名された通りにある9本の電柱に、今年4月から取り付けられた広告が3D♪という記事を見て通ってきました。(通っただけかいっ!…という一人突っ込み(^-^;)

↓本物のギョーザをスキャナーで読み込んで作成した立体的なデザイン。

餃子通り

3Dの電柱広告は全国初だそうで、試験的設置は6月末まで。
劣化等の様子を見て継続するそうです。(今日現在、見た目は大丈夫そうだけど。)
お近くに来られたら是非どうぞ♪





…と、それと取り敢えず予告だけ。(^-^;
先程共有テンプレートを申請致しました。
2カラム左右と3カラム、柔らかい色合いの、シンプルで普通のテンプレです。(…まぁ、昔ながらのレガシーデザインです。)
この度はエントリーページ全文表示で、簡単なカスタマイズで要約表示に出来ます。
問題が無ければ近日共有化致しますので、是非ご利用下さいませ。m(__)m


2019-05-16 (Thu) | カスタマイズ | COM(4) | TB(0)
2019/5/14 の記事に有りますように、修正及び装飾機能を追加致しましたのでカスタマイズのご案内を致します。
対象テンプレート『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』の2カラム,3カラム。

1) 記事の投稿時間表示の追加。
2) 記事の最終更新日表示の追加。
3) コメントの投稿時間表示の追加。
4) 折り畳み追記の表示方法変更。

投稿時間や最終更新日表示については、ユーザー様の要望を拝見致しましたので、5/14の更新でテンプレートに追加致しました。
ただ、投稿時間の表示は「個人の生活ペースが分かってしまうので知られたくない」というお声が、また最終更新日の表示は「誤字脱字程度の修正でも更新として表示されてしまう」というお声がございましたので、更新されたテンプレートでは自身の好みで非表示にできるようHTML内に『不要の際は削除』の文言を入れました。

投稿時間・更新日


(↑見本画像はct_responsive 画像が荒くてスミマセン。^^;)
トップページは要約表示なので敢えて投稿時間を表示せず、個別記事画面で投稿時間及び最終更新日を表示します。
また、頂いたコメントの投稿時間も表示します。



1) 記事の投稿時間表示の追加。
FC2ブログの管理画面左メニュー『設定』の『テンプレートの設定』を選び、使用テンプレートのHTML編集をクリック
[ テンプレート名 ] のHTML編集という枠内約1/3程スクロールした所に、下記のようなHTMLが有ります。

テンプレートの更新等で目印の文字列(コメントアウト)記述が無い場合は、テンプレート管理画面・調べたいテンプレートのHTML編集を表示したまま、キーボードの CtrlF を一緒に押して文字列を検索して下さい。(Mac ご利用の方はCtrlをCommandキーに置き換えて+Fキー)
[ 対象テンプレート ] ct_responsive2c,3c al_responsive2c,3c candy2c,3c green2c,3c lace-al2c,3c ryo-2c,3c
[ 検索する文字列 ] (<%topentry_youbi>) 対象1ヶ所

<!-- 全文表示用HTMLの貼り換え ここから-->
<div class="blog">
<!-- トップページ ここから-->
<!--topentry-->
<article class="blog-con blog-con2">
<div class="entry_title"><h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2></div>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)<a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" rel="noopener"><span class="pen-link">&#9998;</span></a>


これを下記のように変更します。( (<%topentry_youbi>) の後ろに <!-- 投稿時間不要の場合は ここから--> を追加。)

<!-- 全文表示用HTMLの貼り換え ここから-->
<div class="blog">
<!-- トップページ ここから-->
<!--topentry-->
<article class="blog-con blog-con2">
<div class="entry_title"><h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2></div>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)

<!-- 投稿時間不要の場合は ここから-->
<!--permanent_area-->&nbsp;<%topentry_hour>:<%topentry_minute><!--/permanent_area-->
<!-- 投稿時間不要の場合はここまでを削除 -->
<a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" rel="noopener"><span class="pen-link">&#9998;</span></a>

紫色になっている <!--permanent_area--> <!--/permanent_area--> を外すと個別記事ページだけでなく、トップページにも投稿時間が表示されます。



2) 記事の最終更新日表示の追加。
上記の位置から少し下へ下がった所に、下記のようなHTMLが有ります。

テンプレートの更新等で目印の文字列(コメントアウト)記述が無い場合は、テンプレート管理画面・調べたいテンプレートのHTML編集を表示したまま、キーボードの CtrlF を一緒に押して文字列を検索して下さい。(Mac ご利用の方はCtrlをCommandキーに置き換えて+Fキー)
[ 対象テンプレート ] ct_responsive2c,3c candy2c,3c green2c,3c ryo-2c,3c
[ 検索する文字列 ] <div class="entry-footer clearLeft"> 対象1ヶ所
[ 対象テンプレート ] al_responsive2c,3c lace-al2c,3c
[ 検索する文字列 ] <div class="entry_state"> 対象1ヶ所

<!-- 全文表示用HTMLの貼り換え ここまで-->

<div class="entry-footer clearLeft"> (若しくは<div class="entry_state">)


これを下記のように変更します。( <div class="entry-footer clearLeft"> (若しくは<div class="entry_state">) の上に追加。)

<!-- 全文表示用HTMLの貼り換え ここまで-->
<!-- 最終更新日不要の場合は ここから-->
<!--permanent_area--><p style="text-align:right;margin:0 10px;">Last Modified : <%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day></p><!--/permanent_area--><!-- 最終更新日不要の場合はここまでを削除 -->

<div class="entry-footer clearLeft"> (若しくは<div class="entry_state">)



3) コメントの投稿時間表示の追加。
同様に、HTML編集枠内を半分より少し下がった所に、下記のようなHTMLが有ります。

テンプレートの更新等で目印の文字列(コメントアウト)記述が無い場合は、テンプレート管理画面・調べたいテンプレートのHTML編集を表示したまま、キーボードの CtrlF を一緒に押して文字列を検索して下さい。(Mac ご利用の方はCtrlをCommandキーに置き換えて+Fキー)
[ 対象テンプレート ] ct_responsive2c,3c al_responsive2c,3c candy2c,3c green2c,3c lace-al2c,3c ryo-2c,3c
[ 検索する文字列 ] <%comment_day> 対象1ヶ所

<!--コメント表示-->
<!--comment-->
<p class="com2" id="comment<%comment_no>"></p>
<article class="com_block <%comment_name>">
<h3 class="com_title"><%comment_title></h3>
<%comment_body>
<div class="com_state">
<%comment_year>-<%comment_month>-<%comment_day> * <%comment_name> <script>


これを下記のように変更します。( <%comment_day> の後ろにを追加。)

<!--コメント表示-->
<!--comment-->
<p class="com2" id="comment<%comment_no>"></p>
<article class="com_block <%comment_name>">
<h3 class="com_title"><%comment_title></h3>
<%comment_body>
<div class="com_state">
<%comment_year>-<%comment_month>-<%comment_day>

<!-- 投稿時間不要の場合は ここから-->-<%comment_hour>:<%comment_minute><!-- 投稿時間不要の場合はここまでを削除 --> * <%comment_name> <script>



4) 折り畳み追記の表示方法変更。
5/14 の修正記事のように、個別記事ページの折り畳み追記方法を、JavaScriptの使用からCSSのみに変更致しました。
個人で追加したJavaScript等がバッティングして開閉動作がされない場合にご利用下さい。
変更可能なテンプレート 『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』 の2カラム・3カラム。

変更した追記部分はこんな感じです。(5/14の記事と同じ修正記事です。)
↓(変更方法はここをクリック) >> ReadMore
2019-05-14 (Tue) | テンプレ修正等 | COM(5) | TB(0)
レスポンシブテンプレート、『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』をご利用頂き、誠に有難うございます。m(__)m
ユーザー様よりご連絡を頂きまして、本日HTMLの記述ミス部分を修正・更新を致しました。
その他、記事及びコメント投稿時間(個別記事ページ)の表示、最終更新日(個別記事ページ)の表示、折り畳み追記表示部(ReadMore部分)をJavaScriptからCSSに変更、の追加を致しました。

1) 外部参照CSSのlink要素にtitle属性を指定していたため、CSSの表示優先に生じた不具合修正。
2) 投稿時間や最終更新日表示の追加、折り畳み追記の表示方法変更。


1) 外部参照CSSのlink要素にtitle属性を指定していたため、CSSの表示優先に生じた不具合修正。
修正が必要なテンプレート 『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』 の2カラム・3カラム。

外部リンクのJavaScriptとCSSをHTMLに追加記述した際に、JS内記述のスタイル及びCSSの一部が反映しない不具合が報告されました。(縦書き表示用JS・CSS)
テンプレートの <head></head> 内に有る
<link rel="stylesheet" href="<%css_link>" media="all" title="default"> という部分の、title="default" を外す事によって表示されるようになりました。
<link rel="stylesheet" href="<%css_link>" media="all">
(↑上記のように変更)
大変申し訳ございませんでした。そして、不具合にお気付き頂いた方へ、誠に有難うございました。m(__)m

修正する箇所ですが、上記のように<head></head> 内のタグを修正お願い致します。


2) 投稿時間や最終更新日表示の追加、折り畳み追記の表示方法変更。
投稿時間や最終更新日表示については、ユーザー様の要望を拝見致しましたのでテンプレートに追加致しました。
ただ、投稿時間の表示は「個人の生活ペースが分かってしまうので知られたくない」というお声が、また最終更新日の表示は「誤字脱字程度の修正でも更新として表示されてしまう」というお声がございましたので、すぐに非表示にできるようHTML内に『不要の際は削除』の文言を入れました。
カスタマイズとして近日記事に致します。ご入用の方は暫しお待ち下さいませ。m(__)m

個別記事ページの折り畳み追記方法を、JavaScriptの使用からCSSのみに変更致しました。
この仕様変更も、(1)のJSを加えた際の不具合と共にJSのバッティングなのか動いてくれなくなったため、依存しないCSSを使って開閉するように変更致しました。(上記のような追加JSが無ければ現行のままでも問題有りません。)
変更可能なテンプレート 『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』 の2カラム・3カラム。

変更した追記部分はこんな感じです。
↓(変更方法はここをクリック)
>> ReadMore