Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

sample
以前にも一度書いたことがあるのですが
自動で画像に「枠」「ドロップシャドウ」などの装飾が付けられると便利ですよね
便利ではありますが『自動で付加』することの弊害についても書いておく必要があります

申請中の TheCity テンプレで導入しておりますけれども
個人的にはその機能は削除した方が良いと思います ←
何故か というのをこれからご説明しますね (´・ω・`)


記事内にアップされた img というタグを持つ画像に対し
自動的に装飾を施すことになりますが
「img画像」というのは色んなパターンがあります

例えばこれ(以下は全てスクリーンショットです)

sample

これは良いですよね 理想の形です
これはどうでしょうか ↓

sample

こちらは記事内の装飾用壁紙の中にある文字です
これも「画像」ですので こうしてシャドウが付いて浮いてしまいます
あるいはこんな ↓

sample

これはいわゆる『透過PNG』と呼ばれる画像です
背景がいかなるものであっても それに影響を与えない 自身も影響を受けない という特徴を持ちます
がしかし シャドウが付いてしまったがために背景から浮いてしまった例です
同様に『透過GIF』でもこの浮きが起こります

拡張子で適用・不適用を分けたらどうか
という案に関しては PNG だからと言って必ずしも背景が透過されているわけではないんですね
解像度を保つために JPG でなく PNG 拡張子を利用している風景写真や人物写真もたくさんあります
GIF も同じで GIF だから必ず動いている あるいは 必ず背景が透けている というわけではない…
拡張子での振り分けは意味が無い ということになります

-------------------

で どうするか なんですけども

❶ 装飾を省きたい要素に対し class を手入力 その class に対し装飾を省く指示をCSSに書いておく
❷ 装飾をしたい要素に対し 手入力で class を付加 その class に装飾の具体的内容の指示をCSSに書く

この二択です
結局は手入力が必要なんです(笑)
じゃあ 付けたい方に書けばいいじゃんね (´・ω・`)
その方が安全(?) です
Javascript の記述も減らすことができます

TheCity の仕様としては

・ 全ての画像へ自動で class 付加 装飾内容は既に記述済み
・ 装飾をつけたくない img に class="no-shadow" をつけることで 装飾適用回避

こうしてあります
なので no-shadow をつけてください

または

html ソース内 注訳に従って 自動ドロップシャドウの機能を削除
このいずれかです
CSSソース側には shadow-attachment というクラスを持つ要素に対し ドロップシャドウを付ける
という指示が書いてありますので つけたい画像に対して class="shadow-attachment" を付加

二択でございます (´・ω・`)
たぶん自動付加は今回限りでもうやりません(笑)
お試しの意味と ご理解を促す意味で今回のみ採用させて頂きました
FC2エディターの絵文字にはシャドウがつかないように処理してあります

というわけで よろしくご査収くださいませ (o'ω')ノ

関連記事
最終更新日2015-08-01
Posted by
Customize

Comments 29

There are no comments yet.
sawa  
この記事のことではないのですが・・・

Akiraさん、こんにちは。

いま設定してあります新テンプレ?の
『できましたー (´・ω・`) 現在で不具合あれば教えてください』の件なんですが。

iPhone6からの閲覧で「Tag cloud」欄内がタグ1つ1つが縦列にズラズラ~っと並んでしまってます~ (;^_^A アセ
ご確認下さい ^^

2015/06/10 (Wed) 12:35 | EDIT | REPLY |   
Akira  
To sawaさん

今整形しましたですよ ('0')/
これは個人設定って感じになっちゃうかなー (´・ω・`)
タグクラウドがパソコンと同じ見た目だと、スマホの狭い画面からはめっちゃ押しにくいかと思います(笑)
私は
タグクラウド = 見た目
って割り切ってるので問題なし ←
「押してもらう」ことを前提にされている方は縦並びの方が親切かも。
ここは個別対応ってことにさせてもらおう。
そうしよう。それがいい((((笑)

とりあえず、私がご紹介しているソース内容のものに関しての整形は簡単でございますー。
デフォルトは縦並びにしておこうかと思います (o'ω')ノ

2015/06/10 (Wed) 13:44 | EDIT | REPLY |   
Akira  
To sawaさん

違うの作り始めましたのでsawaさんまだリコメ読んでないかも。
というわけでスクショ置いておきます(笑)
こんな感じだよe-257 ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/sc0002_zpsuzz7bdvf.gif~original

2015/06/10 (Wed) 15:12 | EDIT | REPLY |   
sawa  
ありがとうございます

わざわざスクショまで用意してくださってありがとうございま~す♪
しっかり整形されてました~(笑)

> 「押してもらう」ことを前提にされている方は縦並びの方が親切かも。

押してもらうことを前提って、、、。
私はタグクラウドって、単にサイドバーのお飾りプラグインにしか思ってませんでした (;^_^A アセ
だから、ゴチャゴチャって狭い範囲にタグが群がってる様子が普通って思ってて、、、。
あら、お恥ずかしい~(笑)

> ここは個別対応ってことにさせてもらおう。
> そうしよう。それがいい((((笑)

そうですよね、あくまでも任意なプラグインですよね~(笑)
納得です~ ありがとうございました。

2015/06/11 (Thu) 07:50 | EDIT | REPLY |   
Akira  
To sawaさん

私もそう思ってるクチです(笑)
見た目だけ、みたいな ( ̄∀ ̄;)
でも活用されてる方も多いという実感はあるー (´・ω・`)
ある程度後付での整形はできるので、その都度ご相談頂いても良いかな、と。
んでも、個人作成のプラグインについての改変にはお答えしにくいです。
失礼になってしまうこともあるもんねぇ (´・ω・`)

sawaさん毎回色んなご指摘してくださるのでホント助かってます。
ありがとー!e-468

2015/06/11 (Thu) 15:12 | EDIT | REPLY |   
ねこじゃ  
AnotherDay_azure

はじめましてー!
テンプレお借りしてます。
とっても素敵で気に入っているのですが、記事タイトルの下に投稿日と時間が出てしまうのですが、時間は要らないんです。日にちだけにはできないでしょうかわたくし素人ですがHMLかスタイルシートで変更可能でしょうか?教えてくださいませ。

2015/06/16 (Tue) 14:21 | EDIT | REPLY |   
Akira  
To ねこじゃさん

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

>日時修正の件

日時の「投稿日」は残して「投稿『時刻』」だけを外す、という意味で合ってますでしょうか。

-------

時間(hour/ minute)の該当部分削除の仕方。
Ctrl+Fキーで以下の文字列を検索(htmlソース内)

<a href="<%topentry_link>"><span class="font_assign"><%topentry_year> <span class="month<%topentry_month>"></span> <%topentry_day>  <%topentry_youbi>  <%topentry_hour>:<%topentry_minute>:<%topentry_second></span></a>

赤字部分を削除。
これがトップページ要約記事の時刻です。

--------

続きまして以下を検索。

<time class="e_time" datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>"><span class="font_assign"><%topentry_day> <span class="month<%topentry_month>"></span> <%topentry_year> <%topentry_hour>:<%topentry_minute></span></time>

赤字部分削除。
こちらが個別記事の時刻。

---------

サーチ結果の時刻。
赤字削除。

<div class="date">
<%topentry_year>/<%topentry_month>/<%topentry_day> (<%topentry_youbi>) <%topentry_hour>:<%topentry_minute> | <a href="<%topentry_category_link>" title="<%template_view_category>"><%topentry_category></a>
</div>


---------

以上でございますーe-257
半角スペースに気をつけてくださいね。
コメント欄では半角スペースを意味する

あんど えぬ びー えす ぴー せみころん

という文字列が変換されてしまいます(空白になります)が、実際のソース内にはこの文字列が含まれています。
空白を削除しないと間が空いてしまいますし、削除しすぎると詰まってしまいます。
そうなった場合には単純に空けたい部分に半角スペースを打ってください。
上に書いた英単語で書く必要はなく、ただスペースキーを半角で一度押せば大丈夫です。

2015/06/16 (Tue) 16:49 | EDIT | REPLY |   
ねこじゃ  
ありがとうございます!!

詳しく教えていただいて助かりました!Ctrl+Fの時点で助かりました!e-257お蔭さまで思った通りのページにできましたe-291とっても気に入っているので長く使っていきたいですo(^-^)o
またご質問するかもしれませんが、よろしくお願いいたしますe-343

2015/06/16 (Tue) 19:39 | EDIT | REPLY |   
Akira  
To ねこじゃさん

安心しましたe-454
はい。ご質問はお気軽にどうぞ ^。・x・)b
お手数おかけしました。お疲れ様でしたe-257

2015/06/17 (Wed) 01:13 | EDIT | REPLY |   
グレース  
いつもお世話になっております

こちらのテンプレートはどれも気にいっており、
ずっと利用させて頂いています
今回作成中の分も好さそうですね
トップページから各ページに飛ぶ形式が一番好きでして、
完成するのが楽しみです

2015/06/17 (Wed) 09:16 | EDIT | REPLY |   
Akira  
To グレースさん

こんにちはe-257
エンターページが欲しい方も割りといらっしゃいますよね。
小説サイトさんだったり、グレースさん的ブログだったり(笑)
頑張って作りますー。ありがとうございますe-348

2015/06/17 (Wed) 13:42 | EDIT | REPLY |   
てっちぃ  
ドロップシャドウをつけるには

はじめまして。
テンプレートをお借りしています。
ありがとうございます。
ご質問させていただきます。

記事内の画像にドロップシャドウを一括で設定したいのですが
私の解読力では理解しきれず・・・苦戦しています。
どうかアドバイスをお願いできないでしょうか。

お忙しいなか誠に申し訳ありませんが
よろしくお願いいたします。

2016/04/30 (Sat) 18:43 | EDIT | REPLY |   
Akira  
To てっちぃさん

ありがとうございます

過去記事掲載分も含め、記事内にある全ての画像にドロップシャドウを自動でつけたい、
という意味合いでお間違いないでしょうか。
ご利用頂いているテンプレートはGirlOnWire、こちらもお間違いないでしょうか。

Ctrl+Fキー検索(コピペでどうぞ)

</body>

htmlソース内に一箇所あります。
このすぐ「上」にコピペで以下を追加

<script>$(function(){$('.inner-contents img').addClass('shadow-attachment');});</script>

上記手順で全ての画像にドロップシャドウがかかります。
てっちぃさんはweb拍手を掲載されていますので、こちらにも同様に影がついてしまいます。
それが好ましくない場合には上記コードではなく以下を追加

<script>$(function(){$('.inner-contents img').addClass('shadow-attachment');$('.fc2button-clap img').removeClass('shadow-attachment');});</script>

記事内には他にランキングのバナーがありますが、こちらにはこのバナーを特定するためのクラス名あるいはID名が無いために自動処理ができませんことをご了承ください (*_ _)

-------

デフォルトのドロップシャドウはとても控えめなものです。
付いているのかな?どうかな?
ぐらいの感じです(笑)
もっとはっきりさせたい場合には
Ctrl+Fキー検索(今度はCSSソース内)

.shadow-attachment

この項目の
box-shadow: 0 1px 4px rgba(0,0,0,.4);
を以下の通り修正

box-shadow:6px 6px 9px -2px rgba(0,0,0,.2);

比較は以下のスクショをご参照ください
各々一番後ろの小数点+数字を大きくすると影が濃くなります。
(例 .2から .6に変更など)

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/w9rf8433r_zpshccb6rgw.jpg

今FC2のJSの動きが不穏(不具合発生中)ですので作業が思うように捗らないかもしれません。
鬼リロードでなんとか回避してください(笑)
よろしくお願いします

2016/04/30 (Sat) 21:19 | EDIT | REPLY |   
てっちぃ  

こんばんは
とても早いお返事ありがとうございます。
早速htmlソース内にコピペしてみたのですが
どうもシャドウが付いてくれません。
以下にhtmlソース内の一部分を貼り付けさせていただきますが
この位置でいいのでしょうか?

function nw(n,e,a,w){var t=new Date,s=48,c=new Date(n,e-1,a,w);36e5*s>t-c&&document.write('<span class="new">new!</span>')}
--></script>
</head>
<script>$(function(){$('.inner-contents img').addClass('shadow-attachment');$('.fc2button-clap img').removeClass('shadow-attachment');});</script>
<body>


<div id="wrapper" class="animsition">

<div class="mobile">
<span class="fa fa-bars fa-2x"></span>
</div>

申し訳ありませんが、ご指示くださいませ。。。
お忙しいところ申し訳ありません。

2016/04/30 (Sat) 22:00 | EDIT | REPLY |   
Akira  
To てっちぃさん

<body>の上ではなく
</body>の上でございますー。

ご自分の管理ページを別タブで開いて
Ctrl+Fキーを押し、</body>をコピーして検索窓(Ctrl+Fで開いたもの)へペースト、
それからコードをコピーして該当部分へペースト、
という手順でお願いします ( ゚Д゚)ノ
手打ちすると大抵みなさん開始タグと終了タグを間違えてしまいます。
終了タグのスラッシュつきボディの方です。

2016/04/30 (Sat) 22:47 | EDIT | REPLY |   
てっちぃ  

お〜〜っと(⌒-⌒; )
すみません・・・
すぐ探してみます(汗)

2016/04/30 (Sat) 22:49 | EDIT | REPLY |   
てっちぃ  

ありがとうございます(^^)♪
どうやら出来たようです!
全くのド素人がわかるようにご指導頂き誠にありがとうございました。

あと、プロフィール画像を丸型から正方形にする方法を教えていただけますか?
すみません・・・
これを最後にします(汗)

2016/04/30 (Sat) 23:14 | EDIT | REPLY |   
てっちぃ  

今度は少し問題が出た部分の改善方法を教えていただきたいです。
ブログタイトルの下のところで、過去記事のサムネイルがスライドするところですが
5個の画像だったものが3個に減ってしまいました。
これは仕方ないのでしょうか?

2016/04/30 (Sat) 23:18 | EDIT | REPLY |   
Akira  
To てっちぃさん

今確認しましたがやはり貼り付ける場所を間違えていますので、スライダーのレイアウトが狂ってしまっています (´・ω・`)
ここです ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/a98r39wfr_zpseawxpqav.jpg

htmlソースの最終の少し前です。
間違えて貼ったものは確実に削除してくださいね。
現在htmlソースの上の方に張り付いているはずです。

-----

プロフ画像円形解除
Ctrl+Fキー検索

.plugin-myimage img

以下の内容になっているかと思います

.plugin-myimage img {
width: 150px;
height: 150px;
border-radius: 50%;
}

赤字部分を以下の通り修正及び削除

.plugin-myimage img {
width: 150px;
height: auto;
}

2016/04/30 (Sat) 23:20 | EDIT | REPLY |   
Akira  
To てっちぃさん

ちょっと離れますので書いておきますね。
せっかく写真を掲載されていますが、新着サムネイルに画像が反映されていません。
これはRSSの個人設定が「全文」になっていないためです。

http://vanillaice000.blog.fc2.com/blog-entry-220.html#object19

この手順で写真が表示されるようになりますのでお試しください。
この後お返事明日以降に遅れます。ごめんなさいね (*_ _)

2016/04/30 (Sat) 23:46 | EDIT | REPLY |   
てっちぃ  

ありがとうございます。
夜までPCを開くことが出来ないため試すことが出来ませんが「What's New」の所で画像が反映されていない事も、後ほどお聞きしたかったところです。
先にお気付きくださって、ありがとうございます。

また何かとお世話になると思いますが、よろしくお願いいたします。

2016/05/01 (Sun) 14:03 | EDIT | REPLY |   
てっちぃ  

お世話になっています。
プロフ画像の件と「What's New」の所で画像表示の件
ありがとうございました。少しずつ変更ができ、自分仕様になっていく気分で、とても嬉しく思います。
多くのアドバイスありがとうございます。

レイアウトで本文記事と右サイドの間隔をもう少し開けたい時は
どこの数値を変更するといいのでしょうか?

2016/05/01 (Sun) 18:07 | EDIT | REPLY |   
Akira  
To てっちぃさん

お疲れ様です

> コンテンツとサイドメニューとの間を拡げたい件

指定箇所は2箇所です。いずれもCSSソース内
Ctrl+Fキー検索、赤字の数字を大きくすると距離が大きくなります。

① PC表示(画面横幅が大きいとき)

main {
margin-right: 350px;
}

② 画面横幅880以下

/***----- media less than 880

この括りにも同じように main がありますので任意の数字に変更。
デフォルトでは横幅が大きい時よりも両者の距離を詰めるようにしてあります。
ここでの指定はタブレットとスマホ(主に横倒し時)にも適用されます。
よろしくお願いします。

2016/05/01 (Sun) 22:27 | EDIT | REPLY |   
てっちぃ  
No title

お忙しい中、細かにご教授くださり誠にありがとうございます。
無知な私に根気よくお付き合いくださり、恐縮です。
大変助かりました。
今後もAkiraさまのテンプレートを使用させていただきますので
末長くよろしくお願いいたします。

2016/05/02 (Mon) 09:11 | EDIT | REPLY |   
てっちぃ  

また一つアドバイスをお願いできますでしょうか。
プラグインのコメント一覧やお気に入りリンク一覧の
HTMLを誤って消去してしまった際、これをどこからか引用して(コピペなど)
復旧することは可能でしょうか?

2016/05/02 (Mon) 11:17 | EDIT | REPLY |   
てっちぃ  

上記の件、なんとか復旧できました。
お騒がせして申し訳ありません。
コメント一覧やリンク一覧などを「▼⇄▲」表示などで
閉じたり開いたりする方法を探しています。
この件についてもご教授いただけないでしょうか?

お忙しいところ申し訳ありません。

てっちぃ

2016/05/02 (Mon) 11:58 | EDIT | REPLY |   
Akira  
To てっちぃさん

復旧できて良かったです。
基本的にプラグインは再ダウンロードすることで復帰可能です。

展開型のリストですが、こちらは公式ではなく「共有」のプラグインからお探しになると良いと思います。
管理画面左の
プラグインの設定 > 共有プラグインの追加

検索ワードは『ツリー』ですかね。
参考までに私が拝借しているツリー系カテゴリは

作者: Paroday様
プラグイン名: Categories...B

です。
一部手を加えて利用させて頂いてます。

2016/05/02 (Mon) 15:20 | EDIT | REPLY |   
てっちぃ  

共有プラグイン『ツリー』のご紹介、ありがとうございます。
今晩早速試してみたいと思います♪

いつもありがとうございます♪

2016/05/02 (Mon) 16:41 | EDIT | REPLY |   
Akira  
To てっちぃさん

はい。探してみてくださいませ。
こちらこそありがとうございます

2016/05/02 (Mon) 16:56 | EDIT | REPLY |   

Leave a reply

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