attention admin about comments trackbacks you may also like

Dark-Divine - FC2ブログテンプレート

2017年05月18日
テンプレート
7
HTML5 CSS3 RWD
Dark-Divineテンプレート

Dark-Divineテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ

最終更新 2019.11.2
  • コメント主のリンク表示用JS及びデザインの変更
名称 Dark-Divine
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大840px
サイド --- 260px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.3.1)
Font Awesome導入 あり(v5.6.1 CSS)
Lazyloading導入 なし
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Page Speed Insigtsスコア
固有機能 ・ 画像にドロップシャドウ
・ 見出し装飾(手書き風, ドッグイヤー, カール)
・ 動画縦横比固定
使い方詳細はARTICLE DEMOを参照
推奨カスタマイズ 左右カラム入れ替え, 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン タブレット スマートフォン
2カラム
その他ページ --- 1 or 2カラム
(デバイス幅依存)
1 or 2カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 右 サイドメニュー --- 右 or 下
(デバイス幅依存)
サイドメニュー --- 下
更新履歴 2019.7.31
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

カスタマイズ済みなど、再DLが困難な方はお手数ですが以下の手順で修正を行ってください。また、作業の前に以下の記事をお読み頂いて、修正する・しないを決定してください。

【重要】テンプレートの変更点2つについてお知らせ

既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...

①について

</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下の内容を 追加

<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->

続きまして <div class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め title}</script> のすぐ下にある </div> まで(この文字列も含む)を以下の内容に 変更

<ul class="comment-info">
  <li><%comment_year>/<%comment_month>/<%comment_day> (<%comment_youbi>) <%comment_hour>:<%comment_minute>
  <!--comment_edit--><li><a href="<%comment_edit_link>" title="<%template_edit_comment>">EDIT</a><!--/comment_edit-->
  <li><!--comment_author--><!-- <!--/comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">REPLY</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん">REPLY</a><!--/comment_author-->
  <li><a href="#comment-top"><i class="fas fa-arrow-up"></i></a>
  <li><a href="#comment_form"><i class="fas fa-arrow-down"></i></a>
</ul>

続きましてスタイルシート末尾に以下の内容を 追加

.comment-info li {
  display: inline-block;
}

.comment-info li:not(:last-of-type)::after {
  content: "|";
  margin: 0 .4em;
}
②について

#community" で検索するとhtml内に1箇所ありますので #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <div class="contents"> までを 削除

<!--/comment-->
<form action="./" method="post" name="comment_form" id="comment_form">

上記のような形になっていればOKです。

続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。この直近、2行上にある </div>削除

</form>
</article>
<!-- コメント投稿ここまで -->

上記のような形になっていればOKです。

続いてスタイルシート末尾に以下の内容を 追加

#comment_form {
  padding-top: 40px;
}
③について

<div class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<div class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->">

テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に

.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}

こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。

④について

.inner-contents, で検索するとスタイルシート内に1箇所ありますのでこの文字列を 削除。以下のようになっていればOKです。

.contents {
  padding: 20px 0;
}

続いてスタイルシート末尾に以下を 追加

.inner-contents {
  margin: 20px 0;
}

.inner-contents p {
  margin: 1.9em 0;
}

記事内でp要素を利用している方向けなので必要がある方だけどうぞ。

以上です。よろしくお願いします。

最終更新 2018.12.16
  • Font AwesomeのCSSバージョンを5.6.1にアップグレード
  • jQueryのバージョンを3.3.1にアップデート
  • レイアウト関連CSSの追加及び一部削除
  • 個別記事下ページ送りの仕様変更(軽量化含む)
  • 管理人コメントにプロフィールアイコンを自動出力
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 個別記事ブラウザサイドページ送り(カテゴリ間移動用)のスクロール動作を逆に調整(下スクロールで非表示、上スクロールで表示)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • ページ表示時のアニメーション秒数を調整(旧来よりも若干速めました)

不具合修正ではありませんので旧バージョンのままお使い頂けます。注意点がありますので以下の記事を参照した上でアップデートをご検討ください。

【重要】テンプレートのアップデートについて, Font Awesomeについて

既存テンプレートの一部に若干の修正を加えようと思っています。目的としては Google Adsenseのリンクユニットを記事内で掲載される方向けCSSの追加 Font Awesomeのアップグレード (注: SVGへの切り替えは無し) サイドメニュー部のinput要素のCSS調整 管理人コメントにプロフィールアイコンを自動出力 今回スピード対策は行いません。本当は同時に行うのが良いのでしょうが、今回は時間の都合もありますので次回以...

更新履歴 2018.1.12

メンテナンスを行いました。
詳細は以下のページでご確認ください。

Dark-Divineメンテナンスのお知らせ - テンプレ不具合・修正など

Dark-Divineテンプレートのメンテンナスを行いました。 公式配布ソースは修正済みです。 不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。...

更新履歴 2017.5.27

ページ内画像拡大のプラグインを Darkbox から Intense Images に変更しました。
詳細ページ
【Dark-Divine】画像拡大スクリプト変更のお知らせ 

本ページの内容は2018年12月18日メンテナンス以降のバージョンが対象です。

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

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

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
LIST PAGE DEMO
画像クリックでデモ画面へ
ARTICLE DEMO
画像クリックでデモ画面へ
DOWNLOAD
FAQ

カスタマイズのコツ

A few tips on customizing

1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。

2. ご質問の前に
カスタマイズされるであろうと想定される部位については 予めガイダンスを付けてあります
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。

3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。

お受けできないご質問・ご相談

I'm sorry I couldn't be of any help.

  • サイドバーの形状変更
  • トップページの表示タイプ変更(全文表示から要約表示へ変更、グリッド並び数変更 など)
  • レスポンシブを固定幅化
  • カラム数変更
  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

メタタグの設定 > OGP設定「有効にする」

メタタグの設定 > OGP設定「有効にする」

個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。

コメント設定 > コメンテーターの情報「記憶する」

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

サイドメニューのプロフィールについて

About profile picture and description in aside menu

本テンプレートにはサイドメニュー部にプロフィールをデザインの一部としてデフォルト導入してあります。公式プラグイン「プロフィール」を設定されている場合には重複しますので個人設定でプラグインを非表示にするか、テンプレート内のプロフィール関連htmlを削除してください。

【プラグイン非表示】
プラグインの設定

【テンプレートhtml削除ガイダンス目印】

注)プロフィール不要の方ここから削除

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

How to reverse the direction of rows

#main-container { で検索されますとCSSソース内に2箇所ヒット、最初のものが対象です。この括りの padding: 40px 60px 80px; の直下に flex-direction: row-reverse; を追加。

続きまして #primary { を検索、CSS内で4箇所ヒット、やはり最初のものが対象です。この括りの margin-right: 40px; に対し緑部分 rightleft に変更。
以上2手順です。

全体幅調整の仕方

How to increase or decrease width of container

デフォルトは全体像の最大横幅を 1300px に設定しています。1300 で検索して頂きますと、CSSソース内に 3箇所 ありますので、3箇所全てを希望の数値(同数値)に変更してください。

ナビゲーションについて

Important thing to be careful when adding links to navigation

● 管理画面への誘導について
Admin という単語が日本では馴染みが薄いようなので。
FC2ブロガー「ではない」方がクリックするとログイン画面に遷移するという点も考慮して、Log in に変更しました。
もちろんカスタマイズとしてテキスト内容を変更しても問題ありません。ご自身(と閲覧者)にとってわかりやすいと思われる単語をお選びください。

● ナビゲーション内リンクについて
ナビゲーション内容の追加やリンクテキストの日本語置き換えをされます方は 各リンク要素が下の行へ繰り越さないよう留意してください。
レスポンシブデザインですのでパソコンでの作業を一定の幅だけで行わず、マウスでブラウザ幅を拡大・縮小しながら見た目を確認してくださいね。文字数が多い、リンク数が多い、などが原因で内容が下に繰り越してしまう場合には

navi breakpoint

で検索されますとhtml, CSS各ソース内に合計2箇所ヒットします。それぞれの

(max-width: 820px)

緑の部分 820 を 大きな数字に変更 してください。この処理でデフォルト設定よりも早い段階で折りたたまれるようになり、レイアウトに影響を与えません。

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

該当部位検索

注)予備リンク

カスタマイズ

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

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

ドミナントカラー

Dominant colors

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

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

削除可能なJSについて

Delete specific JS if you want to

特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容 です。以下の2項目に当てはまる方は削除をおすすめします。

【FC2検索バーを利用しない人は削除】

<!-- 注)FC2検索バー非表示の方ここから削除可 -->

各々上記を目印にガイダンスに従って削除。

ご質問・ご相談時のお願い

Cautions before asking for something.

ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には

・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除

上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。

また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。

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

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(7)

There are no comments yet.

きろろ

2017/06/05 (Mon) 02:50

お久しぶりでございます

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

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

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

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

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

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

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

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

Akira

2017/06/05 (Mon) 15:59

To きろろさん

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

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

---------

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

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

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

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

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

------ 追記

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

きろろ

2017/06/05 (Mon) 23:26

ありがとうございます

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

きろろ

2017/06/06 (Tue) 00:49

再度

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

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

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

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

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

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

Akira

2017/06/06 (Tue) 14:14

To きろろさん

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

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

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

2017/10/03 (Tue) 03:48

遅くなりました。

早朝にご無礼致します。
赤字表示の件、納得しました。
カスタマイズしてみます。

返信が遅くなり、申し訳ございませんでした。

Akira

2017/10/03 (Tue) 17:23

To 蒼さん

お返事ありがとうございます。
はい。カスタマイズ頑張ってください。
お疲れ様です

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

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧