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

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

最終更新日 2017.1.25

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

パソコン	タブレット	スマートフォン
2カラム	1 or 2カラム (デバイス幅依存)	1カラム
右サイドメニュー (デフォルト)	下 or 右サイドメニュー (デバイス幅依存)	下サイドメニュー

過去の更新一覧

更新履歴 2017.1.13

・RSS新着サムネイルを削除しました
関連記事
Google Feed API 廃止に伴うテンプレートの一部レイアウト変更

更新履歴 2016.9.9

リストマーカーの位置を調整しました
参考記事
list-item横の隙間について

プラセンタ注射打ったら
「色白くなった？」
と言われた あきらでございます　(･ω･)ゞ
しかし値段が高い 続かんわい芸能人じゃあるまいしっ！！！

くわいえっと
エンターページ(エントランス)付き

FAQ

お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)

・エンターページカスタマイズ全般
・サイドバーの形状変更
・トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更
位置変更はこちらを参考にどうぞ　↓
テンプレートのカラム位置変更

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

こちらカスタマイズ非推奨ですー　(´・ω・｀)
自力で削除しようと思うと変更箇所がてんこもりですので
エンターページ無しのhtmlファイルを記事末尾に掲載します(後述)

リンク先設定とテキスト(ブログ説明文)編集だけは確実に行ってください
リンクの増減についてはCtrl+Fキー検索(htmlソース内にあります)

注)エンターページからのジャンプ先設定

上記が該当箇所です
ガイド内容がわかりにくければお尋ねください

カスタマイズ非推奨ですが(文字の大きさやアイコン等) 背景画像の変更は容易です
画像のサイズや縦横比は特に条件ありませんが
拡大率を考慮して横1200以上のものが理想的です
もちろん事前に容量は削減しておいた方が良いですね
こちらの該当箇所はCSSソース内にあります

注)エンターページ背景指定変更は url(ここにアドレス)

画像の表示位置合わせについては下記リンク先参照のこと　↓

DaisyGreen


サンプル






注意ってゆーか...(笑)
クリック(パソコンではスクロール含む)を促すために以下のようなアイコンを設けています



これね パソコンではこれで良いんですけど スマホ！
無料版をお使いの方は直下に広告が居座ってるわけですよ
まるで広告のクリックを誘導しているような...(笑)
えー！ 思わんかな？ どう？
すみません 今回はこれでー　(´・ω・｀)　←
作った後に気づきましたわ (∩･∀･∩) テヘ





エンターページと同じ画像がフッター付近に設定してあります
変更はCSSソース内

注)エンターページ以外のフッター背景変更は url(ここにアドレス)

が該当箇所です
エンターページ背景変更と同じ要領で差し替えをお願いします
画像上部がフェイドアウトするようになってます
画像を変更されましても同じ表示を踏襲します
画像サイズは縦横比不問 エンターページ背景と同じく横1200px以上が望ましいと思います
サイズが大きいので画像容量の削減は事前に行ってください


サンプル

注)新着サムネイルスライダー不要の方・鍵つきブログの方ここから削除

htmlソース内に2箇所
CSSソース内に1箇所の
計2箇所出てきますのでガイドに従ってください

新着の表示件数は5件にしてあります
増減のカスタマイズ(特に増やす方)は今回大変ですのでこのままお使いになることをおすすめします(笑)
もちろんご自分でできる という方はその限りではありません





記事内の然るべき箇所に画像が存在しない場合に表示されるサムネイルとしての「No image」画像ですが
ご要望頂きまして
「画像の編集ができないよぅ　(/_;)」
みたいな　(´・ω・｀)
特に今回はテキスト部分が白抜きになって背景画像がその部分だけはっきり見える加工になってます
これ自分で作れって酷ですよねぇ　(´・ω・｀)
そして同じフォントを所有しているとは限らない という問題も
というわけで画像編集不要にしておきました
画像を差し替えるだけで勝手にマスクとテキストが合体します
テキストは白抜きです
逆に画像のマスクをかけてしまうとすんごく薄くなってしまいますので元画像のままで
ただし画像「サイズ」だけは整えてください

No image画像が表示される箇所(合3箇所)

①トップページサムネイル
②検索結果サムネイル
③新着サムネイル

準備する画像は1つで良いです
横 600px程度のものが理想
横長画像でお願いします
縦横比不問ですが あまり極端な比率でない方が良いです
デフォルト画像は以下のものを使用しています(エンター背景, エンター以外のフッター背景と同じ画像の尺違い)



新着サムネイルの方は黒のマスクがかかりますので
No image上に白マスクは適用していません
若干暗くなるだけで割りと元画像に近い状態で表示されます
また タイトルと被りますので No image のテキストも省いています


差し替え手順 Ctrl+Fキー検索

//blog-imgs-84.fc2.com/v/a/n/vanillaice000/quietnoimagethumb.jpg

このアドレスが htmlソース内に2箇所
CSSソース内に1箇所
計 3箇所 ありますので それぞれ変更画像のアドレスと差し替えます(3つ別のものでもOK)





今回は細かく色変更のナビゲーションをつけておきました
今後も同じようにするかはわかりません(笑)

rgb(81,71,83)	ブログタイトル, サイドメニューリンク色, トップページサムネイルオーバーレイ背景色 など
rgb(207,74,92)	記事内リンク色, 基本リンク色, サイドメニューリンク色 など
rgb(51,51,51)	記事内文字色 など
white	全体背景色, エンターブログタイトル, エンターscrollアイコン色 など
rgb(240,240,240)	関連記事・トラックバックリスト背景色
silver	コメント欄各項目ボーダー色

数字だけを抜き出して検索されますと 不透明度つきのものも全て出てきます
例) 81,71,83

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

管理人ハンドルネーム の部分は普段コメント欄でお使いのお名前に差し替えてください
カラーコードはサンプルと同じ背景色にするのならば以下の通り
rgba(207,74,92,.1)
rgb(●,●,●) の10進数　#●●●●●● の16進数どちらでも構いません
不透明度を付けるのならば10進数でサンプルコードを参考に
(不透明度 0.1 の指定　小数点以前省略)

* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)





公式からデフォルトテンプレートをDL後
以下のhtmlファイルを差し替えてご利用ください
事前に複製を取るのをお忘れなく
CSS内容はそのまま流用できますが 不要ソース内容が出てきます
気になる方は該当部分を削除してください Ctrl+Fキー検索

enter page only

の項目を全て削除です

★ txt保存ファイルですのでブラウザかエディターで開いてコピペするだけです
ブラウザで開く方はファイルをブラウザ画面にドラッグ＆ドロップ
文字化けする方はブラウザの文字コードをShift-JISに変更してください
(Microsoft EdgeはUTF-8から他の文字コードに変更できないクソ仕様ですので他のブラウザでどうぞ)

2017.1.25 最新版 --- 配布終了 ---



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


みなさんいつもありがとうございます　(∩´∀｀)∩


------- 追記 同日


一つお伝えし忘れました
Google Chromeブラウザが長く引きずっているバグのひとつに
「ブラウザ幅が奇数の時だけ1pxズレとるやないかーい！」
ってのがありましてね　(´・ω・｀)
このテンプレに関係する事項としては
「ドットの端が重なっとる...」
ってやつ
これもうどうしようもないのでご勘弁ください
Firefoxなど他のブラウザでは起こりません
この現象は次の次に申請予定のテンプレにも関わっています(笑)

HTML5 CSS3 RWD