*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。
01≪ 2019/02/ 12345678910111213141516171819202122232425262728 ≫03

昨日の雪は消えたけど…

►2019/02/10 23:46 

昨日はさすがに雪降る予報でジョギングに出掛けられなかったので、連休中日、いつもの栃木県中央公園へ。
日は照ってても寒波が来てるから寒い寒い…
芝生の上には融け残ってる雪と、芝と枯葉と泥にまみれた雪だるま。^^;
しかも小さい奴があちこちに。
…何となく、雪見ると作っちゃうんだよね~。
作った誰かさん、私もその気持ち、分かるよ。

20190210.jpg

公園中央に有る『昭和大池』の水が抜かれておりました。
で、よく見ると(画像の左端を外れて)向こう側に居るのは…

20190210-2.jpg

スマホの拡大で画像が荒いですが…公園の池によく来るアオサギ。え?2羽??
色の濃いのと薄いのと、2羽…グレーの薄い方も眼の上の方に黒いラインが入っていたからアオサギなんだと思うけど。

寒いけど、走りに来て良かったな。
彼らが2羽で、それもちょっと嬉しかった。(^-^)


オマケ↓
やっぱる日向が良いよね

やっぱり日向が暖かくって良いよね♪

スポンサーサイト

テーマ : 日々のつれづれ - ジャンル : 日記

我が家のペット | Comment(6) | Trackback(0) | Top ▲

al_responsive の修正・更新致しました。

►2019/02/08 01:51 

テンプレート『al_responsive』をご利用頂き、誠に有難うございます。m(__)m
先日、要約表示時のアイキャッチ画像表示方法を修正・更新した『ct_responsive』と同様の更新を、『al_responsive』にも2月6日に行いました。

ct_responsive の修正・更新致しました。(for IE)
ct_responsive の修正・更新致しました。(3)

また、2,3カラム時のメニュータイトルを折り畳む事ができてしまう不具合を、ユーザー様である 【Super源さんの雑学事典】管理人のSuper源さん様にご指摘及び修正用 Javascript をご教示頂きました。
この不具合については、'19.01.23の記事 『al_responsive のカスタマイズ(エントリー全文表示②)』 のコメントのやり取りをご参照頂くと分かり易いと思います。^^;
(修正した箇所、修正済み Javascript も掲示されております。)

度重なる修正及び更新、ご利用の皆様には大変ご迷惑をお掛けしております。
申し訳ございません。
使い勝手が良く、不具合の(出来れば極力)無いテンプレートを目指しておりますので、
何卒 末永くお付き合い頂けます様 宜しくお願い致します。m(__)m

この度、色々とお教え頂きましたSuper源さん様が発信されている【Super源さんの雑学事典】は、面白くて為になる雑学と、使い勝手の良い『オンライン便利ツール』や『ブログパーツ』等々、とても有益で楽しいBlogです。是非♪訪れてみて下さいませ。(^-^)

テーマ : 共有テンプレート - ジャンル : ブログ

テンプレ修正等 | Comment(6) | Trackback(0) | Top ▲

ct_responsive の修正・更新致しました。(for IE)

►2019/01/31 03:39 

テンプレート『ct_responsive』をご利用頂き、誠に有難うございます。m(__)m
1月28日の記事、トップページ要約表示方法を変更した修正・更新について、この修正をした際、IE(InternetExplorer)及び古いブラウザ(Firefox35, Opera12.15, Safari5.1.7)で、トップページ要約表示時の記事画像が無い場合に空のスペースが出来てしまう不具合を見付けました。
原因は「枠内に画像を綺麗に収めるための css "object-fit"プロパティ」が効かないIEやEdgeに 対応させるために入れた『object-fit-images』ライブラリ。

ofi-ie1
↑クリックで大きく表示

この『object-fit-images』は、記事内の画像や指定したアイキャッチ画像などを"object-fit"プロパティが使えないIEやEdgeで表示するために、そのままimgとしてではなく実質style属性のbackground関連プロパティで表示させるよう書き換えているようです。
そのため、ダミー画像をsrcで指定する先般の方法では非表示にならず、『object-fit-images』によってダミー画像が背景として表示されてしまう事になります。
なので、背景になった特定画像を非表示にするスタイルを追記しました。

28日に修正・更新したCSS
.left img{
width:100%;
height:auto;
max-height:140px;
object-fit:cover;
font-family:'object-fit:cover;'; /*IE対策*/
border:1px solid #ddd;
}
.left img[src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"]{
display:none; /* 要約表示時に画像が無い場合ダミー画像を非表示 */
}


30日に修正・更新したCSS
.left img{
width:100%;
height:auto;
max-height:140px;

-o-object-fit: cover; /* 古いopera用ベンダー */
font-family:'object-fit:cover;'; /* IE対策 */
object-fit:cover;
border:1px solid #ddd;
vertical-align:middle;
}
.left img[src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"]
,
.left img[style*="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"]
{
display:none; /* 要約表示時に画像が無い場合ダミー画像を非表示 */
}


赤い文字部分を追記する事により、IEでも意図した表示にする事ができました。
(.left img[src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"], の末尾に有るカンマ( , )を忘れずに。)

ofi-ie2

確認ブラウザ
PC表示
Firefox35, Opera12.15, Safari5.1.7, IE11, MS EdgeHTML17, GoogleChrome72.0
SP表示
android8.0 Chrome, iOS12.1.3 Safari Chrome

新しいブラウザでは問題無いようですが、IE、Edge、古いブラウザをご利用で表示に不具合が有りましたら、1月28日の記事と併せて上記の箇所を追記下さいませ。
例え減ったとは言え まだまだ利用者がいる IE(InternetExplorer)、出来るだけ新しいバージョンには対応しておきたいと思いますので、お手数ですが宜しくお願い致します。m(__)m

テーマ : 共有テンプレート - ジャンル : ブログ

テンプレ修正等 | Comment(0) | Trackback(0) | Top ▲

ct_responsive の修正・更新致しました。(3)

►2019/01/28 02:20 

テンプレート『ct_responsive』をご利用頂き、誠に有難うございます。m(__)m
細かい修正で、何処を修正したのか見た目は全く分かりません。が、トップページ要約表示をされていて、記事内にサムネイル表示する画像が無い・設定していない場合の表示方法を少し変更しました。

『ct_responsive』の場合は、
<a href="<%topentry_link>"><img src="<%topentry_image_url>" alt="<%topentry_title>" onError="this.style.display='none'"></a>
のように、表示する画像URLが無い場合は onError="this.style.display='none'" で「エラーが有ったら表示しない」javascriptを入れておりました。
これでも問題無く非表示になり、要約文字のみ表示されます。
ただ、HTMLのソースを表示してみると、<img src="" alt="説明" onError="this.style.display='none'">のようにsrc内は空になっているので、Validator.nu (X)HTML5 Validator で 『Error: Bad value for attribute src on element img: Must be non-empty.』 というエラーをもらってしまいます。要するに、src属性が空になっているのはいけません、って事です。(^^;
このテンプレートを作った時から、ずっと考えていたんですよね。方法を。
(因みに、『al_responsive』の場合はサムネイル表示にFC2独自タグを使って表示しているので上記のようなエラーは有りません。が、画像に必須の alt タグが付けられない・画像比に満たない部分の背景が黒、という問題もありまして。。FC2に要望中ですが難しそうです。)
…今迄も色んな表示方法を試してみたのですが、この度 下記のような方法でエラーを出さない表示を考えてみました。

[HTML編集枠1/3程の所にある]
<a href="<%topentry_link>"><img src="<%topentry_image_url><!--body_img_none-->https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif<!--/body_img_none-->" alt="<%topentry_title>"></a>

img src="" が空の時に取り敢えず容量の小さいダミー画像を空の部分に入れ、その画像を

[スタイルシート編集枠2/5程の所にある]
.left img[src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"]{
display:none; /* 要約表示時に画像が無い場合ダミー画像を非表示 */
}


cssで非表示にする、という方法です。
画像有り・無しで表示に問題無く、validatorでもエラーは無くなりましたので、この形で共有掲載しようと思います。
非表示の方法としてはあまりキレイでは有りませんが、例えばスタイルシート部分の記述をせず、HTMLの画像URLだけ入れておけば掲載画像が無い場合の『no image』表示として利用できます。
Read More に参考画像URLを掲載しましたので、気に入ったものがございましたらお使い下さい。

上記修正の件、もし何処か不具合などを見付けられましたら、何なりとお申し出下さいませ。
宜しくお願い致します。m(__)m

2019/01/31 『ct_responsive の修正・更新致しました。(for IE)』
上記の記事にて、本記事のスタイルシートを少し修正、及びテンプレートを更新致しました。
併せて記事をご覧下さい。

>> ReadMore
no-img4
https://blog-imgs-123.fc2.com/s/o/r/sorauta1/no-img4.jpg

no-img3
https://blog-imgs-123.fc2.com/s/o/r/sorauta1/no-img3.jpg

no-img2
https://blog-imgs-123.fc2.com/s/o/r/sorauta1/no-img2.jpg

no-img1
https://blog-imgs-123.fc2.com/s/o/r/sorauta1/no-img1.jpg

【 使い方 】
下記HTMLタグのオレンジ色の部分に、上記の画像URLを入れるだけで、no-image画像が表示されます。(トップページ要約表示のみ)勿論、ご自身で記事作成時に入れたアイキャッチ画像が優先表示されます。

<a href="<%topentry_link>"><img src="<%topentry_image_url><!--body_img_none-->https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif<!--/body_img_none-->" alt="<%topentry_title>"></a>
Return <<

テーマ : 共有テンプレート - ジャンル : ブログ

テンプレ修正等 | Comment(0) | Trackback(0) | Top ▲

al_responsive のカスタマイズ(エントリー全文表示②)

►2019/01/23 02:40 

1月15日の更新で、レスポンシブテンプレート、al_responsive 3c(3カラム), 2cr(2カラム右), 2cl (2カラム左)の個別記事追記表示を折り畳みに変更致しましたので、トップページ全文表示用の変更HTMLも修正致します。('19.01.15 以前にDLした al_responsive のトップページを全文表示にするカスタマイズは、『al_responsive のカスタマイズ(エントリー全文表示)』をご参照下さい。)
難しい変更箇所はございませんので、要約表示から全文表示にしたい方は、是非カスタマイズしてみて下さい。

◎ テンプレートの設定画面を開いてHTMLを編集する。
管理画面左の『テンプレートの設定』 →[al_responsive〇c]のHTML編集枠を開いて「トップページここから」という所までスクロールし、下画像のように変更して更新。

上画像の赤い部分を削除して下画像のように変更・更新します。
(クリックで大きく表示)

全文表示5

下のように変更後更新ボタンを押す。↓

hyouji6.png
↑画像は完了状態。HTMLソースをこの形にします。

下段の Read More を開いてHTMLをコピー&ペーストする場合は、テンプレートの設定→HTML編集枠をスクロールし、

<!-- トップページ ここから--> ~ <div class="entry_state">

までを貼り換えて下さい。
ここまでで2、3カラム時に全文表示になり、1カラムでは要約表示になります。
1カラムも全文表示にしたい場合は、スタイルシート編集枠3/4程スクロールした所に有る

/* レスポンシブ1000px以下で適用 */
@media only screen and (max-width:1000px){ という部分の
/* 要約表示時記事非表示 */
.kiji2{
display:none;
}
を display:block; に変更、その下に
.kiji1{
display:none;
}

を追加して下さい。

不具合が有った時のために複製を作成して作業すると安心です。

>> ReadMore
al_responsive 2c(2カラム右・左)

<!-- トップページ ここから-->
<!--topentry-->
<div class="con1">
<section>
<h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)
</div>
<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->
<div class="kiji1"><!--kiji1-->
<div class="left">
<a href="<%topentry_link>"><%topentry_image_w300></a>
</div>
<div class="right">

<div class="text_overflow">
<p class="moji-c"><%topentry_description></p>
</div>
<p class="right-txt clearLeft"><a href="<%topentry_link>">... 続きを読む</a></p>

</div>
</div><!--/kiji1-->
<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->

<div class="con1_body <!--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-->
<div class="readmore">
<a href="<%topentry_link>#more">Read More</a>
</div>
<!--/more_link-->
<!--more-->
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Read More</a>
<noscript>
<a href="<%topentry_link>#more">Read More</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<hr>
<p style="margin:15px 0;"><%topentry_more></p>
<a href="#entry<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->
<!--/more-->
</div>
<div class="entry_state">



al_responsive 3c(3カラム)

<!-- トップページ ここから-->
<!--topentry-->
<div class="con2">
<section>
<h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)
</div>
<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->
<div class="kiji1"><!--kiji1-->
<div class="left">
<a href="<%topentry_link>"><%topentry_image_w300></a>
</div>
<div class="right">

<div class="text_overflow">
<p class="moji-c"><%topentry_description></p>
</div>
<p class="right-txt clearLeft"><a href="<%topentry_link>">... 続きを読む</a></p>

</div>
</div><!--/kiji1-->
<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->

<div class="con2_body <!--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-->
<div class="readmore">
<a href="<%topentry_link>">Read More</a>
</div>
<!--/more_link-->
<!--more-->
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Read More</a>
<noscript>
<a href="<%topentry_link>#more">Read More</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<hr>
<p style="margin:15px 0;"><%topentry_more></p>
<a href="#entry<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->
<!--/more-->
</div>
<div class="entry_state">



Return <<

テーマ : 共有テンプレート - ジャンル : ブログ

カスタマイズ | Comment(14) | Trackback(0) | Top ▲

 | Blog Top |  Next»»

My profile

aki

Author : aki
web material *Essence
HP用フリー素材を配布中。
是非♪お立ち寄り下さい。
ついでに使ったり、リンクしてくれると喜びます。
このBlogでは共有テンプレを作成・配布しています。

ランキング参加中
ランキング参加中♪

Calender

01 | 2019/02 | 03
日 月 火 水 木 金 土
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 - -

Comments

  • 2019-02-18 aki : ct_responsive のカスタマイズ(エントリー全文表示)-ハルカ 様へ
  • 2019-02-18 ハルカ : ct_responsive のカスタマイズ(エントリー全文表示)-おはようございます♡
  • 2019-02-14 aki : ct_responsive のカスタマイズ(エントリー全文表示)-ハルカ 様へ
  • 2019-02-14 ハルカ : ct_responsive のカスタマイズ(エントリー全文表示)-はじめまして。
  • 2019-02-11 aki : 昨日の雪は消えたけど…-yomogimochi1012 様へ
  • 2019-02-11 yomogimochi1012 : 昨日の雪は消えたけど…-愛すべき写真
  • 2019-02-11 aki : 昨日の雪は消えたけど…-ゆきゆず 様へ

Categories

  • Template (total 119)
    ├ テンプレート (35)
    ├ テンプレ修正等 (27)
    ├ テンプレ作成備忘録 (1)
    └ カスタマイズ (56)
  • テンプレ閲覧障害等 (5)
  • 素材の宣伝♪ (10)
  • Web制作備忘録 (10)
  • 我が家のペット (23)
  • 私事備忘録 (7)
  • 巷のニュース話 (11)
  • Trackbackテーマ (3)
  • その他 (100)

Customize

カスタマイズページリンクです。
ct_responsive
├ 着せ替え snowflakes
├ 着せ替え nightscape
├ 文字装飾・絵文字挿入機能
├ ドロワーメニュー・その他
├ 背景画像変更
├ トップ画像・背景色
└ エントリー全文表示
al_responsive
├ CSS変更・その他
├ トップ画像変更
├ 背景画像変更 ②
├ 背景画像変更 ①
├ エントリー全文表示②
└ エントリー全文表示
その他カスタマイズ
├ al_及びct_の修正と装飾追加
├ 見栄えの小技
└ 先ずは設定を変更!

Modification and update

修正・更新のリンクです。記事順は新しいものが上です。
ct_responsive
├ 修正・更新致しました。(IE)
├ 修正・更新致しました。(3)
├ 修正・更新致しました。(2)
└ 修正・更新致しました。
al_responsive
├ 修正・更新致しました。
├ 要約文,表示方法変更しました
└ 要約部分の不具合について

Search in blog

Mail form

名前:
メール:
件名:
本文:

PR Link

TNR活動-いつも一緒!-Nyan'sDiary-様

いつでも里親募集中

Links

  • アカツキスギテ。
  • ありのごとくあつまりて
  • FC2tmplLabo
  • Super源さんの雑学事典
  • I☆My Cooking
  • BELLE
  • 介護と猫と一眼レフ
  • グラハムボネ太郎の部屋
  • 東京パワーストーンショップ
  • しっぽ天使といつも一緒!
  • magic

web material *Essence Links

* Essence Mutual Links 1
* Essence Mutual Links 2
* Essence Recommend Sites
* Essence Auto Links
↓ 色変更する際の参考にどうぞ
* Web Safe 216color
* Color Name

Archives

plugin by カスタムテンプレート

FC2ブログ共有テンプレート配布中

FC2ブログで共有テンプレートを配布しています。ご利用はFC2会員になってブログを作成して下さい。

* レスポンシブテンプレートの設定

*Essenceの配布するテンプレートで『レスポンシブ』と表記されているものはパソコン・スマートフォン共通のテンプレートです。ご利用の際は下記の設定をして下さい。
1)PCやモバイル端末等の閲覧で、画面サイズが変化するレスポンシブデザインテンプレートを使う場合、初めに「スマートフォン版の表示設定」を無効にして下さい。
管理画面左の『環境設定』→『ブログの設定』→『スマートフォン版の表示設定』を無効にして更新。
2)FC2ブログ上部に有る検索バーはレスポンシブ未対応なので、画面の表示サイズによっては途切れてしまいます。使わなければ是非、無効にして下さい。
管理画面左の『環境設定』→『ブログの設定』→『検索バーの設定』で[利用しない]を選択して『更新』。

* テンプレートのご利用について

FC2利用規約及びFC2ブログ利用規約に違反していない限り どのブログにご利用頂いても構いません。
但し、DLしたテンプレートを再配布する事はできません。
改変等を行った場合でも同様にテンプレートの再配布はできません。

* カスタマイズについて

著作権表示部分の削除以外はどのような改変もOKです。
但し、その場合ご質問等をお受けできない場合が有ります。
カスタマイズの際は、不具合が有った場合のために複製を作成しておく事をおすすめします。

* 著作権と免責事項

*Essenceの配布する全てのテンプレートの著作権は管理人akiに有ります。
著作権表示を削除してテンプレートを使用する事は認めておりません。
テンプレートを使用して何らかの不利益や問題が生じても、当方は一切の責任を負いません。

不明な点はMail、ブログのコメント等でお問い合わせ下さい。
ご質問は、テンプレート名・閲覧ブラウザとバージョン・変更箇所・状況等、出来るだけ詳細が分かるようにお願い致します。m(_ _)m

当方確認ブラウザ:(OSは全てWin10です)
IE9, IE10, IE11, Opera12, Firefox35, Safari5, MSEdge42, GoogleChrome67
Mobile確認:iPhoneSE iOS11 , SO-01J Android6
※利用規約は予告なく変更される場合があります。ご了承下さい。

copyright © *Essence all rights reserved.

template designed by *Essence. material by web material *Essence.