Dark-Divine

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


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



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



TOP PAGE DEMO
LIST PAGE DEMO
ARTICLE DEMO
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代替画像を設定済みの方はそちらが優先表示となります。

デフォルト画像サンプル (縮尺掲載 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 0

Leave a reply

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