*Essence

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

Menu2
 

重要!7/5の記事、CSSの修正1ヵ所追加お願いします!

重要!7/5の記事、CSSの修正1ヵ所追加お願いします!

テンプレートをご利用頂き有難うございます。m(__)m先日7/5に掲載した記事『重要!レスポンシブテンプレートの修正・更新致しました。7/5』に、記載し忘れた変更CSSがございましたので、新しい記事では有りますが掲載させて頂きます。症状としては、前記事の修正を行うと1カラム時にドロワーメニューを開いた際、メニューが一番最上部に貼り付いて背景と一緒にスクロールしてしまいます。これは、FC2の広告を最上部に固定させない...

... 続きを読む

テンプレートをご利用頂き有難うございます。m(__)m
先日7/5に掲載した記事『重要!レスポンシブテンプレートの修正・更新致しました。7/5』に、記載し忘れた変更CSSがございましたので、新しい記事では有りますが掲載させて頂きます。

症状としては、前記事の修正を行うと1カラム時にドロワーメニューを開いた際、メニューが一番最上部に貼り付いて背景と一緒にスクロールしてしまいます。
これは、FC2の広告を最上部に固定させないための手段として、ドロワーメニューの背面を固定する『 height:100% 』を外したために起こるものです。
これを従来通りの位置にメニューを固定するために、下記のようにCSSの記述を修正して下さい。


al_responsive2c-l, al_responsive2c-r, al_responsive3c
lace-al2, lace-al3
 の場合
スタイルシート編集枠を1/3より少し上位までスクロールした所に有る
/* メニュー */ の下

nav{
position:fixed; /* absoluteからfixedに変更 */
~ 省略 ~
}


serene_resp2c-l,serene_resp2c-r,serene_resp3c
ct_responsive2c-l,ct_responsive2c-r,ct_responsive3c
candy-2c,candy-3c
green-2c,green-3c
dt21_ryo-3c,ryo-2c
 の場合
(/* ドロワーメニュー部分 */ 以下↓スクロールして)
スタイルシート編集枠を4/5位までスクロールした所に有る

nav{
position:fixed; /* absoluteからfixedに変更 */
~ 省略 ~
}

上記の記述変更を行って下さい。大変ご迷惑をお掛けしました。m(__)m
(7/5に更新した後のテンプレートで不具合挙動は有りませんが、更新前のテンプレートで7/5の記事通りに修正を行うと不具合が生じますので、上記修正をお願い致します。)
また、本日の記事は重複致しますが7/5の記事にも掲載致します。

スポンサーサイト

Theme : 共有テンプレート * Genre : ブログ * Category : テンプレ修正等

Comment-open▼ * Comment : (0) * Trackback : (0) |

重要!レスポンシブテンプレートの修正・更新致しました。7/5

重要!レスポンシブテンプレートの修正・更新致しました。7/5

拙いテンプレートをご利用頂き、誠に有難うございます。本日、共有化済みレスポンシブタイプのテンプレート 『serene_resp』『ct_responsive』『al_responsive』『ryo』『candy』『green』『lace_al』 の2カラム及び3カラムを修正・更新致しました。FC2ブログの広告によって、1カラム表示になった際のドロワーメニューが開かなくなる不具合が発生致します。これは、スマートフォン(android,iPhone)の各ブラウザアプリでモバイル...

... 続きを読む

拙いテンプレートをご利用頂き、誠に有難うございます。
本日、共有化済みレスポンシブタイプのテンプレート 『serene_resp』『ct_responsive』『al_responsive』『ryo』『candy』『green』『lace_al』 の2カラム及び3カラムを修正・更新致しました。

FC2ブログの広告によって、1カラム表示になった際のドロワーメニューが開かなくなる不具合が発生致します。
これは、スマートフォン(android,iPhone)の各ブラウザアプリでモバイル表示をしている時に、下段に表示される広告が上昇して固定する事があり、この『上昇する広告』が邪魔をしてドロワーメニューのボタンが押せなくなる不具合です。
(表示パターンが幾つか有って、全ての広告がこのタイプではありません。)
この現象は、html や body に cssの height:100% が有ると発生するようです。
当方のテンプレートで該当スタイルを確認してみましたら、スタイルシート編集枠内上段に有る reset css の中(上から6段目程)に
html,body{height:100%;} が有り、テンプレートによってはこの部分の下に
html,body{
width:100%;
height:100%;
min-height:100%;
}
というスタイルが記述されているものが有る事が分かりました。
また、ドロワーメニュー内をスワイプしている際に後ろ側のページがスクロールしないよう、メニュー用のjQueryに html と body に対して、height:100% とoverflow:hidden を入れたものを使っておりました。
この、上部に広告が固定してしまう不具合を解消するため、本日の修正で上記のスタイル及びスクリプトを削除し、更新致しました。
本日以前(7月5日夕刻まで)にテンプレートをDLされた方は、お手数ですが再DLされるか、以下の修正を行って下さい。

また、詳しく画像付きでこの不具合を解説されているブログがございますので是非ご参照下さい。
【超重要】FC2ブログ広告によって起こる表示不備について: The other way round
貴重な記事、有難うございました。m(__)m



① テンプレートのスタイルシート編集枠内上部
/* -----reset css------ */ 以下6段程下に有る
html,body{height:100%;} を削除
同じくこの
/* ---reset css end---- */ 以下にある
html,body{
width:100%;
height:100%;
min-height:100%;
}
の中の height:100%; を削除



② 同じくスタイルシート編集枠内の下記部分を修正 (7/8の記事で修正している部分です。
al_responsive2c-l, al_responsive2c-r, al_responsive3c
lace-al2, lace-al3
 の場合
スタイルシート編集枠を1/3より少し上位までスクロールした所に有る
/* メニュー */ の下

nav{
position:fixed; /* absoluteからfixedに変更 */
~ 省略 ~
}

serene_resp2c-l,serene_resp2c-r,serene_resp3c
ct_responsive2c-l,ct_responsive2c-r,ct_responsive3c
candy-2c,candy-3c
green-2c,green-3c
dt21_ryo-3c,ryo-2c
 の場合
(/* ドロワーメニュー部分 */ 以下↓スクロールして)
スタイルシート編集枠を4/5位までスクロールした所に有る

nav{
position:fixed; /* absoluteからfixedに変更 */
~ 省略 ~
}



③ その他テンプレート毎に、HTML編集枠下段に有るscript群の中からドロワーメニュー表示用のscriptを探し、下記のものと差し替えて下さい。
(目印)
<script>
$(function(){$("#nav_open")
若しくは
<script>
$(function(){$("#aside_open")

長いので、続きからどうぞ。m(__)m

Read More

Theme : 共有テンプレート * Genre : ブログ * Category : テンプレ修正等

Comment-open▼ * Comment : (13) * Trackback : (0) |
Re: トーフスキー 様へ * by aki
お返事が遅くなり、大変申し訳ございませんでした。
https://blog-imgs-128.fc2.com/s/o/r/sorauta1/category-monthly_list.txt

作業箇所も一緒に書いて有りますのでご確認下さいませ。m(__)m
当方はヤフブロに知り合いが居ないため、ブログの構成を良く見た事無いのですよね。^^;
なので「あんな風に~~」みたいなのが分からないのです。お手数をお掛けしてスミマセン。
どっちにしてもテンプレート自体が我流なので、不備・不具合・お気付き等何かございましたら色々お教え下さいませ。

ヤフブロご出身の方は皆さま長く運営されてる方がばかりで、記事数が半端無く多い!それはそれは素晴らしく、すごい事です。(^-^)
なので自身のブログで確認しようにも、先般の如く(記事数が少ないが故に)難しいことも有るのですね。
この度お手伝い頂き良く分かりました。有難うございました。m(__)m

Re: aki 様へ * by トーフスキー
ひとつ思いついたんですが、カテゴリや月別アーカイブ内で、記事一覧と要約表示をボタンで切り替えってできないでしょうか。

先の全記事一覧のボタンのような感じ。
デフォルトは要約表示で。

これができればうれしい。
ヤフブロの[ リスト | 詳細 ]のような感じ。

素人が勝手なことを言って申し訳ありません。

Re: aki 様へ * by トーフスキー
遅ればせながら本日テンプレートを修正してみました。
結論からいうと、全記事一覧とコメントの時間表示だけ修正しました。

カテゴリ一や月別アーカイブ、タグ内の一覧表示は下部の記事要約とダブるのが閲覧者には混乱を招くかなって思って、適用してみたものの結局削除しました。

要約記事を削除する方法も教えていただんですが、それなら記事一覧無しの要約だけでいいかと・・・

懇切丁寧に教えていただいたのに申し訳ありません。

でもまた気が変わったときのためにこちらの記事やtxtへのリンクは保管しておきます。

いつもいつも親切な対応ありがとうございます。感謝しております。

Re: トーフスキー 様へ * by aki
お返事が遅くなり申し訳ございません。
先ず、先般追加した部分は削除して、元に戻して頂けるようお願い致します。
(↓で変更した箇所です。この変更した部分を削除して下さい。)
『カテゴリーとアーカイブリスト』
https://blog-imgs-128.fc2.com/s/o/r/sorauta1/ct_categorylist.txt ←このソースは削除

HTMLを挿入する場所は、同じ『全記事リスト』の
<div class="archive">
<!-- 全記事リスト開始 -->
の所から
<!-- 全記事リスト終了 -->
</div>
までを削除し、そこに下記のURLを表示させた全文を貼り付けて下さい。
全部貼った後の下段には
<div class="menu3">
<!--プラグイン3-->
が来ますので場所をお間違えの無いように。(^-^)
『全記事一覧・カテゴリー・月別・タグリスト』
https://blog-imgs-128.fc2.com/s/o/r/sorauta1/archive-list.txt ←これを全てコピペ

プラグイン3はindexページのみ表示にされてるのかな?であれば次に記述されているソースは
<!--index_area-->
<div class="menu3">
<!--プラグイン3-->
になりますのでご確認下さい。

サイドのメニューで『カテゴリー』や『月別アーカイブ』『タグリスト』をクリックし表示したページのリスト数は、管理画面の環境設定(ブログの設定→記事の設定)で変更して下さい。
一応、そのページだけページネーション(ページ割りのリンク)を上段に持ってきています。
次へ・前へという表記が良い場合はお教え下さいませ。m(__)m
また、各ページのリスト下段に記事の要約表示が表示されるのですが、不要であれば(リストのみ表示したい場合)、下記のようにFC2のエリア変数を追加して下さい。

<!-- トップページ ここから-->
<!--topentry-->
<!--not_category_area-->
<!--not_date_area-->
<!--not_tag_area-->

<article class="blog-con blog-con2">
省略
</article>
<!--/not_tag_area-->
<!--/not_date_area-->
<!--/not_category_area-->

<!--/topentry-->
<!-- トップページ ここまで -->

(どんな表示になるかは、このブログで確認できます。)

>あと可能なら、タイトルは1行におさまる最大の文字数で切ってもらうことは可能でしょうか。
…文字数で非表示にするにはJS使ったりと難しいので、CSSでやってみました。
幅100%で、それを超える文字は非表示及び三点リーダーで省略するように、先程のタグ内にインライン化しています。

>あと、質問ですが、コメントに日付だけでなく時間も表示するようにするにはどうすればいいんでしょう?
…カスタマイズ記事に掲載しておりますので、こちらのページを参考に頑張ってみて下さい。あ、簡単ですよ。(^o^)丿
https://sorauta1.blog.fc2.com/blog-entry-318.html

以上ですが、カスタマイズには複製を作ってから!が安心です。戻すのって大変ですものね。^^;
それと、カスタマイズの具合を見てどんな感じか、ご面倒でもお教え頂いて宜しいですか?

No Subject * by トーフスキー
なるほど、カテゴリ別の一覧表示はそういうロジックでしたか。
それなら1ページに収まらない場合はおかしな表示になってしまいますね。
仕方ないですね。

>直ぐ変更できますよ?(^-^)

これお願いします。
教えてくださいm(_ _)m

>HTMLの追記編集でカテゴリ・月別アーカイブ・タグページに、ページの記事一覧リストを表示する方法

これも合わせてお願いします。

あと、質問ですが、コメントに日付だけでなく時間も表示するようにするにはどうすればいいんでしょう?

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

Re: トーフスキー 様へ * by aki
表示、確認致しました。テストして頂き有難うございます!
開いていない部分の表示とそのページに表示されるカテゴリー別の件数自体は不具合では無いですね。これはこれで正常です。(^^;

カテゴリー別の一覧を表示するのに、『ページの全記事一覧を出してから振り分けする』というjavascriptなので、というかNet上で掲載されているのを複数確認してみましたら全て同じJSでしたので、CSSこそ違えども同じ表示になるでしょう。
なので、各カテゴリーを1ページに何件表示する では無く、このページに有るカテゴリー件数、という事ですね。
問題は、当方のように件数が少なく1ページ(1000件)で収まるなら綺麗に振り分けするのでしょうが、トーフスキーさんのように1ページ1000件で収まらず複数ページに表示される場合、カテゴリーで振り分けられるのはそのページで表示された1000件(掲載日順)なので、カテゴリー名が有っても2ページ目や3ページ目に表示されるような古い日付の記事だと、そのページになるまで(展開されず)リスト表示になるようです。
(例えば「海外発券」は全記事内に39件ありますが、1ページ目には表示されず2ページ目に6件有るので、カテゴリー分けされたページでも2ページ目にリスト表示されます。)

なるほど!こういうのは記事が1000件以上無いと確認できませんでしたので、非常に助かりました!( ;∀;)
有難うございました♪m(__)m
実はカスタマイズ記事とかブログ標準装備とか考えていたのですが…問い合わせが来そうなのでやめときます。。(^^;

カテゴリー別一覧表示をやめて『全記事一覧』の表示に戻し、タイトル一列にしてシンプルな方が良いなら、要望のように変更しますか?
直ぐ変更できますよ?(^-^)
他に、プラグインでは無くHTMLの追記編集でカテゴリ・月別アーカイブ・タグページに、ページの記事一覧リストを表示する方法も有ります。
このブログのCategorys,Archivesで試しておりますのでクリックしてみて下さいね。(ユーザータグは当ブログ、入れて無いので^^;)

No Subject * by トーフスキー
追加で申し訳ありません。
ちょっと要望なんですが、タイトルの後ろにカテゴリ名が連結されてますが、これを無しにしたい。
タイトルもできるだけ短くしたいんですヨ。

ex.
この[┣バンコク]という文字列。
”シティポイントホテル到着◆バンコクパタヤ旅行記2019年05月(05)05/13 [┣バンコク]”

あと可能なら、タイトルは1行におさまる最大の文字数で切ってもらうことは可能でしょうか。

Re: aki 様へ * by トーフスキー
カテゴリ別記事一覧、実装してみました。
ちょっと不具合があるようです。

いくつかのカテゴリについては記事が展開されていません。
パット見た限り規則性はなさそうです。

確認いただければ幸いです。

Re: Super源さん 様へ * by aki
こちらこそご無沙汰してしまって。(^^;
流石に先週はバタバタでした。
何せレスポンシブで申請しているテンプレートが全部『ドロワーメニュー』!なので、何処をどう直したらいいやらで頭の中もいっぱいいっぱいでした。
(また、記事にも掲載ミスがありましたし。)

Super源さんはご自身でhtmlもcssもJSも書けますし、プラグイン作ったりもできますから、いっその事自分専用テンプレートも作ってみては如何です?(^o^)丿

Re: トーフスキー 様へ * by aki
スミマセン!1ヵ所修正の掲載を失念致しました!
今、急いで追加記事とこの記事に追記致しましたので、大変お手数ですが修正をお願い致します。。
また助けて頂きました。有難うございました!m(__)m
それと鍵コメの件ですが…何となく(私が)介入し過ぎ・図々し過ぎたかなと思ったのです。
もし使ってみて頂けるのであれば有難いですが。。

Comment-close▲

プラグイン3をお知らせ用に表示する・管理人コメントを装飾

プラグイン3をお知らせ用に表示する・管理人コメントを装飾

メールやコメントでご質問頂いた事案の回答を、カスタマイズとして掲載致します。1) プラグイン3をお知らせ用にインデックスページのみに表示。2) 管理人コメントに画像を表示。3) 管理人コメントの背景色を変更。(スタイル追加可)1) プラグイン3をお知らせ用にインデックスページのみに表示。プラグイン3をトップのお知らせ用として、ブログのトップページのみに表示します。(次ページ以降は表示されない。)当...

... 続きを読む

メールやコメントでご質問頂いた事案の回答を、カスタマイズとして掲載致します。

1) プラグイン3をお知らせ用にインデックスページのみに表示。
2) 管理人コメントに画像を表示。
3) 管理人コメントの背景色を変更。(スタイル追加可)



1) プラグイン3をお知らせ用にインデックスページのみに表示。
プラグイン3をトップのお知らせ用として、ブログのトップページのみに表示します。(次ページ以降は表示されない。)
当方のテンプレートでは、通常、プラグイン3が記事カラム最上段に表示され、個別記事ページでは最下段に表示されるようになっております。
これを、インデックスページにのみ表示するカスタマイズです。

FC2ブログの管理画面左のメニュー『設定』の『テンプレートの設定』をクリックし、DLしたテンプレートの「HTML CSS」の編集をクリックします。
HTMLの編集枠をスクロールしていくと、
<div class="menu3">
<!--プラグイン3-->

という部分が有ります。
(PCのキーボードで『Ctrl+Fキー』を押して開いた窓に <!--プラグイン3--> を入れて検索すると2ヵ所有りますので、上の方に有るものを改変して下さい。)
場所を見付けて頂いたら、その個所から
<!--/プラグイン3-->
</div>

という部分までを下記のようにFC2独自の変数タグで挟んで下さい。

<!--index_area-->
<div class="menu3">
<!--プラグイン3-->
~~~省略~~~
<!--/プラグイン3-->
</div>

<!--/index_area-->

この<!--index_area--><!--/index_area-->で挟んだ部分はトップページのみに表示されます。
ただ、ページ上部に有るプラグイン3の全てがトップページのみの表示になりますので、常に表示しておきたいものは
サイドメニューに表示されるプラグイン1・2に移動して下さい。
また個別記事ページ下段に表示されるプラグイン3は、エントリーページの改変に関係無く表示されるので、
不要の場合はHTML編集枠2/3程スクロールした所に有る(検索結果2ヵ所のうち下の方)

<!-- 固定リンク画面の下段に表示 -->
<div class="menu3">
<!--プラグイン3-->
~~~省略~~~
<!--/プラグイン3-->
</div>
<!-- 固定リンク画面の下段に表示 ここまで -->


という部分を削除して頂くと、個別記事ページ下段に表示されなくなります。
あとは更新ボタンを押せば反映されますが、不具合が有った時のために複製を作成し作業すると安心です。




2) 管理人コメントに画像を表示。
2018年2月、テンプレート変数に管理人コメントブロック変数が追加されたのですが、テンプレートへの実装をしておりませんでした。(正直、FC2インフォメーション見て無かった…^^;)
今後のテンプレート更新時や新規申請テンプレートには付けようと思います。が、カスタマイズとして、すぐに付けられるよう掲載しておきます。(2019/06/29 の更新で当方のレスポンシブテンプレートに「管理人画像変数タグ」を実装致しました。)

テンプレートのHTML編集枠を大体半分位スクロールした所に
<%comment_title>
という部分が有ります。(ほぼ当方のテンプレートでは同じくらいの位置に有りますが、見つからない場合は検索して下さい。
(PCのキーボードで『Ctrl+Fキー』を押して開いた窓に <%comment_title> を入れて検索します。)
この変数タグの前に下記オレンジ色の部分を追加して下さい。

<!--comment_author--><img src="<%image>" alt="<%author_name>" style="border-radius:50%;width:50px;height:50px;margin:-18px 0 -8px -23px;border:1px solid #bbb;">&nbsp;<!--/comment_author--><%comment_title>

上記では環境設定のプロフィール画像が(小さく^^;)表示されます。
プロフィール画像以外を表示させたい場合は、<img src="<%image>" ~~の部分を
<img src="表示したい画像のURL" ~~
に変更して下さい。

後は更新ボタンを押して適用させて下さい。
ただ、管理人画像を表示させるには、FC2ブログにログインしている状態でコメント、または返信している必要が有ります。
(コメントの管理画面から必ずしもレスを打つ必要は有りません。あくまでも『ログインしている状態』であれば良いので、その状態で自ブログの投稿画面に打ち込めば表示されます。)
ログインしていない状態で打ったコメントには、画像が表示されません。m(__)m




3) 管理人コメントの背景色を変更。(スタイル追加可)
以前コメントにてご要望を頂き、現行の共有化済みレスポンシブテンプレートに、すぐに使えるCSSが付いております。
既に、使い方の説明を過去の修正・装飾記事に掲載しておりましたが、再度こちらにも掲載致しますので是非ご利用下さい。m(__)m

テンプレート設定ページの一番下に [ テンプレート名 ] のスタイルシート編集 という枠が有ります。
その枠を一番下までスクロールすると、

/* 管理者コメントの背景に色を付ける(日本語可・記号等は文字の前にバックスラッシュを入れる)
バックスラッシュは日本語表示用フォントで円記号に見えますが問題ありません */

.コメント入力時の管理者名 {
background-color:#fcfff2;
}


という文言が有ります。(上記はserene_resp2c-lの場合)
この .コメント入力時の管理者名 という部分に、コメントを書き込む際のお名前を入れて下さい。
例えば当方なら .aki , 名無しさんだったら .名無しさん , のように、記号が入る場合は記号の前にバックスラッシュ(フォントによっては\マークに見える。キーボードの位置は右下辺り、『ろ』のキー)を入れます。(例: .neko\*chan )
スタイルの内容は背景色になっておりますが勿論変更可。背景画像にしたり、文字色を変えたり、お好みに変更して下さい。

また、該当する箇所が無い場合(更新前のテンプレート等)は過去の修正・装飾記事にも掲載しておりますので、そちらも併せてお読み下さい。
al_responsiveとct_responsiveの修正及び装飾追加

カスタマイズは、不具合が有った時のために複製を作成して作業すると安心です。

Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ

Comment-open▼ * Comment : (9) * Trackback : (0) |
管理人のみ閲覧できます * by -

Re: ひまわり 様へ * by aki
ブログ拝見致しました。表示は問題無さそうですね。
ただ一ヵ所だけ、弄られたタグが廃止になっているタグですので、今後意図した表示ができなくなる可能性が有ります。
簡単ですので今のうちに直しておきましょう。(^o^)丿

ひまわりさんのブログに鍵コメで伺いますので読んで下さいね。
(^-^)

有り難うございました! * by ひまわり
aki様、お早うございます!
有り難うございました。
昨夜、早速やってみて上手くいきました。
間違えてもすぐに削除できそうな箇所だったので、
少しだけいじってみました。
見た目は大丈夫そうですが、どうでしょうか?
カウンターの設置の時に見た目は大丈夫なのに、
カウントしたりしなかったりで、
慌てたことがありました。

Re: okki 様へ * by aki
okki 様、ご自身のお名前を入れる所、お間違えですよ。(;´∀`)

ご安心頂けて何よりです。ドンドン記事の投稿・コメントなど、沢山書き込んで下さいね♪

「みんみん」ですか。(^-^)引っ越してきたばかりの時は歩いて5分圏でした。
で、去年 野良猫飼うために引っ越しして、今は「正嗣」が徒歩5分圏です。^^;
確かに宇都宮は、餃子の美味しいお店がいっぱい有りますね~。

直ぐの返答ありがとうございます * by akiさま
akiさま

速のお助けありがとうございました。
安心しました。

先ほど、近くの中華料理店で餃子を食べました。でも・・・「みんみん」の水餃子が懐かしかったです。高校時代によく食べたので・・・

Re: okki 様へ * by aki
テンプレートをご愛顧頂き有難うございます。m(__)m
早速、ご質問の件です。

FC2の会員で無い場合→クリックして開いた画面に入れるべきID若しくはメールアドレス、パスワードが分かりませんから管理画面に入れません。
FC2の会員の場合→開いた画面に入れるIDやメアド、パスワードが自分のものしか分かりませんので、自分の管理画面に入るだけです。(そのブログの管理者IDやパスワードが分かれば別ですが。)
コメントの編集も、内容を変更したり消したりできますが、初めに書いたときに入れたパスワードが無ければ変更を反映する事は出来ません。
要するに、ブログの管理者のIDやパスワードが分からなければ、管理画面で何かをする事は一切できません。(^-^)
また、個人情報についても、自分でブログに情報を書き込んでいない限り、第三者には判りません。私なんかは「新潟出身」「栃木在住」とか記事で書いてますけど。^^;(警察に開示要求でもされない限り、FC2側も教える事は有りませんし。)

なので、ご安心下さいませ。m(__)m

ヘルプをお願いします。 * by okki
akiさま

最近テンプレートをお借りしてブログを始めたokki (m3hm) です。

ありがとうございます。

さっそくで恐縮ですが、次の疑問にヘルプを、お願いいたします。

サイドバーの上段にある、「Admin」 と下段の方に表記されている 「 管理画面」をクリックすると、訪問者の方でも「新しく記事を書く」画面に移動して記事を書くことが出来るのでしょうか?
さらに個人情報なども見られるのか、気になります。

そのようなら、これらの表記を消す方法も教えていただけるようお願いいたします。

初期の質問で申し訳ありませんがよろしくお願い致します。

* - 様へ * by aki
いつもご愛顧有難うございます。(^-^)
プラグインのサポートは終わってるようなので、必要なら言ってくださいネ♪

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

Comment-close▲

折り畳み追記の開閉

折り畳み追記の開閉

折り畳み追記についてを、要望の有ったカスタマイズと一緒にまとめました。この『折り畳み追記』については、FC2ブログテンプレートの[レガシー・カスタマイズ]とでも言いますか、昔から要望されるカスタマイズで、古い記事に掲載があるブログも多数ございます。(掲載が古い共有テンプレートにも付いている事が多い機能です。)そのため当方のテンプレートでも初めから付帯しております。しかし、追記の使用・表示方法は、テン...

... 続きを読む

折り畳み追記についてを、要望の有ったカスタマイズと一緒にまとめました。

この『折り畳み追記』については、FC2ブログテンプレートの[レガシー・カスタマイズ]とでも言いますか、昔から要望されるカスタマイズで、古い記事に掲載があるブログも多数ございます。(掲載が古い共有テンプレートにも付いている事が多い機能です。)
そのため当方のテンプレートでも初めから付帯しております。
しかし、追記の使用・表示方法は、テンプレートを利用される方のお考えで賛否等もあり、機能の使用を強制するものではございませんので、ご不要の方・追記を隠す必要性を感じない方は、大変お手数ですがHTML編集枠内のコメントアウト内を削除・編集して下さい。

1) 折り畳み追記の表示方法変更。
2) トップページ全文表示で折り畳み追記を開閉。


1) 折り畳み追記の表示方法変更。
5/14 の修正記事のように、個別記事ページの折り畳み追記方法を、JavaScriptの使用からCSSのみに変更致しましたので、カスタマイズ記事として再掲載致します。(修正記事以降にDLされた方には必要ありません。HTMLソースで下記のようになっているかをご確認下さいませ。m(__)m)
個人で追加したJavaScript等がバッティングして開閉動作がされない場合にご利用下さい。
また、追記開閉が不要の場合は該当箇所の
<!-- 記事ページの追記開閉が不要の場合はここから削除 --> から
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる --> のように削除及び文言の追加をお願い致します。

変更可能なテンプレート 『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』 の2カラム・3カラム。


変更箇所は、HTML編集枠内1/3程スクロールした所に有る

<p id="readmore" style="padding-top:3em;margin-top:-3em;margin-left:-5px;">&#8203;</p>
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Read More</a>
<noscript>
<a href="<%topentry_link>#more">Read More</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<hr class="hr1">
<%topentry_more><a href="#readmore" onClick="showHide('more<%topentry_no>');">Return</a>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->


という部分を下記に変更

<p id="readmore" style="padding-top:1.8em;margin-top:-3em;margin-left:-5px;">&#8203;</p>
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<div class="hidden_box">
<input type="checkbox" id="navTgl">
<label for="navTgl" class="open">ReadMore</label>
<div class="hidden_show"><%topentry_more>
<label for="navTgl" class="close">Close</label>
</div>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->


そして、スタイルシート編集枠内一番下(“@media only screen” で括っていない所)にでも

/* 記事ページ追記ボタン */
.hidden_box label{
padding:0 10px;
border:solid 1px #aaa;
cursor:pointer;
}
.hidden_box label:hover{
background:#e1f0f6;
color:#333;
}
.hidden_box input {
display:none;
}
.hidden_box .hidden_show{
height:0;
padding:0;
overflow:hidden;
opacity:0; /* 中身を非表示にしておく */
}
.hidden_box input:checked ~ .hidden_show{
padding:10px 0;
height:auto;
opacity:1; /* クリックで中身表示 */
}


上記を追加して更新ボタンを押せば完了です。
不具合が有った時のために複製を作っておくと安心です。




2) トップページ全文表示で折り畳み追記を開閉。
テンプレート内に既に記述して有るJavaScript(コメントOpen用)を使って、トップページ全文表示(要約表示から全文表示へのカスタマイズ後も含む)での追記開閉が出来ます。
ただ、トップページで追記も見せてしまうと個別記事ページへの誘導は難しくなると思いますので、ご自身の判断でお使い頂きます様お願い致します。m(__)m
(カスタマイズ後の個別記事ページでは、展開された状態の表示になります。)

HTML編集枠をスクロールしていくと、
<!--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;"></p>
<%topentry_more>
<!--/more-->
</div>
<!-- 全文表示用HTMLの貼り換え ここまで-->


上記に貼り換えて更新ボタンを押せば完了です。
不具合が有った時のために複製を作っておくと安心です。

Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ

Comment-open▼ * Comment : (0) * Trackback : (0) |

serene_resp のカスタマイズ(トップ画像変更)

serene_resp のカスタマイズ(トップ画像変更)

テンプレート serene_resp 2c,3c のトップ画像の変更方法です。このカスタマイズは、大変お手数ですが 『テンプレートの修正・更新致しました。6/17』 の記事を参考に修正・更新をされてからお願い致します。(更新記事 '19/06/17 以降にテンプレートをダウンロードされた方は、そのままカスタマイズ記事をお読み下さい。)表示領域のサイズに合わせて画像が拡大・縮小されるので、スマートフォンやタブレットなど 端末に合わせた...

... 続きを読む

テンプレート serene_resp 2c,3c のトップ画像の変更方法です。
このカスタマイズは、大変お手数ですが 『テンプレートの修正・更新致しました。6/17』 の記事を参考に修正・更新をされてからお願い致します。(更新記事 '19/06/17 以降にテンプレートをダウンロードされた方は、そのままカスタマイズ記事をお読み下さい。)

表示領域のサイズに合わせて画像が拡大・縮小されるので、スマートフォンやタブレットなど 端末に合わせた表示が出来ます。
画像をレスポンシブ対応させる方法は幾つか有りますが、パーセント指定と background-size:cover; を使った方法です。
background-size:cover; は、画像の幅と高さの比率を固定して領域を覆うように表示し、はみ出した部分を非表示にします。

テンプレートの管理画面下段の [ serene_resp〇c ] のスタイルシート編集枠内
スクロールすると1/8手前位に下記のような箇所が有ります。

/* トップ画像 */
.topimg{
height:auto;
position:relative;
overflow:hidden;
margin-top:10px;
padding-top:46.67%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 ,高さを下げたい場合は数値を下げる */
background:url('https://blog-imgs-128.fc2.com/s/o/r/sorauta1/cf-img2.jpg'); /* 表示したい画像URL */
background-position:center center; /* 表示する位置 中央寄せ */
background-repeat:no-repeat;
background-size:cover;
}

paddingで高さを出し、背景の表示領域を確保します。
paddingの高さはパーセント指定で、
表示画像の高さ(縦サイズ)÷表示画像の幅(横サイズ)×100
という計算式で求めます。
(青文字の部分は表示したい画像のアップロード先URLを入れて下さい。)
縦横比の計算値で%指定すると元画像が(拡大・縮小されて)全て表示されます。
この数値を計算値より少なくすると高さが縮小され縦が非表示になり、大きくすると拡大された画像の横が非表示になります。

トップ画像の変更1
padding-top:47.5%; 縦横比計算値のまま
background-position:center center; 表示位置中央

トップ画像の変更2
padding-top:35.0%; 縦横比計算値より小さくした場合(高さが低くなり上下が非表示)
background-position:center center; 表示位置中央寄せ

トップ画像の変更3
padding-top:35.0%; 縦横比計算値より小さくした場合
background-position:center bottom; 表示位置中央・下寄せ(下段表示で上が非表示)

トップ画像の変更4
padding-top:60.0%; 縦横比計算値より大きくした場合(高さが増えて横が非表示)
background-position:right bottom; 表示位置右寄せ・下寄せ

(画像をクリックして頂くと少し大きく表示されます。)

パーセント指定をすることでブラウザのサイズに合わせて画像サイズが変わるようになり、position 指定する事で画像の気に入っている部分を表示する事が出来ます。
background-position:横方向 縦方向; で指定出来る値は
横方向  left/center/right/in(インチ)/pt(ポイント)/px(ピクセル)/%(パーセント)等
縦方向  top/center/bottom/in(インチ)/pt(ポイント)/px(ピクセル)/%(パーセント)等

なので、極端に画像が横に長い場合でも位置を指定して表示出来ます。

トップ画像の変更
padding-top:43.0%; 縦横比計算値(22.72%)より大きくした場合
background-position:right center; 表示位置右寄せ・中央寄せ

これの元画像がこちら↓(クリックで原寸)
top-image3.jpg

お気に入りの画像で、色々と試してみて下さい。m(__)m
(但し、容量の大きい画像は表示が遅くなってしまいますので、閲覧される方のためにも 画像サイズ・容量を小さくされるよう注意して下さい。)

Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ

Comment-open▼ * Comment : (7) * Trackback : (0) |
Re: aki 様へ * by どなるど
akiさん、今晩は(^-^)

>PC画面で貴ブログ見る限りは表示されていないのですが…
>Facebook(に投稿して)の表示、という事ですよね?

すみません(^^;)私、昔から説明が下手でして…。。
そうなんです。ブログでは表示されないので気にしてなかったのですが、シェアした投稿に現れるので、ん?と思っていました。

ちなみに投稿内容が長文だとFacebookでも表示されないのですが、私みたいな超短文の投稿だと見えるようになります(^。^;)

先ほど、↓下記のオレンジ部分を削除して、Facebookにシェアしたら消えてました♪

削除した後のシェア表示はコレです。
https://blog-imgs-128.fc2.com/l/e/c/lechat5/20190716000851497.jpeg

本当にありがとう御座いましたm(_ _)m

Re: どなるど 様へ * by aki
PC画面で貴ブログ見る限りは表示されていないのですが…Facebook(に投稿して)の表示、という事ですよね?
確認しようとFacebookに自ブログを(削除部分のカスタマイズを施して)掲載しようとしましたが、残念ながら、何故かしらうちのブログ「コミュニティ規約違反」でブロックされているのですよ。^^;
(今年の4月頃から、それまで有った分も全て閲覧不可になってるみたい。FBにブロック解除要請出してるのですが、未だに解除されてません。…ってか、何で?という感じです。)
当方でテンプレ改変後の確認が出来ませんので、大変申し訳ございませんが下記部分を削除してFBでご確認頂けますか?

<!-- コメントリストが不要の場合はここまでを削除(2) -->
</div>
<div style="text-align:right">
<a href="#entry<%topentry_no>" onClick="showHide('cmnt<%topentry_no>');">Comment-close▲</a>

</div>

最後部分にどうしても</div>を一つ残す必要が有るので、オレンジの部分を削除してみて下さい。

この部分は、折り畳みコメント部分を開かないと見えない部分なので((1)と(2)を削除すれば表示しないため)残しておいても問題無い…と思っていたのですが、FBは表示されない部分でもHTMLタグを読んで表示するようですね。(;'∀') 知らなかった。。
お手数ですが、改変後の表示具合をお教え頂いても宜しいですか?
宜しくお願い致します。m(__)m

ちょっとした質問 * by どなるど
akiさん、こんにちは(^-^)
前回↓の件、教えていただきまして有難う御座います。
着々とカスタマイズしてる最中です。

今回は以前からカスタマイズをしてる最中に、
気になる部分があって…その質問です。

私のブログは諸事情によりコメントの書き込みをナシにしているので、いつもHTML編集で『コメントリストが不要の場合はここから削除(1)(2)』の削除作業をしております。

その時に『コメントリストが不要の場合はここまでを削除(2)』の下の
<a href=〜Comment-close▲</a>が残るのですが、これは消さなくても大丈夫でしょうか?

いつもブログを更新したら自分のFacebookに記事をシェアしているのですが、たぶん…たぶんなのですがコレの【Comment-close▲】が文章の最後に表示されます。
別に何か悪さするわけでも困ってるわけでもないので、いつもスルーしています…(^^;)

一応、Facebookで見た時のシェア表示です。
https://blog-imgs-128.fc2.com/l/e/c/lechat5/20190715160417337.jpeg

気になるような、ならないような感じの事で申し訳ない。。

Re: どなるど 様へ * by aki
では、先ず全文表示から要約表示への変更カスタマイズを行って下さい。
https://sorauta1.blog.fc2.com/blog-entry-321.html

追記する箇所はCSSに2ヵ所です。
スタイルシート編集枠を1/3程スクロールした所に
/* 簡易表示トップページエントリー */
.kiji1{
overflow: hidden;
margin:0;
}

と有るので、その下辺りに下記を追加

.blog-con:first-of-type .left{
float:none;
width:100%;
max-height:50vh;
margin-bottom:10px;
}
.blog-con:first-of-type .left img{
width:100%;
max-height:50vh;
}


同じく枠内を4/5程までスクロールすると
@media only screen and (max-width:420px) {
という部分が有るので、その中
.kiji2{
display:none; /* 1カラム時記事非表示 */
}

の下に下記を追加

.blog-con:first-of-type .left {
margin-bottom:0;
}
.blog-con:first-of-type .left img{
max-height:140px;
}


後は更新ボタンを押して完了です。
当方のブログでは画像が小さいので拡大されて見難くなってますが、どなるど様のブログ画像なら綺麗に掲載されると思いますよ。(^_-)-☆
色々作って気分で変更するのも楽しそうです♪

Re: aki 様へ * by どなるど
akiさん、こんにちは(^-^)

やっぱり難しい事なんですね。。
いろんな言葉でググって調べてたのですが、
そんなカスタマイズは発見できず…
あとプラグイン3でフリーエリアを使って出来ないだろうかと
いろいろ思ったのですが、いい方法が見つからず…
やっぱり、akiさんに聞いた方が早いかなと思いました。

>例えばこのブログのようでは…
お手数おかけして申し訳ございません Σ(・ω・ノ)ノおっ
なるほど…そういう表示の仕方があるのですね。
一応、教えていただいても宜しいでしょうか。
複製作って試してみたいと思いますm(_ _)m

Re: どなるど 様へ * by aki
う~ん、多分両方共存は無理じゃないかなと。…というか、私ではその改変は無理です。^^;
出来るのかもしれませんが、残念ながら当方にその技量と知識がございません。そして、今のところ公式・共有でそのようなテンプレートに出会った事がございません。
申し訳無いです。m(__)m
例えばこのブログのようでは如何でしょうか?
基本形は要約表示で、ページトップの記事のみ画像を横並びさせず、カラムの幅100%で表示させています。(最新だけ、では無く2ページ目以降も同様になりますが。)
これであれば、CSSを少し追加するだけで出来ます。
…どうでしょう?(;´∀`)

全文表示と要約表示 * by どなるど
akiさん、こんばんは(^-^)
今回もワガママな質問です。
新着記事(新規投稿)だけを全文表示にして、
古い記事(投稿)は要約表示にする…
なんて事は可能なものなのでしょうか。。
そういう事が出来たらいいな〜
なんて思ってしまいました(^^;)
簡単に出来る事ならで結構です。
難しい事なら笑って無視してくださいね。

Comment-close▲