The other way round

ARTICLE PAGE

テンプレート固有機能説明

テンプレート固有機能説明
  • comment25
  • trackback0
sampleテンプレート全般ではなく 私が制作したものに限ります
テンプレ固有の機能のご説明
どのテンプレにどの機能がついているかについては
各記事でご確認ください


画像にドロップシャドウ


shadow sample



記事作成時の作業です
テンプレートのソース内容には触りません

<img src="画像アドレス" style="width: 希望の横幅px; height: auto;" alt="代替テキスト" class="shadow-attachment">


FC2エディターを利用して画像を掲載した際には
<img>
<a>
が挟んでいますが
それはそのまま残して構いません
imgタグに class="shadow-attachment" を追加すればOKです
シャドウの見た目はテンプレート毎に若干異なります


動画の縦横比を保つ(レスポンシブ)





* ブラウザ横幅を縮小して確認

動画も画像のように縦横比を固定して表示することができます

<div class="box-for-video" style="max-width: 最大横幅px; margin: 0 auto;"><iframe src="動画アドレス"></iframe></div>


緑のdivタグでiframeタグを挟みます
赤字の margin: 0 auto; は中央合わせの際にはつけてください
左寄せの場合には赤字部分削除
右寄せの場合には margin: 0 0 0 auto; に変更
FC2エディター利用ではiframeに
width="数値" height="数値"
と縦横の値がついてきます(「比」ではなく「値」)が
ここではdivへのwidthプロパティ指定でサイズを決定できますので、テンプレート変更後のことを考慮して入れたままで構いません
(iframeでのサイズ指定は無視されます)
例えばiframe側の width/ height で大きさを調整しようと思うと、縦横比を計算した上でそれぞれ正しい数値を指定する必要が生じますが、この独自クラスを用いた場合には div側への max-width指定 で調整できますのでheight計算は不要です。


リンク画像に黒マスク


* マウスオーバーしてください

sample



黒マスクがかかり 拡大あるいは別タブ表示できることを示唆します

<a href="画像アドレスまたはリンク先アドレス" target="_blank" class="zoom-in"><img src="画像アドレス" style="width: 希望横幅px; height: auto;" alt="代替テキスト"></a>


class="zoom-in"
を aタグに記載します
img ではなく a の方です(ここ大事)
画像が正円の場合にはクラス名を zoom-in-round に変更してください

例)
<div style="text-align: center;"><a href="画像アドレス" target="_blank" class="zoom-in-round"><img src="画像アドレス" style="width: 150px; height: 150px; border-radius: 50%;"></a></div>


sample




画像拡大スクリプト Darkbox


こちらのスクリプトはBetweenNeoから導入しています
(毎回入れるかは不明(笑))
それ以前にリリース済みのテンプレートには入っておりません
導入されます方は簡単ですので別記事で方法をご確認ください(まだ書いてないけど(笑))
* 個別記事(固定リンク)ページ内でしか動作しないようにしています
トップページでご覧の方は個別記事内でのご確認をお願いします *


Darkbox sample



<img src="画像アドレス" data-darkbox="画像アドレス" data-darkbox-description="表示テキスト" style="width: 希望横幅px; height: auto;" alt="代替テキスト" title="ツールチップ">


記事作成時にコードを書いて頂くわけですが
かなり特殊な内容になってます
これhtml5の「カスタムデータ属性」というやつです
ある特定のスクリプトとhtmlの特定要素とを結びつけるためのもの
(html5のドラフトを通過して正式採用されている属性です)
見慣れないかもしれませんが 今後はこの形が増えて行くと思います

aタグは利用しませんので FC2エディターから貼り付けされましたら開始タグの
<a>
そして終了タグの
</a>
は消してください

「画像アドレス」がふたつあります
最初に記載した画像がクリック前に表示される画像です
ふたつめのアドレスは 同じ画像を拡大表示するのならば(それがフツーだけど) 同じアドレスを入れます
違うアドレスを入れると違う画像がクリック後に表示されます
コードが見慣れぬ上に長いですから
雛形として.txtファイル保存してデスクトップにおいておき
ペタリと貼り付けてからアドレスだけ差し替える というやり方が良いと思います
あるいは辞書登録するか(長いけども)

ツールチップ というのはこれです ↓ マウスオーバー

マウスを乗せると吹き出しが出ます


上の黒マスクと併用したくなりますが マスクの方はaタグが必要です
特に難しいコードを書かずに実装できるのはCSSの擬似要素というのを利用しているからなのですが
imgタグはこの擬似要素が使えません
やろうと思うとdivタグをひとつ噛ませるかなにか... ちょっとめんどっちさが増しますので
せめてtitle属性によるクリックを促すテキスト表示で(笑)
任意ですからつけなくてもOKです
MacのChromeはツールチップが出るのが遅いんですよねー (´・ω・`)
Windowsだと早いんだけどもね なんでかな (´・ω・`)

テンプレ変更してスクリプト自体が失われた場合にどうなるか ですが
特にどうもなりません
html解釈としては「カスタムデータが指定されているな」とはなりますが
どのスクリプトとどのように紐付いているか までは不干渉です
バリデートでエラーを吐くこともありませんし レンダリングが止まってしまうこともありません
また aタグを利用しませんので 他スクリプトとの衝突もほぼありません
ただし Jqueryライブラリのバージョンが 1.7を含むそれ以前だと厳しいかもしれません
(attrとdataの混同 等)

クリック後に左右矢印が表示され 同ページ内の画像が自動的にスライド形式になります
(もちろんカスタムデータ指定が為されているものだけですのでコントロールできます)
この矢印の色を変更するには以下の内容をテンプレートのCSSソース末尾に追加してください
デフォルトは青です

#darkbox_next:hover, #darkbox_prev:hover {
border-color: カラーコード !important;
}


カラーコードの後ろに半角スペースを入れて !important を忘れずにつけます


見出しのデザインやテキスト強調


● 手書き風 (このページで利用しているのとほぼ同じものです)

Yankee White


<div class="freehand">Yankee White</div>


● ドッグイヤー

The Truth is Out There


<div class="dogear">The Truth is Out There</div>


● カール

Leap of Faith


<div class="curl">Leap of Faith</div>



サンプルでは div を利用しましたが、意図的に h (見出し) でご利用頂いても大丈夫です。
記事内で使える見出しは h3 〜 h6 までです。
フォントサイズは15pxに設定してあります。
h4以降など、サイズの調整をしたい場合は以下のような形でお願いします。

<h4 class="curl" style="font-size: 数値px;" >Leap of Faith</h4>


● 強調 (strongやemのような「強意」ではなく、テキストハイライト)

ハイライトで目立たせる

<mark>ハイライトで目立たせる</mark>


要素に直接スタイルを指定すると「過去の見出し・装飾したくない見出し」も自動的にこの形になりますので、
mark 以外は敢えて「クラス指定」という方法を取っています。
逆に過去の見出しも全て同じスタイルにしたい場合には自己責任の上でスタイルシートのクラス指定を要素指定に変更してください。
ちなみに、mark要素はどのブラウザデフォルト(CSS初期値)も文字背景全面黄色です。
テンプレート変更時、そのテンプレートCSSにデザインリセットが設けられていない場合にはブラウザ初期設定に倣います。

Comments 25

コムフ=素人  
「Life-is」テンプレートでのDarkboxについて

Life-isテンプレートでの「画像拡大スクリプト Darkbox」について。

いつもお世話になっております(´ω`)
今回は表題の通りの相談です。
Life-isテンプレートはこちらのDarkboxに対応しているのでしょうか?

上記記事中のコードを使用したのですが、ただ元画像サイズで埋め込まれるだけで、後半のコードがそのままテキストとして記載されてしまいました。

以下URLは結果画像です。
(削除しました)
※今は元のFC2画像挿入に戻しています。

ちなみに「環境設定→投稿設定→画像リンク→元画像にリンクさせて」の設定後にアップロード(サムネ同時作成、Exif削除)した画像URLを使用しています。
エディターは旧投稿画面から行いました。

このコードを記事作成(画像挿入)時に書くだけでなく、他のテンプレートなどの設定が必要なのでしょうか。


この記事によると導入記事は別途作成中ということは、この件についての相談は記事完成まで待った方がいいのかな(´・ω・`)
GW明けてからでも構いませんのでよろしくお願いします!

2016/05/01 (Sun) 17:49 | EDIT | REPLY |   
Akira  
To コムフ=素人さん

お疲れ様です ( ゚Д゚)ノ

まず、Life-isテンプレはDarkboxに対応しております。
で、画像からソース内容を引っ張りだすというのはできません(笑)
なので実際に記載したソースコードを鍵つきで構いませんので教えてください ^^;

DarkboxもJSで動いていますので、現在のFC2不具合に引っかかってます。
もしかしたら内容は正しかったけれどスクリプトエラーで機能しなかったのかもしれません。
Life-isテンプレはJSが無効になった時に気づきにくいタイプなんですよね (´・ω・`)
サイドバーをスクロールして動かなければJSが効いていませんので、鬼リロードで((((笑)

記事結局まだ書いてない ( ̄∀ ̄;)
スクリプトのファイルをご自分で管理したい人へ向けてなんですけどもね。
例えば他製作者さんのテンプレートに変えた時に自分で追加したい、だとか。
私のテンプレから移植すると直リンクになってしまいますので、今後も使いたいという方は自主管理されることをおすすめします。

テンプレ管理画面も死んでるわ。
気づきにくいけど (´・ω・`)
これ… 早く直さないと広告主からクレーム来ると思うんだけど(笑)

2016/05/01 (Sun) 22:34 | EDIT | REPLY |   
コムフ=素人  
To Akiraさん

お疲れ様です! こりゃまた失礼しました(>_<;)

画像削除してしまったので、別画像URLを使用しています。
カスタムしたテンプレートがダメなのかと思い、デフォルトのLife-isテンプレートでも試したのですが、前回コメントと同じ結果となりました。

(削除しました)

こんな感じで画像を張り付ける度にAkiraさんのコードを登録し、コピペして使ってます。変更したのは画像URL2カ所とWidthです。


今のところ他製作者テンプレに移ったりなんだりはないので、私には別記事の内容は不要になりそうですかね。
(どちらにしろ、Colorboxの記事も見たのですけど、ファイルアップロードまでは出来たものの、テンプレ修正になったとたん訳分からなくなってしまった私にはたぶん管理できない。そのあとにこちらの記事を発見したのでColorboxのファイルは削除しました。)

はやくこの鬼リロード生活から脱出したいですよね~(;´・ω・`)苦笑

2016/05/02 (Mon) 11:58 | EDIT | REPLY |   
Akira  
To コムフ=素人さん

今頂いたコードをコピペしてやってみましたが、ちゃんとモーダル表示になりましたよ。

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

確認ですけども、この「画像」そのものが左にマークがあって、その右側に文字列」
というものになってますが大丈夫でしょうか (´・ω・`)

2016/05/02 (Mon) 15:25 | EDIT | REPLY |   
Akira  
To コムフ=素人さん

ってゆーか!!!
えー! テンプレート承認されてる
この状況下でええんかいな(笑)
システム修正してから承認の方が良かったんじゃないか ( ̄∀ ̄;)

2016/05/02 (Mon) 15:27 | EDIT | REPLY |   
コムフ=素人  
To Akiraさん

お忙しい中、早々にお返事ありがとうございます!

画像が紛らわしかったですね…。
今度はコードを書き込んだ記事URLを貼っておくので監修をお願いします。
(※削除しました)

使用コード
<img src="http://blog-imgs-92.fc2.com/k/o/m/komufu/toa_logo_S_304.jpg" data-darkbox="http://blog-imgs-92.fc2.com/k/o/m/komufu/toa_logo_S_304.jpg" data-darkbox-description="表示テキスト" style="width: 150px; height: auto;" alt="代替テキスト" title="ツールチップ">

コードは同じものを使用し、別画像で試したのですがやはり同じ結果でした(涙)
全く手を加えていないデフォルトのLife-isテンプレートを使用してます。
(確認して頂いたらカスタムに戻します)

環境設定も再確認しましたが、“元画像にリンク”となってますし、
同じコードでAkiraさんは正常に表示されたということは、
私側には問題が無く、今のFC2のシステム(JavaScript)の問題が絡んでいるのでしょうかね。

他に気をつけなきゃいけない点ってあったかな・・・(#・ω・)ワカラン!

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

承認って、新作テンプレートですか?
お疲れ様&おめでとうございます!?
と、この状況で言っていいのやら・・・(´・ω・`;)

2016/05/02 (Mon) 16:12 | EDIT | REPLY |   
Akira  
To コムフ=素人さん

今拝見しましたが、ソースコードがこうなってます ↓

<img src="アドレス" data-darkbox="<a href="アドレス" target="_blank">アドレス</a>" data-darkbox-description="表示テキスト" style="width: 150px; height: auto;" alt="代替テキスト" title="ツールチップ">

正しいのはこちら ↓

<img src="アドレス" data-darkbox="アドレス" data-darkbox-description="テキスト" style="width: px; height: auto;" alt="代替テキスト">

上記内容だとシンタックスエラーでございま (・ω・)
darkboxへの<a>は不要です。

2016/05/02 (Mon) 16:53 | EDIT | REPLY |   
コムフ=素人  
To Akiraさん

うわあああ!泣きそうになりながらも解決しました(´;ω;`)
とんだお手間をかけさせてしまったようです…なんてことなかった…。

なんで勝手にaタグが付いちゃうんだろうと、Colorboxの記事もいちから読みなおしてみて気付きました。

環境設定 → 記事のオートリンク設定(記事内にURLがある場合、自動でリンクに書き換わります)の設定を間違えていました。

誤:~ウィンドウで開く
正:そのまま表示

にしておかなければいけなかったのですね…確認不足で申し訳ありません!
おソースの指摘で気付けました、ありがとうございます(;^◇^)

Darkbox超クールで感動してます!!導入していただけてたなんて感謝感激です♪

2016/05/02 (Mon) 19:17 | EDIT | REPLY |   
Akira  
To コムフ=素人さん

オートリンクね… ちょっと仕様調べますね (´・ω・`)
使わない方が良いかもしれませんので(笑)
しばしお待ちください。

------- 追記

「そのまま表示」
ってなんだろう (´・ω・`)
と思いましたが、要するに「オートリンクを利用しない」ってことなんですね。
これが一番良いと思います(笑)
オートリンクの仕様についても時間を見て記事にしておきますね。

2016/05/03 (Tue) 14:15 | EDIT | REPLY |   
コムフ=素人  
To Akiraさん

私もなにがどう違うんだろうと、試しながらやっていて気づきました。
これに限らず説明が少ないので試行錯誤を強要され疲れてしまいます(笑)
ありがとうございます(´ω`) お疲れ様でした!

2016/05/03 (Tue) 18:31 | EDIT | REPLY |   
Akira  
To コムフ=素人さん

FC2は選択肢が多いので戸惑うこともありますよね (´・ω・`)
ところで、コムフさんの方はJSの動きどうですか?
回復してますかね。
恐らく大丈夫だろうとは思いますけれど。
何かあればお申し付けくださいね。
何もなければこのコメントへのご返信はお気になさらず

2016/05/04 (Wed) 16:35 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/05/20 (Fri) 16:11 | EDIT | REPLY |   
Akira  
To 外部サムネイルの件 内緒さん

結論から言うと「難しい」になります。
不可能かと言われれば不可能ではないのですが、外部直リンク用にJSを組む必要があります。
そして記事を書かれる際のソースコードの操作も必要になってきます。
FC2の仕様としてはできませんので、テンプレート固有の機能として追加するしかないです。

外部直リンク画像がサムネイルとして表示される、というのがまず著作権の関係上よろしくないですよね。
そのためにドメインが一致しない画像をはじいているんだろうと思います。
そういった関係上いろんな意味でかなり難しいんじゃないかしら (´・ω・`)
本末転倒ですが、要約記事タイプのテンプレは避けて全文表示にされるか。
あるいは直リンクせずにFC2サーバーにアップロードするか。
いずれにしても私からのお手伝いは叶いません。
申し訳ございません (*_ _)

2016/05/20 (Fri) 18:13 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/05/20 (Fri) 21:26 | EDIT | REPLY |   
Akira  
To 外部サムネイルの件内緒さん

こんばんは ( ゚Д゚)ノ
FC2にサムネイル選択の新機能が追加されています。
内緒さんのブログは主旨がはっきりされていますので、用途ごとにいくつか固定の画像を用意しておくのも一つの方法かと思います。
同じ画像が並ぶことにもなりますので、見た目が少し淋しいかもしれませんが、
記事の内容・本旨は伝わりやすいのではないでしょうか。
お役に立てず申し訳ないです (m´・ω・`)m

はい。こちらこそよろしくお願いします+.(・∀・).+.゚ ☆

2016/05/22 (Sun) 00:16 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/05/22 (Sun) 07:30 | EDIT | REPLY |   
Akira  
To アイキャッチの件 内緒さん

記事投稿画面の下の方に
「アイキャッチ画像を選択する」
という項目が追加されています。
それを利用したら簡単に指定することができるようになりました。
ちょっと言葉足らずでしたね。ごめんなさいね。
一度お試しください

2016/05/23 (Mon) 03:04 | EDIT | REPLY |   
hige  
コメント欄の投稿者URL の非表示

 Akira 先生のテンプレートを使用していないのにコメントをいつも投稿している不届きものです。
 Akira 先生のテンプレートのコメント欄で、投稿者のURL を示すFont Awesome Icons の絵文字?fa-link が表示されている時と、表示されていない時があります。
 コメント投稿者がURL を書き込んでいるか、そうでないかを判断して表示、非表示を制御されているのですね。
 この手法が欲しかったのですが、ネットでは見つかりませんでした。
 で、そのscript をAkira 先生のテンプレート中で発見。
 fa-link の代わりにただの URL という文字列に変更してパクってしまってるんですが使用許可を戴けませんか?
 あと、このテクニックを公表して戴ければリンクを張った記事を書きたいと思ってます。
 又は、HTML を私のブログに書いてしまって宜しいでしょうか?

 余談ですが同じくコメント欄の編集やEDIT の文字、パスワードを入力していなくても表示され、そんな時これをクリックするとページトップに移動するという変な動作をします。
 で、パスワードを入力していない時は編集等の文字が非表示になる様に設定してます。
 https://books.google.co.jp/books?id=ZvgeBAAAQBAJ&pg=PA169&lpg=PA169&dq=comment_edit_link&source=bl&ots=UHz-ZjOkTf&sig=mqGbR-021Vl-kMzOCLuHZ3OkcHs&hl=ja&sa=X&ved=0ahUKEwij-6axn7TOAhWHJpQKHd_mCL0Q6AEIPDAF#v=onepage&q=comment_edit_link&f=false

 釈迦に説法でした。お許しを。

2016/11/19 (Sat) 14:13 | EDIT | REPLY |   
Akira  
To higeさん

こんにちは ( ゚Д゚)ノ

使用許可など、私が出す必要もなく。
FC2変数を応用しているだけですので、どうぞお使いください。
ってゆーか「お使いください」って言うこと自体おかしいような気が ^^;
記事の件、リンクの件、いずれもご随意に。

パスワードの件はいつもはやってるんだけども、
このテンプレは全然手つかずというかですね、修正の時間が取れない(笑)
ご指摘頂きましたので直しますね。今から(笑)
FC2がアカウントとコメントとのヒモ付を行ってくれると良いんですけどねー。
でもそうなると必然的にリンクを掲載することに。
それが嫌な方は非ログイン状態でのコメントをすることになりますね。
その代わり鍵つきコメントも「管理者」と「コメント主」だけが該当ページで鍵コメント内容の確認ができるようになりますし、
編集ボタンもコメント主だけが押せるようになるんだけど。
FC2はアダルトを抱えてるから難しいかな (´・ω・`)

2016/11/19 (Sat) 14:33 | EDIT | REPLY |   
hige  
ありがとうございます

では記事にさせて頂きます。
こんなちょっとしたテクニック、めっちゃもっと知りたい。

パスワードの件、やっぱ釈迦に説法でした。
おはずかしい。

鍵付コメント。確かに。
コメント主も自分のコメントが読めません。

> 編集ボタンもコメント主だけが押せるようになるんだけど。

そう それっ!

いつも勉強というか、Akira 先生のテンプレートはなんか宝探し状態で見せてもらってます。

2016/11/19 (Sat) 14:54 | EDIT | REPLY |   
Akira  
To higeさん

先生と言って頂くほどの知識人ではございませーん (´・ω・`)
それでもまあ、お役に立ているのならば幸いです ^^;

2016/11/19 (Sat) 16:13 | EDIT | REPLY |   
hige  
記事にさせて頂きました

ご報告を
http://blgid1974.blog13.fc2.com/blog-entry-885.html

2016/11/19 (Sat) 18:29 | EDIT | REPLY |   
Akira  
To higeさん

了解でございま ( ゚Д゚)ノ
のちほど拝見しますね。
ありがとうございます

2016/11/20 (Sun) 12:47 | EDIT | REPLY |   
Wmom  
すみません。

FC2ブログを始めたのですが、テンプレートはがとても気に入って使わせて頂いています。
他の方も質問されているかもしれませんが(よく見ずにすみません)
テンプレートの画像に、ファイルアップで失敗した写真が3個位入り込み消去する方法が分からなくて困っています。
勿論色々試してみましたが難しいです。
簡単に操作方法を教えて頂けたら幸いです。
大変、ご迷惑をおかけして申し訳ございませんが宜しくお願いいたします。

2017/01/20 (Fri) 01:16 | EDIT | REPLY |   
Akira  
To Wmomさん

ありがとうございます

で、その情報だけではなんとも返答のしようがございません。

> テンプレートの画像〜
どのテンプレート?どこの画像?背景?それともカルーセルスライダーかなにか?

> ファイルアップで失敗した写真が3個位入り込み〜
どこに?記事内に?それともカルーセル?

=======

・テンプレート名(各専用記事がありますので改めて該当テンプレ記事へコメントをお願いします
http://vanillaice000.blog.fc2.com/blog-category-5.html


・該当テンプレを設定した上で該当ブログアドレスを教えてください。
(リンク先が gooブログですので現状確認ができません)

ともかく現在お困りの件が一体どんな状況なのか皆目見当もつきませんので、上記内容を踏まえてお返事をお願いします。

2017/01/20 (Fri) 14:49 | EDIT | REPLY |   

Leave a reply

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