07≪ 2019/08 ≫09
12345678910111213141516171819202122232425262728293031
2019-08-19 (Mon) | テンプレ修正等 | COM(6) | TB(0)
2019/08/19 の更新で、レスポンシブタイプ8種 2カラム及び3カラムのスタイルシート内に有る reset css を修正・更新致しました。

ユーザー様からのお問い合わせで、<strong>タグ内に入れ子で文字の色や大きさ等を指定する<span>タグを使用すると、その部分だけ<strong>が効かなくなる旨の不具合報告を頂きました。
調べてみましたら、テンプレートのスタイルシート上部に有ります
/* -----reset css------ */
以下の、セレクタ span に掛かる
font-weight:normal;
が原因であることが分かり、本日修正及び更新致しました。
ご利用の皆様には大変ご迷惑とお手数をお掛け致しますが、下記のように修正・更新の程をお願い致します。

テンプレートスタイルシート枠内最上部に有る
/* -----reset css------ */
以下の5行目(テンプレートにより前後1行の差が有ります)
font-weight:normal; の文字を見付けて削除
もう一ヵ所、
reset css の最終行の後に下記を追加(↓このように。)
~省略~section,summary{display:block;}h1,h2,h3,h4{font-weight:normal;}



'19/08/21 修正方法を変更致しました。(共有テンプレートは修正・更新済み)
1) テンプレートスタイルシート枠内最上部に有る
/* -----reset css------ */
以下の1行目に有るセレクタ名を削除して下さい。
span, small, b, i, em, strong, ←左記6種のセレクタ名をカンマ( , )ごと削除。

ここで更新ボタン、でも問題無く使えますが、上記を削除したためにページの下段に表示されるページネーションの表示が少し変わります。

現在表示されているページの番号の枠が下にちょっと伸びてしまう形状に…。ここ!という目印にはなります。^^;

2) この枠を修正する場合はお手数ですがもう一点、同じくスタイルシート編集枠内中程から3/5程の所と かなり下の所に『#pagenavi span』という箇所が3か所有ります。(キーボード「Ctrl+Fキー」で検索窓が出ますので、その中に #pagenavi span と入れて検索。)
そのセレクタ内にある高さの部分、『 height:○px; 』 を削除して下さい。〇の数値部分はテンプレートによって異なります。また、『 height:○px; 』 が無いものも有ります。その場合はそのまま飛ばして下さい。

以上です。後は更新ボタンを押して下さい。
(ReadMoreに修正後の reset css を掲載致しましたので、そのまま貼り換えして頂く事も出来ます。)

【リンク】 お問い合わせとその返信です。
ご連絡頂き、有難うございました。m(__)m

[該当テンプレート]
genial_resp2c,3c
serene_resp2c,3c
ct_responsive
al_responsive
candy-2c3c
green-2c3c
lace-al2,al3
dt21_ryo,ryo_2c

>> ReadMore
2019-08-12 (Mon) | カスタマイズ | COM(0) | TB(0)
レスポンシブテンプレート、genial_resp 3c(3カラム), 2cr(2カラム右), 2cl (2カラム左)の記事表示の変更方法です。
共有テンプレートDL時のトップページのエントリー表示は、2・3カラムとも記事毎の要約表示になっています。
これを全文表示に変更する方法です。

◎ テンプレートの設定画面を開いてHTMLを編集する。
管理画面左の『テンプレートの設定』 →[genial_resp〇c]のHTML編集枠を開いて <!-- 全文表示用HTMLの貼り換え ここから--> という所から <!-- 全文表示用HTMLの貼り換え ここまで--> という所までを、下記↓に掲載しているHTMLに変更して下さい(コピー&ペースト)。
('19/8/12以前の2カラム版が、間違えて<!-- 要約表示用HTMLの~ になっておりましたので、同日 正しく修正・更新致しました。m(__)m)


<!-- 全文表示用HTMLの貼り換え ここから-->
<div class="blog">
<!-- トップページ ここから-->
<!--topentry-->
<article class="blog-con blog-con2">
<span class="tape t-right"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)
<!-- 投稿時間不要の場合は ここから-->
<!--permanent_area--> <%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">✎</span></a>
</span>
<div class="entry_title"><h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2></div>
<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->
<div class="kiji1"><!--kiji1-->
<div class="con_body">
<div class="left">
<a href="<%topentry_link>" title="<%topentry_title>"><img src="https://blog-imgs-124.fc2.com/s/o/r/sorauta1/10pxtp.png" data-src="<%topentry_image_url>" alt="<%topentry_title>" onerror="this.src='https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif';"></a>
</div>
<div class="right">
<div class="text_overflow">
<p class="moji-c"><%topentry_description></p>
</div>
</div>
</div>
<p class="right-txt"><a href="<%topentry_link>">… 続きを読む</a></p>
</div><!--/kiji1-->
<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->
<div class="con_body pd-plus<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area--> kiji2<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->">
<%topentry_body>
<!--more_link-->
<p><a href="<%topentry_link>#readmore">Read More</a></p>
<!--/more_link-->
<!--more-->
<p id="readmore" style="padding-top:1.8em;margin-top:-3em;margin-left:-5px;">​</p>
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<div class="hidden_box" style="margin-top:0;">
<input type="checkbox" id="navTgl">
<label for="navTgl" class="open">Read More</label>
<div class="hidden_show"><%topentry_more>
<label for="navTgl" class="close">Close</label>
</div>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->
<!--/more-->
</div>
<!-- 全文表示用HTMLの貼り換え ここまで-->



上記を貼り換え・更新して頂くだけでトップページが全文表示になりますが、表示する画面サイズが420px未満で要約表示に変わります。
これは、小さい画面での縦スクロールが長くなってしまい、操作性が悪くなってしまう・次の記事を選択し難くなる、等を防ぐために画面サイズで切り替えしているためです。
この部分も全文表示にしたい場合は、下段のスタイルシート編集枠かなり下までスクロールすると
@media only screen and (max-width:420px) {
という部分が有りますので、それ以下に有る
.kiji1{
display:block; /* 1カラム時要約表示 */
}
.kiji2{
display:none; /* 1カラム時記事非表示 */
}

という部分を
.kiji1{
display:none; /* 1カラム時要約非表示 */
}
.kiji2{
display:block; /* 1カラム時全文表示 */
}

に変更して更新ボタンを押して下さい。


◎ 全文表示カスタマイズを行った場合は、カテゴリー別や月別のアーカイブも全文表示(指定表示件数分)の表示になってしまいますので、下記カスタマイズも是非行って下さい。
カテゴリー別及び月別のアーカイブをリスト化

カスタマイズを行う場合は、テンプレートの複製を作成してからの作業が安心です。
2019-08-10 (Sat) | カスタマイズ | COM(11) | TB(0)
テンプレート genial_resp 2c,3c のトップ画像の変更方法です。

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

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

/* トップ画像 */
.topimg{
position:relative;
overflow:hidden;
padding-top:35.63%; /* 画像の高さpx÷画像の幅px×100で導いた数値% */
background:url('https://blog-imgs-128.fc2.com/s/o/r/sorauta1/park.jpg'); /* 表示したい画像URL */
background-position:center center; /* 表示する位置 中央寄せ */
background-repeat:no-repeat;
background-size:cover;
}

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

genial-mihon2cr.jpg

上記の場合は

/* トップ画像 */
.topimg{
position:relative;
overflow:hidden;
padding-top:45.00%; /* 画像の高さpx÷画像の幅px×100で導いた数値% */
background:url('https://blog-imgs-128.fc2.com/s/o/r/sorauta1/himawari.jpg'); /* 表示したい画像URL */
background-position:center center; /* 表示する位置 中央寄せ */
background-repeat:no-repeat;
background-size:cover;
}

になっており、
ひまわりの画像サイズは700px×315pxになっているので、315÷700×100、という計算で導いた値を%として入れています。
右カラムも左カラムも同様です。
背景色(薄いストライプ部分)を変更する場合は、同じくスタイルシート編集枠上部に有る

body::before{
background:#e7f7e7 url(https://blog-imgs-128.fc2.com/s/o/r/sorauta1/ww-st1.png) repeat center; /* 色+背景画像 */
~~~~以下略~~~~
}
の部分を

body::before{
background:#dff0ff url(https://blog-imgs-128.fc2.com/s/o/r/sorauta1/ww-st1.png) repeat center; /* 色+背景画像 */
~~~~以下略~~~~
}
に変更して頂けば薄い水色になります。
(背景色変更の際、参考色としてご覧下さい。
カラーコード表(web safe color 216色)
カラーネーム表(147色)

3カラムの場合はもうひと手間!お願いします。^^;
トップに使う画像サイズによっては左のカラムに画像が重なってしまう事が有りますので、下記のように指定部分の数値変更をお願い致します。
genial_resp3c のみ、変更画像CSS部分の下に

#left-box{
margin-top:300px; /* トップ画像を変更して左メニューに被ったら数値を増やして調整 */
}
というCSSが有るので、そこの数値をトップ画像に合わせて変更して下さい。
例えば、ひまわりの画像を利用する場合、下記画像のように重なってしまいます。

genial-mihon3c1.jpg

↑そのままの300pxだと重なってしまうので↓重ならないように380pxに増やして見栄えを調整。

genial-mihon3c2.jpg

#left-box{
margin-top:380px; /* トップ画像を変更して左メニューに被ったら数値を増やして調整 */
}


他の画像をご利用の場合も同様に、プレビューで確認しながら数値を調整し、程良くなったら更新ボタンを押し確定して下さい。
季節も丁度良いので、ひまわり画像のカスタマイズ、コピペで利用頂けます。是非どうぞ♪
大きい画像の位置を指定して使う場合は、下記リンクのページをご参考に。
serene_resp のカスタマイズ(トップ画像変更)
不具合が有った時のために、複製を作って作業すると安心です。(^-^)

2019-08-08 (Thu) | カスタマイズ | COM(0) | TB(0)
先日(2019/07/26) の更新で、トップページが全文表示タイプ『serene_resp』『lace_al』 の2カラム及び3カラムに、カテゴリー別及び月別のアーカイブをタイトルリスト化するHTMLを追加しました。
全文表示タイプテンプレートに加筆修正しました。
トップページ要約表示タイプのテンプレートの場合、カテゴリー別や月別のアーカイブを表示した際も同じような形で表示されるので不要かもしれませんが、件数をまとめて表示したい方(管理画面での表示設定は1ページ50件まで)用に『リスト表示化』するカスタマイズを掲載致します。

list表示1
↑これを↓こんな感じに
list表示2


list表示3
↑これを↓こんな感じに
list表示4

いつも画像がボケててスミマセン。m(__)m
投稿記事が沢山有り、シンプルにタイトルだけ表示したい方、ReadMore にございますので是非ご利用下さい。
>> ReadMore
2019-08-05 (Mon) | テンプレート | COM(8) | TB(0)
本日、申請していたテンプレート [genial_resp3c] [genial_resp2c-r(右メニュー)] [genial_resp-l(左メニュー)] の3点が共有化致しました。
2日の夜に申請したので土日跨いで月曜日(5日)かなぁ~?最近共有化早いから…と思っていたら、されてましたね。共有化。(^-^)
前作同様、イメージとしては『ボンヤリ・優しい・ゆったり・柔らか・ホノボノ…』な感じで、ちょっと爽やか~な風味(?)も加えてみました。
英語では『明るくて優しい、愛想のよい、にこやかな、親切な、温和な、温暖な、快適な : Weblio より』という意味ですが、スペイン語での意味は『すごい!素晴らしい!』だそうで、^^;口語的には「いいね!」な感じだそうです。(そちらの意味は自画自賛みたいで嫌だなぁ~・・ホントにただのテンプレですから。)

genial3c
3カラム(1170px以上3カラム,未満2カラム,760px未満1カラム)


genial2c-r
2カラム右メニュー(760px以上2カラム,未満1カラム)


genial2c-l
2カラム左メニュー(760px以上2カラム,未満1カラム)

(画像ボケててスミマセン。^^; 是非、共有テンプレートのプレビューで 自身のブログに適用した場合を見て下さい。)
1カラムになるとメニューがドロワー表示になり、ドロワー内のメニューは、他を開くと閉じる仕様。
また2・3カラムとも、記事上に表示されていたプラグイン3は、個別記事画面を表示すると記事下に表示され読み易くなります。
トップページのエントリー内 Comment-open でコメントを10件まで表示、個別記事ページの追記記述部分も展開式になっております。

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


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

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

2) OGPの設定も忘れずに。(環境設定→ブログの設定→メタタグの設定)
レスポンシブ・テンプレートとは関係ありませんが、ランキングサイトやSNSに『記事投稿しているのに画像が表示されない』等の不具合が有った場合は、このOGPの設定がされていない事が原因の場合が有ります。
メタタグの設定 ←ここの【OGP設定】を有効にして下さい。

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

先ず、上記3点の設定をお願い致します。m(__)m
相変わらずのレガシーデザインですが…気に入って頂けたら使ってやって下さい。m(__)m