Sweetie - FC2ブログテンプレート

Sweetieテンプレート

Sweetieテンプレートのレスポンシブウェブデザイン・機能を最大限活かすため、 「スマートフォン版の表示設定」を「無効にする」ことをおすすめします。

名称
Sweetie
すうぃーてぃ
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
全文
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Google fonts
Amatic SC Brush * 本フォントは全て大文字表記です。
Montserrat
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 ver.21 2024.2.29
  • リスト型ページネーションの複製を可能に
更新履歴 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.14
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.8.7
  • Twitterアプリ名変更及びロゴ変更に対応
更新履歴 2022.6.27
  • IE用対応終了
  • jQueryの利用を停止
  • カスタムプロパティ導入
  • SNSリンク追加
  • 記事幅及びサイドメニュー幅を拡張
  • ユーザビリティの最適化
  • idセレクタによるスタイリングをclassセレクタに統一
  • RSSリンク削除
  • コメント削除アラート追加
  • YouTube縦横比固定用クラス追加
  • 記事編集リンクをアイコン型に変更
  • その他UI調整

左右カラムの入れ替えや横幅の調整、色彩の変更等、簡単にできるようになりました。想定されるほとんどのCSSカスタマイズはスタイルシートの 注)主要カスタマイズ(variables) でできるかと思います。

また、Font Awesomeの廃止を行っていますので、再DLされる際はその点に注意してください。

カテゴリ階層表示とChromiumグリッチについては以下の記事をご覧ください。

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログには 親子カテゴリ化 という機能があります。通常「親子」という場合には フォルダ階層(ディレクトリ) が関わっており、親のフォルダの下層に子のフォルダ、という形ですが、FC2では偽装しているだけで親も子も階層のレベルは同じですよ、というお話。パンくずリスト にも関わってきますので興味のある方はご覧ください。...

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか?」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。...

更新履歴 2022.1.6
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
  • jQueryを3.6.0にアップデート

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。

【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。

【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。

更新履歴 2020.5.30
  • ページ送りのJSを修正
更新履歴 2020.4.6
  • コメント返信のJS変更
  • jQueryを3.4.1にアップデート
更新履歴 2020.3.25
  • 個別記事ページ送りの複製を可能にしました

複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する

更新履歴 2019.12.17
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.11.7
  • コメント主のリンク表示用JS及びデザインの変更
  • SVGのIE向け調整
更新履歴 2019.8.2
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

カスタマイズ済みなど、再DLが困難な方はお手数ですが以下の手順で修正を行ってください。また、作業の前に以下の記事をお読み頂いて、修正する・しないを決定してください。

【重要】テンプレートの変更点2つについてお知らせ

【重要】テンプレートの変更点2つについてお知らせ

既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...

①について

</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下の内容を 追加

<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->

続きまして <footer class="visitor-footer-info"> で検索するとhtml内に1箇所あります。この文字列を含め title}</script> のすぐ下にある </footer> まで(この文字列も含む)を以下の内容に 変更

<ul class="comment-info">
  <li><%comment_year>/<%comment_month>/<%comment_day> (<%comment_youbi>) <%comment_hour>:<%comment_minute>
  <!--comment_edit--><li><a href="<%comment_edit_link>" title="<%template_edit_comment>">EDIT</a><!--/comment_edit-->
  <li><!--comment_author--><!-- <!--/comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">REPLY</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん">REPLY</a><!--/comment_author-->
  <li><a href="#comment-top"><svg class="svg-inline svg-inline-arrow-up" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-up"></use></svg></a>
  <li><a href="#comment_form"><svg class="svg-inline svg-inline-arrow-down" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-down"></use></svg></a>
</ul>

続きましてスタイルシート末尾に以下の内容を 追加

.comment-info {
  margin-top: 10px;
  text-align: right;
}

.comment-info li {
  display: inline-block;
}

.comment-info li:not(:last-of-type)::after {
  content: "|";
  margin: 0 .5em 0 .3em;
}
②について

#community" で検索するとhtml内に2箇所あります。2つとも #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <div class="contents"> までを 削除

<!--/comment-->
<form action="./" method="post" name="comment_form" id="comment_form">

上記のような形になっていればOKです。

続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。この直近、2行上にある </div>削除

</form>
</article>
<!-- コメント投稿ここまで -->

上記のような形になっていればOKです。

続いてスタイルシート末尾に以下の内容を 追加

#comment_form {
  padding-top: 40px;
}
③について

<p class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<p class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->">

テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に

.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}

こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。

④について

.inner-contents, で検索するとスタイルシート内に1箇所ありますのでこの文字列を 削除。以下のようになっていればOKです。

.contents {
  padding: 20px 0;
}

続いてスタイルシート末尾に以下を 追加

.inner-contents {
  margin: 20px 0;
}

.inner-contents p {
  margin: 1.9em 0;
}

記事内でp要素を利用している方向けなので必要がある方だけどうぞ。

以上です。よろしくお願いします。

更新履歴 2019.4.27
  • C版Safariでモーダル検索背景が白くなる件修正
更新履歴 2019.1.7
  • Font Awesomeを廃しインラインSVGに変更
  • レイアウト関連CSSの追加及び一部削除
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • 全記事リストと検索結果にコメント数とトラックバック数表示を追加
  • ナビゲーションの形状を若干変更

不具合修正ではありませんので旧バージョンのままでもお使い頂けます。

更新履歴 2017.3.8
  • iOS11.2.6でモーダルが開かない件修正
  • Font Awesomeをバージョン4(CSS)からバージョン5(JS)へアップグレード
  • 新変数導入による管理人コメント区別(ボーダー色違い)

iPhoneでの不具合修正も含まれます ので是非アップデート(再DL)をお願いします。

更新履歴 2017.12.24

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

Sweetie大規模メンテナンスのお知らせ

Sweetie大規模メンテナンスのお知らせ

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

更新履歴 2017.1.25
  • SNSシェアリンクのUTF-8エンコード
更新履歴 2016.10.6
  • ナビゲーション ドロップダウン内リンク動作不全を修正しました 申し訳ございません
  • 関連記事サムネイルの整形
  • ベンダープレフィックスの整理
  • その他微調整
「Sweetie」不具合修正と「Belong」「All-about-us」メンテナンスのお知らせ

「Sweetie」不具合修正と「Belong」「All-about-us」メンテナンスのお知らせ

以下の3テンプレートのメンテナンスを行いました。うち一つ「Sweetie」については動作不全があり修正致しました 申し訳ございません。...

本ページの内容は2023年6月27日メンテナンス以降のバージョンが対象です。

GRIMMシーズン4の日本放送がいよいよ始まるぜおー ヽ(=´▽`=)ノ
そのためだけにケーブル有料チャンネルを組み替えたあきらでございま (▪⌔▪)

すうぃーてぃー
シングルレイアウトです。承認されました。ありがとうございます。

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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

ご質問・ご相談の前に

Please read the document before posting your issue.

自己解決のためのページを用意しています。ご質問の前に該当するものが無いか事前のご確認をお願いします。

ご質問の前に「テンプレあるある」

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

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

  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
  • アフィリエイトの都合を優先した仕様変更の指南

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

テンプレート共通カスタマイズ

Common customization.

ほぼ全てのテンプレートで共通する内容についは以下の記事をご参照ください。

テンプレート共通カスタマイズ

テンプレート共通カスタマイズ

* FC2提供全テンプレートを意味するものではありません。vanillaice(Akira)作テンプレートのみを指します。 2023年9月時点で共有されているテンプレートの、ほぼ全てに共通するカスタマイズ項目の説明です。...

記事編集リンクについて

The position of edit link.

記事編集リンクは 個別記事、タイトル下の管理人アイコン をクリックすると別タブで開きます。

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

Cautions before asking for something.

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

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

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

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

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

きろろ
2016/06/13 (Mon) 02:25

こんばんは~

今、DLしてきました~~
めっちゃシンプル、でも可愛いですね~

Akiraさんのテンプレートの中で一番シンプル?

さっそく使わせていただきます<(_ _)>

Akira
2016/06/15 (Wed) 15:39

To きろろさん

シングルカラムはFC2ブロガーさんにはあまり好まれませんけどもね (´・ω・`)
個人的にたまに作りたくなるんです(笑)

vanillaice (Akira)
Akira
2017/05/21 (Sun) 23:46

To Sweetie文字大きさ変更その他の件 内緒さん(移動先)

> 本文の文字を少し大きめにしたい〜

これは記事内の文字「だけ」という解釈で合ってますでしょうか。
Ctrl+F(Windows)/ Command+F(Mac)キー検索

.inner-contents {

CSSソース内(管理画面下段スタイルシート)に1箇所あります。
この括りの
padding: 10px 0;
の直下に

font-size: 数値px;

を追加してください。
デフォルトは13pxですのでそれ以上の数値です。

=======

> テキストリンクの[テキスト]の色を今の緑色から青色に変更したい〜

こちらはテンプレートの内容ではなく、記事を書かれる際にエディターのツール(記事編集範囲の上部にあるツールバー)を利用するか、htmlを直接記事内に書いてください。
旧投稿画面をお使いならば、
① 色を変更したい範囲をドラッグ選択状態にする
変更該当テキストは<a>〜<a>というアンカー開始タグ(<a>)と終了タグ(</a>)に囲まれているはずですので、それも含めてドラッグします。
② ツール一番左にあるパレットアイコンをクリックして色を選択

htmlを手打ちされるのであれば、

<a href="アドレス" target="_blank" style="color: blue;">[テキスト]</a>

上記を直接記事内に書いてください。
リンクの色をよく変更することがありましたら、a開始タグの中に <a style="color: 色コード;">と覚えておかれると良いと思います。

======

> それとカテゴリーの文字のサイズを大きくしたい〜

「サイドメニューのカテゴリプラグイン」で合ってますでしょうか。
これはテンプレートではなくプラグイン側にフォントのサイズ指定が行われていることが原因です。
プラグインのhtmlソースを開かれまして、font-size で検索。
そちらを修正してください。
(10px指定になっているようです。テンプレートのサイドメニュー内容デフォルト設定は12px)
わからなければプラグイン製作者様に直接ご相談ください。

以上です。
よろしくお願いします。

-
2017/05/22 (Mon) 17:23

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/05/23 (Tue) 11:02

To Sweetie文字大きさ変更その他の件 内緒さん②

こちらこそご丁寧にありがとうございます :)

Akira
2017/10/26 (Thu) 10:41

To seikoさん(移動先)

https://vanillaice000.blog.fc2.com/blog-entry-419.html#comment4524
> いつもお世話になります。素敵なテンプレートの数々、ありがとうございます。
今回拝借しましたテンプレートですが、コメントを書くためのボタンがみあたりません。
どのようにすればよいかご教示ください。
http://seigakupiano.blog.fc2.com/  です。よろしくお願いします。
(2017/10/26 (Thu) 10:33)

--------
デフォルトではコメント欄が表示されるようになっています。
ご自身の設定で「コメントを受け付けない」設定にされていませんでしょうか。
個別記事の編集画面を開かれますと下の方に設定がありますので、「受け付ける」設定に変更してください。
よろしくお願いします。

seiko
2017/10/26 (Thu) 12:13

To Akiraさん

早々のご返信ありがとうございます。
コメント受付のところ、何度も確認しましたが「受け付ける」になっています。
うーーーん、どうしよう。。。。

Akira
2017/10/26 (Thu) 15:08

To seikoさん

本ページのArticle Demoをクリックしてご確認頂きたいのですが、コメントを受け付ける設定にしてある場合には記事タイトル下に必ずコメントのアイコンが表示されます。
そしてトップページでは記事下に
Comment: 数字
も出る仕様になってます。
それに加え、受信コメント欄もタイトル(Comment)だけは受信コメントが0件でも必ず表示される仕様です。
この3箇所が非表示になるのはユーザーが意図的にコメントを受け付けない設定にするか、htmlソースから該当部位を削除するか2通りの方法しかありません。
seikoさんの場合にはコメント及びトラックバックも非表示設定になっているはずなのですが。

第三者からは個人設定がどうなっているかの確認はできませんので、編集画面を開かれまして、コメントの受付に関する設定の状態をスクリーンショットでお見せください。
よろしくお願いします。

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)