Romantique_duex - FC2ブログテンプレート「配布終了 2019年2月6日」

テンプレート配布終了・旧作

2015/04/03

2021/10/12 21

vanillaice (Akira)

HTML5 CSS3 RWD

配布終了致しました。ご利用ありがとうございました。

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

最終更新 2017.9.22

SSL化に伴うURL正規化

名称	Romantique_duex
動作確認済みブラウザ
トップページ記事並び	要約表示タイプ
記事幅	メイン --- 最大840px サイド --- 260px
記事内で使える見出しレベル	h3からh6まで
推奨カスタマイズ	非推奨
ライセンス	Required 必須事項・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by) Permitted 許可事項・Modification 改変・Personal Use 個人利用・Commercial Use 商用利用 Forbidden 禁止事項・Distribution 再配布・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考

パソコン	タブレット	スマートフォン

1カラム	1カラム	1カラム
サイドメニュー --- 右ドロワー	サイドメニュー --- 右ドロワー	サイドメニュー --- 右ドロワー

過去の更新一覧

更新履歴 2017.1.25

・ SNSシェアリンクのUTF-8エンコード
・新着記事にNewマークを追加
参考記事
SNSシェアリンクのエンコード

更新履歴 2016.11.4

メンテナンス
・全体レイアウトの再調整
・ドロワープラグインの変更
・記事幅の拡大
・関連記事サムネイル整形
・ベンダープレフィックスの整理

本メンテナンスに伴い記事内容を大幅に変更しましたことをご了承ください
お手元のソース内容と記事内容とが合致しない場合には再DLをご検討くださいますようお願い致します

更新履歴 2016.1.10

メンテナンスを行いました
詳細は以下の記事をご参照ください

「Decoy」「Life-is」「Noir」「Romantique_duex」メンテナンスのお知らせ

更新履歴 2016.1.10

全体を微調整しました(SEO対策含む)

更新履歴 2015.9.22

iOS9 リリースに伴い　スマホ・タブレットではColorbox起動させないよう修正しました
~~Colorbox適用版は記事の半ほどに掲載しています~~
配布終了致しました

更新履歴 2015.9.9

・公式化に伴うOGP削除

テンプレ付随のSNSボタンをご利用の方は　ブログ個人環境のメタタグ設定をお願いします

更新履歴 2015.8.28

・ FC2検索バーがタブレットでレイアウトを壊す問題の対処
・ページtop/ bottom ボタンを変更
・スマホからのテキスト入力時に自動でズームされないよう調整
・サイドバーにカレンダーとサイト内検索を追加
・その他微調整

リリース済テンプレ随時更新のお知らせ

ご迷惑おかけします　よろしくお願いします

ろまんてぃくぅどぅ承認されました (o'ω')ﾉ

TOP PAGE DEMO

ARTICLE DEMO

・サイドバーの形状変更
・トップページの表示タイプ変更(要約表示から全文表示へ変更など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更
・テンプレートと無関係なプラグインの導入

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

メイソンリーレイアウトについて

トップページに採用しているのは「メイソンリー」と呼ばれる要素をレンガ状に配置していくレイアウトで
見た目優先です
美しい並びを実現させるために時系列並びを重視しません
左から右へ上から下へ… といった具合に
必ずしも時系列を守って記事が並べるわけではないという特徴を持っています
この点をご理解頂いた上でご利用をご検討ください

またブラウザ縮小やデバイス変更などで画面幅が小さくなり記事が縦一列に並んだ際には
メイソンリーを破棄して時系列順序で並べ替えを行います

管理人コメントと訪問者コメントを分ける方

デフォルトはグレー背景アイコン。

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

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

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

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

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

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

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

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

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

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

Comments 21

2015/04/03 (Fri) 23:21

管理人のみ閲覧できます

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

Akira

2015/04/04 (Sat) 02:06

@内緒の「き」さんへ

まとめとして記事を出しておきますね。
youtubeの件は少しお待ちください。

2015/04/04 (Sat) 23:50

管理人のみ閲覧できます

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

2015/04/05 (Sun) 00:28

管理人のみ閲覧できます

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

Akira

2015/04/06 (Mon) 14:04

@内緒の「き」さんへ

お返事大変遅くなりました　(*_ _)
こちらでまとめますね。

クラス付与はそのテンプレ毎に「包括する要素」の名称が異なりますので、毎回同じ記述というわけにはいかないんですよね。
そこがちょっと面倒かな。
既に設置できたようなので良かったです。
お疲れ様でした

2015/04/07 (Tue) 14:10

管理人のみ閲覧できます

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

Akira

2015/04/07 (Tue) 14:27

@内緒の「H」さんへ

こんにちは

>スマホ版サムネイル～

というのは『画像』のことでお間違いないでしょうか。
こちらの環境(iPhone4～6plus)ではちゃんと表示されております(Hさんのページもサムネイル表示されております)が、Hさんのお使いのスマホの機種名を教えて頂けると助かります。
念のため、全タスク終了・電源ON/OFFでメモリの開放を試して頂ければ、と思います。
よろしくお願い致します　(*_ _)

2015/04/07 (Tue) 17:24

管理人のみ閲覧できます

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

Akira

2015/04/07 (Tue) 17:46

@「H」さんへ

とんでもないです。
ご不便おかけして申し訳ありません。

考えられるのは、当該機種(OS)がもしかしたらz-indexというタグを理解できていないのかもしれません。
事前にテンプレの複製をお取り頂きまして、以下の手順をお試しください。
変更するのは管理画面『下』のボックス内文字列CSSソースです。

キーボードのCtrl＋Fキーで文字列検索窓を出しましたら、以下の文字列をコピペで探してください。

@media screen and (max-width:560px) {

そのすぐ下に

body {
background: url(http://blog-imgs-71.fc2.com/v/a/n/vanillaice000/bgleaves14kb_for_sp.jpg) fixed center top repeat-y; /* 記事背景(デフォルト葉っぱ) */
}

という箇所があると思います
その下に以下を付け足してください

.shadow {
box-shadow: none;
}

.shadow img {
z-index: 1;
}

#clock {
z-index: 10;
}

この3つです。
画像に内向きのシャドウがつけてあるのですが、スマホ表示だけそれを取り除く処理です。
ちょっとだけ見た目が寂しくなりますが、気になるほどではないと思います。
それでも改善が無い場合には再度お知らせ頂けると幸いです　(*_ _)

2015/04/07 (Tue) 18:13

管理人のみ閲覧できます

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

Akira

2015/04/07 (Tue) 18:24

@「H」さんへ

やっぱりそれでしたか　(´・ω・｀)
これは該当する方がいらっしゃるかもしれないですよね。
こちらこそお勉強させて頂いてます。
ありがとうございます
お手数おかけしました。お疲れ様でした

2015/12/30 (Wed) 20:54

管理人のみ閲覧できます

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

Akira

2015/12/31 (Thu) 00:46

To Romantique 素材変更の件内緒さん

各素材の変更自体はお好きにして頂いて構いませんが、
薔薇とその下のレース、こちらはかなり複雑な内容になっています。
素材の縦横サイズが変わる場合にはアスペクト比を再計算する必要が出てきます。
レースと薔薇はくっついて一枚の画になっているわけではなく、別々の画像が重なっています。
あとは素材の形状によっては直下(重なり順ではなく見た目上下)のテキスト(Diaryなど)に被ってしまうことも。
素材変更の条件
・レース/ 薔薇の変更画像は共に透過PNGであること
・デフォルト画像とほぼ縦横のサイズが同じものであること
上記は私からの変更条件ということではなく、物理的条件といいますか。
そうしないとレイアウト的に難しいですよ、という意味です。

アイテム側へのシャドウは画像自体につけてください。
透過PNGなど複雑な形状のものにCSSでシャドウというのは「できない」と思って頂いた方が良いです。
普通にCSSシャドウをかけてしまうと画像の四辺に影がついてしまいます。

現在パソコンを使える環境下におりませんので、ご質問への返答がちょっと雑になるかもしれません。
ソース内容はもちろん確認しながらですが、一応お伝えしておきます(笑)

まずは一度お手持ちの画像とURLを差し替えて試してみてくださいませー。

2015/12/31 (Thu) 01:01

管理人のみ閲覧できます

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

Akira

2016/01/03 (Sun) 16:07

To Romantiqueの件内緒さん

お返事大変遅くなりました　(*_ _)

はい。色々試してみてくださいませ

2016/05/06 (Fri) 22:16

管理人のみ閲覧できます

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

Akira

2016/05/07 (Sat) 02:07

To Romantiqueスマホ表示の件内緒さん

ありがとうございます
そしてご迷惑おかけしております　(*_ _)

記事内に記しております
「Android一部機種で画像が表示されない現象」
というのはまさにXperiaのことでございます　(´・ω・｀)
Android勢の中でもXperiaは何故かとてもグリッチが多いんですよね。
z-indexのネガティブ値が正しく解釈できないようです。

記事末尾
追記 2015.4.7 重要
の部分をお読み頂きまして修正の方をお願い致します。

2016/05/11 (Wed) 22:21

管理人のみ閲覧できます

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

Akira

2016/05/12 (Thu) 00:22

To Romantiqueページ送りの件内緒さん

こちら完全に私の設定ミスです。
申し訳ございません　(*_ _)
公式の方は上書き修正しておきました。
既にカスタマイズをしておられましたら以下の通りの手順をお願いします。
手順数2です。

① htmlソース修正
Ctrl+Fキー検索



上記を目印にして頂きますと、その2行下に

<div class="posted_pager">

という項目があります。
まずそのすぐ「上」に以下を追加。

<div class="posted_pager_wrap">

続きまして検索

</div>

このすぐ「上」に以下を追加。

</div>

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

.posted_pager_wrap {
position: relative;
z-index: 100;
}

------

以上です。
大変お手数とご迷惑おかけします　(*_ _)

2016/05/12 (Thu) 09:50

管理人のみ閲覧できます

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

Akira

2016/05/12 (Thu) 15:35

To Romantiqueの件内緒さん

貴重なお時間頂いてしまいました。
ごめんなさいね　(*_ _)
こちらこそありがとうございます

「配布終了・旧作」カテゴリの一覧を見る