The other way round

Welcome to my blog

Romantique_duex

Romantique_duex_a.jpg


名称 Romantique_duex
カラム数 1 と 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー ドロワー (右横からスライド)
記事幅 可変 最大900px (内寸 840px)
サイドバー幅 固定 300px (内寸 260px)
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = RSS設定
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 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム 背景変更


valid-html5.png


更新履歴 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 ボタンを変更
・ スマホからのテキスト入力時に自動でズームされないよう調整
・ サイドバーにカレンダーとサイト内検索を追加
・ その他微調整

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

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


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

2015.4.3 申請致しました 承認されました (o'ω')ノ


TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ



仕様
・サイドメニューはドロワータイプです(右からスライド)
・トップページはメイソンリーレイアウト


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・サイドバーの形状変更
・トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更



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


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

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



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


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




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

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

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

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

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


サンプル



* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)
注意) ハンドルネームを判別しています 同じハンネの方がご訪問されると… ごめんなさい (割りきってお使いくださいね)





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


みなさんいつもありがとうございます ( ゚Д゚)ノ
関連記事

Comments 21

-  
管理人のみ閲覧できます

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

2015/04/03 (Fri) 23:21 | EDIT | REPLY |   
Akira  
@内緒の「き」さんへ

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

2015/04/04 (Sat) 02:06 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/04/04 (Sat) 23:50 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/04/05 (Sun) 00:28 | EDIT | REPLY |   
Akira  
@内緒の「き」さんへ

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

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

2015/04/06 (Mon) 14:04 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/04/07 (Tue) 14:10 | EDIT | REPLY |   
Akira  
@内緒の「H」さんへ

こんにちはe-257

>スマホ版サムネイル~

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

2015/04/07 (Tue) 14:27 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/04/07 (Tue) 17:24 | EDIT | REPLY |   
Akira  
@「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) 17:46 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/04/07 (Tue) 18:13 | EDIT | REPLY |   
Akira  
@「H」さんへ

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

2015/04/07 (Tue) 18:24 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/12/30 (Wed) 20:54 | EDIT | REPLY |   
Akira  
To Romantique 素材変更の件 内緒さん

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

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

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

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

2015/12/31 (Thu) 00:46 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/12/31 (Thu) 01:01 | EDIT | REPLY |   
Akira  
To Romantiqueの件 内緒さん

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

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

2016/01/03 (Sun) 16:07 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/05/06 (Fri) 22:16 | EDIT | REPLY |   
Akira  
To Romantiqueスマホ表示の件 内緒さん

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

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

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

2016/05/07 (Sat) 02:07 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/05/11 (Wed) 22:21 | EDIT | REPLY |   
Akira  
To Romantiqueページ送りの件 内緒さん

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

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

<!--permanent_area--><!--個別記事-->

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

<div class="posted_pager">

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

<div class="posted_pager_wrap">

続きまして検索

</div><!--/posted_pager-->

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

</div>

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

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

------

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

2016/05/12 (Thu) 00:22 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/05/12 (Thu) 09:50 | EDIT | REPLY |   
Akira  
To Romantiqueの件 内緒さん

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

2016/05/12 (Thu) 15:35 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
About this site
新テンプレ動作確認中。ご迷惑おかけします。
About me
テンプレのご質問の際には
カテゴリ > 利用上のお願い > FC2テンプレートご利用時のお願い
をご一読されましてからお願いします ( ゚Д゚)ノ
* メールでの返信をしておりません
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *