The other way round

ARTICLE PAGE

Dark-Divine

author photo

Byvanillaice (Akira)

Dark-Divineテンプレート


名称 Dark-Divine
カラム数 2
プラグイン対応 ○ (右サイドメニュー)
レスポンシブ対応
サイドメニュー デフォルト 右
記事幅 可変 最大 820px
サイドバー幅 固定 300px (内寸 260px)
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
テンプレ固有機能 画像にドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大
見出しデザイン
使い方詳細ページ
テンプレート固有機能説明
Browser SupportIn principle, current and previous version

Chrome

Firefox

Safari

Opera

Edge

IE11

License
Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム 色調変更, カラム入れ替え etc.


valid-html5.png


更新履歴 2017.5.27


ページ内画像拡大のプラグインを Darkbox から Intense Images に変更しました。

詳細ページ
【Dark-Divine】画像拡大スクリプト変更のお知らせ 


--------- 以下本文



サイモン・ベイカー氏の笑顔は世界一だと思うのー (*ノω・*)



だーく でぃゔぁいん
承認されました。ありがとうございます。



TOP PAGE DEMO
LIST PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ



仕様
・カラムの入れ替えが簡単になりましたNEW
・全体幅の変更が簡単になりましたNEW
・個別記事ページ送りに前後ページのサムネイルを追加しましたNEW
・全文表示タイプ
・サイドメニュー スクロールアンカー


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・トップページの表示タイプ変更・レイアウト変更(全文表示から要約表示へ変更, カラム数変更 など)
・レスポンシブの固定幅化。
・テンプレートと無関係なプラグイン導入のお手伝い。


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



CSSレイアウトを大きく変更しました

今回からfloatによるカラムレイアウトを辞めました。
以下のようなメリットとデメリットがあります。

  • カラムの左右入れ替えが容易になります
  • IE10以下は完全非対応
  • 要素のはみ出しに敏感

カラム入れ替えの手順は次章でお伝えします。

IE11を除く他バージョンのIE全て非対応です。
まぁ、元々非対応ですが (´・ω・`)
Microsoftのブラウザセキュリティサポートは2017年4月12日以降、IE11のみ になりました。
セキュリティサポート切れのブラウザについてはいかなる事情に於いても「非対応」を平素よりお願いしています。
とは言っても、なんとなくそれとなく表示は行われておりました、というか、さりげなくフォールバック(後方互換のための記述)も行っていたりしました。
本作から Jquery のバージョンを最新の3にアップグレード しています。
この時点でIE9, Android4.0以前は完全にアウト。
んでもって、IE9のフォールバック(ベンダープレフィックスを含む)は全部外しました。
IE10は… 一応全体レイアウトのみフォールバックしてますが、基本的にこれ以上面倒は見ません ←
ご理解頂ければ、と思います。

要素はみ出しに敏感、という点についてはおいおい記事にしようと思っています。
よほど無茶をされていなければ大丈夫です。たぶん ^^;
英文をよくお使いになる方、記号を多用される方は少し気をつけて頂いた方が良いかもしれません、という予告に留めます(すみません)



左右のカラム入れ替えの仕方


#main-container

を検索されますと、CSSソース内に2箇所ヒットします。
最初のものが対象です。
この括りの
padding: 0 60px 80px;
の直下に以下を追加。

flex-direction: row-reverse;

これだけでOKです。



全体幅調整の仕方

デフォルトは全体像の最大横幅を 1300px に設定しています。
1300
で検索して頂きますと、CSSソース内に 3箇所 ありますので、3箇所全てを希望の数値(同数値)に変更してください。
(メインコンテンツ横幅が600pxを下回った際にシングルレイアウトに切り替わるよう調整してあります)



個別記事ページ送りの前後ページサムネイル

FC2独自変数では未実装ですので、単純かつ半ば強引に表示しています。
また別の方法を思いついた際、もちろん公式実装された際には書き換えしようと思っています。
前後ページにサムネイル対象画像が存在しない場合のNo image画像を用意していますので、変更したい方は

//blog-imgs-106.fc2.com/v/a/n/vanillaice000/devinenoimage.jpg

上記が対象画像でhtmlソース内に1箇所あります。
任意の画像アドレスに修正をお願いします。
(http: のスキームは省略されることをおすすめします)
縦横比不問(ですが横長推奨)、長辺500px程度が妥当かと思います。
また、ブログ個人設定でNo image代替画像を設定済みの方はそちらが優先表示となります
2017.6.5 追記
申し訳ございません。ページ送りについてはテンプレデフォルトNo imageの方が優先ですので訂正致します。
追記ここまで


デフォルト画像サンプル (縮尺掲載 500×312 40KB public domain)





ナビゲーション内「About」について
こちらは予備リンクです。
誘導したいページがあれば、About を適切なテキストに置き換えた上で、リンクアドレスを設定してください。
不要であれば削除。

該当部位検索
注)予備リンク

カスタマイズ
<li><a href="ここにリンクアドレス">テキスト</a>


デフォルトのままでは空リンクですので、削除あるいはリンク設定いずれかの処理をおすすめします。



ドミナントカラー

以下が基本色調です
数字の部分だけを抜き出してCtrl+F(Windows)/ Command+F(Mac) キー検索されますと 不透明度つきのものも全て出てきますので上手に活用してください。

例) 51,51,51


rgb(25,30,34) ヘッダー背景色, ナビゲーション背景色, サイドメニュー背景色 など
rgb(127,111,111) 基本リンク色 など



管理人コメントと訪問者コメントを分ける方
デフォルトはグレー背景アイコン。
サンプル




CSSソース末尾に以下を追加

.name管理人ハンドルネーム:before {
  background-color: カラーコード;
}

管理人ハンドルネーム の部分は普段コメント欄でお使いのお名前に差し替えてください。
カラーコードは rgb(●,●,●) の10進数表記 #●●●●●● の16進数表記のどちらでも構いません。
サンプルのカラーコードは rgb(148,170,201)

プロフィール画像などを設定する場合は以下の通り。

.name管理人ハンドルネーム:before {
  content: "";
  background: url(画像アドレス) center center /cover no-repeat;
}


サンプル



* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)
注意) ハンドルネームを判別してデザインを振り分けています。
同じハンネの方がコメントされますと管理人のそれと同じデザインを踏んでしまいますので割りきってお使いください。



ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。

本作はこれまでのレイアウトから大幅な変更が入っています
特に Jqueryのバージョンが3系 である点。
Jqueryプラグインなどを追加導入される際には3.0以降に対応しているかどうかを確認。
そしてフックアップコードについても、show/ hideメソッド、slidetoggleメソッドなどが大きく変わっています
プラグイン導入のお手伝いは行っておりませんので、対応バージョンの確認と変更メソッドに留意して実装してください。



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

Comments 5

きろろ  

お久しぶりでございます

お久しぶりでございます<(_ _)>

5月の初め、夜中に顔から転びまして(T_T)
右眉からこめかみにかけてざっくしと切りました。
18針ほど縫ってもらいましたが……
そのショックから抜けきれないうちに、愛犬の脾臓に腫瘍が見つかって。
脾臓摘出の手術をしたりと……、もうお祓いに行ってこようかと思うほどの
毎日を過ごしているきろろでございます。
担当者からは原稿をはよう送れと言われるし、でも顔の傷が痛いしe-259

さて、だーく でぃゔぁいんをお借りしましたw
シンプルだけどゴージャス!
一目惚れでございます。

で、本日まいりましたのはサムネ画像の件でございます。
FC2さん、なんか変なのでございますよ。
サムネイル画像をここ何度かつけ忘れていたのですが、
見ると勝手にサムネイル画像が表示されているではありませんか?

あれはなんででしょうか?
記事の管理でサムネイル画像を確認してみたのですが、
サムネイル画像は特別選んでおりません。
不思議……

それからABOUTなんですが。
#の部分にリンク先をいれるのはわかっているのですが、
ここ。メールフォームにすることは可能でしょうか?

カテゴリーを作成して一度リンクさせてみたのですが、
なんかいまいちおしゃれじゃないw

ABOUTをクリックしたらメールフォームが立ち上がるようにできるでしょうか?
きろろでもできるのであれば教えていただけたらと思います。
急ぎませんのでよろしくお願いします<(_ _)>

2017/06/05 (Mon) 02:50 | EDIT | REPLY |   

Akira  

To きろろさん

ご無沙汰しておりますー。

そんなことがあったんですね。
私も左のおでこから左上まぶたにかけて傷があるだけども、日焼けすると傷が強く残るんですよ。
私ちゃんと対策しなかったので結構目立つ傷で残ってる 。(゚うェ´゚)゚。
日焼け気をつけてくださいね、マジで ( ̄∀ ̄;)
愛犬のこともお辛いですよね。
術後の経過なんかは安定してるのかしら。
いやもう、ペットって家族の一員なので人間と同等。
どちらもお大事になさってくださいね。

---------

> 勝手にサムネイル画像が表示されている〜

これは記事の設定で「サムネイル代替画像」を指定しているからだと思います。
一度ご確認を。
環境設定 > 記事の設定 > サムネイル代替画像の設定

で、私記事内の説明に誤りを見つけました。
ページ送り背景画像、No image代替画像を設定している場合はそちらが優先 ← これ嘘です。
きろろさんのご報告がなかったら気づかなかった ^^;
ありがとうございます(笑)

> メールフォームにすることは可能でしょうか〜

簡単かつ若干強引な方法で良ければ。
今ちょっと時間取れませんので、後ほど書きますね。
コメント欄ではコード分量的に無理なので記事になると思います。

------ 追記

書きましたのでご参照ください ( ゚Д゚)ノ
http://vanillaice000.blog.fc2.com/blog-entry-537.html

2017/06/05 (Mon) 15:59 | EDIT | REPLY |   

きろろ  

ありがとうございます

えーとね、コメントが重複しているとか表示されて……
ちゃんとできました!
時間をおいてもう一度コメントいたします<(_ _)>

2017/06/05 (Mon) 23:26 | EDIT | REPLY |   

きろろ  

再度

メールフォーム、ありがとうございました!
黒背景で素晴らしいです!

メールフォームのお礼を兼ねて最近の出来事を書いて送信したら、1回目は不正なコメントですと表示されて、2回目は過去のコメントと重複していますと表示されて、これはいかん! と出直してまいりました。

顔の傷は長さ5センチ、深いところで1センチ(TT)
どんな転び方をすればそれだけ切れるのよ? 的なこけ方でした。
おかげさまで今は傷跡が残らないようにと、11月までテープを貼っています。

犬ですが。脾臓と乳腺の2箇所に腫瘍ができまして、どちらかは悪性かも?と言われて。
この2週間、細胞検査の結果を待ってました。最悪、悪性でも抗がん剤治療はしないと決めていたんです。
かわいそうですが、もう14歳ですから。延命のために辛い毎日は選択したくない。
もうね……
飲んじゃいけないと思いつつ、酒を飲んで不安を紛らわせていましたよ。

で、検査の結果!
両方とも良性でした! もうそれを聞かされた時、不覚にも泣いてしまった(TT)

って、ことできろろもわんこも元気になりました。

2017/06/06 (Tue) 00:49 | EDIT | REPLY |   

Akira  

To きろろさん

良性だったんですね。
良かったですー

うちも父が生前にガンを二度患いまして。
投薬は辛いんですよねぇ (´・ω・`)
それは動物でも同じだと…。
なので違ったのであればそれが一番。
ちなみに父は両方完治しましたけれど。
図太い家系なので ( ̄∀ ̄;)

あ、なんか父のこと思い出したら涙が(笑)

2017/06/06 (Tue) 14:14 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
利用上のお願い (3)
ご質問の前に (2)
よくあるご質問 (1)
FC2不具合情報 (15)
割と重要なお知らせ (34)
テンプレート (68)
ブログ内限定配布 (6)
リリーステンプレート早見表 (1)
テンプレート固有機能説明 (1)
配布終了・旧作 (5)
テンプレ不具合・修正など (57)
カスタマイズ (90)
SNS (5)
FC2ブログのあれこれ (21)
webのあれこれ (8)
装飾枠 (3)
装飾枠使い方とお願いごと (1)
雑記 (32)
洋楽 (103)
50 Cent (1)
Akon (1)
All American Reject (1)
Amy Winehouse (1)
Andain (1)
A Perfect Circle (1)
Aura Dione (1)
Balint Adam (1)
Billy Talent (1)
Bliss (1)
Boyce Avenue (1)
Breaking Benjamin (3)
Breathe Carolina (1)
Catfish And The Bottlemen (0)
Damien Rice (2)
Danny Elfman (1)
Dave Matthews Band (1)
David Lee Roth (1)
Death Cab For Cutie (1)
Diary Of Dreams (2)
Digital Summer (1)
Disturbed (3)
Drowning Pool (1)
Eminem (1)
Five For Fighting (1)
Flo Rida (2)
Fort Minor (1)
Get Scared (2)
Goodnight Nurse (1)
Gotye (1)
Hoobastank (1)
InMe (1)
Ivy (1)
Jamiroquai (3)
Jeniffer Lopez (3)
Jet (1)
Kelly Clarkson (1)
Kelly Sweet (0)
Kula Shaker (1)
Late night almuni (4)
Led Zeppelin (1)
Lenny Kravitz (0)
Limp Bizkit (3)
Linkin Park (1)
Lorde (1)
Lou Reed (2)
Magic! (1)
Maroon 5 (1)
Michiko (1)
Mindless Self Indulgence (1)
Mindy Gledhill (0)
Miss Jane (1)
Muse (2)
N.E.R.D. (1)
Nickelback (1)
Nirvana (1)
Oasis (1)
Panic! At The Disco (1)
Papa Roach (1)
Pharrell Williams (1)
Radiohead (1)
Rage Against The Machine (1)
Red (1)
Red Hot Chili Peppers (3)
Rhye (2)
Rumer (1)
Sade (1)
Sarah Brightman (1)
Shakira (1)
Sixpense None The Richer (0)
Soulja Boy (1)
Steven Cooper (1)
Sting (1)
Sum 41 (2)
Taio Cruz (1)
The Fratellis (0)
The Pretty Reckless (1)
The Weepies (1)
Three Days Grace (1)
Tom Waits (2)
Travie McCoy ft. Bruno Mars (1)
TRUSTcompany (1)
Ty Stone (1)
U2 (1)
Westlife (1)
未分類(個人的テスト等) (48)