*Essence

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

al_responsiveとct_responsiveの修正及び装飾追加

テンプレート『al_responsive』『ct_responsive』をご利用頂き、誠に有難うございます。m(__)m01/14 修正及び装飾機能を追加致しましたのでご案内申し上げます。修正は、(ブラウザ最上段に有る)FC2の検索バーをご利用で1カラム表示の際、『al_responsive』のブログタイトルを含むヘッダー部分が下がってしまい、ドロワーメニューのボタン「≡」が隠れて見えなくなってしまう不具合です。隠れてしまうボタンをヘッダー上に表...

... 続きを読む

Theme : 共有テンプレート * Genre : ブログ * Category : テンプレ修正等

Comment-open▼ * Comment : (6) * Trackback : (0)

Super源さん 様へ * by aki
度々のご報告、有難うございます。

人が付けやすい名前って、やっぱり有りますよね。そして、避けた方が良さそうです。^^;
ただ、全然関係無い名前だと後で分からなくなってしまう気がして…で、結局末尾に数字やアルファベット付けてるだけ。安易過ぎますが…(;´∀`)
自分以外に利用してもらうものは気を付けないと、ですね。
また何かお気付きの点が有りましたらお教え下さいませ。m(__)m

今後とも宜しくお願い致します♪

akiさん、こんばんは!(^^)/ * by Super源さん
いいえ。お役に立てたらな幸いです。(^^)

なるほど、そうなのですか。
それでは対処のしようががありませんね。(--)(__) ナットク

メニューアーカイブの件、調べてくださり恐縮です。m(__)m
なんと、そのような理由だったのですね。おお!(゚o゚)

実は、アーカイブの部分は、かなり前に「共有プラグイン追加」からインストールしたもので、何が書いてあるのか中身をきちんと見たことがありませんでした。(^^;
で、改めてどんな内容になっているのか見てみると、ご指摘の class="tree" はどこからも参照されてないことが分かりました。

そこで、 バサッと悪女、じゃなかった削除したところ、無事中身が現われるようになりました。ヽ(^o^)ノ
ありがとうございました。m(__)m

いえいえ。こちらこそ、akiさんに余分なお手間をとらせてしまい、申し訳なかったです。【><】

>p.s. tree という class名を付けられる方は他にもきっといらっしゃると思うので、

なるほど。確かにtreeという変数名を避けるというのは賢明な選択かと思います。(^^)
というのは、以前私の方で、何人かの方から、共有プラグインに登録しているブログパーツの表示がちょっと変との報告を受け、調べたところ、その100%近くが、ユーザーの使用しているテンプレートに使われている変数名とのダブりに起因するものだったからです。(^o^;

>(今迄DLされた方からのお申し出が無かったのは…たまたま運が良かったから?それとも諦め?^^;)

(@_@)ウーン どうでしょうね。
確かに、無料で使わせていただいてるわけですから、普通は「まぁ、いいか」と、諦めるかもですね。(^^;

あっ!(゚o゚)また長くなりそうなので、(^^; 今日はこの辺で。m(__)m

Super源さん 様へ * by aki
お忙しい中 早速検証頂き、有難うございます。m(__)m

このFC2の検索バーは z-index:1000; で勝手に body 直下に貼られてしまうので、例え方法が有っても私のスキルではどうしようもないです。^^;
なので、ヘッダーが下がってしまうのであればメニューボタンをその上に表示させる方法にしました。
では、メニューボタンの表示は大丈夫みたいですね。良かった。。
自分だけの閲覧環境では分からない事も有りますので、検証して頂けて助かりました。有難うございました。m(__)m

それと、メニュー『アーカイブ』が展開されない理由ですが、HTMLソースを拝見すると
<div class="tree" id="**">
と、テンプレートと重複する class が有るためのようです。
大変申し訳無いのですが、プラグイン『アーカイブ』の class名を tree1 とか tree2 等に変更してみて下さい。
(こちらで確認してみた所、class名を変更しても問題無く表示・展開しました。)
再度、ご確認の程 宜しくお願い致します。m(__)m

p.s. tree という class名を付けられる方は他にもきっといらっしゃると思うので、先程 後付けながらテンプレートに使用している class="tree" を tree-m という名前に変更・更新致しました。
こちらの件もお教え頂き、有難うございました。
(今迄DLされた方からのお申し出が無かったのは…たまたま運が良かったから?それとも諦め?^^;)

akiさん、こんにちは!(^^)/ * by Super源さん
おお!(゚o゚)こんなにあったんですね。(^^;
javascriptの部分は、あの後すぐに発見できましたが…。(^^;

ということで、現在のものをsave後、早速書き換えてみました。(^^)v

ドロワーメニューのボタン、常に最上位に表示されるようになりました。ヽ(^o^)ノ
ヘッダー部分はやはり下がってくるようですが、これは別に実害がないのでokです。

テンプレート修正、どうもお疲れさまでした。m(__)m
大変な作業だったと推測いたします。
また、ご教示ありがとうございました。m(__)m


ところで、この"="ボタンをclickするとメニューが現われますが、その中の「アーカイブ」の中を見ると、カラになっているようです。(? ?)アレッ。

以上、今気が付きましたので、ついでながらご報告させていただきました。

Super源さん 様へ * by aki
一応、今回の更新で変更した箇所を掲載しておきますね(al_responsive2cl)。
長々と書き連ねてしまいますがお付き合い下さいませ。m(__)m

スタイルシート編集枠の上から順に

html{
font-size:80%; /* 75%から80%に変更 */
overflow-x:hidden;
}

h1{
margin:0 30px; /* 0 20pxを0 30pxに変更 */
padding:0;
font-size:1.6em;
color:#fff;
position:static; /* 追加 */
}

ul li{
list-style:circle;
list-style-position:outside ;
margin-left:17px; /* 15pxから17pxに変更 */
}


/* レスポンシブ1000px以下(サイズ共有有り) */

/* ヘッダー部分 */
header{
width:100%;
position:relative;
overflow:hidden;
background:#c0d58c;
height:auto;
margin:0;
/* z-index:6; 削除 */
}

/* メニューボタン */
/* 追加 */
#btn,
#btn1,
#btn2{
display:block;
}

#btn{
overflow:hidden;
/* width:100%; 削除 */
height:30px;
top:0; /* 32pxを0に変更 */
/* z-index:3; 削除 */
position:absolute; /* fixed !importantをabsoluteに変更 */
}

#btn1{
overflow:hidden;
/* position:absolute; 削除 */
width:230px;
height:30px;
top:32px;
z-index:3 !important;
}

/* メニュー */
nav{
position:absolute; /* fixedをabsoluteに変更 */
top:0;
bottom:0;
width:230px;
left:-230px;
/* min-height:100%; 削除 */
height:100vh; /* auto !importantを100vhに変更 */
padding-bottom:50px; /* 15pxを50pxに変更 */
z-index:5;
background-color:#fff;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}

/* #menu,#menu2{
margin-top:61px;
} 削除 */


/* レスポンシブ1000px以下で適用 */

@media only screen and (max-width:1000px){
/* html{
width:100%;
overflow-y:scroll;
overflow-x:hidden;
} 削除 */
header{
margin-bottom:10px; /* 追加 */
}
/* 1カラム時非表示 */
.introduction{
display:none; /* 追加 */
}


/* レスポンシブ1001px以上で適用 */

@media only screen and (min-width:1001px){
/* html{
width:100%;
overflow-y:scroll;
overflow-x:hidden;
} 削除 */

/* メニュー */
nav{
position:static;
float:left;
width:230px;
height:100%; /*追加 */
margin:26px 0 0 15px;
overflow:hidden;
box-sizing:border-box;
}

.tree{
/* padding-top:12px; 削除 */
display:block; /* メニューを開いて表示 */
}

スタイルシートは以上です。あと、ドロワーメニューのscriptが少し変わりましたのでそれも載せておきます。

<script>
$(function(){$("#nav_open").click(function(){$("nav").css({"display":"block"}).animate({"top":"0","left":"0"},{duration:200,complete:function(){$("#nav_wrap").css({"display":"block","position":"absolute","z-index":"4","background":"rgba(0,0,0,0.5)","top":"0","bottom":"0","right":"0","left":"0"})}}),$("body,html").css({"overflow":"hidden","height":"100%"})}),$("#nav_close,#nav_wrap").click(function(){$("nav").animate({"top":"0","left":"-230px"},{duration:200,complete:function(){$("#nav_wrap").css("display","none")}}),$("body,html").css({"overflow":"visible","height":"auto"})})});
</script>

宜しければ複製でも作って検証してみて下さい。m(__)m

akiさん、こんばんは!(^^)/ * by Super源さん
件の機能、修正版で早速対応してくださり、感謝です。(T^T) ウルウル←ウレシナキ デス
もう私は、akiさんに一生ついていきますよ、(--)(__) ホント ホント。


おお!(゚o゚)そうわれてみれば、今まであまり気にしてませんでしたが、表示後ヘッダーが少し下がってきますね。
私のところは検索バーは使っていない2カラムですが、TOP、カテゴリ、記事ページなど、全てのページにおいて下がってくるようです。

あとで新テンプレートをDLしてチェックしてみますが、もしよろしければ、どの辺を見ればよいのかお教えくださるとうれしいです。
何せ、当方カスタマイズしているため、新規の入れ替えができないので。(^^;

それでは、またお邪魔します。(@^^)/~~~

平成31年、明けましておめでとうございます。m(__)m

新しい年が明けました。平成31年は2019年4月30日火曜日で終わりになります。…ので、まだ平成です。(昨年末で変わると思っていた方もいらっしゃるそうなので。。)改めまして、明けまして おめでとうございます。本年も、何卒宜しくお願い致します。m(__)m年末(31日)から1月2日まで、実家の新潟に帰省して参りました。兄が亡くなって母が一人暮らしになってしまい いつも気になっているのですが、取り敢えずまだ『介護不要老人』...

... 続きを読む

Theme : いいもの見つけた * Genre : 日記 * Category : その他

Comment-open▼ * Comment : (21) * Trackback : (0)

kotori* 様へ * by aki
希望のカスタマイズが出来て何よりです♪

昔ながらのレガシーデザインテンプレートなので、せめて『自分色』に、簡単に変更ができるように作っております。
これからも、季節やイベント毎に素敵にテンプレートを飾って楽しんで下さいませ。(^_-)-☆

不具合やお気付き等、何か有りましたらいつでもお声掛け下さいね♪

希望のスタイルになりました * by kotori*
akiさん、何度もありがとうございました。

少し余白を設け、希望の表示になりました。
いつも丁寧にご回答頂きありがとうございます。
コメ欄で他の方もおっしゃっておりましたが、
本当にakiさんの作られるテンプレは好みでして、ますます欲が出てしまいます。
誰も気にしないような小さなコトなのですが、自分好みにカスタマイズさせて頂き、
ブログを開くのが毎日楽しくなります。

ホント、長いお付き合いをさせて頂いております。
何かありましたらまたご教授願います。(*´v`*)

kotori* 様へ * by aki
コメントリスト部分のカスタマイズです。下記の通りに改変して下さい。

先ず、HTML編集枠を2/5程スクロールした所に
<!--comment_list-->
<div class="topentry_comment_body">
<div style="padding-bottom:10px;"><span style="color:#ba6f6f; font-weight : bold"><%topentry_comment_list_title></span> * by <%topentry_comment_list_name>
</div>
<div style="margin-bottom:5px"><%topentry_comment_list_brbody>
</div>
<hr class="hr1">
</div>
<!--/comment_list-->

という箇所が有りますので、ここを

<!--comment_list-->
<div class="topentry_comment_body <%topentry_comment_list_name>">
<div style="padding-bottom:10px;"><span style="color:#ba6f6f; font-weight : bold"><%topentry_comment_list_title></span> * by <%topentry_comment_list_name>
</div>
<div style="padding-bottom:10px"><%topentry_comment_list_brbody>
</div>
</div>
<hr class="hr1">
<!--/comment_list-->

のように変更して下さい。(コピペ可)

次に、スタイルシート編集枠内割と上の方に、

.hr1 {
margin: 15px 0;
border-top: dashed 1px #f0bdbd;
height: 1px;
}

というのが有りますので、ここのmarginを削除して

.hr1{
border-top:dashed 1px #f0bdbd;
height:1px;
}

上記のようにして下さい。後は更新して頂ければ反映します。
見栄えに不具合が有りましたら再度、コメント下さいませ。m(__)m

もうひとつ * by kotori*
akiさん、早々のご回答ありがとうございます。
おかげさまで希望の通りになりました。(*´v`*)

もうひとつお聞きしたいです。

私のテンプレには▼Comment-openが付いています。
こちらで開くと反映されません。
ここも同じ様にするには面倒な作業になりますか?

kotori* 様へ * by aki
いえいえ、こちらこそメール頂いたのに返事もせず、貴女Blogではコメント投げるだけ投げといてメールの内容に言及せず、…大変失礼を致しました。m(__)m
長きに渡ってご利用頂き、いつもセンスの良いデザイン・カスタマイズをして頂き感謝致します♪
有難うございます。(^-^)

ct_responsive のコメント表示部は、HTML枠内半分より少し下位に有る<!--コメント表示-->の下3行目、
<article class="com_block">
という部分です。ここを

<article class="com_block <%comment_name>">

こんな感じに変更して、スタイルシート編集枠の一番下に
.kotori\* {
background-color:#E0FFFF; /* この色はlightcyan */
margin-left:20px; /* 枠の左側に20pxの外余白 */
}

のように追記して下さい。
class名に *(アスタリスク)を使う場合は、バックスラッシュ(表示は¥マーク)を間に入れると使う事ができます。
キーボードでは右の下側に有る「ろ」のキーです。
書き込む時は普通に kotori* と入れればスタイルが反映されます。
また、背景色を半透明にする場合は、
https://e-ssence-main.jp/tips-page/t-rgba.html
このページで16進数をRGBAに変更して、その値を下記のように入れれば半透明になります。
background-color:rgba(224,255,255,.5);
こんな風に記述。上記だとlightcyanの50%透過。

分からない場合は再度、ご連絡頂けますか?

私もやってみたいです * by kotori*

akiさん、こんにちは。
先日から色々とありがとうございます。

さて、このコメント欄の色分け、私も希望しておりました。
何度もこのコメ欄を読みながらやってみたものの思うような表示にはならなくて。(;_;)
ここに記載されているそっくりそのままのタグが見付けられません。

ご承知の通り、私は『ct_responsive2c-r』をお借りしています。
どのようにすると、管理人との色分けができますか?
また、管理人のコメを若干右寄せにするにはどうしたらいいですか?

私は、更に、更に、スキル無しのド素人なので、よろしくお願い致します。

Super源さん 様へ * by aki
>そこで早速、昨日「いちばんやさしいHTML5&CSS3の教本」という本を~~
…似たようなもんです。私は2年ちょい前に買った、この本で勉強しました。
https://sorauta1.blog.fc2.com/blog-entry-239.html
(2016-10-08 の記事です。↑)
これ読んでも未だによく分からないですけど。(^-^;

また伺いますね~。これからも宜しくお願い致します。m(__)m

はい。お蔭さまでうまくいきました。(^^) * by Super源さん
いえいえ、この課題が解決できなかったことが、私のスキルのなさを如実に物語ってますよ。(^^;

私も独学です。(^^)
が、レベルは「万年初心者」で、体系的な知識がなく、試行錯誤でやってる状態です。【><】
しかも、その知識は前にも書きましたように、10年前に覚えたもの。
もろ化石化してます。(爆)

特に、レスボンシブに関しては、まさに「浦島太郎」状態ときてます。(゚ロ゚)/ オー、ノー!

そこで早速、昨日「いちばんやさしいHTML5&CSS3の教本」という本を買ってきました。
いい本ですよ、これ。(^^)v←(^^; ココデ センデン シテ ドウスル。

「つん読」状態にならないよう、気をつけます。【><】

なので、私から見れば、akiさんは「雲の上の存在」という感じです。(^^)
師匠とお呼びしたいくらいです。【><】
お力になれればうれしいですが、ほとんどないように思います。(@_@)ウーン

こちらこそ、いろいろ助けてくださいませ。m(__)m

あっ!(゚o゚)また長くなってしまった。
書き込むと、いつも長くなってしまってすみません。


それでは、またお邪魔します。( ^-^)/

Super源さん 様へ * by aki
>で、結果は、バッチリです!(*^^)v
…良かったです。一時はちょっと焦りました。(;^_^A

独学HTML&CSSで初心者に産毛程度のスキルしか無いため、逆に不明案件はお伺いしたいくらいです。
何かの時は是非色々 助けて下さいませ。m(__)m

akiさん、こんばんは!(^^)/ * by Super源さん
またやって来ました。(^^)

おお!(゚o゚)なるほど!
class追加ですね。

早速試してみます。(^^)/

.....( ..)トコトコ。

ただいまー。(^Q^)/

で、結果は、バッチリです!(*^^)v

お忙しいところ、迅速な対応、ありがとうございました。m(__)m

明日から帰省するので不在です。

2018年12月30日、今年最後の『ゆるJOG』に中央公園、行って来ました。画像は午後3時前くらいで日が照っているけど、やっぱし寒いっ!空から小さな白いものが時々落ちてくるのは、雪なのかなぁ~・・大池の渕の一部が凍ってた。…さて、寒波の様子はどうなんだろう?31日から1月2日まで新潟に帰省致します。勿論、安全運転を心掛けて。御用の有る方は、年明け3日より コメント・メールにてお願い致します。おまけ画像♪…距離は縮まっ...

... 続きを読む

Theme : 日々のつれづれ * Genre : 日記 * Category : その他

Comment-open▼ * Comment : (4) * Trackback : (0)

ゆきゆず 様へ * by aki
明けましておめでとうございます♪
本年も宜しくお願い致します。m(__)m

ゆきゆず様のお宅には沢山のねこちゃんがいらっしゃるので、随分とお布団の中も暖かいのでしょうね~(記事、見ました(^^♪)
うちは布団での粗相癖が有るので、一緒に寝たくても寝られません。。(;_;)…羨ましいです。
ウサギと猫がもっと仲良くなってくれたら嬉しいんですけど。
時々動物記事も有りますので、是非また遊びに来てくださいね♪

あけましておめでとうございます * by ゆきゆず
昨年は沢山お世話になりありがとうございました!今年も素敵なテンプレ楽しみにしています。
にゃんこさんとうさぎさんのお団子かわいい💗💗💗
お知り合いから大親友になるかもですね。
にゃんこさんとうさぎさんのブログも楽しみにしています。
楽しい年始をお過ごし下さい💡

yomogimochi1012 様へ * by aki
いつもコメント、有難うございます♪

これから帰路に就きます。安全運転で。(^-^)
昨年は寒波予報で帰るの諦めたのですが、今年は帰ります!
実家に母親一人、大晦日を過ごさせるのは余りに寂しくて申し訳無くて…ね。

はなちゃんといなばさんは相変わらずです。^^;

新しい年も宜しくお願い致します♪

良いお年を * by yomogimochi1012
お気をつけて帰省されてください。

そして、はなちゃんといなばさんの写真、
待ってました!!
この画像の温かさ、空気感にほっとするんですね。(^^♪♪

今年も愉しませていただきありがとうございました。

年末の寒波到来に(私も^^;)注意!

年末の帰省時期に今年も寒波がやって来る…と、天気予報で言っています。。去年の同時期も同じように「寒波到来!」…ってやってたので、実家帰省諦めたのに、実際はそんなでも無かった(らしい)。自分で実家に届くように注文していた『カニ2キロ』、正月に遊びに来た姪っ子から「美味しかったよ~ごちそうさま♪」というメッセージと共に、新潟の郷土料理のっぺい汁とカニの画像がメールで送られて来た…(平成30年(2018年)1月1日...

... 続きを読む

Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ

Comment-open▼ * Comment : (2) * Trackback : (0)

61の手習い 様へ * by aki
テンプレート及び素材のご利用、ご訪問を頂き、誠に有難うございます。
ご質問の件ですが、背景画像は問題無く全面にリピート表示されています。
両サイドにしか表示されていないように見えるのは、記事+メニューを包括するボックスの背景が非透過の白で、ブラウザの中央に配置されているためです。
(このテンプレートのデザインはそれで正しい表示です。)
ご希望の半透過表示にする方法は簡単ですので、下記のように変更して下さい。

スタイルシート編集枠を1/3(より少し上)までスクロールした所に

/* 2カラム+ベース部分 */

#box{
width:1140px;
height:100%;
margin:0 auto;
text-align:left;
background-color:#fff;
}

という箇所が有ります。そこの
background-color:#fff; を
background-color:rgba(255,255,255,0.5);
に変更して下さい。(こんな感じで↓)

#box{
width:1140px;
height:100%;
margin:0 auto;
text-align:left;
background-color:rgba(255,255,255,0.5);
}

ここの 0.5 という数値が透過度で、1.0が非透過ー0が透過 の間で調整します。
RGBAカラーモデルについては下記URLをご参照下さい。(素材サイト:web material *Essence)
https://e-ssence-main.jp/tips-page/t-rgba.html

貴殿ブログのお返事も感謝致します♪
是非 色んな記事を発信し、末永くご利用頂けます様 宜しくお願い致します。m(__)m

お世話になっております^^ * by 61の手習い
こんにちは
貴ct_responsive2c-lを使わせて頂いている61の手習いと申します。
この度は、拙ブログまでおいでくださり、ご丁寧なコメントまでいただき、ありがとうございました。

ご親切に甘え、一点ご質問させていただきたくお伺いいたします。
ご覧いただきましたように、本人の意図としては、*Essence様作成の背景を使用しているつもりなのですが、背景が全面に表示されず、両脇のみの表示になってしまっております。
(多分、本体部分の透過性の問題なのだと思われますが・・・)
こちらのように半透過で背景が全面に表示されるようになったらいいな、と考えますが、対処のやり方がわかりません。
ご教示賜れば幸いです。

ブログやHTMLに不慣れで、実は62の手習い者ですが、今後ともよろしくお願いします。

年末年始の帰省とのこと、十分ご自愛ください。

Christmasだから、では無いですが…

もうすぐクリスマス!だから…という訳では無いですが、背景を夜景にした(だけ)の暗色テンプレートにしました。(因みに…背景画像中央の明るい部分に『魔晄炉』は無いです…サムネイルが微妙にミッドガル…^^;)ちょっと使ってみたい♪という稀有な方がいらっしゃいましたら、スタイルシートの貼り換えだけで適用できますので使ってやって下さい。(^-^)*暗色CSS適用済み見本『nightscape1.html』←クリック!『ct_responsive』暗色CS...

... 続きを読む

Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ

Comment-open▼ * Comment : (0) * Trackback : (0)