Quiet (配布終了 2018年8月6日)

Quiet (配布終了 2018年8月6日)

テンプレート 配布終了・旧作
2016/03/30
26
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS3RWD

2018.8.6 配布終了致しました

長い間ご利用頂きありがとうございました

Quiet

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

最終更新日 2017.1.25

・ SNSシェアリンクのUTF-8エンコード
参考記事
SNSシェアリンクのエンコード

名称 Quiet
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大920px
サイド --- 270px
固有機能 画像ドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大
見出しデザイン
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 背景画像変更, 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 ・エンターページあり。
valid-html5.png
Related post

Comments  26

cscs
2016/04/05 (Tue) 00:13

いつもお世話になります

このテンプレート審査通過していました
エンターページ無しのファイルの掲載をお待ちしていますm(_ _)m

きろろ
2016/04/05 (Tue) 01:37

エンタページ

の件でお伺いします!
リンクを増やしましたw
こんな感じです

<li class="wow slideInRight"><a href="<%url>?page-0.html" class="underline-reveal">HOME</a><!-- 注)ここはトップページへのリンクです -->
<li class="wow slideInRight" data-wow-delay=".1s"><a href="#" class="underline-reveal">Writing</a>
<li class="wow slideInRight" data-wow-delay=".2s"><a href="#" class="underline-reveal">Work</a>
<li class="wow slideInRight" data-wow-delay=".3s"><a href="#" class="underline-reveal">Book</a>
    <li class="wow slideInRight" data-wow-delay=".4s"><a href="#" class="underline-reveal">Music</a>
<li class="wow slideInRight" data-wow-delay=".5s"><a href="<%server_url>control.php" class="underline-reveal">ADMIN</a><!-- 注)ここは管理ページへのリンクです -->

で、Bookだけがなぜか飛び出して表示されますw
ほかはちゃんと同じ位置に盾に並んでいるのですが。
お暇な時でかまいません、よろしくお願いします。

vanillaice (Akira)
Akira
2016/04/05 (Tue) 02:13

To cscsさん

お知らせありがとうございます。
掲載致しました :)

Akira
2016/04/05 (Tue) 02:18

To きろろさん

原因は

Book</a>

の後ろ ないし
Music用の

<li class 〜省略

の前のいずれかに半角スペースの羅列があるからです。
ソース内の半角スペースは、タグの間にあるものは見た目に影響します。
タグの間 ↓

<div>ここのこと</div>

タグの外であっても インライン要素や displayのinline-block
そして今回の<li>は半角が影響します。
修正は半角スペースの削除。

<li>要素やインラインブロック指定要素は難しくはありませんが、扱いが繊細かもしれない (´・ω・`)

きろろ
2016/04/06 (Wed) 00:06

To Akiraさん

ありがとうございます!(^^)!
直りましたw

コピペするときに、見た目を整えようとせずに
普通に左詰めにコピペすれば良かったんですねw

またまた今更なことを伺ってすみませんでした<(_ _)>

Akira
2016/04/06 (Wed) 14:40

To きろろさん

エディターを利用すると滅多に起こりませんが(絶対ではない)、ブラウザ画面上で作業すると意図せぬ半角ができてしまうことが。

修正できたようで良かったです。
お疲れ様でした

きろろ
2016/04/06 (Wed) 16:03

エディター……
そうだ、ちゃんとhtml用のエディターがあったのに……
横着をしました(ё_ё)
次回から必ず、エディターを使ってカスタマイズいたしますσ(^◇^;)

レス不要です<(_ _)>

きろろ
2016/04/06 (Wed) 16:11

むむ??

ホームのテンプレート、次回の新作ですか?
シンプルだけど、すっごいきれい!
サムネイル画像が、左右交互に配置されているのって
今までなかったタイプじゃないですか?
さすがだなぁ……e-349

Akira
2016/04/08 (Fri) 02:00

To きろろさん

はい。次回予定でございま ( ゚Д゚)ノ
いつもありがとうございます

aki
2016/04/08 (Fri) 20:48

素敵〜

いつもAkiraさんのテンプレートにお世話になってます
このテンプレート素敵ですね…
個人的にサイトっぽく見えるテンプレートが好きでその中でもこれはかなりツボです…!
メッセージを送らずにはいられなかったです。
スクロールで変化するのも遊び心がありますね〜
いつも素敵なテンプレートをありがとうございます。
返信不要です。

Akira
2016/04/10 (Sun) 13:36

To akiさん

励みになります〜 ( ゚∀゚)

全然関係ないけど管理画面からコメントを拝見するのに、間違えて「拒否」押しちゃって超焦った ( ̄∀ ̄;)
ちゃんと解除できてますよね?
大丈夫かしら ( ̄∀ ̄;)

今後も精進致します。
ありがとうございます

abo
2016/04/12 (Tue) 03:17

twitterシェアボタンについて

こんばんわ、Akiraさん。
いつもお世話になります。
不器用すぎるあいすびーばーaboです。
グリム楽しいですよねー♪

失礼しました・・・つい、書きたくなってしまって。


すみません、本題です。
Ivoryからこちらへ変えてみたのですが
トップヘージや、カテゴリー別のページで表示される画像についているTwitterシェアボタンを押すと空白ページに飛んでしまいます。他のFBやTBやコメントボタンは大丈夫なのですが。

エンターページなしで使用しています。
理由わからず、すみません。



あと、記事幅は変更可能でしょうか?
最大幅がIvoryくらいが理想なのですが。


お時間ある時でかまいませんので、よろしくお願いします。

Akira
2016/04/12 (Tue) 07:44

To aboさん

アイスビーバー キタ━━━(゚∀゚)━━━!!!
彼はもう、とっても愛されキャラ(笑)
しかしシーズン4が気になる ( ̄∀ ̄;)
DVD買いたいけど娘が吹き替え版じゃなきゃヤダって言う ( ̄∀ ̄;)

で、Twitterの件。
マジですか ( ̄∀ ̄;)
ちょっと今から確認して追記しますね。
ご面倒おかけしますー!

-------- 追記

以下の環境で検証しました。
私の方では症状を確認することができませんでした。

Windows 10
・Google Chrome
・Firefox
・Opera
・Microsoft Edge
・IE11

Mac OS X Yosemite El capitan
・Google Chrome
・Firefox
・Vivaldi
・Opera
・Safari

で、Twitterサイドの方を調べましたらば、2016.4.9から断続的にサーバー障害が発生しているようです(現在も継続中?)。
もしかしたらそれが原因かしら?

http://downdetector.jp/shougai/twitter/mappu/

再度ご確認頂けると助かります。
事前にキャッシュの削除やクリーニングなんかされたほうが良いかもです。

----- 別件(記事幅の件)

Ivoryの記事幅が実質660pxで結構小さいんですよね。
Quietの方が920pxですので「縮小」ということでお間違いないでしょうか。
Ctrl+Fキー検索

#float-container

4つヒットしますのでそのうちの2つ目です(CSSソース内にあります)
詳細

#float-container {
margin: 0 auto;
width: 90%;
max-width: 1300px;
padding: 0 0 80px;
}

赤字部分を1100にされますと記事幅が720pxになります。
トップページレイアウトを考慮するとこのあたりがおすすめ。
目視確認しながら調整をお願いします。
それから、このままだとブログタイトルの位置が左寄りで気になるかもしれません。
逆に気にならないかもしれません(笑)
ですから以下は任意で調整をお願いします。
Ctrl+Fキー検索。

#blog-name-container

CSSソース内に一箇所あります。
詳細
#blog-name-container {
margin: 0 auto;
width: 90%;
max-width: 1300px;
padding: 70px 8px;
}

赤字部分を記事幅修正で指定した数値と同じにされるとほぼ同じ位置になります。
よろしくお願いします

abo
2016/04/13 (Wed) 01:13

ありがとうございます

こんばんわ、Akiraさん。

遅くなりすみません。

わたしもシーズン4・・・首がきりんになるくらい伸びきって待ってる人間です~。もうババンと放送して欲しいです。


で。すみません・・・
さっそくチェックしてみたのですが、本日もやはりTwitterシェアのページに飛ばないようなのです。もしかして私が何かしてしまったのかも・・・なので、もう一度インストールし直してみますね。

お手数かけて、すみませんです。


記事幅もありがとうございました。
こちらはバッチリです。


それから・・・ですが、Ivoryの引用タグの装飾が気に入っているので、こちらでも使用してよろしいでしょうか?

Akira
2016/04/13 (Wed) 10:59

To aboさん

わー ( ̄∀ ̄;)
この件もお伝えすべきことが(引用のこと)

ちょっと後ほどまた参ります。
そしてGrimm関係でもショックなことが!!!(笑)

---------

実はですね、Ivoryのblockquote記号が文字化けしてたんです ( ̄∀ ̄;)
修正済みですが、aboさん気づいてくれたかなー と思っておりました。
なんかアルファベット出てませんでしたか。
なにこれ!ちょっとかっこいいけどなに!
みたいな((((笑)

もしあれでしたら、簡単に変更できますのでやってみてください
Ctrl+F(2箇所)

blockquote:before

それから

blockquote:after

この2箇所にそれぞれ

content: "記号";

という箇所がありますので、記号の部分に表示したい文字を入れます。
アルファベットでも良いですし、記号でもOK。
日本語・漢数字もOKですが、すっごい文字大きいと思う (´・ω・`)

Grimmなんですけど聞いてくださいよー。
昨日何か情報ないかとFBの公式にいいねしたんです。
そしたらアメリカ人男性フレンドさんが
「グリム好きなの?まさかあんな展開になるなんてねー!」
とか言っちゃって、すんごいネタバレ書かれたんだけど(笑)
えっちょっと待って..まだ見てな...ってゆーか、えぇ?!?!
みたいな((((笑)
しかもシーズン4どころかたぶん5の内容だわ。あれ。
ひどいじゃん!!!(笑)

abo
2016/04/14 (Thu) 02:11

記事タイトルでした

こんばんわ、 Akiraさん。

いろいろとご丁寧にありがとうございます。


Twitterシェアの件は記事タイトルが原因のようです。
わざわざ記事に書いてくださってありがとうございます。
そうだったのか~と・・・ホント知らないとは・・・ですね。
これは、もう・・・過去記事は手直しできないので泣くしか・・・




そして、引用の件。
これ、自分の中で大うけでした(^◇^)
文字化けしてたんですね~。
(意味わからないけど)これ超カッコいい~と思ってました。
もうホント自虐ネタになりそう。
でも気に入っているので文字変えて使うかもです。




そしてそして
本題?GRIMMですよー。
あれ・・・ですよね?
へくせんびーすとがらみのニックの家族的な?・・・みたいな?
シーズン3のラストの流れから、そうきてそうなって・・・ええ~!・・・みたいな?
ネタバレ見ないようにしてるんですけど、シーズン6更新のニュースに浮かれて・・・うっかり踏んでしまいました。
6月からシーズン4が始まりますが(スパドラで)これ、いっきにシーズン5まで見ないと・・・とジリジリな気持ちです。

実はグリムのシーズン3を待つ間、寂しさを紛らす為に始めたブログなんですー。
この勘違いの「引用」の件も、グリムの記事にぴったり・・・と気に入ってた次第・・・。
お恥ずかし~。

Akira
2016/04/14 (Thu) 08:31

To aboさん

タイトルでしたかー。
もしかして...。と思ったもので (´・ω・`)
これは言われないとわからないですよね。
FC2のタイトルがどんな仕様になっているか、ってのもユーザーに細かく説明があるわけじゃないですし。
なんにしても原因わかって良かったです ^^;
あと、引用の件もごめんなさいね(笑)

Grimm辛いなー ( ̄∀ ̄;)
身悶えするぐらいですよ。やぐってるよ((((笑)
展開についても、全米のみなさんは納得しているの??
そして私に納得させられるの?
って感じ

aboさんはGrimm大好きさんだったんですね。
書いた甲斐があったってもんです(笑)
いつもありがとうございます

aki
2016/04/17 (Sun) 13:10

FC2メールフォームのタグについて

こんにちは、以前にこちらにコメントさせてもらった者です、
コメントちゃんと見られてますよ〜、ありがとうございます!

さっそくこの素敵テンプレートお借りしているのですが
ちょっと教えて欲しいことがあって再び参りました。

FC2メールフォームを使っていてそのタグをそのまま貼り付けているのですが、
メールフォームのレイアウトが崩れてしまうみたいです。

アカマイ広告、一ヶ月広告が出ている状態のブログだとフォームのレイアウトが崩れているので
広告が悪さをしているのかな…と思っているのですが
これは何か対策があるでしょうか?

あとアカマイ広告、一ヶ月広告が出てない状態のブログだと
フォームの崩れは大丈夫なのですが
メールフォームの入力項目タイトル名(名前、メールアドレス、内容…など)が表示されていないようです。

こちらも合わせて教えていただけたらうれしいです。


Akira
2016/04/17 (Sun) 14:43

To akiさん

ありがとうございます ( ゚Д゚)ノ

メールフォームは公式のものでしょうか。
公式以外(つまり共有)のプラグイン内容については言及できませんので先にごめんなさい (*_ _)
公式である、と仮定しまして
製作専用の別ブログの方で広告が出ていますのでそのスクショです ↓

アドブロックが効いているとき
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/f924riqfr4q_zpsja76gbjh.jpg

アドブロックを解除したとき
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/9ai4uo3q4_zpseig9x4qm.jpg

いずれもレイアウト崩れというのは確認できませんでした。
オーバーレイが原因で... というのは考えにくいので、
① メールフォームのソースに問題がある
② 特定の記事やプラグインのソースに問題がある
このいずれかではないかと思います。

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-292.html

手順に沿って原因を特定して頂きまして、特定した原因の修正方法がわからなければこちらへソース内容をお伝えください。
まずは特定作業の方をお願いします (*_ _)

aki
2016/04/17 (Sun) 21:55

お返事ありがとうございます!

Akiraさん

丁寧な検証ありがとうございます…!
※こちらURL超過でコメント書き込みエラーになったので文中のURLは全てhを省いて記述してます。


そしてお手数おかけしてすみません、
メールフォームのレイアウト崩れについては
入れていたプラグインを消したら崩れなくなったので
Akiraさんのおっしゃる通り原因は広告ではなかったようです。
お騒がせして本当に申し訳ないです。

私の使っていたメールフォームは公式プラグインのメールフォームではなく
フォームをカスタマイズできるFC2メールフォーム(ttp://form.fc2.com/)のタグを記事本文に入れる方法だったのですが
とにかくプラグインが干渉していたようです。
Akiraさんに教えてもらってFC2ブログのプラグインでメールフォームがあることを知りました!(遅い…)


ただ、FC2メールフォームの項目が表示されないことについては
プラグインや記事の干渉ではなさそうです…

検証してみたブログ→(ttp://akki0akki.blog.fc2.com/blog-entry-1.html)
書いた記事はFC2メールフォームのタグを本文に入れた1記事のみ
テンプレには手を加えていません。

同じ条件で、Akiraさんの他のテンプレートでその記事を確認してみると、
FC2メールフォームの項目も問題なく表示されるようです↓

・BetweenNeo→(ttp://akki0akki.blog.fc2.com/?no=1&style2=BetweenNeo)
・Life-is→(ttp://akki0akki.blog.fc2.com/?no=1&style2=Life-is)
・Alternative→(ttp://akki0akki.blog.fc2.com/?no=1&style2=Alternative)

ちなみに検証したテンプレはAkiraさん作の私のお気に入りテンプレ達です(*´ω`*)


貼ったタグはデフォルトのタグをそのままコピペしたものなので
もしかしたらFC2メールフォームのタグとQuietとの相性の悪さがあるのかなあと思いつつ。
タグのソースは↓(文字化けがちょっと心配ですが…、idの数字は一応●●に変えました)

<!-- FC2RetalForm Start -->
<script type="text/javascript" src="http://form1.fc2.com/parts/index.php?id=●●"></script>
<noscript><a href="http://form1.fc2.com/form/?id=●●" target="_blank">[FC2メールフォーム]</a></noscript>
<!-- FC2RetalForm End -->



Quietにメールフォームをつけるのなら記事ではなくプラグインにしようかなあと思っているところです。
なので一応のご報告のみです…!

私の早とちりでお手数かけて本当にすみません
ご丁寧にありがとうございました。

Akira
2016/04/17 (Sun) 22:52

To akiさん

こういうサービスがあるんですね。
私こちら存じませんでした(笑)

今ソースを拝見しましたけれども、これはJSで勝手に出力される類のものですよね。
なんか変なソースなんだけどな ( ̄∀ ̄;)
「お問い合わせ」
という項目ありますよね。
表示されてないけれど。
ここのタグが
<li>
なんですよね。
この<li>要素というのは<ol>あるいは<ul>と一緒に使うべきものなんだけども、
ソース中にいずれも存在しません。
え。なにこれ
<div>の子要素としていきなり<li>
これシンタックスエラーなので崩れますね。ええ(笑)
謎の<li> (´・ω・`)

でもってこのJSを削除するとバリデート100点なのですが、JSから吐き出されたコードが入るとエラーが3点。
あとダブルスラッシュのコメントアウトもこれアカンのじゃないか (´・ω・`)
なんでこうなったかはちょっと全体ソースを絡めないとなんとも。
ただこのJS自体あんまりよくないのは良くないです。
(<style>〜</style>をhtml内に書いてしまう点等 html5では厳禁です。)

公式メールフォームで代用できるようでしたらそちらをおすすめします。
なんかすっきりしなくて申し訳ない ( ̄∀ ̄;)

------

いやー。これやっぱりおかしいね。
<div><li>内容</li></div>
これがたくさんある。
これはhtml的にダメですね (´・ω・`)
これ逆に今まで崩れなかったのは近接内容に<ul>を使っていないからだと思われます。
Quietは記事タイトル下で<ul>が2箇所あります。
<li>を使う時はこういう入れ子になってないといけませんね ↓

http://qiita.com/mikuhonda/items/d89c3df38dc6e3175fde

うーん。謎ソース(笑)
これたぶん太古の昔にIEで表示させることだけを目的に組んだ内容と思われます。
実際IE(古いやつ 7とか8とか)ではこれでフツーに表示されてしまいます。

-
2018/05/30 (Wed) 14:53

管理人のみ閲覧できます

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

2018/05/30 (Wed) 16:06

拍手の件

上で先ほど質問したものです。自己解決できました。ありがとうございます。

vanillaice (Akira)
Akira
2018/05/30 (Wed) 21:49

To 栞さん

解決済みということで、お疲れ様でした

hige
2018/07/14 (Sat) 20:43

リンクが

今日、テンプレート一覧のページを見ていたのですが
https://vanillaice000.blog.fc2.com/blog-entry-283.html
FC2共有テンプレート一覧(表示タイプ別)
のページのテンプレートQuietへのリンクが変な気がしますが。
どうなんでしょう。

vanillaice (Akira)
Akira
2018/07/15 (Sun) 03:20

To higeさん

higeさん、こんばんは (o'ω')ノ

マジですか。ご指摘助かります。
明日やろうかな。もうパソコンの電源落としちゃったので ^^;
いつもありがとうございます