Article page

by
  • Comment:4
  • Trackback:0

Dark-Divineテンプレート をDLしてくださったみなさん、ありがとうございます ( ゚Д゚)ノ


デフォルトで導入している「ページ内で画像を拡大するためのスクリプト」を変更致しました。
リリース時点で変更するつもりがすっかり失念しておりました。
申し訳ございません (*_ _)


Dark-Divine以前のテンプレートに導入していた Darkbox ですが、開発が終了しているようなので、別のプラグイン Intense Images に変更を行いました。
適用は Dark-Divineを含む、以降のテンプレートです。
既にDarkboxをデフォルトとしてリリース済みものについては、当面はそのままご利用頂けます。
(機会があれば差し替えるかもしれません。動作不全が起こるといったことはありません。)

DLページの方は既に修正済みですので、画像拡大機能が必要な方はお手数ですが再DLをお願いします。
特に必要ないよ、という方はどうぞそのままで。


使い方説明



サンプル

母の日フォト

<img class="intense" src="画像アドレス" data-title="タイトル" data-caption="説明文" style="width: 横幅;" alt="代替テキスト">

ソースコードは上記の通りです。
お使いになる方は辞書登録しておくと便利です。
「掲載した画像全て」に自動適用する処理はしていませんので、拡大したい画像のみ記事を書かれる際にhtmlの手打ちをお願いします。

画像アドレス --- ファイルアップロード画面から取得してください。
タイトル --- サンプルでは「Mother's Day」
説明文 --- サンプルでは「To the best〜world.」
代替テキスト --- SEOでは非常に大事です。画像検索で利用されそうなキーワードを入れておくと良いと思います。
(サンプル例: 母の日フォト)

注意点
  • aタグで囲まない
  • クラス名 intense を必ず付ける
  • Darkboxとの共存はできません

FC2ブログエディターのツールで画像を掲載される方は、設定の如何によって自動でaタグがくっついてきますが、忘れずに外してください。
また、ページ内で拡大を行う = アルバムへのページ遷移は行わない という理屈になりますので、ご理解頂いた上でのご利用をお願いします。

Darkboxとの共存不可です。
また、Intense Images のJS内容も大幅に書き換えをしています(Darkbox互換)ので、別テンプレへの流用不可です。
共存させたい方は Darkbox, Intense Images 共に配布元から新規DLという手順を踏んでください。
(お手伝いは致しかねますので自己責任で)
外部ファイル化せずにVanilla JS(ネイティブJS)でhtmlソースに直接記述しています。
文字数が多いので不安になるかもしれません(笑)が、10KBほどですので負荷はほとんどありません。
寧ろjQueryで外部化するとサイズがほぼほぼ倍(またはそれ以上)になります。

画像のサイズ指定は掲載時の見た目寸法です(height指定は不要)
サイズ指定を省くと元画像依存 + 記事幅以内(max-width:100%)になりますので、そのままで良い方は指定の必要はありません。
その場合にはソースから以下を削除してください。

style="width: 横幅;"

末尾に半角スペースがありますのでそれも含めて削除。

拡大時には全画面になりますので、原本が小さいものはおすすめしません。
横1000px以上をおすすめします。
画像容量の削減は事前に行ってください。
元サイズについて、スマホ・パソコンの高解像度ディスプレイなどは寸法が小さいとぼやけてしまいます
普段から1000pxを目処にされると良いかな、と思います。

サンプルのように拡大前画像にシャドウを付けたい方は、クラス名 intense の後ろに半角スペースを一つ入れて以下の通り shadow-attachment クラスを追加。

class="intense shadow-attachment"



Darkbox救済処置について


私の過去テンプレをご利用頂いており、既に記事内にDarkbox用の記述を行っている方については、修正されなくとも自動でこちらに切り替わるようにしておきました
data-darkbox-description の値(説明文)は移行にあたり「説明文」として表記されます。
タイトルについては「無し」になりますのでご了承ください。
今後のご利用については上記のソース内容(intense用記述)でお願いします。


マウスカーソルについて


Google Chrome その他 Chromiumベースブラウザ, webkit系ブラウザ --- 画像カーソル
Firefox --- 虫眼鏡カーソル
Microsoft Edge, IE11 --- 指カーソル

ブラウザによってカーソル実装状況が異なりますのでこういった処理にしてあります。
拡大時は全ベンダー同じ画像カーソルです。


機能自体不要な方


全く使わない、という場合はJSが不要になりますので多少の負荷でも減らした方が良いと思います。
Ctrl+F(Windows)/ Command+F(Mac)キー検索

<!-- 注)画像拡大スクリプト不要の方ここから削除 -->

上記コメントを目印にガイダンスに従ってください。


以上です。
よろしくお願いします ( ゚Д゚)ノ
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 4

NOB  

Akiraさん
以前テンプレートBelongの時、色の反転等でお世話になりました NOB(Lの親父)です。
今回から【Dark-Divine】を使ってまして(画像が大きく表示されるもので・・)、画像拡大スクリプト(Intense Images)を使ってみたんですけど、これはTOPページでは拡大されず、個別記事の時に拡大される仕様でよろしいのでしょうか?
TOPページの時も画像の上にカーソールを持って行くと拡大のマークが出るものですから・・・ご確認です。

ブログ:http://phototime8.blog.fc2.com/
画像のみ右クリック禁止になってます。

お時間ある時で良いです。

2017/05/31 (Wed) 20:51 | EDIT | REPLY |   
Akira  
To NOBさん

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

> トップページでの拡大の件〜

こちらはごめんなさい。現在はトップページでも起動するようになってますが、NOBさんはヘッダーなどカスタマイズを済ませていらっしゃいますよね。
大変ご面倒ですが、以下の通り「移動」をお願いします。

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

<!-- 注)画像拡大スクリプト不要の方ここから削除 -->

上記を目印にして頂くと、こういった形になっているかと思います ↓

<!-- 個別記事ブラウザサイドページ送り(カテゴリ間移動) 不要の方ここまで削除 -->
<!-- 注)画像拡大スクリプト不要の方ここから削除 -->
内容省略
<!-- 注)画像拡大スクリプト不要の方ここまで削除 -->

<!--/permanent_area-->

二つ目のコメント「〜〜ここまで削除」のすぐ下に<!--/permanent_area-->がついていると思います。
赤字部分「だけ」をカットし、先程の<!--/permanent_area-->の直下に以下のような形で貼り付けてください。

<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_category_area--><!--not_tag_area--><!--not_date_area-->
ここにカットした内容をペースト
<!--/not_date_area--><!--/not_tag_area--><!--/not_category_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->

太字の文字列は追加して頂かないといけませんので、ここからコピーしてください。
カット内容が長いので申し訳ないです (*_ _)

以上が「トップページでも拡大できるようにする」処理です。
もしトップページで起動させたくない、という場合にはカーソルの処理が必要ですのでその旨お伝えください。
お手間を取らせて申し訳ないです。
よろしくお願いします。

2017/05/31 (Wed) 22:02 | EDIT | REPLY |   
NOB  

Akira さん

素早いお返事ありがとうございます。
早速書き換えし、TOPページでも拡大することが出来解決いたしました。

ありがとうございました。

また何かあったらよろしくお願いします。

2017/05/31 (Wed) 22:24 | EDIT | REPLY |   
Akira  
To NOBさん

お手数をおかけしました。
はい、何かありましたらお気軽にどうぞ。
ありがとうございます

2017/06/01 (Thu) 12:44 | EDIT | REPLY |   

Leave a reply

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