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

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

テンプレート 配布中テンプレート
2016/08/27
123
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS3RWD
Colonyテンプレート

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

名称 Colony
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大880px
サイド --- 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 右(デバイス幅依存) サイドメニュー --- 下
最終更新 2022.1.6
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
  • jQueryを3.6.0にアップデート

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。

【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。

【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。

更新履歴 2020.5.30
  • ページ送りのJSを修正
更新履歴 2020.4.5
  • コメント返信のJS変更
  • jQueryを3.4.1にアップデート
更新履歴 2020.3.25
  • 個別記事ページ送りの複製を可能にしました

複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する

更新履歴 2019.12.17
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.11.5
  • コメント主のリンク表示用JS及びデザインの変更
  • SVGのIE向け調整
更新履歴 2019.8.1
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

カスタマイズ済みなど、再DLが困難な方はお手数ですが以下の手順で修正を行ってください。また、作業の前に以下の記事をお読み頂いて、修正する・しないを決定してください。

【重要】テンプレートの変更点2つについてお知らせ

【重要】テンプレートの変更点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> から <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: 45px;
}
③について

<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要素を利用している方向けなので必要がある方だけどうぞ。

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

更新履歴 2019.4.27
  • C版Safariでモーダル検索背景が白くなる件修正
更新履歴 2018.12.29
  • Font Awesome(JS)を廃しインラインSVGに変更
  • レイアウト関連CSSの追加及び一部削除
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • 個別記事ブラウザサイドページ送り(カテゴリ間移動)の動作を逆にしました(下へスクロールで非表示、上にスクロールで表示)
  • 全記事リストと検索結果にコメント数とトラックバック数の表示を追加
  • アニメーションスピードを調整(旧来よりも若干速めました)

不具合修正ではありませんので旧バージョンのままでもお使い頂けます。

更新履歴 2018.9.27
  • Septemberの末尾「r」が改行されてしまう件修正
更新履歴 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大規模メンテナンスのお知らせ

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

更新履歴 2017.1.25
  • SNSシェアリンクのUTF-8エンコード
更新履歴 2017.1.13
  • RSS新着サムネイルを削除しました
更新履歴 2016.9.9
  • リストマーカーの位置を調整しました

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

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

ころにぃ
はがき風グリッドレイアウト。
承認されました。ありがとうございます。

サンプル

Samples

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

カスタマイズのコツ

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のファイルと干渉しないはずです。

トップページグリッドについて

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ボタン背景色, ページ送り背景色 など

削除可能な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'●)/

Related post

Comments  123

ぱぴくる♪
2016/09/03 (Sat) 23:23

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>
<!-- フッターここまで -->



が、復活しています。

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

vanillaice (Akira)
Akira
2016/09/04 (Sun) 14:06

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) 16:59

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

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

vanillaice (Akira)
Akira
2016/09/05 (Mon) 13:30

To ぱぴくる♪さん

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

rio
2016/09/08 (Thu) 09:29

画像の推奨サイズ

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

vanillaice (Akira)
Akira
2016/09/08 (Thu) 11:36

To rioさん

ありがとうございます :)

> 画像サイズがバラバラ

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

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

=======

> 画像の推奨サイズ

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

ぼっちん
2016/09/08 (Thu) 11:59

To Akiraさんへ

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

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

ご確認を~ m(_ _)m

rio
2016/09/08 (Thu) 12:30

トップ画像の件

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

Akira
2016/09/08 (Thu) 13:57

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損傷があればこれで修復されます)、
セーフモードで起動したらログインし、そのまま何もせず再起動。
一度これで様子を見て頂けると助かります。

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

Akira
2016/09/08 (Thu) 14:06

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さんのページではダメ、というのはこのアクセス解析の有無だと思います。
いずれにしろまず外されて動作確認をお願いします。

rio
2016/09/08 (Thu) 16:02

お手数おかけします。

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

vanillaice (Akira)
Akira
2016/09/08 (Thu) 17:06

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 はパっと見問題なさそうですが絶対とは言わない(笑)
ともかく

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

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

rio
2016/09/08 (Thu) 17:53

直ったようです!

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

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

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

vanillaice (Akira)
Akira
2016/09/08 (Thu) 19:05

To rioさん

良かったですー :)

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

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


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

===========

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

ぼっちん
2016/09/08 (Thu) 19:55

To Akiraさん

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

rio
2016/09/08 (Thu) 20:22

To Akiraさん、ぼっちんさん

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

vanillaice (Akira)
Akira
2016/09/08 (Thu) 23:22

To ぼっちんさん

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

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

vanillaice (Akira)
Akira
2016/09/08 (Thu) 23:24

To rioさん

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

作業お疲れ様でした :)

ぼっちん
2016/09/12 (Mon) 11:45

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

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

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

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

Akira
2016/09/12 (Mon) 21:41

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/13 (Tue) 10:22

To Akiraさん

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

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

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

vanillaice (Akira)
Akira
2016/09/13 (Tue) 14:46

To ぼっちんさん

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

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

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

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

れぃん
2016/09/13 (Tue) 18:56

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

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

Akira
2016/09/13 (Tue) 20:31

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) 21:23

ありがとうございました 

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

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

vanillaice (Akira)
Akira
2016/09/13 (Tue) 22:26

To れぃんさん

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

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

れぃん
2016/09/25 (Sun) 14:27

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

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

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

Akira
2016/09/25 (Sun) 22:49

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) 23:32

ありがとうございました

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

Akira
2016/09/26 (Mon) 23:25

To れぃんさん

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

みなみ
2016/11/15 (Tue) 22:45

フリーエリア

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

不躾な質問なのですが

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

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

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

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

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

 

Akira
2016/11/18 (Fri) 10:57

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

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

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

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

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

みなみ
2016/11/19 (Sat) 10:54

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

Akira
2016/11/19 (Sat) 11:05

To みなみさん

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

-
2016/11/19 (Sat) 13:36

管理人のみ閲覧できます

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

Akira
2016/11/19 (Sat) 13:37

To みなみさん

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

Akira
2016/11/19 (Sat) 13:45

To みなみさん

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

-------- 追記

① head内に

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

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

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

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

みなみ
2016/11/19 (Sat) 15:35

To -さん

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

Akira
2016/11/19 (Sat) 16:10

To みなみさん

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

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

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

みなみ
2016/11/19 (Sat) 16:37

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

Akira
2016/11/20 (Sun) 12:44

To みなみさん

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

Akira
2017/01/31 (Tue) 12:56

To yukoさん(移動先)

> SNSリンク設定について

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

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

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

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

yuko
2017/01/31 (Tue) 18:05

To Akiraさん

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

vanillaice (Akira)
Akira
2017/02/01 (Wed) 15:54

To yukoさん

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

みなみ
2017/03/11 (Sat) 00:56

No title

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

Akira
2017/03/11 (Sat) 01:23

To みなみさん

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

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

みなみ
2017/03/11 (Sat) 08:35

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

みなみ
2017/03/19 (Sun) 09:09

No title

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

vanillaice (Akira)
Akira
2017/03/19 (Sun) 21:03

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) 23:03

ありがとうございます

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

vanillaice (Akira)
Akira
2017/03/20 (Mon) 01:11

To みなみさん

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

みなみ
2017/04/06 (Thu) 13:10

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 />
にしています。
宜しくお願いいたします。

Akira
2017/04/06 (Thu) 22:14

To みなみさん

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

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

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

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

みなみ
2017/04/06 (Thu) 23:16

お世話になります

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


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

みなみ
2017/04/07 (Fri) 08:52

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

vanillaice (Akira)
Akira
2017/04/07 (Fri) 13:42

To みなみさん

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

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

<!--more-->

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

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

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

みなみ
2017/04/07 (Fri) 16:30

ありがとうございます。

Akira
2017/06/01 (Thu) 21:33

To モウリさん(移動先)

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

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

モウリ
2017/06/03 (Sat) 08:37

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

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

vanillaice (Akira)
Akira
2017/06/03 (Sat) 10:58

To モウリさん

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

モウリ
2017/06/26 (Mon) 15:51

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

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

モウリ
2017/06/26 (Mon) 16:00

先ほどの

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

Akira
2017/06/26 (Mon) 16:11

To モウリさん

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

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

よろしくお願いします。

モウリ
2017/06/26 (Mon) 22:32

ありがとうございます。

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

vanillaice (Akira)
Akira
2017/06/27 (Tue) 10:04

To モウリさん

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

こうのすけ
2017/11/06 (Mon) 23:37

メガプルダウンについて

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

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

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

Akira
2017/11/07 (Tue) 01:26

To こうのすけさん

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

Pee
2017/11/16 (Thu) 13:43

はじめまして

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

Akira
2017/11/16 (Thu) 20:46

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;
}


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

Pee
2017/11/17 (Fri) 10:16

Akiraさん

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

vanillaice (Akira)
Akira
2017/11/18 (Sat) 22:01

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

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

めぇめぇ
2017/12/17 (Sun) 15:08

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

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

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

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

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

Akira
2017/12/17 (Sun) 15:25

To めぇめぇさん

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

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

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

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

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

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

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


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

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

めぇめぇ
2017/12/17 (Sun) 18:36

To Akiraさん

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

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

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

vanillaice (Akira)
Akira
2017/12/17 (Sun) 20:14

To めぇめぇさん

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

めぇめぇ
2018/01/20 (Sat) 11:52

再びお世話になります。

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

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

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

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

vanillaice (Akira)
Akira
2018/01/20 (Sat) 14:18

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) 15:37

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

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

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

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

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

vanillaice (Akira)
Akira
2018/01/20 (Sat) 15:50

To めぇめぇさん

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

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

-
2018/02/03 (Sat) 00:25

管理人のみ閲覧できます

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

-
2018/02/03 (Sat) 00:41

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/02/03 (Sat) 11:33

Colonyの件 内緒さん

ありがとうございます :)

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

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

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

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

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

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

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

yereeves
2018/02/08 (Thu) 23:09

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

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


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

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

Y.e.reeves

yereeves
2018/02/08 (Thu) 23:09

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

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


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

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

Y.e.reeves

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

To yereevesさん ②

こんばんは。

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

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

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

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

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

icons8
2018/02/10 (Sat) 23:45

No title

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

凛音
2018/03/16 (Fri) 10:54

ヘッダーについての質問

はじめまして。

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

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

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

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) 15:27

To Akiraさん

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

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

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

vanillaice (Akira)
Akira
2018/03/16 (Fri) 17:13

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) 18:20

To Akiraさん

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

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

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

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

To 凛音さん

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

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

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

凛音
2018/03/16 (Fri) 19:04

To Akiraさん

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

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

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

vanillaice (Akira)
Akira
2018/03/17 (Sat) 00:23

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

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

凛音
2018/03/17 (Sat) 01:11

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

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

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

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

To 凛音さん

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

凛音
2018/03/17 (Sat) 02:13

To Akiraさん

見つかりました!

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

ゆい
2018/09/27 (Thu) 05:08

利用にあたり

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

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

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

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

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


-
2018/09/27 (Thu) 07:22

管理人のみ閲覧できます

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

-
2018/09/27 (Thu) 07:51

管理人のみ閲覧できます

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

-
2018/09/27 (Thu) 09:05

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/09/27 (Thu) 15:43

To ゆいさん

こんにちは ('0')/

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

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

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

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

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

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

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

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

-
2018/09/29 (Sat) 15:09

管理人のみ閲覧できます

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

オカンチ
2019/03/31 (Sun) 19:51

コチラの テンプレート戴きます
ありがとうございます

vanillaice (Akira)
Akira
2019/04/01 (Mon) 14:43

To オカンチさん

はい、お気に召したのであれば幸いです(笑)

オカンチ
2019/04/03 (Wed) 07:53

Akiraさんのは どれもセンス良くて あれもこれも…と迷います
多彩な能力に 尊敬のみです

neko
2020/04/01 (Wed) 16:14

教えて下さい

前は全文表示のを使わせて貰っていました。
要約表示のテンプレートにしたくこのテンプレートをお借りしました。

「FC2カウンター」がスマホで見ると表示されますが、パソコンでは表示されないのは私がどこか触ったのでしょうか?
何しろ初心者でテンプレートを変更するのにもドキドキしながらやっているおが現状なのです。
一度見てやってください。お願いします。

vanillaice (Akira)
Akira
2020/04/01 (Wed) 17:20

To nekoさん

こんにちは ('0')/
お手数おかけしております。本テンプレートのスクロールアンカーのJSとカウンターのJSが衝突していますので、テンプレート内の
<!-- 注)スクロールアンカー不要の方ここから削除 -->
を検索し、ガイダンスに従って機能を削除してくださいね。よろしくお願いします。

neko
2020/04/01 (Wed) 18:21

お手数かけました

お手数かけました。
早速に見て下さって適切に教えてくださってありがとうございました。
不要なところを削除した結果、カウント数が表示されるようになりました。

申し訳ありませんがもう一つ。
コメント欄の太文字とかに装飾する欄を削除したいのです。
どこかに書かれていたので前のは削除したのですが、どこに書かれていたのか探し出せないのです。
すみませんがお願いします。

neko
2020/04/01 (Wed) 21:22

装飾ツールの削除

コメント装飾ツールの削除方法は以前のブログに掲載されていました。
無事にこれも削除できました。

何度も申し訳ありませんでした。

vanillaice (Akira)
Akira
2020/04/01 (Wed) 21:33

To nekoさん(終了のご報告)

自己解決して頂いた、ということで大丈夫でしょうか。
カウンターの方もお手数おかけしました。お疲れ様でした :)

節約おばさん
2020/05/26 (Tue) 16:53

教えてください

なんて素敵なテンプレートでしょう。一目惚れをしました。
さてDLさせて頂きましたがハガキ状のものが一つしかアップされません。
他の方の所は一週間分アップされています。
是非使用させて頂きたいので宜しくお願いします。

vanillaice (Akira)
Akira
2020/05/26 (Tue) 17:22

To 節約おばさんさん

こんにちは。ありがとうございます :)

注意書きの掲載を忘れましたのでお返事しています。
ご質問時には ブログURLの記載必須 で、記入が無い場合はお返事していません。

> ハガキ状のものが一つしかアップされません〜

恐らく個人設定で表示件数を1件にされているためだと思いますが、目視確認できない状態での回答は推測・憶測でしかありません。
個人設定: https://admin.blog.fc2.com/control.php?mode=setting&process=2#setting2

次回はリンク先の注意事項をお読み頂きまして、質疑応答のルールに則ってご質問くださいね。
お手数ですがご理解とご協力をよろしくお願いします。

テンプレートに関するご質問時のお願い
https://vanillaice000.blog.fc2.com/blog-entry-26.html

節約おばさん
2020/05/26 (Tue) 19:21

To Akiraさん

Akira様、迅速な対応有難うございます。
わけも分らずやっていますので不手際をお許しください。

節約おばさん
2020/05/26 (Tue) 19:42

To Akiraさん

解決しました。お手数をおかけしました。
嬉しくて友人に見せたいと思います。
本当に有難う御座いました。

vanillaice (Akira)
Akira
2020/05/27 (Wed) 00:46

To 節約おばさんさん(完了のご報告)

こんばんは ('0')/
ご協力をありがとうございます。

表示件数変更を確認できました。お疲れ様でした :)

Tatchy
2022/11/03 (Thu) 16:11

No title

Akiraさんのテンプレートは以前から使わせて頂いており、現在ので2つ目です。
いつも素敵なテンプレートを有難うございます♪^^

で、大変恐縮ですが2点質問があります。


現在のテンプレートに変更後
何故かGoogleの検索に全く反映されてない感じになってしまっている事に気付きました。

FC2ブログは長年やっていますので、Googleのindex登録も過去に済んでおりますし
以前はかなり検索結果も良い感じだったのですが
現在は、自分の記事のタイトルをそのまま入れて検索してみても
全く記事が検索結果に上がらない状態となってしまい、原因が分からず困っております。

このテンプレートに変更した際に、編集画面で
<!-- 注)Google analytics, twitterカードなど追加内容はここから(Google analytics, twitter card, widgets or something from here...) --> という所にちゃんとGoogleで指定されたタグを入れたのですが

もしかしたら、そこがちゃんとなっていないのか?
と何度も見直しましたが分からず、そこまで詳しい知識がある訳ではない為、
こちらで質問をさせて頂く形を取らせて頂きました。


私はアフェリエイト等はやっておりませんが、現在のテンプレートに変更後
アクセスカウンターが表示されなくなってしまいました。
カウンターについての色んなページも確認しましたが解決出来ておりません。


お忙しい所、申し訳ありませんが、
私の設定で間違いがありましたら教えて頂けますでしょうか?
宜しくお願い致します。

vanillaice (Akira)
vanillaice (Akira)
2022/11/04 (Fri) 00:55

To Tatchyさん

> Googleの検索に全く反映されてない〜

こちらについては「検索順位が上がらない」のか「インデックスされていない」のかがわからないのですが、私がいくつか検索したところインデックス自体はされているように思います。
インデックス状況についてはご自身の管理でgoogle search consoleに登録して頂いて、現状を把握されると良いと思います。
もともとダイエットの分野は非常に競合が多いので、パワーキーワードなどシビアな工夫をしないとなかなか上位に食い込むことは難しいのではないかな、と思います。
検索上位の多くのページはSNSを併用しています。結局のところ流入経路が多ければそれがアクセス・ページビューに繋がりますので、そのあたりを工夫されてはいかがでしょうか。
また、見出し目次を導入したり、リスト要素(ul要素, ol要素)を使うなどされても良いと思います。googleはリスト系列を積極的に拾う傾向があります。
また、画像を掲載したらalt属性を必ず記すよう心がけると良いですね。

インデックス状況については自身で管理するしかありませんので、まずはsearch consoleの登録を行ってみてくださいね。
ページがインデックス不可になるような重大なエラーなどは今の所見つかりませんが、html構文エラー自体は結構ありますので注意してください。

-----
> アクセスカウンターが表示されなくなってしまいました〜

こちらについては以下の記事を参照してください。
参考記事: FC2カウンターが表示されなくなる、アクセス解析の画像が出ない、などの不具合が生じた方へ
https://vanillaice000.blog.fc2.com/blog-entry-1015.html

Tatchy
2022/11/04 (Fri) 13:45

To Akiraさん

お忙しい中、返答有難うございます♪
Google search consoleは以前から登録済みで、index登録も完了している状態です。

私が危惧したのは、Topページはindex登録されているものの
もしかしたらテンプレートを変えた時の私の編集の不備で
個々のブログ記事のページが拾われてないのでは?...という危惧でした。

あまり知識が深くないので、検討外れの事を心配していたのかもですが
そういう事がないのであれば、後は努力ですね!

リンク切れエラー等も放置してしまっていたので
こちらのテンプレートはSEOアドバイザー対応なので、1つ1つ直していきます。
画像のalt属性も今まで放置してましたので、今後、記すように致します!^^
カウンターはご提示頂いたページを見てやってみます。

有難うございました。ぺこ <(_ _)>

vanillaice (Akira)
vanillaice (Akira)
2022/11/04 (Fri) 17:32

To Tatchyさん

こんばんは ('0')/

ちゃんとverificationコード記載されてますね。トンチンカンなアドバイスでごめんなさい ^^;
テンプレートの構造が全体のインデックスに反映されるにはかなり時間がかかります。というのはgoogleのクローラーは訪れたときに全ページをクロールしてくれるわけではないですし、何かにつけgoogleの都合によって事が運びます。
個々のページの再クロールを促すためにリライト(書き直し, 内容追加や修正)を行うのも一つの手です。ただし一度に大量に行うと逆に嫌がられますのでほどほどに(笑)

昨晩は時間が無かったので少し触れただけですが、htmlの構文エラーがいくつかありますので、後ほどここに追記しておきます。
お時間のあるときに修正してみてください。
夜中になると思いますがお待ち下さいね :)

Tatchy
2022/11/04 (Fri) 18:20

Akiraさん

Akiraさん、ご親切に有難うございます!
リンク切れと『htmlの構文エラー』は違うのですね?
htmlの構文エラーの意味が分からず、
検索して説明ページを読んでもあまり意味が理解出来てない私です(苦笑

vanillaice (Akira)
vanillaice (Akira)
2022/11/06 (Sun) 20:57

To Tatchyさん

遅くなってしまいごめんなさい。ちょっとやらかしまして。目を痛めてしまいました (∵`)

リンク切れというのは、設置したリンク先で
・ファイルの消失(削除やディレクトリの移動)
・サイトの閉鎖
・ページの削除
などで遷移先や表示対象ファイルが失われてしまうことです。

html構文エラーというのは、web言語は厳格なルールがありますが、それに反してしまうことを指します。
・googleなどのクローラーに正しい情報が伝わらない可能性
・レイアウトが崩れる可能性
などがあります。htmlはページの装飾ではなくページの構造・定義なので極力正確に書くように注意してくださいね。

-----
サイドメニュー プラグイン「参加中のランキングです」
・開始タグと終了タグの位置不整合(p, div)
・開始タグと終了タグの数不整合(div)
・font要素の不正な値(指定できるのは整数のみです, マイナス値はありません) * font要素は廃止です
・不正なscript要素

以下の通り修正(コピペで全内容を差し替え)

<div style="text-align: center;">
<p>
<a href="//blog.with2.net/link/?1154330:9060" target="_blank">
<img src="https://blog.with2.net/img/banner/c/banner_1/br_c_9060_1.gif" width="110" height="31" alt="ダイエット日記ランキング" style="margin-bottom: 6px;">
</a>
<br>
<a href="https://diet.blogmura.com/diet_dairy/ranking/in?p_cid=10369570" target="_blank">
<img src="https://b.blogmura.com/diet/diet_dairy/88_31.gif" width="88" height="31" alt="にほんブログ村 ダイエットブログ ダイエット日記" style="margin-right:6px;">
</a>
<a href="https://blogranking.fc2.com/in.php?id=583512" target="_blank">
<img src="https://static.fc2.com/blogranking/ranking_banner/a_01.gif" width="92" height="34" alt="FC2ブログランキング">
</a>
</p>
<p style="margin-top: 8px; font-size: 11px;">応援、有り難うございまぁ~す♪</p>
</div>

okitegami という文字列を持つscript要素が記されていますが、第三サービスか何かでしょうか。いずれにしてもおかしな内容なので含めていません。ご利用サービスのサイトへ赴き、正しい内容を取得して上記内容の最終の</div>の下に貼り付けてください。

-----
サイドメニュー プラグイン「身長と体重を入れてBMIをチェック」
・開始タグと終了タグの数不整合(div)
・機能していないclass属性(class名 center)
・font要素の不正な値

<div style="text-align: center;">
ここにブログパーツscript
<p style="margin-top: 10px; font-size: 11px;">25~30だと肥満ですよん★18.5~25ならOK v(。・・。)イエィ</p>
</div>

太字の部位はブログパーツのようなので、提供元へ赴いて正しいコードを取得して記載してください。

-----
<div class="postmark">NEW</div></div>
で検索するとhtml内に1箇所あります。これを以下の通り修正

<div class="postmark">NEW</div>

こちらは私のミスです。この機会に気づけてよかったです。ありがとうございます ^^;

-----
とりあえずトップページだけの検証なので、もしかすると個別記事にもエラーが見つかるかもしれませんが、ポイントは以下の記事をご参照ください。

参考記事: 無くならないhtml構文エラー 簡単なチェックの仕方
https://vanillaice000.blog.fc2.com/blog-entry-1090.html

参考記事: テンプレートカスタマイズをする方へバリデートのススメ
https://vanillaice000.blog.fc2.com/blog-entry-1002.html

しばらくお返事できませんが、何かあればコメントしておいてくださいね。よろしくお願いします。

Tatchy
2022/11/08 (Tue) 14:16

To vanillaice (Akira)さん

Akiraさん
本当にご丁寧な指摘(具体的な書き直し方まで)有難うございました!!
カウンターのみまだ放置ですが....(・・。)ゞ
今回、ご指摘頂いた箇所は、全て修正致しました。

お仕事柄、目は酷使しますからくれぐれもお大事に。
今回、質問させて頂いて本当に良かったです!
重ね重ね、有難うございました♪^^

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)