CommonSenseテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ
| 名称 | CommonSense |
| 動作確認済みブラウザ |
|
| トップページ記事並び | 全文表示タイプ |
| 記事幅 | メイン --- 最大780px サイド --- 240px |
| 記事内で使える見出しレベル | h2からh6まで |
| jQuery導入 | あり(v3.4.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 使用にあたっての損害・損失に対する責の一切を負いません |
| 備考 |
|
| パソコン | タブレット | スマートフォン |
|
|
|
| 2カラム その他ページ --- 1 or 2カラム (デバイス幅依存) | 1 or 2カラム (デバイス幅依存) | 1カラム |
| サイドメニュー --- 右 | サイドメニュー --- 右 or 下 (デバイス幅依存) | サイドメニュー --- 下 |
- FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
- jQueryを3.6.0にアップデート
カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。
【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。
【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。
過去の更新一覧
- ページ送りのJSを修正
- コメント返信のJS変更
- jQueryを3.4.1にアップデート
- パーマリンク設定導入に伴う個別記事URL正規化
- パーマリンク設定導入に伴うページ送り変更
- コメント主のリンク表示用JS及びデザインの変更
コメント主のリンク生成用のJS内容変更及びタップ範囲の拡大のみです。無理に再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-->続きまして <div class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め title}</script> のすぐ下にある </div> まで(この文字列も含む)を以下の内容に 変更。
<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>">編集</a><!--/comment_edit-->
<li><!--comment_author--><!-- <!--/comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">返信</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん">返信</a><!--/comment_author-->
<li><a href="#comment-top"><i class="fas fa-arrow-up"></i></a>
<li><a href="#comment_form"><i class="fas fa-arrow-down"></i></a>
</ul>続きましてスタイルシート末尾に以下の内容を 追加。
.comment-info li {
display: inline-block;
}
.comment-info li:not(:last-of-type)::after {
content: "|";
margin: 0 5px 0 4px;
}#community" で検索するとhtml内に1箇所ありますので #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;
}
<div class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)
<div class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->">テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に
.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}
こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。
- Font AwesomeのCSSバージョンを5.6.1にアップグレード
- レイアウト関連CSSの追加及び一部削除
- 管理人コメントにプロフィールアイコンを自動出力
- Google+ シェアアイコンの削除(2019年夏でサービス終了のため)
不具合修正ではありませんので旧バージョンのままお使い頂けます。注意点がありますので以下の記事を参照した上でアップデートをご検討ください。
【重要】テンプレートのアップデートについて, Font Awesomeについて
既存テンプレートの一部に若干の修正を加えようと思っています。目的としては Google Adsenseのリンクユニットを記事内で掲載される方向けCSSの追加 Font Awesomeのアップグレード (注: SVGへの切り替えは無し) サイドメニュー部のinput要素のCSS調整 管理人コメントにプロフィールアイコンを自動出力 今回スピード対策は行いません。本当は同時に行うのが良いのでしょうが、今回は時間の都合もありますので次回以...
本年最後の申請です ( ﾟДﾟ)ﾉ
今回は極々ありきたり、ノーギミック, ノーイングリッシュなシンプルデザインです。
なかなか承認されませんが、年明け数日後までログインできないと思いますので事前に本案内記事をUPしておきます。
こもんせんす 
サンプル
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等導入の手引き
- テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
ナビゲーションについて
Important thing to be careful when adding links to navigation
今回はJSを用いた折りたたみではなく オーバフロー時に横スクロール するようになっています。
スマートフォンでの閲覧時はスクロールできることを示唆する意味で以下のようなデザインが追加されます。
画面横サイズが 502px を含みそれ以下になった時に表示されるようにしていますが、リンクの増減をされます方は以下の注意事項をお読み頂きそれぞれ対処をお願いします。
リンクを増やす場合
リンクを増やした場合には当然デフォルトよりも早い段階でオーバーフローが起こりますので
/* ナビゲーションオーバーフロースクロール時の矢印 2/2 */
CSSソース内で上記を目印に直下にある 502 の数値を 大きく 変更してください。
リンクの文字を大きくする方も同じです。デフォルトよりも早く起こりますので修正が必要です。
リンクを減らす場合
件数によってはスマートフォンでも矢印が不要になるかもしれません。
その場合却って矢印が閲覧者を混乱させますので
/* ナビゲーションオーバーフロースクロール時の矢印 1/2 */
/* ナビゲーションオーバーフロースクロール時の矢印 2/2 */
上記2箇所を目印に該当部位を削除してください。
絶対に必要な処理というわけではありません。特に「増やす」方については現存最大スマホ横幅は414pxですので、デフォルトにしておけばまぁ問題はないのかな、と思います。
減らす方は不要矢印は無い方が良いと思いますので寧ろこちらは気にしてください。
最小横サイズは 320px ですので、320pxになった時でも全てのリンクがスクロールせずに表示されるのであれば削除を。
スマホ画面の確認ができない、という方は以下のページを参照のこと。
スマートフォンやタブレットを持っていない人はこのサイトで見え方を確認できるよ
これからのwebは スマートフォンでの見え方を最重要視するべし！。 ということで、スマートフォン持ってない・タブレット持ってないという方がパソコンから簡単に自分のブログの見え方を確認する方法をご紹介。...
グローバルナビゲーションは各主要ページへの行き来をするためのものですから、あまりあれもこれもと欲張ってリンクを増やさない方が良いですね。そして横スクロールはAppleのマジックマウスユーザーさんが嫌がりますので(履歴を繰るのと動作がバッティングします)、パソコンの大きい画面でも早い段階でスクロールするようであればちょっと考えものかもしれません。
リンクテキストをなるべく端的な内容にするか、リンクを厳選されると良いと思います。
というかそもそもグローバルナビゲーションの内容は厳選してください(笑)
全体幅調整の仕方
How to increase or decrease width of container
デフォルトは全体像の最大横幅を 1300px に設定しています。
1300
で検索して頂きますと、CSSソース内に 3箇所 ありますので、3箇所全てを希望の数値(同数値)に変更してください。
左右カラム入れ替えの仕方
How to reverse the direction of rows
#main-container { で検索されますとCSSソース内に4箇所ヒット、最初のものが対象です。この括りの padding: 40px 60px 80px; の直下に flex-direction: row-reverse; を追加。
続きまして #primary { を検索、CSS内で2箇所ヒット、やはり最初のものが対象です。この括りの margin-right: 40px; に対し緑部分 right を left に変更。
以上2手順です。
ドミナントカラー
Dominant colors
以下が基本色調です
数字の部分だけを抜き出してCtrl+F(Windows)/ Command+F(Mac) キー検索されますと 不透明度つきのものも全て出てきますので上手に活用してください(カラーコードクリックでコピーできます)
例) 51,51,51
| rgb(240,236,232) | 全体背景色 |
| rgb(190,186,182) | ページ送り, コメント送信ボタン など |
個別記事ページ送りを複製する方へ
Cautions when copying pagination in permanent page
html内の <!-- 個別記事ページナビ --> から <!-- 個別記事ページナビここまで --> までをコピーし、掲載希望場所へペーストしてください。
ご質問・ご相談時のお願い
Cautions before asking for something.
ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。
また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。
来る年もどうぞよろしくお願いします (●'0'●)/
There are no comments yet.