*Essence

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

TOP >  Template >  カスタマイズ >  コメント投稿欄の位置を上下変更(2)

コメント投稿欄の位置を上下変更(2)

区切ってしまってスミマセン。
前記事に引き続き、コメント投稿欄の位置を上下変更するカスタマイズ、その(2)です。
申請済みのテンプレート、今回は残りの4種です。

① 先ず、テンプレート管理画面の [ テンプレート名 ] のHTML編集 枠内の下記の文言を探します

本日の更新以降のテンプレートは<!-- コメント投稿欄と表示欄を逆にしたい場合の貼り換え ここから --> を探します。
(文字検索する場合は、PCのキーボードで『Ctrl+Fキー』を押して開いた窓に <!--comment_area--> を入れて検索すると1ヵ所有ります。上記の文言が無いテンプレートでも、<!--comment_area--> は必ず1か所有るので目印にして下さい。)
場所を見付けて頂いたら、<!-- コメント投稿欄と表示欄を逆にしたい場合の貼り換え ここから --> から <!-- コメント投稿欄と表示欄を逆にしたい場合の貼り換え ここまで --> までの間に、下記テンプレート名をクリックして表示されたHTMLを入れて下さい。
(上記文言の無いテンプレートの場合は、<!--comment_area--> から <!--/comment_area--> を含めて上書きするように入れて下さい。)







② HTMLの貼り換えが出来たら、更新ボタンを押して適用させて下さい。
不具合が有った時のために、複製を作っておくと安心です。

lace-al3 , lace-d3c は、上記を施すとコメント表示部が崩れてしまう事が分かりましたので、カスタマイズでの表示方法を少し変更しました。
HTMLを貼り付けた後、lace-al3 , lace-d3c のスタイルシート編集枠内4/5程の所に有る下記のCSS部にオレンジ文字を追加して更新ボタンを押して下さい。
(文字で検索する場合は『Ctrl+Fキー』を押して、表示された小窓に .com_block を入れて下さい。すると2ヵ所見つかり、2番目です。)


lace-al3 , lace-d3c (3カラムのみ)
/* コメント部分 */
.com_block{
margin:20px 245px 20px 0;
width:100%; /* 追加 */
}


[Tag] * カスタマイズ * コメント

Last Modified : 2020-02-27

Comments






非公開コメント

aki Re: トーフスキー 様へ

h3の上下マージンは1行分(1em)になっているので、本文との間隔は改行で調整して下さいね。
それと要約文の行数ですが、スタイルシートを拝見したところ、
-webkit-line-clamp:3;
は5になっているのにその下段
max-height:5.2em;
がそのままです。ここの数値も行数に合わせて(コメントアウトしている数値に)変更して頂かないと表示されません。
お時間の有る時にご確認頂けます様 お願い致します。m(__)m
2020-03-05-11:55aki [ 返信 * 編集 ]

No Subject

h3見出し、早速やってみました。
いい感じの見出しになりました。
ありがとうございます。

しかし、2点目の要約表示の行数を増やす件の方がうまく行きません。
行数を4にしても5にしてもダメでした。
どこか問題でしょうか。
2020-03-05-09:00トーフスキー [ 返信 * 編集 ]

aki Re: トーフスキー 様へ

お返事有難うございます。

ブログ内で見出しを使う際に、人によってはh3だったりh4だったりと様々なので、テンプレート毎の見出しCSSは入れておりませんでした。
ただ、最近は記事内に目次・見出しを使う方も増えているようですし、シンプルなものをCSS内に入れておくのは良い案かもしれません。
当方の、今後の課題にさせて頂きますね。(^-^)
2020-03-04-22:27aki [ 返信 * 編集 ]

No Subject

うわぁーー、詳しい回答ありがとうございます。

素人の私にはちょっとハードルが高そうですが、じっくり読んでやってみたいと思います。

また、目次部分の誤りをみつけていただいてありがとうございます。
実はwebから適当に拾ってきたものなんです。
何も考えずにコピペしてしまったんでダメですね。

いつもいつもご親切にありがとうございます。
感謝しております。
2020-03-04-18:18トーフスキー [ 返信 * 編集 ]

aki Re: トーフスキー 様へ

こちらこそ、テンプレートをご愛顧頂き有難うございます。(^-^)
3月に予定されていたご旅行がキャンセルとの事、とても残念ですね。
『行った気になれる』写真と記事が楽しみですのに…私も残念です。(;_;

h3見出しのスタイルの件です。
見出しは重要度で、h1-ブログタイトル, h2-記事タイトル, h3-サイドのメニュー及びコメント・トラックバック・全記事一覧等, でテンプレート内で使っているのですが、見出しそのもののスタイルは font-weight:normal のみで、それ以外の装飾はしていません。
例えば h3{ ~~~ } でスタイルを付けてしまうと、全てのh3に装飾が及んでしまいます。
そのため、それぞれ表示する場所にclassを付けて装飾分けをしています。

目次を表示する場所が記事内、記事部分のclass[.con_body]の中に作った h3 という見出しなので、.con_body h3{ のようにして装飾部位を分けて作ります。
(『見出し デザイン』等で検索すると、色々な見出し装飾用のスタイルを掲載したサイトが表示されます。その中から下記サイトのデザインを一例に掲載致します。)
https://saruwakakun.com/html-css/reference/h-design
【CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選-サルワカ】
上記サイトの見本最後の方に有るものを少し変えて下記のようなものを作ってみました。
スタイルシート一番下段にでも追加してご覧下さいませ。

.con_body h3 {
margin: 1em;
font-weight: bold;
color: #333;
position: relative;
text-shadow: 0 0 2px white;
border-bottom: 2px solid #e3ddd8;
z-index: 0;
}
.con_body h3:before {
content: "";
position: absolute;
background: #e3ddd8;
width: 50px;
height: 50px;
border-radius: 50%;
top: 50%;
left: -20px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: -1;
}

セレクタ(.con_body h3 の部分)をそのままに、プロパティ(装飾部)の中身を変更すると他のデザインになりますので、是非試してみて下さい。
それとsourceを見て気付いたのですが、目次部分に一ヵ所だけ記述が間違っておりますので修正して下さいませ。

<div style="text-align:left;padding:10px;border-color:#cccccc;border-width:2px;border-style:solid;width:90%;background:#ffffff;"><b>目次</b><br>

オレンジ部分が全角のfになっています。カラーコードは大文字小文字どちらでも構いませんが、必ず半角英数で記述をお願い致します。(でないと反映しません。)m(__)m


2点目の要約表示の行数を増やす件です。
スタイルシート編集枠内を2/5程スクロールした所に下記のような部分が有るので、表示したい行数と max-height の数値(オレンジの部分)を変更して下さい。

.moji-c{
overflow:hidden;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3; /* 表示したい行数(3行表示で末尾に3点リーダー表示、webkit系のみ) */
max-height:5.2em; /* IE,Firefox対策(4行は7.0em、5行は8.8em) */
}

後は更新ボタンを押して適用して下さい。(不具合が有った時のために複製を作っておくと安心です。)
ご不明な点や不具合が有りましたら、再度ご連絡下さいませ。m(__)m
2020-03-04-16:35aki [ 返信 * 編集 ]

要望なんですが

いつもお世話になります。
前回要望したのもまだ対応していない中で申し訳ないんですが、またまた要望です。

今回記事に”目次”を使ってみました。
目次に対応する見出しがh3で定義したんですが、見た目がちょっとしょぼい。
なんか見出しらしい装飾(?)をつけられないでしょうか。

2点目ですが、要約表示で”… 続きを読む”のリンクを自分で削除してみました。
こちらのリンクをクリックされた場合、アクセス解析でどのページかわからないためです。

でもその削除した分がちょっと間抜けになってます。
”… 続きを読む”のあった行まで要約表示の行数を増やしたいんですが可能でしょうか。

勝手なことばかりで申し訳ありませんが、ご検討お願いします。
2020-03-04-08:32トーフスキー [ 返信 * 編集 ]