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


Colonyテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
スマートフォン版を非表示にしてご利用ください。
設定ページ
- Font Awesome(JS)を廃しインラインSVGに変更
- レイアウト関連CSSの追加及び一部削除
- Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
- はてなブックマークシェアアイコン追加(Google+と差し替え)
- 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
- 個別記事ブラウザサイドページ送り(カテゴリ間移動)の動作を逆にしました(下へスクロールで非表示、上にスクロールで表示)
- 全記事リストと検索結果にコメント数とトラックバック数の表示を追加
- アニメーションスピードを調整(旧来よりも若干速めました)
不具合修正ではありませんので旧バージョンのままでもお使い頂けます。
名称 | Colony |
動作確認済みブラウザ |
![]() ![]() ![]() ![]() ![]() |
トップページ記事並び | 要約表示タイプ |
記事幅 | メイン --- 最大880px サイド --- 260px |
記事内で使える見出しレベル | h2からh6まで |
jQuery導入 | あり(v3.3.1) |
Font Awesome導入 | なし(インラインSVG) |
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 右(デバイス幅依存) | サイドメニュー --- 下 |
本ページの内容は2018年12月29日メンテナンス以降のバージョンが対象です。
第二次ホラーブーム到来中 あきらでございます (´・ω・`)
ころにぃ
はがき風グリッドレイアウト。
承認されました。ありがとうございます。
サンプル
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等導入の手引き
- テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
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のファイルと干渉しないはずです。
トップページグリッドについて
About grid layout
随分と空白の多い見た目ですが これはこういうデザインです。グリッド内の
- 文字大きさ調整
- 要素の追加
- 要素位置の変更
等は自己責任・自力でお願いします ( ゚Д゚)ノ
グリッドの並び数カスタマイズ難易度はかなり高いと思います。
難しいというか、四則計算を利用していますので見てると気持ち悪くなるCSS内容です。
さらに Microsoftブラウザ(Edge, IE11)のためだけに 入れて置かなければいけない内容なんかもあります。
EdgeはともかくはよIE滅してくれんかな
ナビゲーションの折りたたみについて
How to activate accordion for global navigation
グローバルナビゲーションをデフォルトのままお使い頂く場合には何も操作する必要はありません。
また、デフォルト内容よりもリンク数を減らす場合も同様に何もしなくて大丈夫です。
文字を大きくする、リンクを追加する等のカスタマイズを行う方は リンクが下の行に繰り越さないよう、折りたたみを有効化してください。
navi breakpoint
で検索されますとhtmlに1箇所、CSSに1箇所の計2箇所出てきます。
直近にある max-width: 540px 赤字の540は適当に入れてあるだけですので、折りたたみを機能させたい画面横幅を入れてください。
CSSの方はもうひとつ作業がありますのでガイダンスに従ってください。
レスポンシブデザインですので一定の横幅で判断せず、ブラウザの横幅を拡大したり縮小したりしながら目視確認を行なってください。
この場合は「縮小」の方ですね。要素検証(レスポンシブモード)が使える方はそちらを利用してください。
横幅だけを確認する方はスマートフォンと同等になるぐらいできるだけ狭くして必ず確認をしてください。
有効化(コメントアウト削除)の仕方
以下の緑部分をdeleteしてください。
html
<!-- navi breakpoint 1/2 ナビ折りたたみ必要な方コメント解除 内容 ここまで -->
CSS
/* navi breakpoint 2/2 ナビ折りたたみ必要な方コメント解除 内容 ここまで */
プラグイン表示位置について
Classification of plugin
プラグイン3を利用していない方が結構いらっしゃることに気づいた (´・ω・`)
こちらのテンプレートはグリッドレイアウトですので
必然的にメインコンテンツよりも右サイドメニュー(サイドバー)の縦幅が長くなることが多いと思います(もちろんプラグイン件数によります)
バランスが悪いと感じられましたら幾つかをプラグイン3へ移動して 見た目分量を調節されても良いと思います。
プラグイン3を使わない = フッター上サイドメニューを使わない
という方はソース内から該当箇所を削除してください
(そのままだと中途半端にストライプ背景画像が残ります)
注)プラグイン3を利用しない場合はここから削除
上記を目印にガイダンスに従ってください。
ドミナントカラー
Dominant colors
以下が基本色調です
数字の部分だけを抜き出して検索されますと 不透明度つきのものも全て出てきますので上手に活用してください。
例) 51,51,51
rgb(245,245,245) | 全体背景色 |
rgb(51,51,51) | 基本文字色 |
rgb(186,164,157) | ブログタイトルホバー時文字色, サイドメニュータイトル背景色, ページ送りマウスホバー時背景色 など |
rgb(152,126,117) | コメントsend/ deleteボタン背景色, ページ送り背景色 など |
ご質問・ご相談時のお願い
Cautions before asking for something.
ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。
また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。
いつもありがとうございます (●'0'●)/
- YOU MAY ALSO LIKE
もっと見る