Top Page › Template › テンプレート › ct_responsive テンプレート共有化しました。

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

2018-10-25 (Thu) 23:05

本日、申請していたテンプレート [ct_responsive3c] [ct_responsive2c-r(右メニュー)] [ct_responsive2c-l(左メニュー)] の3点が共有化致しました。

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

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

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

1カラムになるとメニューがドロワー表示になり、ドロワー内のメニューは、他を開くと閉じる仕様。
また2・3カラムとも、記事上に表示されていたプラグイン3は、個別記事画面を表示すると記事下に表示され読み易くなります。
トップページのエントリー内 Comment-open でコメントを10件まで表示、個別記事ページの追記記述部分も展開式になっております。
(HTMLソースの削除で非開閉にする事も可)

以下が追記部分です。

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

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

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

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

Comments

カスタマイズについて

はじめまして。あけましておめでとうございます。
理想のレイアウトだったのでお借りして使わせてもらっています。
色々試したのですがどうしてもわからなかったので質問させてください。

記事内の余白を小さくして、本文の左側をもうちょっと枠に寄せたい(記事タイトルくらいの位置)のですがうまくいきません。
急ぎではないのでお時間あるときアドバイスいただけないでしょうか?
2019-01-04-21:49  ヒロ
[ 返信 * 編集 ]

aki

ヒロ 様へ

初めまして♪そして、明けましておめでとうございます。m(__)m

拙いテンプレートのご利用、誠に有難うございます。
早速ご質問の件です。
記事内の余白は2カラムも3カラムも同じ寸法になっておりますので、改変個所も全て同じです。(スマホやタブレット、PCでの閲覧用に全部で4か所あります。)

スタイルシート編集枠を1/4程スクロールした所にある
.con_body {
margin: 20px 20px 10px;
}

3/4ちょい上までスクロールしたところに有る
@media only screen and (max-width:749px)
.con_body {
margin: 15px;
}

5/6程までスクロールしたところに有る
@media only screen and (min-width:1000px)
.con_body {
margin: 20px 30px 10px;
}

7/8程までスクロールしたところに有る
@media only screen and (max-width:400px)
.con_body {
margin: 10px;
}

の4か所です。
数値が3つになっているものは、左から 上 左右 下 になっていて、
margin: 上px 左右px 下px;
というように指定しています。なので、margin: 20px 20px 10px;と書かれていたら、上に20px,左に20px,右に20px,下に10px; という余白になります。
marginの数値が1つの場合は、上下左右が同じ数値の余白になります。
(…因みに数値2つの場合は 上下px 左右px になります。)
この数値を左のみ変えたい場合は、4つに分けて記述します。

margin:上px 右px 下px 左px;
というように、上から時計回りに指定します。(上→右→下→左)
左側を狭めたい場合は一番最後の数値を小さくしてあげれば良いので、前出の数値であれば
margin: 20px 20px 10px 0px;
という数値になります。
それを、上記のスタイルシート箇所に当てはめ(0pxで記事タイトル枠と一緒位になりますが、5~10px位は有った方が読み易いと思います…)ご自身でブラウザの幅を狭めて確認しながら、丁度良い余白を決めて下さい。

上記の説明でご不明な点が有りましたら、再度コメント下さいませ。m(__)m
2019-01-05-02:34  aki
[ 返信 * 編集 ]

ありがとうございます

aki様、こんばんは。

丁寧な説明ありがとうございました。
ほぼ知識がない自分でも簡単に出来ました!
これからも大切に利用させていただきます。

まだまだ寒い日が続きますのでご自愛ください。
2019-01-05-04:15  ヒロ
[ 返信 * 編集 ]

ヒロ 様へ

無事に改変出来て良かったです♪
またご不明な点などがございましたら、当方の分かる範囲でお答え致しますので、どうぞ気兼ね無くお声掛け下さいませ。
(その際、カラム数によって改変が異なる箇所もございますので、ご利用になっているテンプレート名の明記もお願い致します。)

今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m
2019-01-05-13:06  aki
[ 返信 * 編集 ]

検索について

初めまして。
こちらのテンプレートをお借りしていてとても気に入っています。

「ブログ内検索」について伺いたいのですが結果を一覧で表示するようには出来ますでしょうか?

カテゴリは一覧で表示できるのですが検索結果だけ個別記事で表示されて悩んでいますi-201色々調べたのですが解決せず現在便利ナビで代用しています。

教えて頂けたら嬉しいです。よろしくお願い致します。
2020-10-18-10:58  てこっち
[ 返信 * 編集 ]

aki

Re: てこっち 様へ

こちらこそ、初めまして。
コメント頂き有難うございます。(^-^)

てこっち様のブログテンプレートを拝見致しましたところ、当方が手直しする前のバージョンですね。
ct_responsiveは少しずつ色々改善が入っており、更新記事を随分と遡らないといけない状態になっています。(-_-;)
ご面倒をお掛けしてしまっているようで、大変申し訳ございません。m(__)m

テンプレートのHTML編集枠内をご覧頂き、下記の部分を探して削除してみて下さい。(青い文字は検索する文字列オレンジの文字は削除する部分
----------

(削除する場所は、キーボードのCtrlキーとFキーを一緒に押して出てきた枠に「の検索結果」と入れて検索する)

<!--search_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > <span><%sub_title> の検索結果</span>
<form action="./" method="get"><input type="text" size="20" name="q" value="" maxlength="200" class="ipt"> <input type="submit" value="Search" class="search"></form>
<!--/search_area-->
----------

(削除する場所は、キーボードのCtrlキーとFキーを一緒に押して出てきた枠に「<span class="pen-link">」と入れて検索する)

<a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" rel="noopener"><span class="pen-link">✎</span></a>
</div>
<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->
<!--div class="kiji1"--><!--kiji1-->
----------

(削除する場所は、キーボードのCtrlキーとFキーを一緒に押して出てきた枠に「<p class="right-txt">」と入れて検索する)

<p class="right-txt"><a href="<%topentry_link>">... 続きを読む</a></p>
<!--/div--><!--/kiji1-->
<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->

以上3ヶ所(オレンジの文字列)を削除してみて下さい。
不具合が有りましたら再度お教え下さいませ。(^_^;)
お手数をお掛け致しますが、宜しくお願い致します。。
2020-10-18-20:29  aki
[ 返信 * 編集 ]

Re: aki 様へ

早い返信ありがとうございます。

早速ご指摘の箇所を削除しましたら検索結果で個別記事が正常に表示されるようになりました!ありがとうございます。
色々調べて更新を頑張ってはいるのですがお手数お掛けしてすいません^^;

不具合ではないのですが全記事一覧のように「検索結果が一覧で表示される」機能はつけれますか?

『検索「〇〇」を含む記事一覧』
『カテゴリ「〇〇」の記事一覧』など

検索したりカテゴリをクリックするとメインページに結果が日付・タイトルだけの文字一覧で並ぶようにしたいのです。
最新のhomeテンプレート等はそう表示されるようになっているようですがこちらのテンプレートが大変気に入っているので同じように使えたら嬉しいです。
よろしくお願い致します。
2020-10-18-22:45  てこっち
[ 返信 * 編集 ]

aki

Re: てこっち 様へ

こんばんは。コメント有難うございます。(^-^)

カテゴリーと月別アーカイブについてはカスタマイズ記事が有ります。
https://sorauta1.blog.fc2.com/blog-entry-332.html
タグと検索については記事になっておりませんので、後日改めて追記事書きたいと思います。

ただ、てこっち様のテンプレートでは『全記事一覧』の仕様が少し違うため、それを含めて修正したいので下記のURLを開いて頂いたHTMLソースを全てコピーし、下記の部分に貼り付け及びHTML追記をして頂きたいのです。
宜しければ(不具合が有った時のために)現在のテンプレートの複製を作ってから作業して下さい。

https://blog-imgs-141.fc2.com/s/o/r/sorauta1/ct-resp-list.txt

上記URLを開いて表示されたソースを全てコピーします。
テンプレートのHTML編集枠内を少しスクロールした所に下記が有りますので

<div id="content">
<div class="archive">
<!-- 全記事リスト開始 -->
<!--titlelist_area-->
<section class="blog-con blog-con2">
<h2 class="entry_title" style="text-align:<%plugin_third_talign>">Title List</h2>
<div class="title_list">
<!--titlelist-->
~~省略~~
<!--/titlelist-->
</div>
</section>
<!--/titlelist_area-->
<!-- 全記事リスト終了 -->
</div>


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

までに入れて下さい。(オレンジの部分に被せてペーストして下さい。)

次に、1/3程スクロールした所に(オレンジ文字)を追加します。
(検索は[Ctrl+Fキー]で<!-- 全文表示用HTMLの貼り換え ここから -->)

<!-- 全文表示用HTMLの貼り換え ここから-->
<div class="blog">
<!--not_category_area--><!--not_date_area--><!--not_tag_area--><!--not_search_area-->
<!-- トップページ ここから-->

同じく1/2近くまでスクロールした所に(オレンジ文字)を追加します。
(検索は[Ctrl+Fキー]で<!-- トップページ ここまで -->)

<!--/topentry-->
<!-- トップページ ここまで -->
<!--/not_search_area--><!--/not_tag_area--><!--/not_date_area--><!--/not_category_area-->

後は更新ボタンで完了です。
かなりソースの量が有るので分かり難いかと思いますが、複製を作っておけば安心ですので、頑張ってみて下さい。m(__)m
2020-10-19-03:01  aki
[ 返信 * 編集 ]

No Subject

興味深く拝読しました。
また、「カテゴリー別及び月別のアーカイブをリスト化」についても拝見しました。
https://sorauta1.blog.fc2.com/blog-entry-332.html

そこで質問です。
[home_resp3c] の場合、「ブログ内検索」や、「カテゴリー別」「月別のアーカイブ」についてはタイトルリスト表示がディフォルトですが、これを要約表示(?)にしたいのですが

https://blog-imgs-128-origin.fc2.com/s/o/r/sorauta1/cat-list2.jpg

↑これを↓こんな感じに

https://blog-imgs-128-origin.fc2.com/s/o/r/sorauta1/cat-list1.jpg
2020-10-19-10:08  呑兵衛あな
[ 返信 * 編集 ]

Re: aki 様へ

こんにちは。返信ありがとうございます。

とてもわかりやすく教えて頂けたので無事に変更する事が出来ました!
ただ1点、修正したい箇所があります。

表示なのですがモバイル(スマホ)で見た際に長いタイトルだと途中で切れてしまい全文が表示されません。私の記事の場合同じようなタイトルが多いので全文が表示されないと何の記事だか解らなくなってしまいます。

全記事一覧だと改行されて全文表示されるので同じようにカテゴリーや検索の結果一覧でタイトル全文が読めるようにしたいのですがどこを修正すれば良いか教えて頂きたいです。

よろしくお願い致します。
2020-10-19-15:11  てこっち
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

こんにちは。コメント有難うございます。

申し訳ございませんが、エントリー記事を全文表示にカスタマイズしてある場合は難しいです。^^;
エリアタグとスタイルシートで表示させているので、要約表示からの一覧表示なら簡単なのですが、全文表示に変更してから要約表示一覧へは、相反する部分が有るのか(先程色々調整しつつ悩んでましたが)残念ながら上手くいきませんでした。
方法は有るのでしょうけれども、私にはとても難しいと思いますので、この度の件はご容赦下さいませ。

申し訳ございません。m(__)m
2020-10-19-16:06  aki
[ 返信 * 編集 ]

aki

Re: てこっち 様へ

こんにちは。コメント頂き有難うございます。
説明に自信が無かったので、無事に出来たようで安心致しました。

タイトル長の件、文字列が省略されないようにする方法です。
表示スタイルをHTMLソースに直書きしているので優先度を持たせるために、下記のようなスタイルを追加して下さい。
スタイルシート編集枠内最下で結構です。

.all_body {
overflow: visible !important;
white-space: normal !important;
}


上記を追記して更新して下さい。
不具合が有りましたら再度お声掛け下さいませ。m(__)m
2020-10-19-16:30  aki
[ 返信 * 編集 ]

Re: aki 様へ

わかりました。
ご無理を申し上げ、恐縮でした
2020-10-19-17:17  呑兵衛あな
[ 返信 ]

ありがとうございました

こんばんは。返信ありがとうございます。
教えて頂いた箇所の更新を行いタイトル全文表示にする事が出来ました。理想の形になりとても嬉しいです♪大切に使わせていただきます。
この度は本当にありがとうございました。

2020-10-19-19:10  てこっち
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

申し訳ございません。
いつか、出来るように頑張ります。m(__)m
2020-10-20-00:17  aki
[ 返信 * 編集 ]

aki

Re: てこっち 様へ

表示出来たとの事、良かったです。(^-^)
本日(昨日?)の記事に、この度の『検索結果表示の件』について書きました。
https://sorauta1.blog.fc2.com/blog-entry-432.html(記事内③)
質問を頂かなければ分からなかった事なので、とても感謝しております。
有難うございました。
また何かございましたら、気兼ね無くお声掛け下さいませ。

今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m
2020-10-20-00:27  aki
[ 返信 * 編集 ]

ブログ内検索結果などを全文表示にしたい

執拗で恐縮ですが、2020-10-19-16:06 akiについて再確認したいので教えてくだい。

>エントリー記事を全文表示にカスタマイズしてある場合は難しいです。

とのことですが。元々の質問(2020-10-19-10:08 呑兵衛あな)では以下転載のとおり、『要約表示』にしたい旨で質問しました。これを『全文表示』にする場合も大変でしょうか?

>>[home_resp3c] の場合、「ブログ内検索」や、「カテゴリー別」「月別のアーカイブ」についてはタイトルリスト表示がディフォルトですが、これを要約表示(?)にしたいのですが

手間と知恵出しが大変ならば遠慮しますが...期待を込めて、質問を再掲します。
>>>[home_resp3c] では、「ブログ内検索」や、「カテゴリー別」「月別のアーカイブ」についてはタイトルリスト表示がディフォルトですが、これを『全文表示』にしたいのですが。

※再度質問する背景として、以下の情報があります。
>【Google】2021年3月以降デスクトップ版のみのサイトをインデックスから削除する方針 | Mobile First Marketing Labo
https://www.aiship.jp/knowhow/archives/32717
ということで、やはり「レスポンシブ対応テンプレートを利用する方が未来志向である」と考えています
2020-10-29-15:12  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

>>>[home_resp3c] では、「ブログ内検索」や、「カテゴリー別」「月別のアーカイブ」についてはタイトルリスト表示がディフォルトですが、これを『全文表示』にしたいのですが。

結論を先に申し上げますと、出来ます。
しかし、これについては大変失礼なのですが、何故全文表示にしたいのかが当方には理解致しかねます。申し訳ございません。m(__)m

例えば、カテゴリーや月別の記事などは1カテゴリー若しくはひと月でも複数件有ると思います。これを(例え1ページ何件表示として分けても)全文で表示すると、1ページ内に表示される文章量が多過ぎると思います。
リスト化している理由は、訪問された方が検索やアーカイブ記事から読みたいものを「すぐ探す」ためです。
閲覧される方が選びにくくなるでしょうし、読みたいものを探すのに上から下まで・更に複数ページに渡って探さなければいけなくなってしまいます。
とても良い記事ばかりで色々読んで欲しいとしても、探す方にとってはとても酷な作業だと思います。(モバイル端末の方は尚更です。)

また、元々検索ページやアーカイブのページはインデックスされないように<meta name="robots" content="noindex,follow">がテンプレート内に記述されています。
カテゴリーやアーカイブページはブログを更新していると勝手に生成されるページなので、「重複記事」と見なされる場合が有るからです。(但しfollowでリンクは生かしてある)
全文表示にしても(テンプレート内で)インデックスされないようにしているので、全文表示にしても検索流入は有りません。

以上を鑑みても、敢えてリスト表示を全文表示にするのはどうなのかな?と疑問に思います。
それでも必要であれば、下記の方法でお試し下さい。(複製を作っておくことをお勧め致します。)

1)キーボードのCtrl+Fキーで<!-- トップページ ここから-->を入力し、見付けた所の上に有るエリア変数を削除します。
<!--not_category_area--><!--not_date_area--><!--not_tag_area--><!--not_search_area-->
↑この部分を削除

2)次に、キーボードのCtrl+Fキーで<!-- トップページ ここまで -->を入力し、見付けた所の下に有るエリア変数を削除します。
<!--/not_search_area--><!--/not_tag_area--><!--/not_date_area--><!--/not_category_area-->
↑この部分を削除

3)次に、キーボードのCtrl+Fキーで<!-- カテゴリーリスト開始 -->を入力し、見付けた所の上に有る<div class="archive">から、更に下へスクロールした所に有る<!-- サーチ終了 -->の下の</div>までを削除します。
<div class="archive">
<!-- カテゴリーリスト開始 -->
~~省略
<!-- 月別アーカイブリスト開始 -->
~~省略
<!-- タグ別ページリスト開始 -->
~~省略
<!-- サーチ開始 -->
~~省略
<!-- サーチ終了 -->
</div>

↑ここまでを削除

後は更新ボタンを押して頂ければ完了です。
2020-10-29-17:23  aki
[ 返信 * 編集 ]

Re: aki 様へ

まずはお礼申し上げます。ありがとうございました。

>しかし、これについては大変失礼なのですが、何故全文表示にしたいのかが当方には理解致しかねます。

レスポンシブ対応テンプレートの製作者にはそう言う人が多いようですね。
でも、私や年寄グループに言わせれば、要約表示のブログ閲覧はする気になりません。
全文表示であれば、表示されている全てを斜め読みしてでも概要を知れます。
要約表示の冒頭文を読んで、全文を読む気になる記事は少ないですし、わざわざ要約表示⇒全文表示に広げるというアクションをしてまで読む気にはなりません。
また、FC2ブログの要約表示は「全文表示の開始から特定の文字数を表示する」だけですから、執筆者の意図する「はじめに」ではありません。
gooブログでは、要約表示する為の文書を執筆者が別に書くことができます。「続きを読む」的なイメージですね。

私の場合、いわゆる日記的なブログではなく、自身の忘備録としてのウェブログです。ですから、ブログに書くよりはWikに書いた方が良いのかも知れませんが、過去ログを残しておきたい為にタイムスタンプを主眼にしてブログを利用しています。
ですから、全文表示する事に加えて、検索用語をハイライト(強調表示)するスクリプト 【 ありのごとくあつまりて 】の追加を考えたこともあったのですが、この機能は最近のブラウザでは標準装備しているので代行することにしています。
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-111.html
2020-10-29-18:23  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

こんばんは。お返事有難うございます。

失礼致しました。
以前そう言っておられましたね。だから要約→全文に変更するのだと。
自分のブログですもの、運営するご本人が不便を感じるのは良くないですよね。

では、先の返信下段に有ります変更方法をお試し下さいませ。
不具合がございましたら、再度コメントをお願い致します。m(__)m
2020-10-29-21:58  aki
[ 返信 * 編集 ]

No Subject

優柔不断に迷った結果、2021/01/01にFC2ブログに引越ししました。
テンプレートは結局、ct_responsive3cを利用させていただいています。
そこで早速質問です。
2019年10月頃に提供して頂いた物(CSSのタイムスタンプ(/* ---reset css end----2019/09/11更新 */)(更新日:19/09/10)に「暗色CSS(3カラム用) 2019/09/29 css更新」・「エントリー全文表示」の改造を行いました。
https://blog-imgs-123-origin.fc2.com/s/o/r/sorauta1/yakei3c.css
https://sorauta1.blog.fc2.com/blog-entry-285.html
以降、リスト文を、「点付き」や「数字付き」にする方法を質問し、これを手直ししています。
https://nono634.blog.fc2.com/blog-entry-3959.html

最近の物(最終更新日:20/10/18)は(/* ---reset css end----2020/10/19更新 */)でした。
HTMLとCSSに関し、最終版を修正するべきか(?)迷っています。如何でしょうか?
2021-01-02-12:03  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

こんにちは。(「おめでとう」は無しという事で)本年も宜しくお願い致します。m(__)m

FC2にお引越しされたとの事。
合う合わないは人それぞれですし、ずっと一途とも限らないですし。(^_^)
テンプレートやブログサービスも然り。
FC2ブログで色々やってみて、今後の推移で考えたら良いと思います。

ご質問の件です。
ブログ拝見致しました。
このままでも全く問題無いのですが、スタイルシート部分にも更新された差異が有るのでコメント表示等が異なっています。
HTML及びCSSは出来るだけ新しいものをご利用頂きたいので、最終更新:20/10/18のテンプレートに合わせたyakei(暗色CSS)バージョンを作ってみます。
申し訳ございませんが少しお時間を下さい。
2021-01-02-16:32  aki
[ 返信 * 編集 ]

No Subject

それはそれは
大変嬉しいことです。
気長に楽しみにしますので、よろしくお願いします
2021-01-02-17:06  呑兵衛あな
[ 返信 * 編集 ]

Re: aki 様へ

テンプレートの修正・更新致しました。20/10/19
https://sorauta1.blog.fc2.com/blog-entry-394.html
に質問コメントし、検索結果無しの場合に文字を表示する方法を御教授いただきました。その際、(home_resp用にスタイルを加えています。) との但し書きつきでしたが、ct_responsive3cに当て嵌める場合の齟齬点がありましたなら御教授ください。
ps:殊更慌てないのですが、akiさんの作業工程的にダブってはいけないと考え先走りしました。
2021-01-03-11:51  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

こんにちは。お待たせ致しました。

この度のものは夜景CSSから1年以上経っていて、その間の更新が多数有るためHTMLも新しいもので見直しました。
適用する方法を順を追って説明致します。

1,テンプレートの管理画面を開き、どのテンプレートでも良いので『複製』を作って下さい。
2,作成した複製テンプレートのHTML編集枠内を全て削除して下さい。
3,https://blog-imgs-141.fc2.com/s/o/r/sorauta1/ct_resp-mu3-html.txt
上記をクリックし、表示されたソース全てをコピーしてHTML編集枠に貼り付けて下さい。
4,同様にスタイルシート編集枠内も全て削除して下さい。
5,https://blog-imgs-141.fc2.com/s/o/r/sorauta1/ct_resp-mu3-css.txt
同じく上記をクリックして表示されたスタイルシートをコピーして空枠に貼り付けて下さい。
6,更新ボタンを押して完了です。(複製されたテンプレート名も、お好きに変更して下さい。)
7,表示を確認後、アクセス解析等のコードをご自身で指定箇所に貼り付けて下さい。

コメントのやり取りで仰っていたものは、大凡付けたものになっていると思います。
作成時にそちらのブログを拝見し、気付いたものは取り入れました。(記事下段に有る「記事編集」というリンクは、日付横の鉛筆マークが同じリンクになっているので敢えて付けませんでした。)
また、当方で勝手にコメント者のアイコンが表示されるJSを設置しておりますので、他者のコメントアイコンが不要の場合は、HTML編集枠内下段に有るコメントアウト部分を削除して下さい。
(表示されるのは全てでは無く、URLの記述が有り サイトやブログにOGP設定がされている方のみになります。…でないと画像が拾えません。)

設置してみてこれで良いかどうかお教え頂けますか?
2021-01-03-14:51  aki
[ 返信 * 編集 ]

Re: aki 様へ

素早く提供していただけた事にビックリしました。
早速設置してみて大変ビックリしました。
正しく、私の専用的な仕上がりですね。
こんな内容で提供していただくことは想定がいの外でした。
ソコソコに背景の黒版を提供して頂けると考えておりまして、その後の私の作業工程表を記事にして作っていた物を急遽掲載しました。これは、このような夜景を提供して頂けることを考えずに作った内容ですので見逃してください。
要望-1.コメント欄の「メールアドレス」と「パスワード」に関する注意書きの色が薄いです。元々のct_responsive3c程度に識別できるようにしたいですね。
要望-2.記事下段に有る「記事編集」というリンクについては、日付横の鉛筆マークが同じリンクである事は承知しているのですが、私のように全文表示させていると、記事の上下に編集への窓口が有ったほうが便利なんですよね。
要望-3.蛇足ながら...タイトルを見易いように太字にしたい。多少なら色が変わっても構わないです。他の記事文書に紛れて見失う事があるからです。


PS,[home_resp3c]ではなく[ct_responsive3c]にしたのは、[ct_responsive3c]では検索・月別アーカイブ・カテゴリーアーカイブ・タブで選択結果が全文表示されるからです。[home_resp3c]で検索結果を全文表示する方法は以前ご教授いただきましたが、あの後で見直したら他の事項は1行表示なんですよね。
私の記事では「検索用語をハイライト(強調表示)するスクリプト 【 ありのごとくあつまりて 】」をノミネートしているのですが、これも全文表示したい者の欲しい機能です。しかしこれは、ブラウザのページ内検索機能(Ctl+F)で代行することにしました。一般ユーザーでは殆ど欲しがらないでしょうから...でも、はてなブログでは標準装備なんですよね~

長くなりましたが、現在は御提供いただいた物にGoogleアナライザーとFC2アクセス解析+アクセス解析研究所とファビコンを付加しただけの状態です。
2021-01-03-17:36  呑兵衛あな
[ 返信 * 編集 ]

Re: aki 様へ

これを付加したいです。
>全記事一覧(Title list)にコメント数を表示 - *Essence
https://sorauta1.blog.fc2.com/blog-entry-380.html#comment2054

以下は付いているのでしょうか?
>リンクカードのご紹介。(^-^) - *Essence -
https://sorauta1.blog.fc2.com/blog-entry-434.html
>YouTube動画を自動的にレスポンシブ化する *Essence
https://sorauta1.blog.fc2.com/blog-entry-439.html
2021-01-03-18:13  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

こんばんは。お返事遅れてすみません。

大変お手数ですが、ご希望に沿うようにHTMLを変えてみましたので、再度HTML編集枠内を全て削除し、新たに下記のURLをクリックして開いたソースに貼り換えて頂けますでしょうか?
カスタマイズ箇所が多岐に渡ったため、コメントで指示する事が難しいので…。申し訳ございません。
その後で解析などのスクリプトをもう一度追加して下さいませ。
https://blog-imgs-141.fc2.com/s/o/r/sorauta1/ct_resp-mu3-html2.txt

スタイルシートは下記に掲載致しますので、スタイルシート編集枠の最下に追記して下さい。


/* プレースホルダー文字色 */
::placeholder{
color:#ccc;
}
/* 記事タイトル文字の太さ */
h2 a {
font-weight: bold;
}

/* リンクカードここから */
.link-card {
width: 600px;
max-width: 100%;
margin: 10px auto;
padding: 10px;
border: 1px solid rgba(170,170,170,0.5);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3);
transition:.2s;
border-radius: 5px;
background-color:#ddd;
}
.link-card a{
color: black !important;
}
.link-card a:hover {
text-decoration: none;
}
.link-card:hover {
box-shadow: 0px 7px 5px 1px rgba(0,0,0,0.18);
}
/* アイキャッチ画像表示 */
.link-card-image {
display: inline-block;
float: left;
width: 160px;
height: 90px;
margin: 4px 12px 0 0;
}
.link-card-image img {
width: 160px;
height: 90px;
object-fit: cover;
object-position: center center;
border: 1px solid rgba(255,255,255,0.3);
box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.35);
}
/* 記事タイトル表示 */
.link-card-title {
margin: 0 !important;
font-weight: bold;
font-size: 15px;
line-height: 1.4;
}
/* 記事要約文表示 */
.link-card-description {
margin: 1em 0 !important;
font-size: 13px;
line-height: 1.5 !important;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* フッタードメイン表示 */
.link-card-footer {
font-size: 12px;
}
/* 引用符マーク関連の非表示 */
.link-card blockquote {
margin: 0;
padding: 0;
border: 0;
background: none !important;
}
blockquote:before {
content: none;
}
/* スマホ表示変態 */
@media ( max-width : 480px ) {
.link-card-image {
display: block;
float: none;
margin: 1em auto;
}
.link-card-title {
text-align: center;
}
}
/* リンクカードの上下の余白 */
.yohaku {
margin-top: 50px;
margin-bottom: 50px;
}
/* リンクカードここまで */


リンクカードの本体JSの導入方法は、ご存知だと思いますが下記の記事をお読み下さいませ。
https://oops0011.blog.fc2.com/blog-entry-464.html
こちらの『リンクカードのHTMLコード取得用ブックマークレット』です。
YouTube動画レスポンシブ用スクリプトはHTML内に導入済みです。

以上、お試し頂けますか?
2021-01-03-21:26  aki
[ 返信 * 編集 ]

Re: aki 様へ

呑兵衛モードです。
取り急ぎ、入れ替え取り込みしました。
ありがとうございます。
しかし、ホントに素早いですね
2021-01-03-22:27  呑兵衛あな
[ 返信 * 編集 ]

Re: aki 様へ

完璧です。
このままで利用されていただきます。
大変ありがとうございました。

あと、テンプレート以外の質問です。
コメント者のアイコンが表示される仕掛けを簡単に知りたいのですが。
私のブログと、こちらのブログでは、表示されるアイコンが異なるのが気に成ります。
どこで何を設定した画像が表示されるのでしょうか?
2021-01-03-22:48  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

今、そちらのブログを表示確認しているのですが、HTML内に修正して頂きたい所を見付けましたのでお知らせ致します。

テンプレートのHTML編集枠内に有る下記の部分を探して下さい。
(キーボードのCtrl+Fキーを押して、表示された窓に div class="archive" と入れて検索して下さい)
すると1ヶ所見付かりますので、その行を下記のように変更して下さい。

<div class="archive" style="margin-top:-38px;">

<div class="archive">

style="margin-top:-38px;"が不要なので削除します。後は更新ボタンを押して下さい。(いつでも結構です。一応、先のURLのHTMLソースも修正して有りますので、全貼り換えでもOKです。)
見た限りでは…それくらいでしょうか。^^;もしお気付きの部分が有りましたらご連絡下さいませ。

別件です。
記事に有ります「画像高速表示の設定」画面がGoogleChromeには表示されてFirefox等で表示されなかった…というのを見ました。
あれは、広告非表示のアドオンが入っていると表示されません。
https://paro2day.blog.fc2.com/blog-entry-1093.html
古い記事ですが、多分未だに同じ状況です。
私は逆に、ChromeにAdblock plusを入れているので設定が表示されません。(別に不要なので良いのですが。)
因みに管理画面でのAdblock関連の不具合だと、左上部のメニューが押せないというものも有ります。
https://paro2day.blog.fc2.com/blog-entry-1080.html
この話を知っていたのでご案内まで。m(__)m
2021-01-03-23:38  aki
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

入れ違いになったコメントへのお返事です。
アイコン画像は、他者ブログに出向いて投稿したコメントの場合はOGPの設定画像です。
管理画面→環境設定→ブログの設定→メタタグの設定
ここで設定したOGP画像が表示されます。

自身のブログの場合は、テンプレートのHTMLに記述して有る<%image>という変数を表示します。
これはプロフィールに設定している画像を表示する変数です。
管理画面→環境設定→プロフィール
ここで設定した画像が<%image>という変数で表示されます。
なので、ログインしている状態でコメントしないと、変数による画像表示がされません。
もし、自分のブログでもログインせずにコメントした場合、URL記述が無ければアイコン無し、URLが有ればOGP画像、というように表示されると思います。
他のブログURLが記述されている場合も、そのブログサービスで設定しているOGP画像が表示されます。(livedoorブログのURLによるOGP画像とか)
私はプロフィールもOGPも、どちらも同じ画像を設定しているので確信持って言えませんが。^^;

URLが記述されていればOGP画像を拾って表示するので、コメントする方がFC2ユーザーで無くても(サイトやブログにOGPの設定をされている場合は)画像が表示されます。
拙い説明ですが、お分かり頂けましたでしょうか?
https://mochi1999.blog.fc2.com/blog-entry-1834.html
こちらの記事がスクリプトの元記事なので、お読み頂くときっと理解が深まります。
2021-01-04-00:18  aki
[ 返信 * 編集 ]

No Subject

この度も大変お世話になりまして感謝します。
>2021-01-03-23:38については
HTMLは修正しました。
「画像高速表示の設定」方法、理解です。広告ブロックの影響ですか。確かに、普段はFirefox派の私は、Chromeではブロックアドインを有効にしていませんでした。ガテンです。

>2021-01-04-00:18について
なるほどです。

重ねて御礼申し上げます。
2021-01-04-08:16  呑兵衛あな
[ 返信 * 編集 ]

Re: aki 様へ

御提供いただいたリンクカードのCSSを利用した場合、以下のような表示になります。
https://nono634.blog.fc2.com/blog-entry-4763.html
これで正解でしょうか?

私的には「リンクカードのご紹介。(^-^)」のような黒背景にしたいのですが。
https://sorauta1.blog.fc2.com/blog-entry-434.html

「黒背景にしたい」件は取り下げます。現状にて利用します。
見慣れたら、黒背景よりも見易いように思えてきました
2021-01-04-13:42  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

リンクカードの件です。
呑兵衛あな様のブログを拝見して、他の記事に利用しているブログカード等との兼ね合いで背景色を付けてCSSに入れてあります。
もし背景色不要であれば、スタイルシート編集枠最下に下記を追加して下さい。

.link-card {
border: 1px solid rgba(170,170,170,1.0);
background-color: transparent;
}
.link-card a {
color: #ddd !important;
}

編集枠内の一番下に追加する事で、その前に書かれているスタイルを上書きします。
黒背景のリンクカードにしたい場合は使って下さいませ。
あと、お気付きになって修正されたのだと思いますが、引用版と通常版の使い方についてです。
・引用版(第三者のサイトからの引用)
・通常版(自身のサイト内記事など)
という使い分けで、リンクカード作者ぼっちん様のブログでも説明されています。
https://oops0011.blog.fc2.com/blog-entry-296.html
こちらの記事もお読み頂くと「何故」が理解できます。m(__)m
2021-01-04-16:48  aki
[ 返信 * 編集 ]

Re: aki 様へ

お手数を掛けています。
甲乙つけがたく、しばらく迷っていることにしました。ありがとうございます。

>引用版と通常版の使い方
承知しました。
私の場合、通常版を使う事は皆無だと思います。
当該頁では深く考えずに、引用版と通常版の見え方を試行してみたという景色です。
2021-01-04-18:15  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

ブログカードの背景色は、収まりが良く見易いものが良いと思います。
background-color: transparent;
のtransparentを他のカラーネームやカラーコードに変更すると他の色になりますので、変えたい場合はお試し下さい。

何かご不明な点やご希望等ございましたらお声掛け下さいませ。(^_^)
(返信は不要です。)
2021-01-04-19:24  aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-01-10-20:15  -
[ 返信 ]

aki

Re: - 様へ

こんばんは。コメント頂き有難うございます。
そちらでお返事致しますね。(^_^)
2021-01-11-01:19  aki
[ 返信 * 編集 ]

新ct_responsive3cの改造?

早速ですが
先日、非公開コメントで教えていただいた「新ct_responsive3c」について参じました。
あれを以下の様に改造したいと思うのですが。
1.TOPを要約表示に。但し、画像は不要。
2.「カテゴリー」「月別」「タグ」「検索」の結果画面は全文表示。

現在、私の所は「新ct_responsive3c」を適用しています。
改造したい点があります。例えば、「〇〇カテゴリー」を表示させた場合はページ上部に『カテゴリ「〇〇」の記事一覧』とか、同様に『月別アーカイブ「2020年12月」の記事一覧』、『タグ「カスタマイズ」の記事一覧』、『検索「Windows」を含む記事一覧』の見出しが欲しいです。

以上について教えていただきたく、よろしくお願いします。
2021-01-12-15:28  呑兵衛あな
[ 返信 * 編集 ]

追記

前コメントの心ですが
細かな事は私ブログで記事にしました。
https://nono634.blog.fc2.com/blog-entry-4787.html
煎じ詰めて言えば、
TOP画面はスマホで閲覧する場合に備えて要約表示のほうが良いかな~
でも、それ以外、特に自ブログ内を検索するという行為は管理人以外は殆ど使う事はあるまいという読みから、その場合は結果を全画面表示したほうが1手間省けるという考えです。


PS、私のブロ友で、自ブログを要約表示している人は1割いないかも..ですが、少し反応を見たいと思います。
また画像は、FC2ブログに格納する事はしていません。「はてなFotolife」に収録した画像にリンクしています。というわけで、あの位置に表示されているのは「サムネイル代替画像」です。
2021-01-12-15:40  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

こんばんは。コメント有難うございます。

調整致しますので、暫しお時間下さいませ。
それと、一覧や検索したページの『見出し』ですが、パンくず(左の上方)部分に表示されます。
一度、検索やカテゴリーページ等を表示してみてご確認下さい。
故に、付けると重複致しますが…ご入用ですか?

記事、拝読致しました。
ご存知かもしれませんが「スマートフォン版の表示設定無効について」の分かり易い記事がAkira氏の所に有りますので、是非参考にして下さい。
https://vanillaice000.blog.fc2.com/blog-entry-1033.html
ひとつの答えが誰にとっても正解とは限らない【レスポンシブ設定について】
- The other way round -

改変ソースが出来ましたら、そちらに伺ってコメント致します。m(__)m
2021-01-12-23:20  aki
[ 返信 * 編集 ]

Re: aki 様へ

毎度ながら我儘で恐縮てす。
よろしくお願いします。
また、『見出し』について。
パンくずで良しとします。
2021-01-13-08:37  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

こんばんは。
出来ましたので、これからそちらに伺います。
鍵付きのため管理画面にてご覧下さい。m(__)m
2021-01-13-23:02  aki
[ 返信 * 編集 ]

ありがとうございます

先ほど取り付けてみました。
私の処で、恐る恐る返コメしています。
そちらにても書きましたが、「タグクラウド」で表示されるハズの記事が出てきません。
よろしくお願いします。
2021-01-14-08:49  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

こんにちは。ご連絡有難うございます。

そちらに伺ってお返事致しますね。
鍵付きにしますので、管理画面にてご覧下さい。m(__)m
2021-01-14-13:44  aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-01-14-15:29  -
[ 返信 ]

aki

Re: - 様へ

今、確認致しました。
今後とも宜しくお願い致します。m(__)m
2021-01-14-16:30  aki
[ 返信 * 編集 ]

新改造ct_responsive3cについて

昨日、投稿時間が表示されるようにしていただきました。
それについて、以下の願望があります。

日付表示に時刻が入れ、更にタイトルの帯の中に在るほうが恰好良い。
https://nono634.blog.fc2.com/blog-entry-4797.html

ということで、御教授いただきたく参じました。よろしく願いします。
2021-01-15-07:51  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

こんにちは。
呑兵衛あな様の意向を大凡分かって作成したつもりなのですが…詰めが甘かったようです。
そちらに伺ってお返事致しますが、少しお待ち下さいね。
2021-01-15-15:06  aki
[ 返信 * 編集 ]

Re: aki 様へ

たいへん御手数をかけてしまい恐縮しています。
結果、申し訳けありませんが、私の思う事とはマッチしませんでした。
ということで、御願いばかりした後で大変心苦しいのですが、要約表示については諦める決意に至りました。
当方にて、もう少し細かい説明を加筆しております。
いずれにしても、

aki様には大変な御手数を御掛けしながら、このような結論としたことには大変申し訳なく思っています。
ますますの御活躍を祈念しております。
2021-01-16-09:17  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

そうですか。
ご希望のものが作れず申し訳ございませんでした。

拝見しましたが1点だけ、修正箇所を見付けましたのでご連絡を。
パンくず出力に「タグ」という文字が出ない事について、そちらの記事に書かれておりました件です。
現在使用していらっしゃいますテンプレートの、HTML編集枠を少しスクロールした所に<!-- パンくずリスト -->と有りますので、その下を見ていくと

<!--tag_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > <span><%tag_word></span>
<!--/tag_area-->

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

<!--tag_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > <span>タグ[<%tag_word>]</span>
<!--/tag_area-->

以上、宜しくお願い致します。m(__)m
2021-01-16-13:20  aki
[ 返信 * 編集 ]

Re: aki 様へ

そのようにしました。
ありがとうございました
2021-01-16-15:43  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

確認致しました。
今後とも宜しくお願い致します。m(__)m
2021-01-16-16:40  aki
[ 返信 * 編集 ]

プラグインカテゴリ3について

御世話になります。
巧く表現できないのですが。
提供のテンプレートでは「プラグインカテゴリ3」が、TOP等の上部に表示される仕様と考えています。
ところが、ct_responsive3cでは、「TOP」「タグ」「検索」の結果画面ではそのようになりますが、「カテゴリー」「月別」ではそのようになりません。
home_resp3cでは仕様のとおりにすべてで表示される事を確認しました。

ct_responsive3cでもそのようにしたいと思うのですが、御教授いただきたくよろしく御願いします。
PS、ct_responsive3cの正規版でも確認しました。
2021-01-17-18:07  呑兵衛あな
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-01-17-18:24  -
[ 返信 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-01-17-21:24  -
[ 返信 ]

aki

Re: 呑兵衛あな 様へ

こんばんは。
コメント有難うございます。m(__)m
長文なので、そちらに伺ってお返事致しますね。
2021-01-18-00:35  aki
[ 返信 * 編集 ]

aki

Re: - 様へ

こんばんは。コメント有難うございます。
後程そちらに伺いますね。(^-^)
2021-01-18-00:37  aki
[ 返信 * 編集 ]

Re: aki 様へ

工事完了しました。
毎度ありがとうございます。
これからもよろしく御願いします
2021-01-18-09:19  呑兵衛あな
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-01-18-10:31  -
[ 返信 ]

aki

Re: - 様へ

こんにちは。コメント有難うございます。m(__)m
昔は問題無かった「document.write()」も、今は「危ないよ」と警告されるようになってしまいました。
新しいプラグインを誰か作ってくれると良いのになぁ~と思いますが、昔の『有志』は皆居なくなっちゃいましたし…望みは薄そうですね。
私も古参の一人故、洗練されたデザインは苦手です。(;^_^A
2021-01-18-16:35  aki
[ 返信 * 編集 ]

文字サイズ(書式)は?

「ct_responsive3c」で文字サイズが変わっていないように思えるため試験しました。
https://nono634.blog.fc2.com/blog-entry-4808.html
結果、「書式」の設定が有効になっていない模様です。
これは仕様なのかを教えてください。
ちなみに、私的には「書式」(<h〇>~</h〇>)を用いることはないのでどちらでも良いのですが。
2021-01-19-12:05  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

こんにちは。コメント有難うございます。m(__)m

書式の設定が有効になっていないのではなく、テンプレートのスタイルシートにて
h1, h2, h3, h4{
font-weight:normal;
}
及びreset css内
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
と指定しているためです。

見出し要素である<h1>-<h6>は、「見出しレベルなので、その他のマークアップやテキストの大きさを変えるため等に使用するべきでは無い」とW3CやMDNに有ります。
なので、当方テンプレートでは見出しをデザイン出来るようreset cssと上記スタイルで「font-size: 100%;」「font-weight: normal;」にして、class付け等で変えられるようにしています。
直接見出し要素にスタイルを付けてしまうと、見出しレベルが同等で異なるデザインを使いたい場合に不便になるのを考慮したのですが、スタイルシート内に見出し要素用のclassを作ってHTMLに付けているので、不要なスタイルといえば不要ですね。(^^ゞ
一度、reset cssも見直した方が良いのかもしれません。
2021-01-19-14:24  aki
[ 返信 * 編集 ]

Re: aki 様へ

レスいただき、ありがとうございます。
承知しました
2021-01-19-17:12  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

いえいえこちらこそ、色んな検証をして頂き有難うございます。
また何かお気付きがございましたら、いつでもお声掛け下さいませ。m(__)m
2021-01-19-21:23  aki
[ 返信 * 編集 ]






非公開コメント