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

2017年06月13日
テンプレート
25
HTML5 CSS3 RWD
Sincerely-yoursテンプレート

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

最終更新 2018.12.16
  • Font AwesomeのCSSバージョンを5.6.1にアップグレード
  • jQueryのバージョンを3.3.1にアップデート
  • レイアウト関連CSSの追加及び一部削除
  • 個別記事下ページ送りの仕様変更(軽量化含む)
  • 管理人コメントにプロフィールアイコンを自動出力
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 個別記事ブラウザサイドページ送り(カテゴリ間移動用)のスクロール動作を逆に調整(下スクロールで非表示、上スクロールで表示)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • ページ表示時のアニメーション秒数を調整(旧来よりも若干速めました)

不具合修正ではありませんので旧バージョンのままお使い頂けます。注意点がありますので以下の記事を参照した上でアップデートをご検討ください。

【重要】テンプレートのアップデートについて, Font Awesomeについて

既存テンプレートの一部に若干の修正を加えようと思っています。目的としては Google Adsenseのリンクユニットを記事内で掲載される方向けCSSの追加 Font Awesomeのアップグレード (注: SVGへの切り替えは無し) サイドメニュー部のinput要素のCSS調整 管理人コメントにプロフィールアイコンを自動出力 今回スピード対策は行いません。本当は同時に行うのが良いのでしょうが、今回は時間の都合もありますので次回以...

名称 Sincerely-yours
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大788px
サイド --- 260px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.3.1)
Font Awesome導入 あり(v5.6.1 CSS)
Lazyloading導入 なし
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Page Speed Insigtsスコア
固有機能 ・ 画像にドロップシャドウ
・ 見出し装飾(手書き風, ドッグイヤー)
・ 動画縦横比固定
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 左右カラム入れ替え, 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 IE非対応
パソコン タブレット スマートフォン
2カラム
その他ページ --- 1 or 2カラム
(デバイス幅依存)
1 or 2カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 右 サイドメニュー --- 右 or 下
(デバイス幅依存)
サイドメニュー --- 下
更新履歴 2018.1.5

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

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

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

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

* 2018年現在ではフローティングのふわわ〜…は無くなり固定になっています。

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

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
LIST PAGE DEMO
画像クリックでデモ画面へ
ARTICLE DEMO
画像クリックでデモ画面へ
DOWNLOAD
FAQ



カスタマイズのコツ

A few tips on customizing

1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。

2. ご質問の前に
カスタマイズされるであろうと想定される部位については 予めガイダンスを付けてあります
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。

3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。

お受けできないご質問・ご相談

I'm sorry I couldn't be of any help.

  • サイドバーの形状変更
  • トップページの表示タイプ変更(要約表示から全文表示へ変更、グリッド並び数変更 など)
  • レスポンシブを固定幅化
  • カラム数変更
  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

全体幅調整の仕方

How to increase or decrease width of container

デフォルトは全体像の最大横幅を 1300px に設定しています。1300 で検索して頂きますと、CSSソース内に 3箇所 ありますので、3箇所全てを希望の数値(同数値)に変更してください。

左右カラム入れ替えの仕方

How to reverse the direction of rows

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

続きまして #primary { を検索、CSS内で3箇所ヒット、やはり最初のものが対象です。この括りの margin-right: 20px; に対し緑部分 rightleft に変更。
以上2手順です。

フッター上画像変更

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のものに切り替えを行なっています。
フッター画像を変更されます方はこちらも同様に差し替えを行なってください。
サイズ違いを準備できない・面倒だ、という方は

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

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

ナビゲーションについて

Important thing to be careful when adding links to navigation

● 管理画面への誘導について
Admin という単語が日本では馴染みが薄いようなので。
FC2ブロガー「ではない」方がクリックするとログイン画面に遷移するという点も考慮して、Log in に変更しました。
もちろんカスタマイズとしてテキスト内容を変更しても問題ありません。ご自身(と閲覧者)にとってわかりやすいと思われる単語をお選びください。

● ナビゲーション内リンクについて
ナビゲーション内容の追加やリンクテキストの日本語置き換えをされます方は 各リンク要素が下の行へ繰り越さないよう留意してください。
レスポンシブデザインですのでパソコンでの作業を一定の幅だけで行わず、マウスでブラウザ幅を拡大・縮小しながら見た目を確認してくださいね。文字数が多い、リンク数が多い、などが原因で内容が下に繰り越してしまう場合には

navi breakpoint

で検索されますとhtml, CSS各ソース内に合計2箇所ヒットします。それぞれの

(max-width: 768px)

緑の部分 768 を 大きな数字に変更 してください。この処理でデフォルト設定よりも早い段階で折りたたまれるようになり、レイアウトに影響を与えません。

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

該当部位検索

注)予備リンク

カスタマイズ

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

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

ドミナントカラー

Dominant colors

rgb(250,250,250) 全体背景色
rgb(78,90,112) 基本リンク色, ナビゲーション背景色 など
rgb(212,185,150) 各部位ボーダー色
white 記事背景色 など

全バージョンのInternet Explorer非対応

NOT working on Internet Explorer

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終了タグの直前に記載してください。

ページ送りサムネイルについて

About thumbnails in pager

個別記事ページ送りのサムネイル画像を表示するにはブログ個人設定で OGP設定を有効化 してください。
メタタグの設定

ご質問・ご相談時のお願い

Cautions before asking for something.

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

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

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

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

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

vanillaice (Akira)

Posted by vanillaice (Akira)

関連する記事

コメント 25

There are no comments yet.

-  

2017/07/09 (Sun) 20:58

管理人のみ閲覧できます

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

kimiuta  

2017/07/09 (Sun) 21:06

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

Akira  

2017/07/09 (Sun) 21:41

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.

kimiuta  

2017/07/14 (Fri) 00:17

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

Akira  

2017/07/14 (Fri) 01:05

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.

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

Akira  

2017/07/14 (Fri) 01:33

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/10/27 (Fri) 12:42

管理人のみ閲覧できます

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

Akira  

2017/10/27 (Fri) 14:10

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) 15:22

管理人のみ閲覧できます

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

-  

2017/10/27 (Fri) 15:42

管理人のみ閲覧できます

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

Akira  

2017/10/27 (Fri) 16:14

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

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

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

font-size: 12px;

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

-  

2017/10/27 (Fri) 16:53

管理人のみ閲覧できます

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

Akira  

2017/10/28 (Sat) 09:19

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

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

-  

2018/02/06 (Tue) 02:45

管理人のみ閲覧できます

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

Akira  

2018/02/06 (Tue) 03:25
vanillaice (Akira)

To Sincerely-yoursの件 内緒さん

ありがとうございます。

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

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

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

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

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

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

-  

2018/02/06 (Tue) 17:56

管理人のみ閲覧できます

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

Akira  

2018/02/06 (Tue) 18:28
vanillaice (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) 23:30

管理人のみ閲覧できます

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

Akira  

2018/02/07 (Wed) 18:29
vanillaice (Akira)

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

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

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

-  

2018/10/05 (Fri) 16:55

管理人のみ閲覧できます

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

Akira  

2018/10/06 (Sat) 00:10
vanillaice (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) 09:20

管理人のみ閲覧できます

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

Akira  

2018/10/06 (Sat) 17:11
vanillaice (Akira)

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

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

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

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

-  

2018/10/06 (Sat) 19:50

管理人のみ閲覧できます

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

Akira  

2018/10/07 (Sun) 15:21
vanillaice (Akira)

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

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

コメント投稿

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)