Southerlyテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ
| 名称 | Southerly さざりぃ |
| 動作確認済みブラウザ |
|
| トップページ記事並び | 要約表示タイプ |
| 記事幅(PC 最大) | メイン --- 950px サイド --- 300px |
| 記事内で使える見出しレベル | h2からh6まで |
| jQuery導入 | あり(v3.7.0) |
| Google fonts導入 |
Playball
|
| Font Awesome導入 | なし |
| Lazyloading導入 | あり |
| OSダークモード対応 | なし |
| パン屑リスト表示 | あり |
| 構造化マークアップ | 個別記事のみ 「BreadcrumbList(パン屑リスト)」 「BlogPostiong」 |
| Lighthouseスコア (トップページ平均) |
|
| 固有機能 |
|
| ライセンス |
Required 必須事項 ・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by) Permitted 許可事項 ・Modification 改変 ・Personal Use 個人利用 ・Commercial Use 商用利用 Forbidden 禁止事項 ・Distribution 再配布 ・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません |
| 備考 |
日付の背景色及びリンク色は月ごとに違います。
|
- パソコン
-
- 2カラム
- サイドメニュー --- 右
- タブレット
-
- 1 or 2カラム
- サイドメニュー --- 右 or 下
(デバイス幅依存)
- スマートフォン
-
- 1カラム
- サイドメニュー --- 下
- 公式タグプラグインの位置ズレの対策
- サムネイル付き関連記事リストを全体リンクに
- No imageの設定方法を変更
- YouTube縦横比を自動調整
- Twitterアプリ名変更及びロゴ変更に対応
- IE用対応終了
- jQueryを3.7.0にアップグレード
- カスタムプロパティ導入
- SNSリンク追加
- 記事幅及びサイドメニュー幅を拡張
- ユーザビリティの最適化
- idセレクタによるスタイリングをclassセレクタに統一
- RSSリンク削除
- コメント削除アラート追加
- YouTube縦横比固定用クラス追加
- カテゴリ階層表示改正
- 記事編集リンクをアイコン型に変更
- その他UI調整
左右カラムの入れ替えや横幅の調整、色彩の変更等、簡単にできるようになりました。想定されるほとんどのCSSカスタマイズはスタイルシートの 注)主要カスタマイズ(variables) でできるかと思います。
また、Font Awesomeの廃止を行っていますので、再DLされる際はその点に注意してください。
カテゴリ階層表示とChromiumグリッチについては以下の記事をご覧ください。
FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト FC2ブログには 親子カテゴリ化 という機能があります。通常「親子」という場合には フォルダ階層(ディレクトリ) が関わっており、親のフォルダの下層に子のフォルダ、という形ですが、FC2では偽装しているだけで親も子も階層のレベルは同じですよ、というお話。パンくずリスト にも関わってきますので興味のある方はご覧ください。... Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処 表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか？」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。...
vanillaice000.blog.fc2.com
vanillaice000.blog.fc2.com
過去の更新一覧
- FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
- jQueryを3.6.0にアップデート
カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。
【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。
【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。
- コメント返信のJS変更
- jQueryを3.4.1にアップデート
- パーマリンク設定導入に伴う個別記事URL正規化
- パーマリンク設定導入に伴うページ送り変更
- コメント主のリンク表示用JS及びデザインの変更
- SVGのIE向け調整
- スライダーの動作改善(mouseover, mouseleave)
- 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
- 受信コメント一覧とコメント投稿フォームのセクションを統合
- コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
- 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)
カスタマイズ済みなど、再DLが困難な方はお手数ですが以下の手順で修正を行ってください。また、作業の前に以下の記事をお読み頂いて、修正する・しないを決定してください。
【重要】テンプレートの変更点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="comment-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 li {
display: inline-block;
}
.comment-info li:not(:last-of-type)::after {
content: "|";
margin: 0 .4em;
}#community" で検索するとhtml内に2箇所あります。2つとも #comment_form" に 変更。
続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <h3 class="another-title"><span>Add your comment</span></h3> までを 削除。
<!--/comment--> <form action="./" method="post" name="comment_form" id="comment_form">
上記のような形になっていれば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:not(.relate-title) {
margin: 1.9em 0;
}記事内でp要素を利用している方向けなので必要がある方だけどうぞ。
以上です。よろしくお願いします。
- C版Safariでモーダル検索背景が白くなる件修正
- lazyloadingの導入(グリッドページ及びカルーセルスライダー)
- lazyloading導入に伴うトップページサムネイルのアニメーション調整
- Font Awesome(JS)を廃しインラインSVGに変更
- レイアウト関連CSSの追加及び一部削除
- Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
- はてなブックマークシェアアイコン追加(Google+と差し替え)
- 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
- 全記事一覧と検索結果にコメント数とトラックバック数の表記を追加
不具合修正ではありませんので旧バージョンのままでもお使い頂けますが、比較的大規模なメンテナンスでパフォーマンスも改善されています のでアップデートをおすすめします。
大規模なメンテナンスを行いました。
主な変更点は以下の通りです。
- jQueryのバージョンを3.3.1にUPしました
- Font Awesomeのバージョンを5にUPしました(CSSリンク+アイコンフォントからJS+SVGに変更になります)
- リセットCSSを最小限にし、一部CSS内容を圧縮しました
- floatレイアウトをflexレイアウトに変更しました
- フォントのサイズ指定にremを導入しました
- 構造化マークアップを導入しました
- 個別記事の記事タイトルをh2からh1に昇格しました
- コメント欄で管理人プロフィールアイコンをデフォルト表示できるようになりました(FC2独自変数の追加)
- フッター上第3カラム及び新着サムネイル表示を削除しました
- カルーセルのプラグインを変更しました
- カルーセルに表示される内容を新着記事に変更しました(画像がない記事についても表示するようにしました)
不具合修正ではありませんので旧バージョンの方はそのままご利用頂けます。
- SNSシェアリンクのUTF-8エンコード
- RSS新着サムネイルをFC2独自変数での表示に切り替えました
- リストマーカーの位置を調整しました
- モバイル版誘導リンクのミスを修正しました
- ドロップダウン内リンクが効かない件を修正しました
本ページの内容は2023年6月25日メンテナンス以降のバージョンが対象です。
今更のiPhone6Sですが…
ゲームしにくい 指が届かない (´・ω・｀)
ちなみに普段このような爪でキーボードをガシャガシャ叩いています
…これのせいか？ (´・ω・｀)
さざりぃ 
カルーセルスライダーつき グリッドレイアウト。
承認されました。ありがとうございます。
サンプル
Samples
画像クリックでデモ画面へ
画像クリックでデモ画面へ
カスタマイズのコツ
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等導入の手引き
- テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
- アフィリエイトの都合を優先した仕様変更の指南
必須個人設定
Necessary personal settings
スマートフォン版の表示設定「利用しない」
レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。
検索バーの設定「利用しない」
タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。
テンプレート共通カスタマイズ
Common customization.
ほぼ全てのテンプレートで共通する内容についは以下の記事をご参照ください。
テンプレート共通カスタマイズ * FC2提供全テンプレートを意味するものではありません。vanillaice(Akira)作テンプレートのみを指します。
2023年9月時点で共有されているテンプレートの、ほぼ全てに共通するカスタマイズ項目の説明です。...
vanillaice000.blog.fc2.com
記事編集リンクについて
The position of edit link.
記事編集リンクは 個別記事、タイトル下の管理人アイコン をクリックすると別タブで開きます。
ご質問・ご相談時のお願い
Cautions before asking for something.
ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。
また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。
いつもありがとうございます (●'0'●)/
There are no comments yet.