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  呑兵衛あな
[ 返信 * 編集 ]






非公開コメント