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

投稿 2016年08月27日
103
テンプレート
HTML5CSS3RWD
Colonyテンプレート

Colonyテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
スマートフォン版を非表示にしてご利用ください。
設定ページ

最終更新 2018.9.27

Septemberの末尾「r」が改行されてしまう件修正

名称 Colony
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大880px
サイド --- 260px
記事内で利用可能な見出しレベル h2からh6
構造化マークアップ(個別記事のみ) BreadCrumbs(パン屑リスト, データのみ)
BlogPosting
GTmetrixスピードスコア
固有機能 画像ドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 valid-html5.png
パソコン タブレット スマートフォン
2カラム 1 or 2カラム(デバイス幅依存) 1カラム
プラグイン1・2 --- 右
プラグイン3 --- 下
プラグイン1・2 --- 右 or 下(デバイス幅依存)
プラグイン3 --- 下
プラグイン1・2・3 --- 下
更新履歴 2018.3.6
  • iOS11.2.6でモーダルが開かない件修正
  • Font Awesomeをバージョン4(CSS)からバージョン5(JS)へアップグレード
  • 新変数導入による管理人コメントプロフィールアイコンデフォルト表示
更新履歴 2018.1.22

メンテナンスを行いました。
主な変更点は以下の通りです。

  • グリッドのブレイクポイントを変更しました
  • サイドメニューのドロワー仕様を削除しました
  • jQueryのバージョンを2.3.1から3.2.1にアップしました
  • 画像遅延読み込みを導入しました(デフォルトではグリッドページのみ適用)
  • リセットCSSを最小限にし、一部CSS内容を圧縮しました
  • フォントのサイズ指定にremを導入しました
  • 構造化マークアップを導入しました
  • スクロールアンカーを導入しました
  • ナビゲーションを折りたためるようにしました(デフォルト無効化)

不具合修正ではありませんので旧バージョンの方はそのままご利用頂けます。

Colony大規模メンテナンスのお知らせ - テンプレ不具合・修正など

Colonyテンプレートの大規模なメンテナンスを行いました。 要約表示タイプのメンテナンスの進捗状況は逐次お知らせをしていませんが、本テンプレートについては見た目上の大きな変更もありますのでご一読ください。 また、不具合修正ではありませんので新しい仕様をご確認頂きまして、再DLの検討をお願いします。...

更新履歴 2017.1.25

・ SNSシェアリンクのUTF-8エンコード
参考記事
SNSシェアリンクのエンコード

更新履歴 2017.1.13

・RSS新着サムネイルを削除しました 関連記事
Google Feed API 廃止に伴うテンプレートの一部レイアウト変更

更新履歴 2016.9.9

リストマーカーの位置を調整しました
参考記事
list-item横の隙間について

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

第二次ホラーブーム到来中 あきらでございます (´・ω・`)

ころにぃ
はがき風グリッドレイアウト
29日申請予定 審査通過しました ありがとうございます

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

DOWNLOAD
FAQ

お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)

・サイドバーの形状変更
・トップページの表示タイプ変更(説明文の追加や各要素の位置変更 など)
・RSS新着サムネイル, 関連記事サムネイルの位置・デザイン変更
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更
位置変更はこちらを参考にどうぞ ↓
テンプレートのカラム位置変更

カスタマイズをブラウザ上で行う方は
Ctrl+F(Windows)/ Command+F(Mac) キー検索をご利用ください
また
注)
で検索されますとカスタマイズのガイダンスが出てきますので事前にご確認をお願いします

トップページグリッドについて
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 ナビ折りたたみ必要な方コメント解除
内容
ここまで */
プラグイン3用フッター上サイドメニューについて
About sidemenu above footer

プラグイン3を利用していない方が結構いらっしゃることに気づいた (´・ω・`)
こちらのテンプレートはグリッドレイアウトですので
必然的にメインコンテンツよりも右サイドメニュー(サイドバー)の縦幅が長くなることが多いと思います(もちろんプラグイン件数によります)
バランスが悪いと感じられましたら幾つかをプラグイン3へ移動して 見た目分量を調節されても良いと思います

プラグイン3を使わない = フッター上サイドメニューを使わない
という方はソース内から該当箇所を削除してください
(そのままだと中途半端にストライプ背景画像が残ります)

注)プラグイン3を利用しない場合はここから削除

上記を目印にガイダンスに従ってください

ドミナントカラー
Dominant colors

以下が基本色調です
数字の部分だけを抜き出してCtrl+F(Windows)/ Command+F(Mac) キー検索されますと 不透明度つきのものも全て出てきますので上手に活用してください
例) 51,51,51

rgb(245,245,245) 全体背景色
rgb(51,51,51) 基本文字色
rgb(186,164,157) ブログタイトルホバー時文字色, サイドメニュータイトル背景色, ページ送りマウスホバー時背景色 など
rgb(152,126,117) コメントsend/ deleteボタン背景色, ページ送り背景色 など

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

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

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

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

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

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

103 COMMENTS

There are no comments yet.

ぱぴくる♪  

Colonyお借りしています。

Akiraさんのテンプレートは素敵で度々お借りしています。
今回お借りしたColonyについてご指導お願い致します。

①個別記事の文字を大きくしたい

②個別記事最下部の画像を消したい。
 プラグイン3かとHTMLの削除を試みましたが(プレビューで消えたのを確認)’更新’すると何故か消したはずの

<!-- 注)プラグイン3を利用しない場合はここから削除 -->

   <!-- フッター -->
<footer id="footer" class="end">
<div id="pagetop"><a href="#wrapper" id="go_top"><span class="fa fa-angle-up"
------------省略します---------
<%ad> <%ad2>
</footer>
<!-- フッターここまで -->



が、復活しています。

分かりにくい説明かも…すみません。
お忙しい中お手数ですが、よろしくお願い致します。

2016/09/03 (Sat) 23:23

Akira  

To ぱぴくる♪さん

ありがとうございます
順番にご説明します。

> 個別記事の文字を大きくしたい件
CSSソース末尾に以下を追加

.inner-contents {
font-size: 数値px;
}

デフォルトの文字サイズは13pxですので、それを踏まえて希望の数値を入れてください。
ただしこれだけですと
・関連記事リスト
・カテゴリ名 (各個別記事末尾 SNSシェアの上)
も大きくなります。
それが困る場合にはさらに

.relate_ul,
.category-name {
font-size: 数値px;
}

上記をinner-contentsの後に続けて書いてください。
最初の .relate_ul が関連記事
二行目の .category-name がカテゴリ名です。
いずれか一方にするには

例) 関連記事だけ

.relate_ul {
font-size: 数値px;
}

といった具合です。
複数の要素に対しての指定は間に , (カンマ) が入りますので注意です。
同じフォントサイズにしない場合には

.relate_ul {
font-size: 数値px;
}

.category-name {
font-size: 数値px;
}

こうして分けてください。

==========

> 新着サムネイルを削除

こちらはプラグイン3ではなく「RSS新着サムネイル」です。
該当箇所は Ctrl+Fキー検索

<!-- 注)新着サムネイル不要の方・非公開ブログの方はここから削除 -->

から

<!-- 注)新着サムネイル不要の方・非公開ブログの方はここまで削除 -->

までですので該当部分を削除してください。

=======

<footer>〜</footer>の部分には
・ページ内移動ボタン(top, middle, bottom)
・著作権表示(ぱぴくる♪さんに著作があることの明記)
・デザイナーノート&バックリンク(私の名前とブログへのリンク)
・広告

といった 大変重要なものが含まれています。
<%ad> <%ad2>
の記述が広告表示にあたりますが、これがソース内に含まれていない場合には「更新」を受け付けません。
何度作業しても復活したのはそのためです。
<%ad> <%ad2>
を削除して、仮に何らかの理由で更新が行われてしまった場合(まず起こりませんが)、例え意図的ではないにしろ広告を消しているということでアカウントを抹消処分されてしまいます。
ですのでフッターは決して消されませんようお願いします。

2016/09/04 (Sun) 14:06

ぱぴくる♪  

ありがとうございました。

お手数をお掛けしました。
早速変更してみます。

2016/09/04 (Sun) 16:59

Akira  

To ぱぴくる♪さん

今拝見しましたらできたみたいですね。
安心しました。
作業お疲れ様でした

2016/09/05 (Mon) 13:30

rio  

画像の推奨サイズ

初めまして。
こちらのテンプレートをお借りしたいのですが、
プレビューで見ると画像のサイズがバラバラなので綺麗に収まらないのですが
トップページの推奨サイズがありましたらお教え頂けますでしょうか?
わかりずらい質問で申し訳ないです。
お手数ですがどうぞ宜しくお願い致します。

2016/09/08 (Thu) 09:29

Akira  

To rioさん

ありがとうございます

> 画像サイズがバラバラ

こちらについては「プレビュー画面」で確認されているのが原因だと思います。
プレビューではJSの処理を完全に走らせることはできません。
以下のページをご参照くださいね。

http://vanillaice000.blog.fc2.com/blog-entry-220.html#object14

=======

> 画像の推奨サイズ

特に制限はありませんが、強いて言えばあまり小さな画像ですとサムネイル整形時に拡大されて解像度が落ちてしまいます。
長辺600px以上あった方が理想的かと思います。
縦横比などに特に条件はありません。

2016/09/08 (Thu) 11:36

ぼっちん  

To Akiraさんへ

Akiraさん、横から失礼致します。

rioさんのこの問題なんですけど、、、
http://lentement2.blog62.fc2.com/
を開くと、ずっとJavaScript?か何かを読み込み中のままになってます。
それが過ぎるとgrid内画像は正常サイズで表示されるようになります。

ご確認を~ m(_ _)m

2016/09/08 (Thu) 11:59

rio  

トップ画像の件

お忙しい中、ご返答頂き有難うございます。
また、ぽっちんさん 追記頂き有難うございます。
ダウンロードして適用しても正常に表示されるまで時間がかかってしまいます。
win7、IE11、chrome どちらでも同じ現象なので
パソコン自体に問題があるのかもしれません、
何か対処できる事があれば良いのですが、
本当に困っています。

2016/09/08 (Thu) 12:30

Akira  

To ぼっちんさん/ To rioさん

うーん…。
今速度検証してみたのですが、私の環境ですと… ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/2016-09-08%2013.49.38th__zpsdppq5yat.jpg

417ミリ秒ということで、非常に速いんですよね。
もちろんパソコンのスペックや通信速度にもよりますけれど。
ただこれはMacの最新OSでの検証です。
ちょっと今Windowsを開く環境下におりませんので、Windowsでどういった挙動なのかは後ほど確認しますね。

とりあえず今やって頂けそうなことは、まずはPCクリーニングですね。
そしてセーフモード起動(軽微なOS損傷があればこれで修復されます)、
セーフモードで起動したらログインし、そのまま何もせず再起動。
一度これで様子を見て頂けると助かります。

* スクショの掲載に問題があるようでしたら削除しますのでお申し付けくださいね。

2016/09/08 (Thu) 13:57

Akira  

To ぼっちんさん/ To rioさん

あー。はいはい。
今おかしくなりました!(笑)

JSエラーとして
・samuraiworks

これお心あたりありませんか。
忍者スクリプトか何かだと思いますけれど。
このスクリプトがhtmlの前半にあり、読み込みに非常に時間がかかっています。
(JSの解釈は「記述順」ですので、先にあるJSが読み込めないと後方のJSの処理が行われません)
エラー判定(読み込み不可)の結果が出るまでサムネイル整形用のJSが待機している状態だと思います。
一度アクセス解析のスクリプト内容を削除されまして、結果をお知らせください。
その後解析コードをどうするかを考えましょう。
まず一度外してみることです。

========

アクセス解析コードのローディング状態スクショ ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/2016-09-08%2014.07.21th__zpszrtkeb6b.jpg

グレーの状態 = ローディングが完了していない

先ほどの私のページ速度検証のスクショですが、ご覧頂くとページの左上にアクセス解析バナーが表示されていませんよね。
これは私がブロックしているからです。
で、もしかしてと思いブロックを外しましたところ、お二方が訴えていらっしゃる症状が発生しました。
忍者のサーバーに何かしらの不具合があるのかもしれないですし、あるいはコード自体が間違っているのか。
現状だとローディングが始まってすぐにバナーが表示されませんよね。
で、1分ほど経過してようやくバナー表示と共に整形が行われている状態です。
ぼっちんさんのページは正常に表示が行われるのに対し、rioさんのページではダメ、というのはこのアクセス解析の有無だと思います。
いずれにしろまず外されて動作確認をお願いします。

2016/09/08 (Thu) 14:06

rio  

お手数おかけします。

ご丁寧に確認頂き有難うございます。
アクセス解析を入れる前から正常に表示されなかったのですが、
一応タグは外しましたが変わりません。
キャッシュ及びセーフモードで起動も行いましたが変わりませんでした。
何度も申し訳ないです。

2016/09/08 (Thu) 16:02

Akira  

To rioさん

あとはプラグインを一旦全て非表示にし、どのプラグインに原因があるかを探します。

http://vanillaice000.blog.fc2.com/blog-entry-292.html

ともかく何かが阻害していますので、その原因がアクセス解析でないのならば(以前から表示されないということなので、アクセス解析自体が影響を受けた被害者だったのかもしれません(笑))、他に考えられる原因は「プラグイン」だと思います。

私の方で全てチェックするわけにいかないもんですから、この原因特定についてはrioさんの方でお願いします。
今パっと見て「おかしいな」と思う部分もいくつかありますので書いておくと、
プラグイン3の「リンク」の最終の終了タグ</div>が不足しています。
そしてその中身のバナーのハイパーリンクの<a>が

<a target="_blank" href="http://myaf.estore.co.jp/ShopServe/ac.php?u=19826&id=cocobank&up=799886" target="_blank">

赤字部分がシンタックスエラー。
正しいアドレスをご確認頂きまして

<a target="_blank" href="アドレス">

に修正を行なってください。

それから同じくプラグイン3「参加中」
この中身にもエラーがたくさんあります。
(これ一番まずいやつかもしれない)
中身がテンプレのレイアウトにも影響を及ぼしています(見た目上はわかりにくいですが)
こちらも終了タグの不足がありますし、JSも含んでいるようです。
単純なハイパーリンクのようですのでJSの意図がちょっとよくわからない ^^;
あと</font>なんかも不足していますね。
この「参加中」の中身の方、rioさんで修正できれば良いのですが、難しいようでしたら鍵つきで構いませんのでソース内容を見せてください。
私の方で直せるようなら直します。

とりあえずプラグイン3だけソースを開いてみましたが、残りのプラグインは見ていません。
ひとつでもエラー(構文ミス)が出るとそれに続く要素全てに影響して、どんどんエラーが増えていきます。
プラグイン1, 2 はパっと見問題なさそうですが絶対とは言わない(笑)
ともかく

① 一旦プラグイン全てを非表示に
② ひとつづつ順に表示させて動作を確認

この順序で特定をお願いします。

2016/09/08 (Thu) 17:06

rio  

直ったようです!

お世話になります。
本当に何度もご丁寧に調べて頂き、またご教示頂き恐縮です。
ご指導通りに参加中の中とリンクを確認しました。
最初リンクのバナーを削除しても変わらず、
参加中の中のおかしいなと思う部分を削除しましたら表示されるようになりました!
何もわからない素人がカスタマイズするといけませんね、反省してます…。
お教え頂き、学ぶことが出来て感謝しています。

一応、ソースを貼ったのですが、本文に含まれるURLの数が超過していますと表示が出て送れませんでした、

この度は、お手数をお掛けしました。
本当に助かりました有難うございました。
テンプレート大切に使わせて頂きます。

2016/09/08 (Thu) 17:53

Akira  

To rioさん

良かったですー

ただソース内容についてはいずれは直さなければいけない、と思ってくださいね。
今回はこれで体裁は取れていますが、エラーが存在していることに変わりはありません。
一応書いておきます。

「参加中」のソース末尾に </div> を2つ追加


ここを修正されればアクセス解析を貼り付けても機能するかと思います。

===========

ぼっちんさん、ご協力ありがとうございました

2016/09/08 (Thu) 19:05

ぼっちん  

To Akiraさん

ご丁寧なお言葉、ありがとうございます。
外出直前で、ろくな検証もしないままAkiraさん丸投げで押しつけてしまって相済みませんでした (^^ゞポリポリ
もっとも、私じゃこんなに複雑な解析も出来ませんでしたけど(笑)
勉強させて頂きました ^^
それと、いつも素敵なテンプレートの開発とご提供をありがとうございます。

2016/09/08 (Thu) 19:55

rio  

To Akiraさん、ぼっちんさん

プラグイン3のソース内容をもう一度、確認してみました。
随分前にスクロールバーを付けたくて、良く分からずに間違って設定していたようでした。
お騒がせして大変申し訳なかったです。
また、ぼっちんさんにも助けて頂いて感謝しています。
有難うございました。

2016/09/08 (Thu) 20:22

Akira  

To ぼっちんさん

いえいえもう、ホントに助かりました。
たぶんぼっちんさんはrioさんの困り事の内容が私に伝わっていない(私が理解していない)のを察して、助け舟を出してくださったんですよね。
その通りでございます。理解できてなかった!(笑)

嬉しいお言葉も頂きました。
励みになります。
重ねてありがとうございます

2016/09/08 (Thu) 23:22

Akira  

To rioさん

修正できて良かったですー
レイアウトの崩れなんかは気づきやすいのですが、今回みたいなケースはなんだかモヤ〜っとおぼろげに感じるだけで気が付きにくいですよね ^^;

作業お疲れ様でした

2016/09/08 (Thu) 23:24

ぼっちん  

スマホでのハンバーガーボタンを

Akiraさん、お世話になります ^^

現在このColonyを使わせて戴いているんですが、スマホで見た場合のサイドバー呼び出しのハンバーガーボタンは、Webフォントアイコンではないのでしょうか?
実はこの形状をもう少し自己主張強く(笑)Webフォントアイコンの "fa fa-exchange" のようなものに変更したくているんですが、ソース上から見つけられなくて困惑しております (;^_^A アセ

その変更方法を是非是非ご教示下さい。

2016/09/12 (Mon) 11:45

Akira  

To ぼっちんさん

お手数おかけしております (*_ _)

ハンバーガー該当htmlはCtrl+F(Windows)/ Command+F(Mac) キー検索

<div class="mobile-toggle">

を目印に
<span></span>
<span></span>
を挟んで

</div>

までです。
この部分を

<div class="mobile-toggle">
該当webアイコン
</div>

に変更して頂きまして、CSS該当箇所は

.mobile-toggle

になるわけですが、その下にある
.mobile-toggle span
に関する記述は不要になります。
.mobile-toggle の装飾についてはお使いになるwebアイコンと相談して調整してください。
よろしくお願いします。

2016/09/12 (Mon) 21:41

ぼっちん  

To Akiraさん

素早いご教示をどうもありがとうございました。
とりあえず装飾なしで変更させて戴きました ^^
そのほうがスマホからブログ覗いてくださる方達に「おっ ここに何かある ポチッ!」てしてくださるアピール度が強そうに思えて(笑)
様子を見つつ、必要でしたら装飾しようと思います。

ところで、もしかしてこの部分のWebテクは、Akiraさん的にはあまり公開したくない部分じゃなかったのかな? などと、今になって心配になってしまいました。
もしそうでしたらお詫び致します~ (;^_^A アセ

ご親切に、ほんとにありがとうございました ^^

2016/09/13 (Tue) 10:22

Akira  

To ぼっちんさん

こんにちは (●'0'●)/

> もしかしてこの部分のWebテクは

いえー。全然そんなことはないです(笑)
お気遣いありがとうございます
webアイコンだと全体の大きさは調整できますが、線と線との間隔なんかを細かに指定できないもので。
という単純な理由です(笑)

こちらこそお手数おかけしました。
作業お疲れ様でした

2016/09/13 (Tue) 14:46

れぃん  

コメント欄ボタンの位置設定につきましてのご質問です

はじめまして。 
今回もこちらのテンプレートを お借りさせていただいております  
いつもながらスタイリッシュなデザインと丁寧な作りに尊敬の気持ちです 
このような完成度の高いお作品に、お願をするというのも恐縮に、申し訳なく思うのですが
コメント欄のボタンが、
今の記事トップの位置から更新記事の下に来るような変更はできませんのでしょうか。。
と思っています
PC に不慣れなため説明もちゃんとできずに、おわかりにくかもしれません 
失礼お許しくださいませ。
もしそう言う事が可能であれば お教えいただきたいとお願いたします
ご多忙のところを申し訳なく思いながらです。。 

2016/09/13 (Tue) 18:56

Akira  

To れぃんさん

ありがとうございます ( ゚Д゚)ノ

> コメント欄のボタンが、 今の記事トップの位置から更新記事の下に来るような変更

コメント欄のボタン、というのはコメント投稿フォームまで移動させるための吹き出しアイコンのことでお間違いないでしょうか。
そのアイコンの位置を個別記事のSNSボタン付近に移動させたい、ということでしょうか。
思い違いでしたらご指摘ください。
上記の通りだと仮定しまして、Ctrl+F(Windows)/ Command+F(Mac) キー検索

<div class="entry-info">

上記を目印にして頂きますとhtmlソース内に1箇所あります。
そこから下に目を通されますと
</ul>
というのが直近にあります。
その下の
</div>
までが該当範囲です。スクショでご確認ください ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/a983urath__zps48hqikcp.jpg

この部分をCtrl+X(Windows)/ Command+X(Mac) でカット(切り取り)
Windowsであればメモ帳に、Macであればテキストエディットに一時貼り付けておいてください。
Ctrl+V(Windows)/ Command+V(Mac) でペースト(貼り付け)です。

続きまして検索。
記事下「カテゴリ(フォルダアイコン+カテゴリ名)」の前後に移動する場合

<p class="category-name">

上記を目印に直近の
</p>
までがカテゴリの部分ですので、上にされるのであれば
<p class="category-name"> のすぐ「上」に
下にされるのであれば
</p> のすぐ「下」にメモ帳に移した内容を貼り付けます。

他の場所に移動される場合には、テキストの合わせ(左寄せ/ 中央/ 右寄せ)や位置調整などが出てきますので、具体的な場所をお知らせください。
その場合のテキスト合わせ位置のご希望も併せてお願いします。
よろしくお願いします。

=======

んで、個別記事かなーと思って書きましたが、
トップページのことかもしれない、って今思った(笑)
ともかく勘違いならご指摘くださいね。
すみません ヽ(°▽、°)ノ

2016/09/13 (Tue) 20:31

れぃん  

ありがとうございました 

Akiraさま
たどたどしい説明にもかかわらず、ご親切に教えていただきましてありがとうございました
教えていただいた通りに、しっかりと見つけて、注意してコピペをしまして
今ボタンが移動いたしました

素敵に完成されたお作品ですのに、こちらサイドの願もお聞きいれいただいて 
感謝でいっぱいです 
大切に使わせていただきます
心より ありがとうございます。。
 

2016/09/13 (Tue) 21:23

Akira  

To れぃんさん

合ってましたか。
良かったです(笑)

こちらこそありがとうございます。
作業お疲れ様でした

2016/09/13 (Tue) 22:26

れぃん  

記事本文のセンター文字入れにつきまして

こんにちわ
先日はコメントボタンのポジションのことで教えていただきましてありがとうございました
お蔭さまでと感謝しております
それでまたお邪魔させていただきましたのは、
テキストが多くない私のブログでは できたらセンター文字入れにしてみたいと
text-align: center; などを入れてみたりしているのですが、 
そういう簡単なことではないのですね(/*^^*)/ハズカシ
コメントはそのままで、
記事本文だけをテキスト&画像をセンター配置にすることはできますのでしょうか 
ブログのスタイル上問題がなければ 教えていただきたいたいと思います
お手数をおかけするばかりで申し訳なく思いながらよろしくお願いいたします。。

素適なグリッドのトップページ 
とても嬉しく幸せな気持ちで使わせていただいております
心よりありがとうございます

2016/09/25 (Sun) 14:27

Akira  

To れぃんさん

ありがとうございます (o'д`o)ゝ

> 記事本文だけをテキスト&画像をセンター配置に

これは「個別記事ページで」ということでお間違いないでしょうか(トップページではできません)
Ctrl+F(Windows)/ Command+F(Mac) キー検索

.inner-contents a:hover {

CSSソース内に1箇所あります。
このすぐ「上」に以下を追加

.inner-contents {
text-align: center;
}


これでテキストと画像はセンタリングになります。
このままでは後続要素の
・関連記事リスト(非表示設定ですが一応)
・スポンサーサイト(こちらも非表示設定)
・カテゴリ
・ランキング等 れぃんさんが記事に毎回貼り付けているバナーやボタン関連(ブログ村など)
上記も全てセンタリングされます。

ランキングバナーについては、対象要素にidあるいはclass名が付いていませんので、テンプレート側で除外することはできません。
この部分だけを「左寄せ」あるいは「右寄せ」などセンタリング以外に設定するには、記事の方で全て編集(修正)する必要があります。
センタリングで問題なければ特に気にされることはありません。

● 関連記事リストを左寄せ修正(非表示から切り替えない場合は作業不要, センタリングでOKな場合も作業不要)
Ctrl+F(Windows)/ Command+F(Mac) キー検索

/* with thumbnail */

このすぐ「上」に以下を追加

.relate_dl {
text-align: left;
}


● スポンサーサイトを左寄せ修正
検索

#fc2_text_ad

この項目の
font-size: 12px;
のすぐ「下」に以下を追加

text-align: left;

● カテゴリを左寄せ修正
検索

.category-name {

この項目の
padding: 50px 0 10px;
のすぐ「下」に以下を追加

text-align: left;

=======

以上です。
左寄せ修正についてはご自身の希望と照らして作業する・しないをお決めくださいね。
よろしくお願いします。

2016/09/25 (Sun) 22:49

れぃん  

ありがとうございました

Akiraさま
お忙しいところを早速にお教えいただいて本当にありがとうございます
お蔭さまで センタリングにできました
他のことについてもご親切なアドバイスいただきまして 
ばぁば私には、すべてありがたくてなりません
 
もしかの今後のためにもと、大切にメモメモさせていただいています
拙い質問にもご丁寧に対応していただきましたこと 感謝でいっぱいです。  

2016/09/25 (Sun) 23:32

Akira  

To れぃんさん

ご希望通りになったのであれば幸いです。
お疲れ様でした ٩( ᐛ )و

2016/09/26 (Mon) 23:25

みなみ  

フリーエリア

Akira様、お世話になります。

不躾な質問なのですが

こちらのテンプレートのトップページ下段の

ペジャーとRSS新着サムネイルの間に

サイドバー手前までの横長サイズのフリーエリアを作り

他サイトの画像付きRSSをと検討してるのですが可能でしょうか?

宜しくお願いいたします。

 

2016/11/15 (Tue) 22:45

Akira  

To みなみさん(追記あり)

お返事遅くなっておりますー (*_ _)
可能です。
ただ私ができるのはアウトライン作成(html定義)と場所の作成のみですので、
そのプラグインをレスポンシブにするだとか、どういった装飾にするのか、といったことはプラグインの作者様にご相談くださいね。

ちょっとなかなかパソコンを開く時間も取れず。
取り急ぎ「拝見しました」というお知らせだけにさせてくださいね。
今日の深夜までにはなんとか…。
申し訳ないです。

-------- 11/19 追記

既にテンプレを変更されたようですので、時間もないことですしこのままスルーで良いですかね。
すみません ^^;

2016/11/18 (Fri) 10:57

みなみ  

お世話になってます。
テンプレColonyを使用させて頂いてます(;´д`)
<!-- トップページここまで -->の真上に
<table style="margin: 0 auto; border-spacing: 0; border-collapse: collapse; border: 1px solid black; background-color: white; max-width: 100%;">
でしたのですが・・・
ご教授お願いいたしますm( _ _ )m

2016/11/19 (Sat) 10:54

Akira  

To みなみさん

申し訳ございません。
ブログアドレスの記載をお願い致しますー (´・ω・`)

2016/11/19 (Sat) 11:05

-  

管理人のみ閲覧できます

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

2016/11/19 (Sat) 13:36

Akira  

To みなみさん

コメント主以外は公開の状態を変更できませんので、削除して鍵つきでアドレスをコピペしておきました。
後ほど拝見しに参ります。

2016/11/19 (Sat) 13:37

Akira  

To みなみさん

既にデフォルトのRSSを削除した上で忍者画像RSSを導入されてますが、問題点はどこでしょうか (´・ω・`)
一応レスポンシブの体裁も取れていますし、目に見える不具合は無いように思います。
とりあえずエラー関連をチェックして追記しますが、具体的に何を希望されているのか教えてくださいね。
よろしくお願いします。

-------- 追記

① head内に

<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

を追加されていますが、こちらは不要です(重複)
content=”IE=edge” は旧IE向けで古い記述ですので、IEだけに認識させるようにしておかないとエラーです。
そして既に含まれていますので不要。

② 右サイドメニューの一番上のスライド系プラグインの</a>が不足しています。
リンク範囲がおかしくなっていますのでチェックされた方が良いと思います
(二番目のプラグインのタイトルにマウスオーバーしてみるとわかります。本来ここはマウスカーソルが指にならない部分のはず)
すぐ下(二番目のプラグイン)もリンクですので正しく機能しません。
修正の必要ありです。
アンカータグの閉じ忘れはレイアウトが狂う原因になります。
今のところ「たまたま」崩れていないだけで(笑)

すぐにわかるエラーとしては上記の通りです。
で、何についてお困りなのか判断し兼ねますのでお返事をお願いします。

2016/11/19 (Sat) 13:45

みなみ  

To -さん

忍者画像RSSですが表示設定のピクセル指定200PXでしているので
PCはかろうじて表示出来ていますがスマホでは縦長になります。
ピクセル指定を外すと表示されなくて・・・

2016/11/19 (Sat) 15:35

Akira  

To みなみさん

最初にお伝えしました通り、外部プラグインは私のテンプレとは一切無関係ですので、私が導入の仕方やデザインのお手伝いをすることはありません (´・ω・`)
私がやろうと思えば動作確認のために忍者に登録する必要まで生じてしまいます。
既存テンプレに何かを「追加」するお手伝いというのは行っておりません。

> 200pxで指定しているので縦長〜

これは当然そうなりますね。
現況のスマホで最小横幅は恐らく320px(iPhone5系列, iPhone SE含む)だと思いますので、横に並ばれて200×2=400pxになってしまえばレスポンシブとしては崩壊してしまいます。
Colonyで使える横幅は余幅(padding)なしで320pxまでですので、仮に2つ横並びにしたいのならば許容幅は160pxです。
160pxを意識して忍者RSS側でのカスタマイズを行われるか(コードの再作成という意味です)、あるいはデバイスに応じて画像の大きさを変更したいのであれば
忍者の提供するCSSに頼らずにご自分でCSS装飾を行うしかありません。
いずれにしろ、外部プラグイン整形のご依頼であればお断りさせてくださいね。
よろしくお願いします。

2016/11/19 (Sat) 16:10

みなみ  

お手数をお掛けし申し訳ありませんでした。
あれこれと挑戦してダメなら外すなり他の方法に変更するなり
検討したいと思います(;´д`)
ありがとうございましたm(_ _)m

2016/11/19 (Sat) 16:37

Akira  

To みなみさん

いえー。
こちらこそお役に立てず申し訳ないです。
忍者RSSは細かなカスタマイズが可能なようですので、一記事あたりの横幅を160px設定にできるならそれが一番簡単ですわね (´・ω・`)
パソコンで見た時に小さいかもしれませんが。
いずれにしろ忍者のコード生成ツールとにらめっこで頑張ってください ( ゚Д゚)ノ

2016/11/20 (Sun) 12:44

Akira  

To yukoさん(移動先)

> SNSリンク設定について

Ctrl+F(Windows)/ Command+F(Mac)キー検索

リンク不要な方この一行削除 リンクする方は#を消去してアドレス入力

上記文言で検索されますと6サイト分のリンク設定該当箇所が出てきますので、あとは注釈に従ってください。

また、カスタマイズ前に
注)
で検索して頂くと、色んなカスタマイズのガイダンスが出てきますので参考にされると作業がスムースに進むかと思います。
よろしくお願いします。

2017/01/31 (Tue) 12:56

yuko  

To Akiraさん

ありがとうございます。
リンクできました^^

2017/01/31 (Tue) 18:05

Akira  

To yukoさん

良かったですー。
お疲れ様でした

2017/02/01 (Wed) 15:54

みなみ  

No title

以前忍者画像RSS表示設定でお世話になりありがとうございました。
またまた質問なのですが個別記事下段の拍手上にフリー枠をと考えているのですが可能でしょうか?
可能でしたら画像RSSを移動させようと思いまして・・・
宜しくお願い致します。

2017/03/11 (Sat) 00:56

Akira  

To みなみさん

こんばんは (●'0'●)/

拍手の位置はFC2の仕様によって出力場所が予め決められています。
htmlソース内でその位置を変更するのは不可能です。
従ってJSのinsertを用いることになりますが、RSS表示自体がJSですのでコードが無い限りなんともお答えのしようがございません。
RSSのJSコードの方にinsertのメソッドを加える格好になります。
そしてテンプレートと無関係なプラグイン導入のお手伝いは総じてお断りさせて頂いております。
ごめんなさいね。
よろしくお願いします。

2017/03/11 (Sat) 01:23

みなみ  

了解致しました
有難うございました。

2017/03/11 (Sat) 08:35

みなみ  

No title

お世話になっております。
度々申し訳ありません、また質問なのですが
関連記事リストの表示で画像が円形なのですが
正方形に変える事は可能でしょうか?
宜しくお願い致します。

2017/03/19 (Sun) 09:09

Akira  

To みなみさん

こんばんは (●'0'●)/
こちらこそお世話になっております

> サムネイル円形解除〜

Ctrl+F(Windows)/ Command+F(Mac) キー検索


#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail img {

こちらの項目を削除
(内容を挟んで } まで削除)


#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail .relate_entry_thumbnail_noimg {

同じく削除。


.related-overlay {

この中の

border-radius: 50%;

のみ削除


.related-overlay:before {

この中の

border-radius: 50%;

のみ削除。

=====

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

2017/03/19 (Sun) 21:03

みなみ  

ありがとうございます

無事変更できました。
ありがとうございましたm(_ _)m

2017/03/19 (Sun) 23:03

Akira  

To みなみさん

はい。ご報告ありがとうございます。
お疲れ様でした

2017/03/20 (Mon) 01:11

みなみ  

No title

お世話になっておりますみなみです。
度々で申し訳ありません。
記事の投稿の事なのですが
本文の編集で内容本文と画像、
追記の編集で画像で投稿しておりますが
表示される時に画像が横並び2枚表示になるのですが
縦2枚にするにはどうすればよいでしょうか?
現在
本文の編集
本文1<br />本文2<br /> <img src="画像アドレス" alt="" class="image-size" />
追記の編集
<br />本文1<br />本文2<br />本文3<br />本文4<br />本文5<br /> 画像1<br /> <img src="画像アドレス" alt="" class="image-size" /><br />画像2<br /> <img src="画像アドレス" alt="" class="image-size" /><br /> 画像3<br /> <img src="画像アドレス" alt="" class="image-size" /><br /> 画像4<br /> <img src="画像アドレス" alt="" class="image-size" /><br /> 画像5<br /> <img src="画像アドレス" alt="" class="image-size" /><br /> 画像6<br /> <img src="画像アドレス" alt="" class="image-size" /><br /> 動画1<br /> <br /> お薦め<br /><img src="画像アドレス" alt="" class="image-size" /><br />
にしています。
宜しくお願いいたします。

2017/04/06 (Thu) 13:10

Akira  

To みなみさん

> 表示される時に画像が横並び2枚表示になる

私からは確認ができないのですが、どこのことですか?
記載頂いているソースに合致するページも確認が取れません。
概ね 本文+画像1点+動画1点+画像(バナー)2点
の構成のようですけれど。
そして<br />を入れているということは、改行の扱いを「htmlタグのみ」に指定されているのでしょうか。
ちなみにhtmlの正しい改行は<br />ではなく<br>です。
imgの末尾 / も不要。
<img src="" alt="">

ソース内容通りに記述されているのであれば画像が横並びになることはないはずです。
画像の後ろに<br>が入っていれば必ず改行されます。
どのページかを教えて頂かないことにはどうにもお返事のしようがありません。
よろしくお願いします。

別件ですが、JSエラーやhtmlエラーなどが多数見られます。
特にhead情報に余計な文字列が入っていますので、一度カスタマイズ部位の精査をされたほうが良いと思います。

2017/04/06 (Thu) 22:14

みなみ  

お世話になります

お世話になります
構成が無茶苦茶ですいませんm( __ __ )m
http://freeadul10.blog.fc2.com/blog-entry-164.html
ページなのですがノートで見ると縦表示なのですが
デスクのモニターが大きいと追記画像が本文画像横2列になってしまうのですが・・・ 


別件のことですがそれもちんぷんかんぷん状態です・・・
カスタマイズ部位、JSエラーやhtmlエラーなどなど

2017/04/06 (Thu) 23:16

みなみ  

お世話になっおりますみなみです。
追記の編集の先頭に<br>で何とか縦並びできました。
度々申し訳ありませんでしたm(_ _)m

2017/04/07 (Fri) 08:52

Akira  

To みなみさん

本文と追記の境ですか?
追記の頭に本文と書いてあるのでどこのことかと ^^;

全記事の修正は大変でしょうから、
Ctrl+F(Windows)/ Command+F(Mac)キー検索

<!--more-->

上記を目印に <!--/more--> までを以下の通り修正してください。

<!--more-->
<div>
<%topentry_more>
</div>
<!--/more-->

これで<br>の有る無しに関わらず絶対に横並びにはなりません。
よろしくお願いします。

2017/04/07 (Fri) 13:42

みなみ  

ありがとうございます。

2017/04/07 (Fri) 16:30

Akira  

To モウリさん(移動先)

既にコメント欄に回答がありますので、そちらをご参照くださいね。
よろしくお願いします。

http://vanillaice000.blog.fc2.com/blog-entry-401.html#comment3262

2017/06/01 (Thu) 21:33

モウリ  

関連記事のサムネイルについて

サムネイルが丸型から四角にできました。
お世話になりました。ありがとうございます!

2017/06/03 (Sat) 08:37

Akira  

To モウリさん

良かったですー。
手抜きなお返事でごめんなさいね ^^;
作業お疲れ様でした

2017/06/03 (Sat) 10:58

モウリ  

アイキャッチ画像について

記事のアイキャッチ画像が出るものと出ないものがあります。
記事作成の時は画像が出てアイキャッチ画像を取り込めますが、記事作成をすると消えてます。
対応方法ございますでしょうか?

2017/06/26 (Mon) 15:51

モウリ  

先ほどの

アイキャッチ画像ですがスマホから投稿することで正常に作動しました。

2017/06/26 (Mon) 16:00

Akira  

To モウリさん

こんにちは。
今ちょうど拝見していたところです。
FC2ブログのサムネイルはファイル名に半角カッコが付いていると取得できません。

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-389.html
http://vanillaice000.blog.fc2.com/blog-entry-527.html

よろしくお願いします。

2017/06/26 (Mon) 16:11

モウリ  

ありがとうございます。

教えていただいて解決策がわかりました。
ありがとうございます。

2017/06/26 (Mon) 22:32

Akira  

To モウリさん

お役に立てましたら幸いです。
お疲れ様です

2017/06/27 (Tue) 10:04

こうのすけ  

メガプルダウンについて

お世話になります。コロニーをお借りしてブログを運営しているのですが、最近グローバルメニューをカスタマイズしたくなり色々弄ってみたもののうまくいかずご相談させていただきます。

ネットで色々調べた結果、メガプルダウンに変更したくなり取り入れ方を試してみたのですがどうしてもうまくいいきません。もし無理でしたら通常のプルダウンでも構いません。取り入れ方法をご教授いただけると助かります。

お手数ですがよろしくお願いいたします。

2017/11/06 (Mon) 23:37

Akira  

To こうのすけさん

こんばんは。
テンプレートと無関係なプラグイン(JSなど)の導入や、1から10まで付きっきりのカスタマイズサポートは総じてお断りしています。
ご自身で導入されてその工程の一部でつまずいたので手助けを、というなら話しもわかりますが、初めから全てを丸投げされても困ってしまいます。
ご理解をお願いします。

2017/11/07 (Tue) 01:26

Pee  

はじめまして

個別エントリーにつけたタグなんですが、クリックするとFC2ブログのタグリスト?へ
飛んでしまいます
これを自分のブログ内へ飛ぶようにしたいのですが可能でしょうか?
(プラグイン1のタグ検索をクリックした時と同じ表示にしたい)
よろしくお願いします

2017/11/16 (Thu) 13:43

Akira  

To Peeさん

こんばんは (o'ω')ノ

手順1
<p class="tags">
でCtrl+F(Windows)/ Command+F(Mac)キー検索して頂きますとhtmlソース内(テンプレート管理画面上段)に1箇所ヒットします。
それを目印にスクショと照らしながら該当部位を一旦削除してください。

https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/capturedeletetags43th.jpg

-----
手順2
同じ位置に以下の内容をコピー&ペースト。

<div id="entry-tag">
<!--topentry_tag-->
<span class="fa fa-tags" aria-hidden="true"></span> <!--tag_list--><a href="<%url>?tag=<%topentry_tag_list_parsename>"><span class="tag-name" itemprop="keywords"><%topentry_tag_list_name></span></a><!--/tag_list-->
<!--/topentry_tag-->
</div>


-----
手順3
CSSソース(管理画面下段)の末尾に以下を追加。

#entry-tag a {
display: inline-block;
padding: 0 2px;
}


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

2017/11/16 (Thu) 20:46

Pee  

Akiraさん

お忙しい中、丁寧なご対応ありがとうございました。
希望通りにすることができました。
いつも素敵なテンプレートありがとうございますm(._.)m

2017/11/17 (Fri) 10:16

Akira  

To Peeさん(完了のご報告)

良かったですー。
お疲れ様でしたでした

2017/11/18 (Sat) 22:01

めぇめぇ  

もう一度、ルールに乗っ取って書かせていただきます。
お手数をおかけいたします。

「Colony」を使わせて頂いております。
ほんのほんの少しだけCSSがいじれるだけの人間ですので
AkiraさんのCSSは私にとってはかなり手強く・・・教えて頂ければ助かります。

(1)エントリー内の「画像」と「本文」の開始位置をもう少し中央寄りにしたいのですが
CSSのどの箇所の数値を変更すれば良いでしょうか。

(2)もし、本文内容を「中央寄り(center指定)」にしたい場合はどの個所を変更すれば良いでしょうか。

お忙しいとは思いますが
どうぞよろしくお願いいたします。

2017/12/17 (Sun) 15:08

Akira  

To めぇめぇさん

お手数おかけします。
スマホから急いでお返事したのでちょっと突き放したような感じになってしまいました ^^;
(現在パソコンからです)

-----
> 開始位置をもう少し中央寄りにしたい〜

「開始位置を〜」とありますが、これは「インデント(文頭字下げ)」したいということなんでしょうか。
それとも「記事幅が広すぎて体裁が取れない」ためでしょうか。
インデントはかなり無理がありますので、続くご質問の

> 本文内容を「中央寄り(center指定)」にしたい場合〜

が最適解だと思います。
あるいは全体幅を小さくするか。
(その場合は連動してトップページのグリッドも縮小されます)

--------
センタリングの仕方

.inner-contents {
text-align: center;
}


をCSSソース(管理画面下段「スタイルシート」)の末尾に追加してください。
よろしくお願いします。
また、Colonyはレスポンシブテンプレートですのでスマートフォン版の利用は中止されることをおすすめします。もちろん強制ではありません。

参考記事
https://vanillaice000.blog.fc2.com/blog-entry-491.html

2017/12/17 (Sun) 15:25

めぇめぇ  

To Akiraさん

お忙しい中、本当にありがとうございます。
早速、センタリングを使わせていただきました。

スマホからの閲覧の件も、了解いたしました。

素敵なテンプレートをありがとうございます。

2017/12/17 (Sun) 18:36

Akira  

To めぇめぇさん

お出来になったということで良かったです。
お疲れ様でした

2017/12/17 (Sun) 20:14

めぇめぇ  

再びお世話になります。

昨夜まで正常だったトップページが
早朝から崩れてしまい、2列表示になっています。
履歴やキャッシュ等クリアしてみましたが
元に戻らないままです。

FC2さんに問い合わせてみたところ、他のパソコンからは正常表示で
私も、Firefoxで確認しなおしたら、正常表示でした。

できれば、自分のIEでも正常表示にできたらと思うのですが。

ブログの最新記事に、IEのスクリーンショットをアップしておきますので
お時間の取れるときにご確認頂き
テンプレート設定等でもし解決策があればアドバイス頂ければ大変助かります。
お手数をおかけいたします。
よろしくお願いいたします。

2018/01/20 (Sat) 11:52

Akira  

To めぇめぇさん

こんにちは。
先日別件のご相談時に

「Colonyはレスポンシブテンプレートですのでスマートフォン版の利用は中止されることをおすすめします。」
参考記事
https://vanillaice000.blog.fc2.com/blog-entry-491.html

と、このようにお伝えし、「検討します」ということでしたのでレスポンシブデザインの意味を理解できていると判断したのですが、意図をおわかり頂けなかったあるいはレスポンシブの意味をおわかり頂いていないということなんでしょうか。
また、リンク先もお読みになっておられないのでしょうか。

レスポンシブデザインというのは画面幅に応じてカラムの並び替えなどを行い、パソコン・タブレット・スマートフォンなどあらゆるデバイスから閲覧可能にする手法
のことを指します。
IEのブラウザ横幅を拡げてみてください。
またついでに小さくもしてみてください。
大きくしたり小さくしたりを繰り返して、レイアウトがどう変化するのかをご確認ください。
何故そうするのかの意味がおわかりになると思います。

私の記事がわかりにくようでしたら他サイトさんのページをご参照ください。

必読!5分でわかるレスポンシブWebデザインまとめ/ LIG様
https://liginc.co.jp/designer/archives/6154

スマートフォンやタブレットにも対応する注目のデザイン、 「レスポンシブWEBデザインの基本」/ cherry-pic様
https://www.cherry-pick.jp/blog/web-design/responsive-web.php

レスポンシブwebデザインで制作する時のポイント/ Design spice様
http://design-spice.com/2011/09/22/responsive-web-desig/

FC2ブログのレスポンシブテンプレートで誤った設定をしておりませんか?/ ぼっちん様
https://oops0011.blog.fc2.com/blog-entry-167.html

---------
レスポンシブデザインテンプレートではカラム数やカラムの位置が画面幅によって変化します。
常に同じ状態を維持したい場合には固定幅テンプレートをおすすめします(ただし画面幅超過時は横スクロールバーが出ます, スマートフォン版の設定必須です)
先回お伝えした「スマートフォン版の非表示をおすすめします。」の意味も含めご理解のほどよろしくお願いします。

2018/01/20 (Sat) 14:18

めぇめぇ  

お返事ありがとうございます。

確かにまだ・・・「レスポンシブデザインの意味」をしっかり理解が出来ておりません。
デザインに魅かれ、どうしても使いたい、という気持ちが先でした。
もう一度、こちらのブログの内容とともに、ご紹介下さった場所を丁寧に読ませて頂きます。

そして、大変恥ずかしいことの上塗りになりますが・・・
今回のトップページの表示が変わってしまったことの原因は
小鳥達がキーボードの上を走り回っている際に、IEの表示幅が微妙に変わってしまっていた。
ということでした。
「レスポンシブデザインの意味」が理解できていないがため、表示が崩れてしまったと早合点してしまったというお粗末でした。

>IEのブラウザ横幅を拡げてみてください。
>またついでに小さくもしてみてください。
>大きくしたり小さくしたりを繰り返して、レイアウトがどう変化するのかをご確認ください。
>何故そうするのかの意味がおわかりになると思います。

はい。
お陰様で愚かな早合点、解決いたしました。
お世話をおかけいたしました。
ありがとうございました。

2018/01/20 (Sat) 15:37

Akira  

To めぇめぇさん

いえどうかそんなに恐縮なさらず ^^;
大半の方がレスポンシブと知らずにお使いになっていますので、この機会に知ってもらえて却って良かったです。決して愚かなどではありません。

はい。どのページも参考になるかと思いますので是非御覧くださいね。
お疲れ様です

2018/01/20 (Sat) 15:50

-  

管理人のみ閲覧できます

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

2018/02/03 (Sat) 00:25

-  

管理人のみ閲覧できます

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

2018/02/03 (Sat) 00:41
vanillaice (Akira)

Akira  

Colonyの件 内緒さん

ありがとうございます

内緒さんはプラグインをひとつも表示していらっしゃらないんですね。
ちょっとそのパターンは想定してなかった ( ̄∀ ̄;)
本来は右側にサイドメニューがありますが何も無いのでメインコンテンツが左に寄ってますよね。
こういう場合はシングルカラムをおすすめしたい (´・ω・`)

また、Colonyは1月22日に新バージョンになっています。
メンテナンス後は若干のレイアウト変更及びサイドメニューのドロワーを削除しています
従ってハンバーガーボタンは出ません。

今の形(サイドメニューなし)ですとJSのいくつかが全くの無駄になり、表示の負荷だけがかかっているような状態です。
ご自身のブログ内容に合致したテンプレート選び、内緒さんの場合には「シングルカラム」ですね、こちらも選択肢に入れてみてはいかがでしょうか。

Colonyを継続利用される場合には新バージョンへのアップデートをされるかどうかお知らせください。
旧バージョンを選択する、ということであればボタン非表示の手順及びJS修正手順をお伝えします。
お返事待ちにさせてくださいね。よろしくお願いします。

------
画像が表示されない件についてはこちらをご確認ください。

ご質問の前に「テンプレあるある」
https://vanillaice000.blog.fc2.com/blog-entry-220.html#object11

原因は「直リンクだから」です。
直リンクはサムネイル対象外です。

2018/02/03 (Sat) 11:33

yereeves  

colony 返信ありがとうございます

すぐに返信ありがとうございました。
・写真トップページは直リンクはだめなのが分かり、fc2に登録してからしてみました。
その後は表示出来喜んでいたのですが、
今日見てみるとスマホ画面では
何も表示されておらず、
どうしてしまったのか分からずにいます;;


・1カラムの状態で使ってしまっている件ですが、せっかく作られたものを思われている形で使っていなかった様で、すみません。
元々は2カラムで使用していまして、こちらのテンプレートをお借りして変えたのですが、テンプレートの中にカテゴリを入れられる形でしたので、右にあったものを全て移動させてしまっていた事が原因でした。
こちらの件はもう少しこの気に入ったテンプレートで使えないか検討してみます。

またご連絡させて頂きます。
お忙しい所御手数掛けて申し訳ないです。
どうぞよろしくお願いします。

Y.e.reeves

2018/02/08 (Thu) 23:09

yereeves  

colony 返信ありがとうございます

すぐに返信ありがとうございました。
・写真トップページは直リンクはだめなのが分かり、fc2に登録してからしてみました。
その後は表示出来喜んでいたのですが、
今日見てみるとスマホ画面では
何も表示されておらず、
どうしてしまったのか分からずにいます;;


・1カラムの状態で使ってしまっている件ですが、せっかく作られたものを思われている形で使っていなかった様で、すみません。
元々は2カラムで使用していまして、こちらのテンプレートをお借りして変えたのですが、テンプレートの中にカテゴリを入れられる形でしたので、右にあったものを全て移動させてしまっていた事が原因でした。
こちらの件はもう少しこの気に入ったテンプレートで使えないか検討してみます。

またご連絡させて頂きます。
お忙しい所御手数掛けて申し訳ないです。
どうぞよろしくお願いします。

Y.e.reeves

2018/02/08 (Thu) 23:09
vanillaice (Akira)

Akira  

To yereevesさん ②

こんばんは。

> スマホ画面では何も表示されておらず、どうしてしまったのか分からずにいます〜

えーと。どの記事のことでしょうか。該当記事のURLを頂かないと特定ができません。
とりあえず2017/ 12/ 19の記事でしたらやはりInstagramの直リンクですよ。
他の記事は確認していません。

--------
> 右にあったものを全て移動させてしまっていた〜

ちょっとこの意味が理解できないです。すみません ^^;
要するに「削除した」ということでしょうか。
カテゴリは一覧が無いと閲覧者では「どんなカテゴリが」「いくつあるのか」など把握できませんので、記事を見て貰える機会は減ってしまいます。
その点をどうお考えかというところですよね。
ご自身が納得されているのであればそれで良いと思いますけれど。
そして閲覧者側に立ってみるとやはり「なんかすげー左に寄ってるな。」という印象は否めません。

もしかしてですが「直リンク」の意味が伝わってなかったかもなので説明しておきます。
「外部サーバーに置いてある画像を表示させること」を一般的に「直リンク」と言います。
つまりFC2ブログ内で「アップロード」を行わずに他サイト(今回はInstagram)からURLを拾っている、ということです。
FC2ブログにアップロードを行なってください。よろしくお願いします。

2018/02/08 (Thu) 23:33

icons8  

No title

パソコン、スマートフォンやタブを使っている人にとって、とても役に立つサイトですね!
とても素敵なテンプレートばかりです!

2018/02/10 (Sat) 23:45

凛音  

ヘッダーについての質問

はじめまして。

この度、Akira様の「Colony」をお借りし、ブログを始めたいと考え、現在そのための準備をしていすのですが、ヘッダー部分のブログタイトルの文字を削除し、250px×1000pxの画像を入れ込むことは可能でしょうか?

他サイト様で紹介されているヘッダーに画像を入れる方法を実行しようにも、「Colony」のスタイルシートのどこを編集したらよいか分かりません;;

2018/03/16 (Fri) 10:54
vanillaice (Akira)

Akira  

To 凛音さん

ありがとうございます (o'ω')ノ

既に画像が有るのでしたらその画像URLを教えて頂けないでしょうか。それが解決への近道です。
・背景のついた一枚画
・ロゴテキスト
・背景が透過されているのかどうか
・画像全体に対しテキストやオブジェクトの位置はどこにあるのか
これらを総括的に判断する必要があります。このテンプレートは固定幅ではなくレスポンシブデザインなので (´・ω・`)
実物が無いと推測・仮定でのお返事しかできません、というのを前置きに。

--------
①背景つき一枚画の場合
参考記事: ブログタイトルを画像に変える際の基本や【絶対やってはいけないこと】
https://vanillaice000.blog.fc2.com/blog-entry-569.html

--------
②ロゴの場合

<a href="<%url>"><%blog_name></a>
で検索されますとhtml内に1箇所あります。ここを以下の通り修正

<a href="<%url>"><img src="画像アドレス" alt="ブログ名"></a>

ブログ名のところは凛音さんのブログのタイトル(すず〜)を入れてください。
注意)
この処理ではブログ説明文及びパン屑リスト・SNSアイコンなどは消えません。
背景付き一枚画の場合はこの処理は適しません

-------
テキストロゴなら簡単ですが、それに当てはまらない場合には②のような簡単な修正というわけにはいきません。
②に合致しない場合にはその旨お伝えください。その際には画像のアドレス添付をお願いします。
また、こちらの記事も併せてお読みくださいね。

今更だけど「レスポンシブ」ってなんぞ?
https://vanillaice000.blog.fc2.com/blog-entry-491.html
Google日記【AMPとかスピードアップデートとか色々】
https://vanillaice000.blog.fc2.com/blog-entry-698.html

* レスポンシブデザインは一定のブラウザ幅だけで確認・判断せず、マウスでブラウザ幅を拡大・縮小しあらゆる画面サイズでの目視確認を怠らないようにしてください。
PC, タブレット, スマホ等全てのデバイス閲覧に対応させるのがレスポンシブデザインです。
なので「常に画像の横幅を一定に」というのはレスポンシブの理念に沿わないのでできません。事前にお伝えしておきますね。 *

2018/03/16 (Fri) 14:27

凛音  

To Akiraさん

お忙しい中、返信いただきありがとうございます。

ヘッダー画像のURLをコメントに添付させていただきましたm(._.)m
用意している画像は、背景とロゴが一体化したものですが、背景を透過したもののほうが良いということでしょうか??

今までhtmlやスタイルシートをいじったことがなく、現在手探りで作業をしている状態です(´;ω;`)
返信が来るまでに、コメントにて教えていただいた記事を読んで少しでも理解できるようにしておきますのでどうかよろしくお願いします。。

2018/03/16 (Fri) 15:27
vanillaice (Akira)

Akira  

To 凛音さん

URLのご協力ありがとうございます。

このタイプならば②で概ねいけると思います。
が、背景はやはり透過した方が良いですね。ロゴ画像などは背景を透過しておかないとブログ背景色と少しでも色彩が異なった場合には浮いてしまいます。
今回のColonyにしても全体背景色は rgb(245,245,245)ですがロゴの方はrgb(255,255,255)の完全「白」です。
スクリーンショットを撮りましたのでご確認ください。

①現在最も多く出回っている画面サイズ「1920」
https://blog-imgs-120.fc2.com/v/a/n/vanillaice000/capture1920th.jpg

②出荷2位の「1366」
https://blog-imgs-120.fc2.com/v/a/n/vanillaice000/capture1366th.jpg

③最も一般的なタブレットサイズ「768」
https://blog-imgs-120.fc2.com/v/a/n/vanillaice000/capture768th.jpg

④現存スマホ最大サイズ「414」
https://blog-imgs-120.fc2.com/v/a/n/vanillaice000/capture414th.jpg

⑤現存スマホ最小サイズ「320」
https://blog-imgs-120.fc2.com/v/a/n/vanillaice000/capture320th.jpg

体裁自体は良いんじゃないかな、と思います。
ですがやはり背景色が違いますので浮いてます。こちらについてはColonyの方の全体背景色を変更するか、ロゴの方を画像編集で色調調整あるいは透過するかです。
Colony背景色を変更した場合には個別記事の見た目がちょっとどうかなぁ、という感じになりますが、見苦しいというほどではないと思います。

スクリーンショットで利用した画像は四方の余白を極力取り除いています
現状のままですと左右の余白が大きいので特にスマホからの閲覧時はもっと小さくなります。
なので今回は最低でも余白を取る処理は必要です。
(削った結果724×238でスクショを撮ってます。)

以下の最低限の処理だけされまして、掲載方法は②で良いと思います
・余白を削る(画像編集)
body { で検索(5箇所のうち最初のものが対象)、その括り中の background-color: rgb(245,245,245); を background-color: white; に変更

よろしくお願いします。

2018/03/16 (Fri) 17:13

凛音  

To Akiraさん

返信ありがとうございます。

おかげさまで無事、希望通りのヘッダーにすることができました!
本当にありがとうございます!

重ねて質問する形になり申し訳ないのですが、トップページに表示される記事の画像の表示範囲の比率をその画像の比率に合わせることは可能でしょうか?(2:2、5:8など)

2018/03/16 (Fri) 18:20
vanillaice (Akira)

Akira  

To 凛音さん

> トップページに表示される記事の画像の表示範囲の比率をその画像の比率に合わせることは可能でしょうか?〜

それだともう完全にトップページの体裁は取れなくなりますね。
グリッドレイアウトであること自体が無駄になります。
要するにUPした画像と同じ縦横比で全て表示させたい、ということなんでしょうか。
その場合にはグリッドレイアウトを選ぶ時点でミスというか。
メイソンリーか全文表示タイプを選ぶしかないと思いますよ (´・ω・`)
グリッドレイアウトというのはバラバラの画像サイズであっても均等に揃え、かつ各コンテンツのサイズも揃える、という技術ですのでそもそも希望に沿っていません。
今全ての記事が均等サイズに揃ってますよね。それができなくなりますのでてんでバラバラの表示になります。
メイソンリー(参考ページ: https://blog-imgs-118.fc2.com/v/a/n/vanillaice000/mochamin00_top.html) にする場合には相当困難なカスタマイズになりますし、お手伝いもできません。

画像の表示縦横比を現在の設定と変更することはできますが、全て同一にするのが条件です。
各記事毎の元画像依存というわけにはいかないですね。

2018/03/16 (Fri) 18:32

凛音  

To Akiraさん

返信ありがとうございます。

グリッドレイアウトのテンプレートである事を否定する形になってしまいましたね、本当にすみません(´;ω;`)
出来るのかな、という興味本位の質問だったのでどうか忘れてください。。。

今回はありがとうございました。

2018/03/16 (Fri) 19:04
vanillaice (Akira)

Akira  

To 凛音さん(完了のご報告)

いえいえ。そんな重大なことではないです(笑)
ともかく修正完了ということでお疲れ様でした

2018/03/17 (Sat) 00:23

凛音  

重ねて質問すみません。。。

こんばんわ、夕方に質問させていただいた凛音です。
すみません、また質問をしたいのですが。。。

ヘッダー下の「ABOUT」や「RSS」などの部分を自分の好きなリンクに変更することは可能でしょうか?

2018/03/17 (Sat) 01:11
vanillaice (Akira)

Akira  

To 凛音さん

注)予備リンク
で検索されますと近接に各対象リンクが出てきます。
それぞれ
<li><a href="ここに遷移先アドレス">ここに表示テキスト</a>
赤字の内容を書き換えてください。
また、記事内にも記してありますが
注)
で検索することでカスタマイズしそうな部位についてガイダンスを入れてありますので事前にご確認ください。
ナビゲーションをカスタマイズされる際は注意事項がありますので本ページの
「ナビゲーションの折りたたみについて」の章を熟読されますようお願いします。

2018/03/17 (Sat) 01:48

凛音  

To Akiraさん

見つかりました!

度々ありがとうございます(*人´-ω-)

2018/03/17 (Sat) 02:13

ゆい  

利用にあたり

はじめての質問となり、大変失礼致します。
素敵なテンプレートなので、利用したいと考えていますので、よろしくお願い致します。

Windows7でGoogle Chromを利用しています。
-----------------------------------------------------------------------
【質問1】
表示される記事の数について、現在横3記事となっています。
その下に、更に4段記事を表示させ、1ページに合計15記事表示させたいです。
サンプルページは記事が4段表示されているので、どこを変更しているのか教えて頂けますと助かります。

【質問2】
現在表示されている記事の画像の下に、日付と月が表示されています。
今月の「Sptember」が最後の1文字が改行されてしまっているので、1行に収めたいです。

【質問3】
更に、記事表示の一番下に表示される記事タイトルですが、右端揃えになっているようですが、
記事タイトルの文字数が多い場合に改行されます。その際、写真と同じ幅の左端まで文字が表示されるようにできれば嬉しいです。

-----------------------------------------------------------------------
最近全く、テンプレートの編集をしておらず、知識が全く追いつかず恐縮です。
基本的な事を伺ってしまっていたら、申し訳ありません。
大変お手数をお掛けしますが、ご教授の程、よろしくお願い致します。


2018/09/27 (Thu) 05:08

-  

管理人のみ閲覧できます

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

2018/09/27 (Thu) 07:22

-  

管理人のみ閲覧できます

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

2018/09/27 (Thu) 07:51

-  

管理人のみ閲覧できます

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

2018/09/27 (Thu) 09:05
vanillaice (Akira)

Akira  

To ゆいさん

こんにちは ('0')/

既に変更済みとのことですが、回答はしておきますね。

------
【質問1】トップページ記事表示件数

お気づきの通りブログ個人設定で変更可能です。

------
【質問2】Septemberが改行されてしまう

おっしゃる通り改行されてました。あう ( ̄∀ ̄;)
修正しました。ごめんなさいね。

------
【質問3】トップページ記事タイトルの両端揃え

これは基本的にはできないんです。何故ならテキストはこちらの都合良く改行してくれるわけではないからです。
仮に text-align: justify で両端揃えに指定しても改行された文字が一文字だったらどうするの?とかそういう問題が出てきますよね。
対処としてはいっそ左揃えにするか、あるいは表示行数を2〜3行までなど制限するかです。
後者の場合は制限を超えた内容がカットされてしまいます。
記事内容(要約文)のカットは良いとしてもタイトルカットはあまり良くないかなぁ、と思います (´・ω・`)
(ちなみに現在ゆいさんが設定中のスマホ専用版ではタイトルが1行でカットされています。サムネイル画像も付きません)
レスポンシブデザインですのでできればスマホ版を非表示にして頂きたいところではありますが強制は致しません。

------
ということで、お手数おかけしました。
Room38に変更されたということで、また何かありましたらご連絡くださいね。
そしてSeptember改行の件お知らせ頂いて助かりました。ありがとうございます。
お疲れ様でした

2018/09/27 (Thu) 15:43

-  

管理人のみ閲覧できます

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

2018/09/29 (Sat) 15:09