Sincerely-yours - FC2ブログテンプレート

投稿 2017年06月13日
25
テンプレート
HTML5CSS3RWD
Sincerely-yoursテンプレート
PCアイコン TBアイコン SPアイコン

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

最終更新 2018.1.5

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

Sincerely-yours大規模メンテナンスのお知らせ - テンプレ不具合・修正など

Sincerely-yoursテンプレートのメンテンナスを行いました。 公式配布ソースは修正済みです。 今回のメンテナンスでは html構造及びCSS装飾及びJS内容全てに大規模な修正を入れています。 不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。...

名称 Sincerely-yours
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大788px
サイド --- 260px
記事内で利用可能な見出しレベル h2からh6
構造化マークアップ(個別記事のみ) BreadCrumbs(パン屑リスト)
BlogPosting
GTmetrixスピードスコア
固有機能 画像ドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
見出しデザイン(手書き風, ドッグイヤー)
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 色調変更, カラム入れ替え
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 Internet Explorerとかいう意味不明なブラウザは無視します。
valid-html5.png
パソコン タブレット スマートフォン
パソコン タブレット スマートフォン
2カラム 1 or 2カラム
(デバイス幅依存)
1カラム
右サイドメニュー
(デフォルト)
下 or 右サイドメニュー
(デバイス幅依存)
下サイドメニュー

スマホ広告が笑えるほどウザいなー ( ̄∀ ̄;)
ふわわ〜〜〜… って何秒かかってんだ
FC2ブログは広告掲載点数自体は他社と比べて良心的(アダルトジャンル・スマートフォン版除く)ですが、広告種は群を抜いて悪辣 ε≡≡ヘ( ´Д`)ノ

しんしあり ゆあーず
承認されました。ありがとうございます。

TOP PAGE DEMO
LIST PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ



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

・トップページの表示タイプ変更・レイアウト変更(全文表示から要約表示へ変更, カラム数変更 など)
・レスポンシブの固定幅化。
・テンプレートと無関係なプラグイン導入のお手伝い。

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

左右カラム入れ替えの仕方
How to reverse the direction of rows
#main-container

を検索されますと、CSSソース内に2箇所ヒットします。
最初のものが対象です。
この括りの
padding: 30px 60px 80px;
の直下に以下を 追加

flex-direction: row-reverse;

続きまして検索。

#primary

こちらは3箇所ヒットします。やはり最初のものが対象です。
この括りの

margin-right: 20px;

緑部分 rightleft に変更。
以上2手順です。

全体幅調整の仕方
How to increase or decrease width of container

デフォルトは全体像の最大横幅を 1300px に設定しています。
1300
で検索して頂きますと、CSSソース内に 3箇所 ありますので、3箇所全てを希望の数値(同数値)に変更してください。
(画面横幅が960pxを下回った際にシングルレイアウトに切り替わるよう調整してあります)

個別記事ページ送りの前後ページサムネイル
About prev and next thumbnails on pagination

FC2独自変数では未実装ですので、単純かつ半ば強引に表示しています。
また別の方法を思いついた際、もちろん公式実装された際には書き換えしようと思っています。
前後ページにサムネイル対象画像が存在しない場合のNo image画像を用意していますので、変更したい方は

https://blog-imgs-106.fc2.com/v/a/n/vanillaice000/sincerelyoldnoimageth600.jpg

上記が対象画像でhtmlソース内に1箇所、CSSソース内に1箇所の計2箇所あります。
htmlの方は個別記事のNo image用、CSSの方は全記事リストページ(INDEX)のページ送り背景用です。
各々画像アドレスに修正をお願いします。
縦横比不問(ですが横長推奨)、長辺500px程度が妥当かと思います。
また、ブログ個人設定でNo image代替画像を設定済みの方は テンプレートデフォルトが優先表示 となりますので、必要のある方はご面倒ですが差し替えをお願いします。

デフォルト画像サンプル (縮尺掲載 600×479 28KB public domain)
フッター上画像変更
How to change your footer image
  • プロフィール画像
  • サイト説明文
  • 自己紹介文
  • SNSリンク(シェアではなく個人ページへの誘導です。アドレス記入をお願いします。)

第3カラムとして上記内容が掲載されます。
このカラム自体が不要の方は

<!-- 注)フッター上カラム不要の方ここから削除 -->

上記コメントを目印にガイダンスに従ってください。
プロフ関連、説明文など、個人設定の対応箇所が不明な方は以下のページをご参照ください。

最低でもこれだけはやっておきたいFC2ブログ個人設定 - FC2ブログのあれこれ

FC2ブログ開設直後にいの一番にやっておきたい設定。あるいは既に開設して日が経っているけれども、イマイチ理解できていない機能など。これはこうすると良いよね、という提案であったり、まぁいろいろです ← テケトー「ブログは人に見てもらってなんぼ!」という意識でもって運営したい人向け。...

背景画像を変更されます方は

https://blog-imgs-106.fc2.com/v/a/n/vanillaice000/sincebg.jpg

上記が該当アドレスでCSSソースに1箇所ありますので差し替えをお願いします。
透過は自動でかかります。
縦横比不問ですが横長が望ましいです。長辺1500px以上をおすすめします。

デフォルト画像サンプル (縮尺掲載 1500×1001 64KB public domain)

また、スマートフォンでは1500pxもの画像横幅は必要ありませんので、画面横幅414px(iPhone plus系, iPhone Xがこのサイズです) では横800pxのものに切り替えを行なっています。
フッター画像を変更されます方はこちらも同様に差し替えを行なってください。
サイズ違いを準備できない・面倒だ、という方は

/* 注)フッター上カラムスマートフォン用背景設定 */

を目印にガイダンスに従い 該当部位の削除 を行なってください。
この修正を忘れてしまうとスマートフォンではデフォルト画像のまま残ってしまいますので注意。

ナビゲーション内「About」について
Usage of ABOUT link

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

該当部位検索

注)予備リンク

カスタマイズ

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

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

ドミナントカラー
Dominant colors

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

rgb(250,250,250) 全体背景色
rgb(78,90,112) 基本リンク色, ナビゲーション背景色 など
rgb(212,185,150) 各部位ボーダー色
white 記事背景色 など
全バージョンのInternet Explorer非対応です
NOT working on IE

IE11を無視出来ないという方はスクロールアンカーを削除するかie専用のJSを追加してください。
両方ではなくどちらか一方でOKです。

JS追加

<!-- hack for Microsoft browser -->
<script>
 if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident\/7\./) || navigator.userAgent.match(/Edge\/12\./)) {
 $('body').on("mousewheel", function () {
 event.preventDefault();
 var wd = event.wheelDelta;
 var csp = window.pageYOffset;
 window.scrollTo(0, csp - wd);
 });
 }
</script>

Microsoftブラウザのスムーススクロールを強制的に止めるためのJSです。
個人設定を強制的に変更することになるのでおすすめはしない。
body終了タグの直前に記載してください。

管理人コメントと訪問者コメントを分ける方
The way to identify admin comments

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

サンプル

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

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

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

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

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

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

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

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

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

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

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

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

25 COMMENTS

There are no comments yet.

-  

管理人のみ閲覧できます

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

2017/07/09 (Sun) 20:58

kimiuta  

すみません。
secretボタンを押した、もうコメント見ない。Orz
If you will solve my problem,please reply me under this comment.
Thanks deeply.

2017/07/09 (Sun) 21:06

Akira  

To kimiutaさん

You can use English :)

First of all, let me know your website URL in order to find your issue.
I guess you probably do NOT use upper box on a page [Post a new entry]. Anw, I'll be waiting for your reply.

2017/07/09 (Sun) 21:41

kimiuta  

This is my blog link. 本当にありがとうございます。

2017/07/14 (Fri) 00:17

Akira  

To kimiutaさん

Thank you very much for your reply :)
Ok I've figured out your issue and I knew it lol. It's not a kind of error or something like that. It's just a behavior of FC2 blog.
You can see there're two boxes in your [Post a new entry] page. One is body(upper box) , and another is extend(lower box).
The reason why ... appeares on a category page is that you use only lower box.

http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/9afeiwfhjnoth.png
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/9afeiwfhjth.png

Here's the deal on samples, you should use BODY.

スパム扱いになるので日本語も入れておきます。

2017/07/14 (Fri) 01:05

Akira  

To kimiutaさん②

You mean you don't want to display any text? If so, remove the following parts from html source code.
(Use Ctrl+F(Windows)/ Command+F(Mac) to search for words.)

<p><%topentry_description></p>

There're 4 corresponding items in total. Delete them all.

よろしくお願いします。

2017/07/14 (Fri) 01:33

-  

管理人のみ閲覧できます

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

2017/10/27 (Fri) 12:42

Akira  

To Sincerely-yoursフォントの件 内緒さん

ありがとうございます (o'ω')ノ
サイドメニューのフォントを全体的に大きくしたい、ということでよろしいでしょうか。

----- タイトルの大きさ
.side-menu h4
でCtrl+F(Windows)/ Command+F(Mac)キー検索、その中の

font: 13px/1.4 〜省略

赤字の数字を大きくしてください。

----- サイドメニュー内容の大きさ
#secondary
で検索。2つあるうちの1つ目が対象です。
その中の

font-size: 12px;

こちらも赤字の数字を大きくしてください。
よろしくお願いします。

2017/10/27 (Fri) 14:10

-  

管理人のみ閲覧できます

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

2017/10/27 (Fri) 15:22

-  

管理人のみ閲覧できます

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

2017/10/27 (Fri) 15:42

Akira  

To 関連記事フォント大きさの件 内緒さん

サイドメニューの方は完了したということで、お疲れ様でした。

---------
関連記事の件
.relate_ul,
で検索されますと1箇所ありますので、その中の

font-size: 12px;

赤字を変更してください。
よろしくお願いします。

2017/10/27 (Fri) 16:14

-  

管理人のみ閲覧できます

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

2017/10/27 (Fri) 16:53

Akira  

To 関連記事フォント大きさの件 内緒さん(完了のご報告)

完了したということで、お疲れ様でした。
嬉しいお言葉も頂きました。
精進したいと思います(笑)
こちらこそありがとうございます

2017/10/28 (Sat) 09:19

-  

管理人のみ閲覧できます

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

2018/02/06 (Tue) 02:45
vanillaice (Akira)

Akira  

To Sincerely-yoursの件 内緒さん

ありがとうございます。

申し訳ないのですが、パスワードを頂かなければブログの確認ができません。
よろしくお願いします。

------ 追記
ごめんなさい。ちゃんと書いてくれてるじゃんね。
私は一体何を見ているのか ( ̄∀ ̄;)
大変失礼致しました。また後程追記しますね。

-------
.plugin-myimage img

というのがCSS内にありますので、

.plugin-myimage img {
width: 100%;
}

を削除してください。よろしくお願いします (ノ゚ェ゚)

2018/02/06 (Tue) 03:25

-  

管理人のみ閲覧できます

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

2018/02/06 (Tue) 17:56
vanillaice (Akira)

Akira  

To Sincerely-yoursの件 内緒さん ②

ごめんなさい。私ね、内緒さんのご質問が全然頭に入ってなかったみたい ( ̄∀ ̄;)
耄碌してるんでしょうか (´・ェ・`)

改めまして。いやホントすみません(汗)

-----
> プロフィール

.plugin-myimage を目印に、以下の内容を削除。

.plugin-myimage {
margin: 0 auto 15px;
width: 200px;
height: 200px;
}

------
> 全体のフォントを変える〜

こちらについては「どのフォントに変えるか」が私ではわかりませんので、以下の記事内容を参照してください。

意外と知らないフォント設定の仕方
https://vanillaice000.blog.fc2.com/blog-entry-484.html

該当箇所は
body を目印にその括りの font です。
部分的に異なるフォント指定の箇所もありますが、fontで検索すれば全て出てきます。
ショートハンド指定の場合もありますし、単体指定のものもあります。

ショートハンド
font: 内容
単体
font-family: 内容

ショートハンドの方を変更する際は他の部位を触らないようお願いします。

2018/02/06 (Tue) 18:28

-  

管理人のみ閲覧できます

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

2018/02/06 (Tue) 23:30
vanillaice (Akira)

Akira  

To Sincerely-yoursの件 内緒さん(終了のご報告)

そうですね。フォント指定は意外と難しいんじゃないかと思います。

こちらこそありがとうございます。
お疲れ様でした

2018/02/07 (Wed) 18:29

-  

管理人のみ閲覧できます

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

2018/10/05 (Fri) 16:55
vanillaice (Akira)

Akira  

To Sincerely-yours更新日の件 内緒さん

<time class="entry-datetime"
で検索すると1箇所出てきますので上記を含み
</time>
までを削除。

<i class="fa fa-clock-o" aria-hidden="true"></i><div class="entry-datetime"><%topentry_year>-<%topentry_month>-<%topentry_day> 投稿</div><time class="entry-datetime" datetime="<%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day>T<%topentry_modified_hour>:<%topentry_modified_minute>:<%topentry_modified_second>+09:00"><%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day> 更新</time>

に修正。
投稿 と 更新 のテキストはお好きなものに書き換え可です。
よろしくお願いします。

2018/10/06 (Sat) 00:10

-  

管理人のみ閲覧できます

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

2018/10/06 (Sat) 09:20
vanillaice (Akira)

Akira  

To Sincerely-yours更新日の件 内緒さん②

お出来になったということで良かったです。

別件ですが記事内にaタグ(リンク)の閉じ忘れ(終了タグ欠損)がとてもたくさんあります。
(トップページ最初の1ページ内だけでも14個あります。画像を囲うaタグです)
a終了タグ忘れは本来表示されるべきものが表示されなくなったり、動作上も問題が発生しますので修正必須です。
お時間のある時にでも検証されると良いと思います。

参考記事
https://vanillaice000.blog.fc2.com/blog-entry-781.html

2018/10/06 (Sat) 17:11

-  

管理人のみ閲覧できます

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

2018/10/06 (Sat) 19:50
vanillaice (Akira)

Akira  

To Sincerely-yours更新日の件 内緒さん(完了のご報告)

こんにちは。
地味な作業ですが頑張ってください。
お疲れ様でした :)

2018/10/07 (Sun) 15:21

LEAVE A REPLY

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い
必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)