11≪ 2018/12 ≫01
12345678910111213141516171819202122232425262728293031
個別記事の管理2018-12-10 (Mon)
テンプレート『ct_responsive』をご利用頂き、誠に有難うございます。m(__)m
12/10 環境設定→ブログの設定で『画像高速表示』を「利用する」に設定した場合、テンプレートのHTML内に記述して有るコメントアウトの一部分が表示されてしまう不具合の報告を頂きましたので、この度 修正・更新致しました。

『画像高速表示』を「利用する」に設定されていらっしゃるユーザー様へ

この事象は『画像高速表示』を「利用する」に設定していて、且つ記事に追記が有る場合に、個別記事ページの広告が重複して表示・HTML内にコメントアウトした一部の文字列が表示、というものです。
原因は、HTML内に有るコメントアウトした文言に有る『FC2ブログの独自単変数』<%topentry_more>の左右山括弧がタグ認識されたためだと思われます。
コメント内にタグを入れても大丈夫…という認識で記述したものですが、単変数には終了タグが無く、画像高速表示の広告が干渉して表示がおかしくなったのでは…?と、勝手に推測致します。
(当方は不勉強なため、何方か原因が分かる方は是非お教え下さいませ。m(__)m)
他の方法(scriptタグのコメントアウトで挟んでみる)も試しましたが解消されないので、取り敢えず山括弧を全角にし、改変時に半角英数に直すように記述しました。

テンプレートのHTML編集枠1/3程の所に有る
<!-- 記事ページの追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>を入れる -->
というコメントアウトを↓下記のように変更
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->

① のコメントアウトだと「を入れる -->」と表示されるため、その前の > がコメント終了の宣言とみなされているようなので、② のように左右の山括弧を全角日本語にしてみたら、無事に文字が消え、追記表示時の重複広告も無くなりました。
本日テンプレートの修正・更新を致しましたが、過日にDLされた方で同様の不具合が有る方は、HTML編集枠を1/3程スクロールした所に有る① のコメントアウトを② のように変更、若しくは半角の山括弧を削除して下さい。
大変お手数をお掛け致しますが、何卒宜しくお願い致します。

* この不具合は、ct_responsive のカスタマイズ(エントリー全文表示) という記事のコメントにて頂いたものです。
Theme : 共有テンプレート * Genre : ブログ * Category : テンプレ修正等
* Comment : (0) * Trackback : (0) |
個別記事の管理2018-12-02 (Sun)
テンプレート『ct_responsive』をご利用頂き、誠に有難うございます。m(__)m
12/2、記事掲載の際に太文字が反映されないというユーザー様からのお申し出を頂き、共有テンプレートのスタイルシートを確認致しました所、当方の記述に欠落が有りました。
スタイルシートの一番上にリセットCSSを記述しているのですが、その中に strong と b を font-weight:normal; でリセットしており、改めて font-weight:bold; の記述をするべき所を失念しておりました。
既にDLされた皆様、ご利用頂いておりますユーザー様にお詫び申し上げます。
当方のミスによりご迷惑をお掛け致します。大変申し訳ございませんでした。

本日テンプレートの修正・更新を行いましたが、それ以前にDL・ご利用頂いているユーザー様は、下記のように修正・更新をお願い致します。

テンプレート管理ページ下段の『[ ct_responsive ] のスタイルシート編集』枠を少し(1/9程)スクロールした所に
/* ヘッダー部分 */ という部分が有りますので、その上に
strong{
font-weight:bold;
}
b{
font-weight:bold;
}

を追記して更新して下さい。

大変お手数をお掛け致しますが、ご対応の程宜しくお願い致します。
Theme : 共有テンプレート * Genre : ブログ * Category : テンプレ修正等
* Comment : (6) * Trackback : (0) |

No Subject * by aki
こちらの返信はお読みになられたでしょうか?
一応↗上げときます。

Re: No Subject * by aki
> 元から使っていたテンプレートで付けていた色とかそのまま使えないのでしょうか?
…申し訳ございませんが、テンプレートを変更したら以前にご利用になっていたテンプレートのスタイルシートは引き継ぎません。
前の物と同じようにしたい場合は、以前のテンプレートのスタイルシートの中から table や td の部分の色コードを探して、昨日お返事した際のスタイルに記述すれば同様になります。

table td{
border:solid 1px #000; /*枠線 実線 1px 黒*/
padding:3px 5px; /*セル内の余白 上下3px 左右5px*/
}

この border:solid 1px #000;という部分が線種と線のサイズ及び色になっていて、#000; というのが黒色のカラーコードです。
前のテンプレートのスタイルシートから table td 部分のカラーコード(#******; シャープ+数値3桁か6桁、若しくは色の名前)を見付けて下さい。
そして、上記の #000;の部分をそのコードに変更して下さい。

どうしても見つけられない場合は、似たような色のコードを下記のページより選んで適用する事も出来ます。
https://e-ssence-main.jp/tips-page/t-websafe.html(カラーコード表)
https://e-ssence-main.jp/tips-page/t-colorname.html(カラーネーム表)
どちらも当方の運営している素材サイトのページですのでご安心を。(同窓で表示するのでブラウザバックでお戻り下さい)

貴殿が以前にご利用になっていたテンプレートが当方には分からないので、該当箇所をご自身でお探し頂くほかございません。
カラーコードの適用の仕方がよく分からない場合は、再度ご連絡下さいませ。
何卒、宜しくお願い致します。m(__)m

No Subject * by 再び申し訳ないです
教えて頂いた方法で、tableの枠線とレスポンスシブには対応出来たのですが、テンプレートのtableで付けていた色が反映されないんです><

元から使っていたテンプレートで付けていた色とかそのまま使えないのでしょうか?

かなりお気に入りのテンプレートになったので、このまま使って行きたいと思うのでご教授頂ければとm(_ _)m

No Subject * by 記事内のtableについて
お忙しい中、ご返答ありがとうございます。
無事解決出来ました!

Re: 記事内のtableについて * by aki
初めまして。お問い合わせ頂き、誠に有難うございます。m(__)m

tableのCSSですが、テンプレート内には指定しておりませんので、お好みのスタイルをご指定下さい。
テンプレートの設定画面→テンプレート管理 (PC用)下段のスタイルシート編集枠内の一番下にある中括弧二つ【 }}】の後に下記を追加して下さい。

table{
border-collapse:collapse;
width:100% !important;
}
table td{
border:solid 1px #000; /*枠線 実線 1px 黒*/
padding:3px 5px; /*セル内の余白 上下3px 左右5px*/
}

線の種類や色、セル内の余白等は自由に変更して下さい。

テンプレートの記事欄の設定が、表示サイズを超えた場合は overflow:hidden;(収まらない部分は非表示)になっているので、固定幅のテーブルのはみ出た部分は欠けてしまう事になります。
どんなデバイスでも必ず収まるサイズのテーブルであれば固定幅でも良いのですが、閲覧されるサイズが不確定な場合はパーセント指定にすると可変してくれます。
表をそのまま伸縮表示させるだけなら、固定幅にしているものをパーセント指定にすると可変になります。
table {width: 100% !important;}
とすれば、既に指定されているサイズが有っても、コンテンツの幅に応じて表の大きさが100パーセントに調整されて表示されます。

参考までに、簡単なものを作ってみたのでブラウザを伸縮させてみて下さい。
https://blog-imgs-123.fc2.com/s/o/r/sorauta1/table-mihon.html
(同窓で開くので、ブラウザのバックで戻って下さい。)
伸縮では無くテーブル自体を崩して表示したい場合は、行数・列数・表示の仕方等が色々有るので、ご自身のお好みに合うものを探してみて下さい。
参考記事…(こちらの記事がタメになります。(^-^))
https://b-risk.jp/blog/2018/07/table-css/
(同窓で開くので、ブラウザのバックで戻って下さい。)

上記のCSSで不具合が有る場合は、出来ましたら貴殿ブログのURLを管理人のみ表示で構いませんのでお教え頂けますか?
お手数ですが、何卒宜しくお願い致します。m(__)m

記事内のtableについて * by 先日テンプレートをお借りした者です
レスポンスシブ対応にしたいという事もあり、元から使ってるテーブルからこちらに切り替えて利用させて頂いてます。

ただ、困ったことがあり、記事の中にtableで作成した表があると、枠線などが表示されないし、記事枠内からはみ出して表示されるようになってしまいました。

また新しい記事作成にてtableを使って表を作成しようとしても枠線が表示されないのですが、どうすば解決しますでしょうか。

お手数をおかけしますが、教えて頂けますと幸いです。

Comment-close▲
個別記事の管理2018-11-25 (Sun)
簡単に、見栄えを良くするタグとCSSを2つ、載せときます。(^-^)
1) ページを読み込む時にふわっと表示するCSS
2) 高さが有っても小さく表示する、スクロールバー付きのボックス


1) ページを読み込む時にふわっと表示するCSS
ページを読み込んだ時にふわ~っと表示されるのやってみたくて、調べてみたらすごく簡単にできるって♪
CSSだけですぐ出来るので、気になってた方是非やってみて下さいませ。

body {
animation: fadeIn
2s ease 0s 1 normal;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}


スタイルシート編集枠内、一番下にでも追加記述して下さい。
2s はフェードインする秒数の値なので、短くしたい場合は数値を減らし、長くしたい場合は増やして下さい。(2s は2秒)


2) 高さが有っても小さく表示する、スクロールバー付きのボックス
サイドのカラムに長~く表示された記事のarchive、これだけでかなりスペース取り過ぎな感が有ります。
メインである記事の長さよりまだ長い…スクロールするのも大変だけど、今迄更新してきた年月・記事数、やっぱり表示しておきたい。
…はい。私もそうです。何だかんだと10年超、(記事数少ないけど)続いております このブログ。
こういう類をコンパクトにまとめて表示するのに、スクロールバー付きのボックスの中に入れてしまうのは如何でしょう?
方法は簡単。プラグインの中身を<div></div>で挟むだけ。

<div class="infobox" style="width: 100%; height: 200px; padding: 5px 10px; overflow: auto; border: black 1px solid;">
スクロールバーを出したい
~~~
~~~
ボックスの中身
</div>

敢えて class="infobox(任意の名前)"を付けたのは、CSSでスタイルを付けたいと思った時のため。
この度は取り敢えずテンプレートを変更してもそのままボックスを表示するように、タグに直接 属性としてスタイルを指定しています。(お勧めはしないけど、プラグインだからという事で。^^;)
例えばプラグインの『月別アーカイブ』。
FC2管理画面『プラグインの設定』→『プラグイン管理』→改変したいプラグインの『詳細』をクリック↓
HTMLの編集をクリックしてタグを表示。そのタグを下記のように挟みます。

<div class="infobox" style="width: 100%; height: 200px; padding: 5px 10px; overflow: auto; border: black 1px solid;">
<ul>
<!--archive-->
<li &align>
<a href="<%archive_link>" title="<%archive_year>年<%archive_month>月"><%archive_year>年<%archive_month>月 (<%archive_count>)</a>
</li>
<!--/archive-->
</ul>

</div>

青文字の部分は公式プラグインの『月別アーカイブ』のタグです。
これを赤文字部分で挟むだけで↓こんな感じになります。

divボックスのサンプル1divボックスのサンプル2

height: 200px; の部分がボックスの高さです。数値をお好みに調整して下さい。
border: black 1px solid; の部分が枠線のスタイルです。
black を他のカラーネームやカラーコードに変更したり、1px を増やして枠線を太くしたり、solid を他の線種に変更できます。
( padding: 5px 10px; の数値は内側の余白で、5pxは上下 10pxは左右の値です。)
長くブログを運営されている管理人様、是非ご利用下さいませ。(^-^)

はてさて、今日も良い天気だったので、ゆる~いJoggingに行って参りました。
先週土曜日(17日)に写真を撮って1週間、こんなに駆け足で季節が進んでます。
(クリックで大きく表示)

20181125.jpg

来週にはカレンダーも最後の一枚になるんだなぁ~。一年って早いな。
Theme : メモ * Genre : ブログ * Category : カスタマイズ
* Comment : (0) * Trackback : (0) |
個別記事の管理2018-11-17 (Sat)
毎週土日の『ゆるJog(ゆる~いJogging)』は先週腰痛^^;で行けなかった。今日は天気も良いし体調も回復してきたみたいなので、行って参りました栃木県中央公園

栃木県中央公園20181117

段々と秋も深まって、遊歩道も芝生の上も落ち葉でいっぱい。
そんな中、ジョギングしながら大池に目をやると…

あれなんだ?20181117-1

微動だにしないけど…鳥?
いつも3周して帰るのだけど、見つけたのは2周目。3周回り終わったら近くまで行って見てみよう。
で、周回終わっても同じ所に まだ 居た。

アオサギ?20181117-2

広場側から見てみたら、鷺?かな?
写真撮ってても動く気配無し。。ハリボテでも池底に差し込んでるとか?いや、園がそんな事する意味もないよね。
まぁ、明日もジョギングに行ってみたら本物か偽物か分かるはず。(^-^;
(追記:翌18日、ジョギングに行って見てみたらいなかった。。ってこたぁ、あれは本物だったんだな。)

家に帰ってネットで調べてみたら『青鷺』らしい。
白鷲なら実家帰る時(新潟)高速道路を走ってると飛んでるのよく見るけどね。アオサギは初めて見た。
…ああ、そおいや今頃の新潟なら(阿賀野市水原)磐越道新津IC付近で瓢湖に来ている白鳥が沢山飛んでる頃だな~。(さり気なく観光アピールしつつ望郷中…)
で、アオサギを検索してみると、何だか縁起が良い鳥、らしい。
鳥ペディア』によると、アオサギは古代エジプトではもともとフェニックスの由来となる鳥「ベヌウ」とされていて、神のように崇拝されていた、らしいです。
でも、それって縁起が良いのか理由がよく分かりませんけど。

…宝くじでも買ってみるかな。(;´∀`)
Theme : 今日の出来事 * Genre : 日記 * Category : その他
* Comment : (0) * Trackback : (0) |
個別記事の管理2018-11-16 (Fri)
テンプレート『ct_responsive』をご利用頂き、誠に有難うございます。m(__)m
15日、トップページ記事のサムネイル表示方法を変更・更新致しました。
FC2の独自変数 <%topentry_image_w300> を使って表示していたサムネイルを、記事画像 <%topentry_image_url> に変更しました。
画像はサムネイルでは無く縮小表示ですが、imgタグ必須のalt属性が付けられる・縦横比の縦が足らない時に補填する黒背景が嫌、という理由でこの形に致しました。
この更新内容を下記追記部分に掲載しますので、15日以前にDLされた方・10/27記事(トップページ全文表示)のカスタマイズをされた方で、サムネイル画像表示方法を直したい方は一番下段をクリックして変更作業をお願い致します。m(__)m

…で、カスタマイズです。^^;
メールで変更方法のお問い合わせを頂き 個人的に有益かも!と思ったので、記事として掲載致します。

1) メニュー左2カラムテンプレートのドロワーメニュー(1カラム時左)を右に変更
2) 記事の枠についている日付部分にリンクを付けたい
3) 記事掲載時にYouTube等の動画をレスポンシブで埋め込む

15日、トップページ記事のサムネイル表示方法を変更・更新。記事内容 ReadMoreへ

ct-カスタマイズ

1) メニュー左2カラムテンプレートのドロワーメニュー(1カラム時左)を右に変更
スマートフォン等で操作する際に、左手て持って右手でメニュー操作するには右側が良い、というお話で…確かにそうかも。^^;
PC表示が左メニューなので左の方が良いかな~と思ったのですが、初めからスマホで閲覧される方にはPC表示がどうなのかなんて、…分かりませんもんね。
今後ご要望が多ければテンプレートの修正・更新 致しますが、取り敢えずカスタマイズでという事で。
スタイルシート編集枠2/3程の所に
/* 1カラム(ドロワーメニュー左) */
という部分が有ります。この下方を変更して下さい。

h1{
text-align: right; 削除
margin:3px 45px 0 15px; 赤文字のように変更
line-height:1.5;
position: static;
}

/* ドロワーメニュー部分 */下方
#btn1{
overflow:hidden;
height:27px;
top:0;
left:0; ← right:0; に変更
width:43px;
position:absolute;
}

#nav_open span, #nav_open span:before, #nav_open span:after{
position:absolute;
bottom:18px;
left:0; ← right:0; に変更
height:2px; /* ハンバーガーボタン 線の太さ */
width:17px; /* ハンバーガーボタン 線の長さ */
background:#666;
display:block;
content: '';
transform: translate3d(0,0,0);
}

#nav_close{
cursor:pointer;
position:relative;
padding-right:215px; ← padding-left:215px; に変更
}

.css-cancel:before{
display:block;
content:"";
position:absolute;
top:50%;
right:-9px; /* 右からの位置 */ ← left:-9px; /* 左からの位置 */ に変更
width:20px; /* キャンセルボタン 線の長さ */
height:2px; /* キャンセルボタン 線の太さ */
margin-top:-1px; /* 上からの位置 */
background:#666; /* 線の色 */
}

nav{
position:absolute;
top:0;
bottom:0;
height:100vh;
width:270px;
left:-270px; ← right:-270px; に変更
padding-bottom:50px;
background:#fff;
z-index:5;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}

上記変更して更新ボタンを押すとメニューを開くボタンが右上になります。


2) 記事の枠についている日付部分にリンクを付けたい
インデックスラベルのように表示されているとついクリックしたくなる、タイトルや画像・続きを読む以外にもリンクが有ったら楽、というご要望も頂きました。
そう言われてみると…クリックしてみたくなる、かも。^^;
なので、この部分に個別記事ページへのリンクを付けてみます。

HTML編集枠1/4少し下くらいに
<!-- トップページ ここから-->
という部分が有ります。この下4行目に
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)
</div>


上記のような一文が有るので、ここに赤文字部分を追加して下さい。

<div class="entry_date"><a href="<%topentry_link>"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)</a>
</div>

これで更新ボタンを押して頂けば完了、ですが、日付文字の色が他のリンク文字と同様に青色に変わります。
日付部分のリンク文字色を白のままにしたい場合は、下記のようにスタイルシートを追記して下さい。
スタイルシート編集枠1/5程の所に .entry_date という部分が有るので、その下に

.entry_date a{
color:#fff;
}


を追加します。このcssでは文字色は白になります。他の色にしたい場合は color:#fff; を他のカラーコード・カラーネームに変更して下さい。
カラーコード、カラーネームについては↓コチラをご参考に。
web material *Essence(当方素材サイト) ColorCode ColorName
HTML や CSS に変更を加える際には、テンプレートの複製を作ってから作業して頂くと安心です。m(__)m


3) 記事掲載時にYouTube等の動画をレスポンシブで埋め込む。
YouTubeの埋め込みしたい動画の下にある共有をクリックし、ウィンドウが表示されたら埋め込むをクリックします。
埋め込みコードが表示されるのでオプションを設定しコピーをクリックします。
コピーしたコードをブログなどにペーストして完了です。が、レスポンシブで表示するためにもう一つ。
下記のようなスタイルを用意してありますので、動画掲載時にご利用下さい。

/* 動画サイズレスポンシブ用(iframeをdiv class="player"で括る) */
.player{
position:relative;
height:0;
padding-bottom:56.25%; /* アスペクト比16:9の場合 */
overflow: hidden;
}


スタイルシート内にも書いてありますが、埋め込みコードを div class="player" で括ると、モバイル端末でも表示サイズが可変するようになります。
<div class="player"><frame width="560" height="315" src="//www.youtube-xxxxxx" frameborder="0" allowfullscreen></iframe></div>
YouTubeの記事掲載時はこんな感じに。

以上、[ct_responsive〇c]のカスタマイズや説明が必要な箇所を掲載致しました。
その他ご不明な点、不備・不具合等お気付きの点がございましたら、メールやコメントなどでお教え下さいませ。m(__)m

↓15日更新、トップページ記事サムネイル表示の変更方法

11/15 以前のテンプレートで、FC2のサムネイル独自タグを使って表示していた部分を変更します。
この変更をすると、縦横比に満たない縦部分に黒い背景が付かなくなり、画像の表示が中央(はみ出た部分は hidden で不可視)になります。
変更後に表示がすごく遅く感じるようであれば、お手数ですが 逆の方法で元に戻して下さい。

HTML編集枠1/4少し下くらいに
<div class="left">
<a href="<%topentry_link>">
<%topentry_image_w300></div>

という部分が有るので、ここを下記のように変更
<div class="left">
<a href="<%topentry_link>">
<img src="<%topentry_image_url>" alt="<%topentry_title>" onError="this.style.display='none'"></a>
</div>


HTML編集枠一番下までスクロールしたところに javascript を記述した部分が有るので、そこにスクリプトを追加。
(最後の div の前に、こんな感じに)

<!--object-fit(IE対策)-->
<script src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/ofi_min.js"></script>
<script>objectFitImages();</script>

</div> ←これの上に追加
</body>
</html> ←HTML編集枠一番下

スタイルシート編集枠 1/3 程の所にある、下記の部分を赤字に変更

.left{
float:left;
width:33%; /* サムネイル画像の幅 */
height:auto;
max-height:275px; ← 140px に変更
margin-right:10px;
text-align:center;
position: relative;
overflow:hidden;
}
.left img{
vertical-align:middle;
border:1px solid #ddd;
 ← 青文字部分を削除
width:100%;
height:auto;
max-height:140px;
object-fit:cover;
font-family:'object-fit:cover;'; /*IE対策*/
 ← 赤文字部分を追加
border:1px solid #ddd;
}

以上です。不具合が有った時のために複製を作って作業される事をお勧めします。m(__)m

Return

Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ
* Comment : (0) * Trackback : (0) |