attention admin about comments trackbacks you may also like

Chilling - FC2ブログテンプレート「配布終了 2019年2月6日」

2015年09月02日
テンプレート
35
HTML5 CSS3 RWD

配布終了致しました。ご利用ありがとうございました。

Chillingテンプレート

Chillingテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
スマートフォン版を非表示にしてご利用ください。
設定ページ

最終更新 2017.9.22

SSL化に伴うURL正規化

名称 Chilling
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大880px
サイド --- 300px
推奨カスタマイズ ヘッダー画像変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン タブレット スマートフォン
2カラム 1 or 2カラム(デバイス幅依存) 1カラム
サイドメニュー --- 右 サイドメニュー --- 下 or 右(デバイス幅依存) サイドメニュー --- 下
更新履歴 2017.1.25

・ SNSシェアリンクのUTF-8エンコード
参考記事
SNSシェアリンクのエンコード

更新履歴 2016.10.15

メンテナンス
・ FC2新変数導入に於ける関連JSの削除(html内容の切り替え) --- 動作が若干軽快になりました
・ ページ遷移エフェクトをJSからCSSに切り替え
・ No image画像変更を容易に
・ 関連記事サムネイルの整形
・ ベンダープレフィックスの整理
・ その他微調整

No image画像の変更が簡単になりました
縦横比不問(最適サイズは長辺800px程度)
画像加工不要(画像上の白マスクとNo imageのテキストは自動で乗ります)

//blog-imgs-80.fc2.com/v/a/n/vanillaice000/background-709674_1280-compressed.jpg

上記がデフォルト画像アドレスでhtmlソース内に1箇所あります
お好きな画像のURLに差し替えてください

更新履歴 2016.9.9

● リストマーカーの位置を調整しました
参考記事
list-item横の隙間について

● 最優先フォントを游ゴシック体に変更しました
● 主要公式プラグインの整形を行いました

更新履歴 2016.1.9

フッター構造を変更しました
タイトルタグを微調整しました(SEO対策)

更新履歴 2015.9.21

iOS9 リリースに伴い スマホ・タブレットではColorbox起動させないよう修正しました
Colorbox適用版は記事の最後に掲載しています
配布終了致しました

更新履歴 2015.9.9

・ 公式化に伴うOGP削除
テンプレ付随のSNSボタンをお使いになる方は 個人ブログ環境でのOGP設定をお願いします

2015.9.2 申請致しました → 某日 承認されました ありがとうございます

ちりんぐemo
(デコは本文と一切関係ありません いや一応)
あっさり塩味テンプレート (o'ω')ノ

TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ

お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)

・サイドバーの形状変更
・トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更
位置変更はこちらを参考にどうぞ ↓
テンプレートのカラム位置変更

カスタマイズをされます方は
注)
で検索されますとカスタマイズ用のガイダンスが出てきますので事前にご確認ください
また ブラウザ上で作業されます方は
Ctrl+F(Windows)/ Command+F(Mac) キー検索をご利用ください

固定ナビゲーションについて

FC2検索バー問題 emo

FC2検索バーも「固定」 こちらのテンプレナビも「固定」 ということで
当然ですが位置的に干渉し合います
で 固定ナビの方の表示階層を検索バーの一つ上に設定していますので
検索バーがナビ下(表示下位)に身をひそめる形です
どうせ見えないなら是非非表示に!!!
とはいえ お使いになりたい方もいらっしゃるでしょうから 以下の文字列をCtrl+Fキー検索されまして訳注に従ってください

/* 注)FC2検索バーを表示する方は数字を0から27pxに変更してください */
Microsoftブラウザの表示不備について

毎度のことですね Microsoft (´・ω・`)
もう別段驚きもしないわ

画像マウスホバー時のエフェクト不備(プロパティ未対応)
Microsoft Edgeの方はいずれ対応すると思います
Internet Explorerは開発が終わってますのでずっとこのままですのでご承知おきくださいね (´・ω・`)

ヘッダー画像の変更
#banner {
  width: 100%;
  height: auto;
  background: url(//blog-imgs-80.fc2.com/v/a/n/vanillaice000/background-709674_1280-compressed.jpg) right center no-repeat; /* 注)バナー画像はここです */

赤字をお好きな画像アドレスに差し替えてください
サイズは不問ですが 画像の位置合わせについては下記リンク先記事を参照のこと
DaisyGreen

ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には

・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除

上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。

みなさんいつもありがとうございます (●'0'●)/

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(35)

There are no comments yet.

-  

2015/09/14 (Mon) 19:09

初めまして。

素晴らしいテンプレートですね! さっそくお借りさせてもらっています。<(_ _)>
一つ不具合なのかな? ご質問をさせて頂きます。

このテンプレートを使用し、Read more 続きを読んだ後、ブラウザバック 前に戻ると真っ白のままになってしまいます。

IE11とGoogle Chromeで試してみましたが、Chrome時々正常に戻ったりしていました。
初心者ながらもすいません。

Akira  

2015/09/14 (Mon) 20:36

To Chillingブラウザバックの件 匿名さん

こんばんは。ありがとうございますe-257

こちらはパソコンからのご閲覧でお間違いないですよね。
IE11って書いてあるからそうだと思いますが、一応確認(笑)

私の環境(Windows10 IE11, Google Chromeその他/ Mac Safari, Google Chromeその他)で同じ症状を確認することができませんでした。

iOS(iPhone OS)の8についてはブラウザバック時のホワイトフリーズバグがあるのですが、スクリプトで回避しています。
で、スクリプトの問題であるならば「時々上手くいく」ことはブラウザバックに関しては無いんですよね (´・ω・`)
「なる」か「ならない」かいずれかはっきりしています(笑)

一度キャッシュのクリアをされまして再度ご確認頂けませんでしょうか。
クリアされます際、不測の事態に備えまして、各サービスのアカウントやパスワードの確認も併せてお願いします。
(サイトによってはログアウト状態になることがあります)

お手数おかけします。よろしくお願いします (*_ _)

-  

2015/09/14 (Mon) 21:13

No title

お返事ありがとうございます。
キャッシュをクリアして、確認してみましたがChromeの方は問題なくブラウザバックしました。ありがとうございます。

IE11の方は駄目でしたのでおそらく、自分の環境に問題があるのかと思います。
お手数をお掛けして申し訳ありませんでした。<(_ _)>

Akira  

2015/09/14 (Mon) 21:17

To ブラウザバックの件② 匿名さん

いえいえ。とんでもないです。
ちょっと私の方でも調べてみましたが、IE11のブラウザバックは度々問題になっているようです。

「戻るボタンを押しても戻れない」
「戻るボタンを押すと [情報が古い云々]と表示される」
「戻るボタンを押すと真っ白に」 ←ヒット(笑)

いずれも「キャッシュ」に絡んだものですが、
ソースに原因が全くないとは言い切れませんので、私の方でももう少し調べてみますね。

きろろ  

2015/10/18 (Sun) 02:16

たびたび申し訳ございません(/_;)

Chillingの複製、トリガーを書き替えたものを削除してしまいました・゚・(つД`)・゚・ ウェ―ン

ひとりでやっとこさ、出来たのに……

現状をお伝えします!

ツベは正常に動作しております。

画像がポップアップしているのに、別ウィンドウで開かれてしまいます。

きっとトリガーをどこか書き間違えているんだと……
でも、思い出せません・゚・(つД`)・゚・ ウェ―ン

それから、こちから申し訳ないのですが
GirlOnWireのテンプレート、ツベが急に見られなくなりました。

こちらは画像は正常にポップアップされています。
ツベが昨日から「This content failed to load.」と表示されます。

記事には
<a href="http://www.youtube.com/embed/3V7EugoweM4?rell=0" target="_blank" class="youtube" title="動画"><img src="http://blog-imgs-〇〇〇/20151010011707463.jpg" alt="Coldplay" border="0" width="320" height="180" /></a>
と、記述していたのですが……謎です(/_;)

なんか、ひとつ成功するとひとつ失敗をする。
ほんとうにごめんなさい。
お暇な時でよいので、レクチャーをお願いいたします<(_ _)>

追伸

我が儘を言って申し訳ないのですが
GirlOnWireのトップを要約表示にすることは可能でしょうか?
記事が長いので、要約で表示することができたらありがたいのですが。
ご検討くださいませ<(_ _)>

Akira  

2015/10/18 (Sun) 15:51

To きろろさん

いえいえ。大丈夫です。そこはお気になさらず(笑)
で、ちょっとまとめますね。

Colorboxについて

・Chillingテンプレのツベは正常
・画像だと別タブでフツーに開いてしまう(ポップアップが別タブで開く?ってことかしら)

・GirlOnWireのツベが急に開かなくなった
・こちらの画像は正常

ChillingとGirlOnWireの症状がテレコ(反対)ってことでしょうか
記述内容はどちらも同じ?なのかな?

①きろろさんが現在どのようにJSをhook upしているかがわかりませんので、
コードを教えてもらえますでしょうか。

* hook up = Javascriptの接続・実行コード関連づけ

②CSSファイルのリンクは入っているでしょうか(忘れていないかどうか)

この件はとりあえずお返事待ちで。

----------

要約表示の件

GirlOnWireのページの下の方に、本文なしのファイルを掲載しております。
見た目的にはそちらと同じような感じで、Read more の上に要約が入ってれば良いのかしら。

こちらも返事待ち(笑)

きろろ  

2015/10/19 (Mon) 00:29

お騒がせしております。申し訳ございません(/_;)

>Chillingテンプレのツベは正常
・画像だと別タブでフツーに開いてしまう(ポップアップが別タブで開く?ってことかしら)<
そうです(/_;)

>・GirlOnWireのツベが急に開かなくなった
・こちらの画像は正常 <
そうなんです(/_;)

chillingは自分でトリガーを書き直して、以前使えていたのですが
間違えて複製を削除してしまったんです。
で、何をどういじくったらよいのやら頭が真っ白(ё_ё)
って、どう書き直しても、ツベは普通なのに、画像がポップアップの途中で別ウインドウに行ってしまいます。

GirlOnWireは、Akiraさんのレクチャーどおりにhtmlを書き直して
正常に動いていたんですが、ツベが突然「This content failed to load.」と表示されてしまい、Akiraさんにお手数を何度もかけるのも気が引けて、
AkiraさんのcolorboxをDLして、htmlをそのまま使用しました。

でも、やはり画像は正常動作するのですが
ツベが表示されません。ポップアップはされるのですが……

あれぇ……
私、何かしでかしたのかしら(ё_ё)

> hook up = Javascriptの接続・実行コード関連づけ <
これに関しては、現在特別私が書き替えてるところはありません。

Chillingの複製は削除してしまい、もとのテンプレートを複製して、
そこにLinkのなかにcolorboxのcssを仕込んで……

body、直前に前日に記述したいつものように私が使っているスクリプトを
仕込んだのですが……

要約表示の件ですが、
GirlOnWireのページを見てきました。
あの要約は本文なしなので、画像が要約に表示されていないのでしょうか?

Akiraさんの要約は、アイキャッチ風になっていますよね?
アイキャッチのように表示されるのであれば、GirlOnWireのページの
要約でけっこうです。
めんどうなようであれば、忘れてください(>_<)
ご無理をなさらずに……

ふたつのテンプレートがテレコになっているのが、なんとも不可思議です(ё_ё)

Akira  

2015/10/19 (Mon) 15:06

To きろろさん

きろろさんのコード、ちょっと私の方で整理してみますね。
少しお待ちください。
今日中になんとか。頑張る(笑)

Akira  

2015/10/19 (Mon) 15:49

To きろろさん

ちょっと今作業中なんだけども、確認です。
先日教えて頂いた、記事に記載したツベの埋め込みコードなんだけども、
動画開いたらWelcome to the jungleチェロ版でした。
でも画像のalt見るとColdplayって書いてあるんですよね。
これは合ってるのかしら(笑)
Coldplayの動画と間違えたってこと? (´・ω・`)
え?どゆこと?(笑)
それかここ重要じゃない?
ちょっと不明 ( ̄∀ ̄;)

Akira  

2015/10/19 (Mon) 16:06

To きろろさん

Chilling

まず手順として、きろろさんが使うのは
「通常版」です。
「Colorbox適用版」ではなく。

通常版にColorboxのCSSファイルを<link>で追加します。
私のファイルを使うのならばファイル名は
http://blog-imgs-82.fc2.com/v/a/n/vanillaice000/colorboxmin_v.css
です。

次に
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
このjqueryのファイルを探します。
これから実行コードを書くわけですが、上のファイルと</body>の間のどこかに書きます。
jqueryのファイルよりも「前」にコードを書いても動作しません
ですから</body>の直前に書くのが確実です。
Chillingの場合には
<script src="http://blog-imgs-82.fc2.com/v/a/n/vanillaice000/fade500tmbcompress.js"></script>
の直下、ということになります。

実行コードの内容は以前と同じ、ということですよね。

<script>
$(function(){
$.fn.colorbox.settings.bgOpacity = "0.5";
$(".cpModal").colorbox();
$("a[rel='fade']").colorbox({transition:"fade"});
$("a[rel='slide']").colorbox({slideshow:true});
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$('a[rel^=lightbox]').colorbox();
});
</script>

(一部外してあります)
・<a>タグにtarget="_blank"をつける(relへの変換はしない = target〜を消してrel〜ということはやらない)
・一番最後の行はLightboxからColorboxへ移行した人向けの内容なので、現在は使うことがないはず。
また、これは入れておかないと、過去に rel="lightbox" と書いて起動させていたものが無効になってしまいます。

で、failed to load の原因なんですけどもね。
動画のアドレスの末尾のrelが rell になってるよ(笑)

Akira  

2015/10/19 (Mon) 16:09

To きろろさん

コード内容の意味をわかっており、トリガーになるクラス名を間違っていないと仮定すると、
やっぱり記事作成時のアドレスだとか、半角スペースが全角になっているだとか、記号が全角になっているだとか。
そちらを疑った方が良いと思います (´・ω・`)
一度記述内容をチェックしてみると良いねー (´・ω・`)
なにせ半角ひとつ、文字列ひとつ間違えただけで起動しなくなりますもので。

-----------

GirlOnWireの要約の件、少しお時間くださいね。

きろろ  

2015/10/20 (Tue) 01:24

お手数をおかけしております<(_ _)>

>動画開いたらWelcome to the jungleチェロ版でした。
でも画像のalt見るとColdplayって書いてあるんですよね。
これは合ってるのかしら(笑)
Coldplayの動画と間違えたってこと? (´・ω・`) <

ぎゃっ!
チェロです……タイトル「Coldplay」になってましたか?
コピペして使い回していたので、変なことになってしまい申し訳ありません(ё_ё)

現状報告をいたします。

まず、いつものように
http://blog-imgs-82.fc2.com/v/a/n/vanillaice000/colorboxmin_v.css を使用させていただいております。

次に、ctr+Fで検索して
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> を探し出しました。

次に、実行コードをテンプレートにコピペいたしました。

GirlOnWireは
< /body>の直前に、


Chillingは
<script src="http://blog-imgs-82.fc2.com/v/a/n/vanillaice000/fade500tmbcompress.js"></script>
真下に実行コードをコピペしました。

結果……
GirlOnWireは画像もツベもポップアップしません。
Chillingは画像がダメで、ツベがポップアップしています。

記事に書いた画像は

<a href="元画像.jpg" target="_blank" class="expand" title="かぼちゃ">"><img src="サムネイル画像.jpg" alt="lgf01a201409271100.jpg" border="0" width="250" height="167" /></a>

<a href="http://www.youtube.com/embed/DNyKDI9pn0Q?rell=0" target="_blank" class="youtube" title="タイタニック"><img src="動画サムネイル画像.jpg" alt="タイタニック" border="0" width="320" height="180" /></a>

やはり、トリガーのせいではないでしょうか?
一応、どちらのテンプレートも新しくDLいたしました。

きゃっ!
リンク先が多すぎるとコメントできないんですね。
urlを日本語に置き換えてみました。
おわかりになれるでしょうか?

何度もお手数をおかけしまして
申し訳ございません(/_;)

きろろ  

2015/10/20 (Tue) 01:26

すみません~~~追伸です

<a href="元画像.jpg" target="_blank" class="expand" title="かぼちゃ">"><img src="サムネイル画像.jpg" alt="lgf01a201409271100.jpg" border="0" width="250" height="167" /></a>

の、かぼちゃ">">

ここはちゃんと

<a href="元画像.jpg" target="_blank" class="expand" title="画像"><img src="サムネイル画像.jpg" alt="lgf01a201409271100.jpg" border="0" width="250" height="167" /></a>

としてあります・・・(。_。;)゜:。アセ

Akira  

2015/10/20 (Tue) 01:33

To きろろさん

ちょっと今製作中でコメント主のお名前が出ないです。
わかりにくいかもでごめんなさいね。
---------

きろろさんの画像トリガーは cpModal ですので、expand では起動しません(笑)

かぼちゃの方
→ class="cpModal" に変更

ツベの方 アドレスの末尾
→ rell=0 を rel=0 に変更

Akira  

2015/10/20 (Tue) 02:00

To きろろさん

あとGirlOnWireの要約表示の件なんですけれど。
サムネイルが必要ということですと、大幅にhtml, CSSを書き直す必要が出てきてしまいます。
なので今回はごめんなさいですー (*_ _)

きろろ  

2015/10/21 (Wed) 00:19

結果報告です。

Akiraさんのレクチャーどおりにした結果、

Chillingは、画像、ツベ両方ともポップアップいたしました。
ありがとうございました<(_ _)>

問題はGirlOnWireでした。
GirlOnWireは今度はツベはポップアップされるのですが、
画像がダメでした。ポップアップする振りすらしてくれません。

もう、これ以上お手数をおかけするのも心苦しいので
Colorbox適用版を使用しています。
過去記事がおかしなことになっていますけどw
気にしない~方向で。

Botanicalなど、Akiraさんの過去のテンプレートは
普通に動作しているんですけどねえ……

GirlOnWireの要約の件、承知いたしました。
無理なことをお願いしてすみませんでした。

それでは新作を期待しております。
寒暖差がある時期ですから、お体に気をつけてくださいね!(^^)!

Akira  

2015/10/21 (Wed) 17:34

To きろろさん

GirlOnWireダメでしたか (´・ω・`)
たぶんトリガーと記事内記述内容の整合性だと思うんだけど。
時間見てColorbox説明記事の方に追記しておきますね。
(整合性の詳細)

要約記事の件はごめんなさいね。
サムネイル入れるとブレイクポイント(デバイス管理)が結構あれでそれなもので ^^;

はい。きろろさんもご自愛くださいませー!

-  

2016/07/22 (Fri) 20:26

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira  

2016/07/22 (Fri) 20:54

To Chilling記事タイトル省略の件 内緒さん

ありがとうございます (・ω・)ゞ

Ctrl+Fキー検索

.element-title

いくつかヒットしますが一番最初のものが対象です。
この項目の

white-space: nowrap;
-webkit-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;

上記を全て削除します。
これで全部表示されるようになりますが、あまりにタイトルが長い場合はデザインが「崩れる」とは言わないまでも、ちょっと不格好になることも ^^;
場合によっては下の日付が外に押し出されて表示されないこともあります(トップページ)。
その点をご了承頂きまして、修正をお願いします。

hifumi  

2016/07/23 (Sat) 05:32

トップページタイトルを全文表示したい件

Akira様、素早いお返事ありがとうございます!

コメント、シークレットになっちゃってましたね(笑)
全然内緒じゃないのに;

早速やってみます♪
素敵なテンプレートなので、本当に嬉しいです^ ^

Akira  

2016/07/23 (Sat) 14:21

To hifumiさん

そうでしたか(笑)
はい。わかりにくい点がありましたらその旨お伝えくださいませ

mika  

2016/10/20 (Thu) 10:44

はじめまして!
テンプレート使用させていただいております。
記事のサムネイルが表示されない状態が続いております。
よくある質問に記載されている事項などは確認済みですが治りませんでした(T_T)
自身でカスタマイズしたので、どこか消してしまったか…?と思いましたが見当たらず…
お力を貸していただければ幸いです。
よろしくお願いいたします。

Akira  

2016/10/20 (Thu) 13:39

To mikaさん

ありがとうございます (●'0'●)/

> 記事サムネイルが表示されない件

Ctrl+F(Windows)/ Command+F(Mac) キー検索

imgLiquidFill

を目印にして頂きますと

<div class="imgLiquidFill" style="background: url(省略) right right /cover no-repeat;"></div>

赤色の部分のrightですが、ここは画像の垂直(上下)位置の指定で、rightという値は存在しません。
top
center
bottom
のいずれか正しい値に修正をお願いします。

---------

これで解決するとは思いますが、ちょっと私の方にお葬式ができてしまいまして。
明後日まで自宅に戻れませんのでお返事が遅くなります。
ごめんなさいね。

mika  

2016/10/21 (Fri) 10:34

To Akiraさん

迅速にご対応いただき、ありがとうございます。
指示の通り修正したところ、改善されました!
お忙しいところ、本当にありがとうございました。
テンプレート、とっても愛着が湧いています。
今後も楽しみにしております(*^_^*)

Akira  

2016/10/22 (Sat) 16:30

To mikaさん

直ったようで良かったですー。
こちらこそありがとうございます。
お疲れ様でした

Tetsuko  

2017/12/25 (Mon) 16:16

はじめまして。こちらのテンプレートを愛用させて頂いております。
一つ画像について教えて頂きたいことがあります。
記事内の画像に写真のような白枠を付けたいのですが
スタイルシートに挿入する仕方がわかりません。
お忙しい中申し訳ございませんが、
ご相談に乗って頂ければ嬉しいです。
宜しくお願いいたします。

Akira  

2017/12/25 (Mon) 16:31

To Tetsukoさん

ありがとうございます (o'ω')ノ

> 記事内の画像に写真のような白枠を付けたい〜

スタイルシートの挿入の仕方、ということはCSSデザインのソースは既にお持ちで、どこに書いたら良いのかがわからないということでしょうか。
基本的にはCSSソース(テンプレ管理画面下段「スタイルシート」)の末尾で良いですよ。
それともデザインの仕方・CSSソース自体が欲しいということなんでしょうか。
その場合は私ではTetsukoさんの具体的なイメージはわかりませんので以下の記事をご参照ください。

https://vanillaice000.blog.fc2.com/blog-entry-554.html

Tetsuko  

2017/12/25 (Mon) 18:25

To Akiraさん

ご返信ありがとうございます。
言葉足らずでごめんなさい。

記事読ませていただきました。
イメージはOpenテンプレートのような
写真風の白枠です。
全ての記事に適用するように
スタイルシートに入れたいです。
色々ソースを探したのですが
私の知識では反映されませんでした。
(色や枠の厚さの変え方はなんとなくわかりました)
申し訳ないのですが、CSSソースをお願いしたいです。

Akira  

2017/12/25 (Mon) 20:23

To Tetsukoさん

> 全ての記事に適用するように〜

参照して頂いたページは「独自クラス」なので画像全てに自動的に装飾をつけることはできません。
原則として個人装飾ソース作成のお手伝いは致しません。が、今回は関連記事があるということで一部応じます。

.inner-contents img:not(.emoji):not(.fc2_footer img) {
border: 10px solid white !important;
outline: 1px solid rgb(221,221,221);
}

上記内容をCSSソース末尾に記載してください。

以下注意事項です。
① IEでは全バージョンを通じてoutlineプロパティ未対応です。
② エディターから表示させるモバイル絵文字とSNSシェアボタン(ブログ個人設定での掲載のみ)は適用除外にしていますが、それ以外はいかなる画像であっても枠がつきます(記事範囲だけです。サイドメニューなどは含みません)

よろしくお願いします。

Tetsuko  

2017/12/25 (Mon) 21:26

>原則として個人装飾ソース作成のお手伝いは致しません~

無理を言ってしまい申し訳ありませんでした。

スタイルシートにそのまま末尾に貼り付けましたが、反映されませんでした。

/***------------------------------------------
personal settings
------------------------------------------***/

/* shadow for image */
.shadow-attachment {
box-shadow: 6px 6px 6px rgba(0,0,0,.2); /* 注)記事内画像に自動ドロップシャドウ 不要な方は削除 */
}

.emoji {
vertical-align: middle;
}

.inner-contents img:not(.emoji):not(.fc2_footer img) {
 border: 10px solid white !important;
 outline: 1px solid rgb(221,221,221);
}


ここでよろしかったでしょうか?
何度もすみません。

Akira  

2017/12/25 (Mon) 21:35

To Tetsukoさん

大変失礼しました。
.inner-contents
ではなく
#inner-contents
です。クラス名でなくアイディーに変更してください。
お手数おかけします。

Tetsuko  

2017/12/26 (Tue) 10:47

昨日はご対応していただき、ありがとうございました。

#に変更しましたが、反映されませんでした・・・。


Akira  

2017/12/26 (Tue) 11:33

To Tetsukoさん

ではこうしてみてください ↓

#inner-contents img:not(.emoji) {
border: 10px solid white !important;
outline: 1px solid rgb(221,221,221);
}

.fc2_footer img {
border: 0 !important;
outline: none !important;
}

CSS装飾というのは本来は要素に直接当てるものではありません。
今回の場合

「記事範囲内にあるimg全てに枠の装飾をつける」

「絵文字のimgには枠をつけない」

「拍手ボタンについた枠を外す」

こういう段階を踏んでます。
要素への直接指定というのは余分なもの・意図しないものにまで付けてしまいます。
ですから本来は
「適用したいimgにだけクラス名を付け、そのクラス名を持つものにだけ装飾をつける」
というのが一番望ましい形です。
今後TetsukoさんさんがSNSボタンを追加したり、ランキングバナーを導入したり、あるいは関連記事をサムネイルつきで表示させたりした場合、これらを追加で「除外」する必要が生じます。
除外するのではなく、適用したいものにだけ指定するというのが一番です。
なんでも「自動で」ではなく、ご自身が記事を書かれる際に「htmlを書く」という意識は必要です。
htmlを書くと言ってもクラス名を書くだけですが。
新投稿画面をお使いのようなので難しいのかなぁ、とも思いますけれど。
うーん。新投稿画面の方はCSSでなくJSの方が良いかもしれないなぁ (´・ω・`)
取り敢えず今回はこちらの方法で。

過去記事の画像はもうどうしようもありませんので今回はこれで仕方がないと思いますが、今後の運営の仕方によってはさらに修正が必要になる、ということは知っておいてください。
よろしくお願いします。

Tetsuko  

2017/12/26 (Tue) 15:11

反映しました!ありがとうございます。
仰るとおり、今後運営していく上で
もう少し知識を付けないと難しいと思いました。
今回はAkiraさんから教えていただいたこのやり方でしばらく様子を見てみます。

お手数お掛けして申し訳ありませんでした。
今後の新しいテンプレートも楽しみにしております。
本当にありがとうございました!!

Akira  

2017/12/26 (Tue) 15:46

To Tetsukoさん

いえー。何度もお手数おかけしました。
こちらこそありがとうございます。
お疲れ様でした

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)