Little-thingテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ
| 名称 | Little-thing |
| 動作確認済みブラウザ |
|
| トップページ記事並び | 要約表示タイプ |
| 記事幅 | メイン --- 最大1060px サイド --- 260px |
| 記事内で使える見出しレベル | h2からh6まで |
| jQuery導入 | あり(v3.4.1) |
| Font Awesome導入 | なし(インラインSVG) |
| Lazyloading導入 | あり |
| 構造化マークアップ | 個別記事のみ 「BreadcrumbList(パン屑リスト)」 「BlogPostiong」 |
| Page Speed Insigtsスコア |
|
| 固有機能 |
・ 画像にドロップシャドウ ・ 動画縦横比固定 使い方詳細はARTICLE DEMOを参照 |
| 推奨カスタマイズ | 左右カラム入れ替え, 色調変更 |
| ライセンス |
Required 必須事項 ・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by) Permitted 許可事項 ・Modification 改変 ・Personal Use 個人利用 ・Commercial Use 商用利用 Forbidden 禁止事項 ・Distribution 再配布 ・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません |
| 備考 |
スマホのみサイドメニューがドロワーに切り替わります。
|
| パソコン | タブレット | スマートフォン |
|
|
|
| 2カラム | 1カラム or 2カラム (デバイス幅依存) | 1カラム |
| サイドメニュー --- 右 | サイドメニュー --- 下 or 左(デバイス幅依存) | サイドメニュー --- 右ドロワー |
- FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。
【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。
過去の更新一覧
- ページ送りのJSを修正
- 個別記事リボン部位修正
- コメント返信のJS変更
- jQueryを3.4.1にアップデート
- 個別記事ページ送りの複製を可能にしました
複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する
- パーマリンク設定導入に伴う個別記事URL正規化
- パーマリンク設定導入に伴うページ送り変更
- コメント主のリンク表示用JS及びデザインの変更
- SVGのIE向け調整
- 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
- 受信コメント一覧とコメント投稿フォームのセクションを統合
- コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
- 記事範囲上下の余白を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">Leave a comment</h3> までを 削除。
<!--/comment--> <form action="./" method="post" name="comment_form" id="comment_form">
上記のような形になっていればOKです。
続いてスタイルシート末尾に以下の内容を 追加。
#comment_form {
padding-top: 45px;
}#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でモーダル検索背景が白くなる件修正
- Font Awesome(JS)を廃しインラインSVGに変更
- レイアウト関連CSSの追加及び一部削除
- Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
- はてなブックマークシェアアイコン追加(Google+と差し替え)
- 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
- 全記事リストと検索結果にコメント数とトラックバック数の表示を追加
- アニメーションスピードを調整(旧来よりも若干速めました)
不具合修正ではありませんので旧バージョンのままでもお使い頂けます。
大規模なメンテナンス 及び 修正 を行いました。
- iOS11.2.6で検索モーダルが開かない件
- Font Awesomeをバージョン4(CSS)からバージョン5(JS)へアップグレード
- 画像遅延読み込みの導入(デフォルト設定: グリッドサムネイル, 管理人コメントプロフィールアイコン)
- 新変数導入による管理人コメントプロフィールアイコンのデフォルト表示
- floatレイアウトからflexレイアウトへ変更
- フォントサイズ指定にrem単位を導入
- リセットCSS及び一部CSS内容を圧縮
- 構造化マークアップを導入(個別記事のみ)
iPhoneに関連する不具合修正も含まれます ので是非アップデート(再DL)をお願いします。
- SNSシェアリンクのUTF-8エンコード
- RSS新着サムネイルをFC2独自変数での表示に切り替えました
- Microsoft10 の IE11及びMicrosoft Edgeのバグ用ハックJSを削除
- FC2新変数導入に於ける関連JSの削除(html内容の切り替え) --- ページ表示の動作が軽快になりました
- Microsoft Edgeのリンクホバー継承バグをハック
- ベンダープレフィックスの整理
- その他微調整
「Nostalgia」「Little-thing」「Mocha」メンテナンスのお知らせ
以下の3テンプレートのメンテナンスを行いました。...
- リストマーカーの位置を調整しました
本ページ内容は2019年1月4日メンテナンス以降のバージョンが対象です。
南の庭が樹海のようになっているあきらでございます(号泣)
草刈りとかホント無理 o(｀ω´*)o
(田舎ゆえ土地だけは広い)
りとる しんぐ 
承認されました。ありがとうございます。
サンプル
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
スマートフォン版の表示設定「利用しない」
レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。
検索バーの設定「利用しない」
タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。
コメント設定 > コメンテーターの情報「記憶する」
管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。
スクロールアンカーについて
About scrolling ancho
左右いずれかのカラムの縦(高さ)が一方よりも短いときにスクロールで画面外へ流れていかないようストップがかかります(スクロールアンカー)
現時点で以下のような注意点があります。
- 「特定のプラグインやウィジェットのJS内容 + Google Chromeのグリッチ」でChromeブラウザ上でプラグイン・ウィジェットが表示されなくなる
- アフィリエイトによってはスクロールアンカーへの掲載禁止
特定のプラグインに該当する具体的なものは「FC2動画」「FC2カウンター」「アフィリエイト」など、JSで内容を取り込むタイプのものです。表示されない、という症状が出ている場合には スクロールアンカーの解除を行ってください。
注)スクロールアンカー不要の方 で検索すると該当部位が出てきますのでガイダンスに従って削除をお願いします。
Font Awesomeについて
About Font Awesome
Font Awesome 5(SVG) を入れていましたが、どうにもこうにも動作が遅いものですから思い切って排除しました。Font Awesome(以下 FA と称す)のライブラリに頼らずインライン化することでパフォーマンスが若干改善されました。
FAがどうしても必要、という方はhtml内に
注)Font Awesome(JS)必要な方この一行削除
という形でコメント化してありますので、ガイダンスに従ってコメントの解除を行ってください。FAのメインJS+疑似要素が使えるようになります。
CSS(webフォント)のFAをご希望の場合にはFA本家サイトから直接コードを取得してください。
Font Awesome
JSかCSSかの選択も含め自己責任で導入をお願いします。テンプレートで表示しているアイコン類についてはFAのファイルと干渉しないはずです。
ヘッダー画像変更
How to change your header image
注)ヘッダー画像
で検索し、URLを差し替えてください。画像中ほどから下にかけて徐々に自動で透過されます
プラグインについて
Important thing to be careful when categorizing your plugins
プラグイン1と2は右サイドメニューに、プラグイン3はフッター上サイドメニューに それぞれ表示されます。
右サイドメニューは スマートフォンではドロワーに切り替わりますので
折りたたまれたくないものはプラグイン3への登録をお願いします。
左右カラム入れ替えの仕方
How to reverse the direction of rows
#main-container { を検索されますとCSSソース内に4箇所ヒット、最初のものが対象です。この括りの padding: 40px 60px 80px; の直下に flex-direction: row-reverse; を 追加。
続きまして #primary { で検索。2箇所ヒットし、やはり最初のものが対象です。この括りの margin-right: 40px; 緑部分 right を left に変更。
以上2手順です。
No image画像変更
How to change alternative image
記事のしかるべき箇所に画像が存在しない場合に表示される No image画像を変更する場合以下の画像アドレスを書き換えてください。
https://blog-imgs-93.fc2.com/v/a/n/vanillaice000/littlethingnoimage2.jpg
ドミナントカラー
Dominant colors
以下が基本色調です
数字の部分だけを抜き出して検索されますと 不透明度つきのものも全て出てきますので上手に活用してください。
例) 51,51,51
| rgb(51,51,51) | 基本文字色 |
| rgb(210,210,210) | 右サイドメニューボーダー色, トップページ要約記事ボーダー色 |
| rgb(45,48,62) | フッター上プラグイン3背景色, ナビゲーションホバー時背景色, ページ送りprev/ next背景色 など |
| rgb(240,163,141) | ドロワーハンバーガーボタンの色(スマホのみ), ページ送りマウスホバー時背景色 など |
削除可能なJSについて
Delete specific JS if you want to
特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容 です。以下の2項目に当てはまる方は削除をおすすめします。
【FC2検索バーを利用しない人は削除】
<!-- 注)FC2検索バー非表示の方ここから削除可 -->
各々上記を目印にガイダンスに従って削除。
個別記事ページ送りを複製する方へ
Cautions when copying pagination in permanent page
2020.3.25バージョンから個別記事のサムネイルつきページ送りを複製掲載できるようにしました。html内の <!-- 個別記事ページナビ --> から <!-- 個別記事ページナビここまで --> までをコピーし、掲載希望場所へペーストしてください。
ご質問・ご相談時のお願い
Cautions before asking for something.
ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。
また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。
いつもありがとうございます (●'0'●)/
There are no comments yet.