*Essence

テンプレート『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 のカスタマイズ（エントリー全文表示） という記事のコメントにて頂いたものです。

テンプレート『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;
}
を追記して更新して下さい。

大変お手数をお掛け致しますが、ご対応の程宜しくお願い致します。

簡単に、見栄えを良くするタグとCSSを2つ、載せときます。(^-^)
１）　ページを読み込む時にふわっと表示するCSS
２）　高さが有っても小さく表示する、スクロールバー付きのボックス


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

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

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

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



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

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



来週にはカレンダーも最後の一枚になるんだなぁ～。一年って早いな。

毎週土日の『ゆるJog（ゆる～いJogging）』は先週腰痛^^;で行けなかった。今日は天気も良いし体調も回復してきたみたいなので、行って参りました栃木県中央公園。



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



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



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

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

…宝くじでも買ってみるかな。(;´∀｀)

テンプレート『ct_responsive』をご利用頂き、誠に有難うございます。m(__)m
15日、トップページ記事のサムネイル表示方法を変更・更新致しました。
FC2の独自変数 <%topentry_image_w300> を使って表示していたサムネイルを、記事画像 <%topentry_image_url> に変更しました。
画像はサムネイルでは無く縮小表示ですが、imgタグ必須のalt属性が付けられる・縦横比の縦が足らない時に補填する黒背景が嫌、という理由でこの形に致しました。
この更新内容を下記追記部分に掲載しますので、15日以前にDLされた方・10/27記事（トップページ全文表示）のカスタマイズをされた方で、サムネイル画像表示方法を直したい方は一番下段をクリックして変更作業をお願い致します。m(__)m

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

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

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



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

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;
}

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


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

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


３）　記事掲載時に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日更新、トップページ記事サムネイル表示の変更方法