Article page

by
  • Comment:65
  • Trackback:0

Colony



名称 Colony
カラム数 2
プラグイン対応
プラグイン1, 2 --- 右サイドメニュー
プラグイン3 --- フッター上サイドメニュー
レスポンシブ対応
サイドバー PC, TB --- 右/ ブラウザ縮小時 下
SP --- 右からスライド
記事幅 可変 最大1046px (内寸 966px)
サイドバー幅 固定 300px (内寸 260px)
新着サムネイル表示 あり
フッター上 最大8件
鍵つきブログの方は表示されませんので削除をお願いします

Google Feed API廃止に伴い削除致しました
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = RSS設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
テンプレ固有機能 画像にドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大
使い方詳細ページ
テンプレート固有機能説明
Browser SupportIn principle, current and previous version

Chrome

Firefox

Safari

Opera

Edge

IE11

License
Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム テーマ色変更


valid-html5.png


更新履歴 2017.1.25


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

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


--------- 以下本文



更新履歴 2017.1.13


・RSS新着サムネイルを削除しました

関連記事
Google Feed API 廃止に伴うテンプレートの一部レイアウト変更


更新履歴 2016.9.9


リストマーカーの位置を調整しました

参考記事
list-item横の隙間について

--------- 以下本文



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


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



TOP PAGE DEMO
ARTICLE DEMO

DOWNLOAD
FAQ




仕様
・トップページはグリッドレイアウト
トップページは記事内容説明分を省いてあります
・プラグイン1, 2はスマートフォンではドロワーに切り替わりますので 折りたたまれたくないものはプラグイン3への登録をお願いします
注) でCtrl+F(Windows)/ Command+F(Mac) キー検索されますとカスタマイズのガイドが出てきますので 作業を始める前に一度ご確認ください


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・サイドバーの形状変更
・トップページの表示タイプ変更(説明文の追加や各要素の位置変更 など)
・RSS新着サムネイル, 関連記事サムネイルの位置・デザイン変更
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更
位置変更はこちらを参考にどうぞ ↓
テンプレートのカラム位置変更


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




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


今回は説明文を載せていません
そして随分と空白の多い見た目ですが これはこういうデザインです(笑)
グリッド内の
・文字大きさ調整
・要素の追加
・要素位置の変更
等は自己責任・自力でお願いします ( ゚Д゚)ノ



プラグイン3用フッター上サイドメニューについて


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


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

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

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



ページ内移動ボタンについて


ページの top, middle, bottom の3点移動のボタンを設けていますが
bottom の位置についてです

bottom移動のデフォルトは フッター に設定してあります
フッターではなく プラグイン3の頭出しの位置に変更されます方は以下の手順でお願いします
検索

<a href="#footer" id="go_bottom">

緑の文字列を修正して以下の通り

<a href="#tertiary" id="go_bottom">


このデフォルト設定は「プラグイン3を削除するかもしれない」ことを想定してこうしてあります
お手数おかけします



No image画像変更


記事内の然るべき箇所に画像が存在しない場合に代替として表示するNo image画像
トップページには出てきません
表示対象ページは以下の通り

・トップページグリッド内
・検索結果
・RSS新着サムネイル
・関連記事リスト(サムネイル(アイキャッチ)を「表示する」を選択している方限定)

ソース内該当箇所は

//blog-imgs-93.fc2.com/v/a/n/vanillaice000/colonynoimage.jpg

htmlソース内に1箇所CSSソース内に3箇所の 計4箇所です
別の画像を指定することも可能です
最適サイズは横800程度 縦横比不問

デフォルト画像 (縮尺掲載 960✕800 5KB public domain)




画像上の白いオーバーレイとNo imageのテキストは自動で乗ります



関連記事リストの表示について


アイキャッチを「表示する」に設定されている方



アイキャッチを「表示しない」に設定されている方



ブログ個人設定の状態で自動で切り替わります



ドミナントカラー


以下が基本色調です
数字の部分だけを抜き出して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ボタン背景色, ページ送り背景色 など



管理人コメントと訪問者コメントを分ける方


デフォルトはグレー背景アイコン
サンプル




CSSソース末尾に以下を追加

.name管理人ハンドルネーム:before {
  background-color: カラーコード;
}

管理人ハンドルネーム の部分は普段コメント欄でお使いのお名前に差し替えてください
カラーコードは rgb(●,●,●) の10進数表記 #●●●●●● の16進数表記のどちらでも構いません
サンプルのカラーコードは rgb(148,170,201)

プロフィール画像などを設定する場合は以下の通り

.name管理人ハンドルネーム:before {
  content: "";
  background: url(画像アドレス) center center /cover no-repeat;
}


サンプル



* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)




ご質問 不備・不具合のご報告はお気軽にどうぞ
その際には
・ ご自身のブログアドレスの明記
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点を必ずお守りください
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします


みなさんいつもありがとうございます



---------- 2016.9.1 追記


グリッド内のタイトルなどが右へはみ出す際の対処について


こちらは該当する方のみカスタマイズをお願います
どんな時(どんな方)に起こるかというと

タイトルやカテゴリタイトルなどの表示にエンコードを行なっていない方
・タイトルなどの文字列内に絵文字や機種依存文字が多く含まれている方

こういった場合に起こる可能性があります
まず前提として

SNSシェアを重要視される方は タイトル中に絵文字や機種依存文字を入れるべきではない
・空白などはスペースキーを利用するのではなく
&nbsp;
といったエンティティ表記を用いた方が良い

というのをお伝えしておきます
特に「絵文字」というのは機種依存ですから 全ての端末で表示されているとは限りません

参考記事
SNSを重視した記事タイトルの付け方注意点


上記を踏まえた上で はみ出しを防止するには
Ctrl+F(Windows)/ Command+F(Mac) キー検索

.context {

CSSソース内に2箇所ありますが 最初のものが対象です
詳細はこうなってます ↓

.context {
  display: table;
  width: 100%;
  height: 55%;
  line-height: 1.3;
  padding: 0 10px;
}

上記内容に一部追加で以下の通り

.context {
  display: table;
  width: 100%;
  height: 55%;
  line-height: 1.3;
  padding: 0 10px;
  word-break: break-all;
}


緑色の1行を 追加 してください

この処理を行いますと 単語同士の区切りではなく 単語間(単語内)で改行が行われますので 英単語の場合はあまり良い結果とはなりません


例)
カスタマイズ前
Take me to
church I'll worship
like a dog at the
shrine of your lies

カスタマイズ後
Take me to chur
ch I'll worship lik
e a dog at the s
hrine of your lie
s


単語の途中で文字が改行されるとパッと見て単語の意味を捉えにくくなります
こちらにご理解頂いた上でのカスタマイズをお願い致します
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 65

ぱぴくる♪  
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 | EDIT | REPLY |   
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 | EDIT | REPLY |   
ぱぴくる♪  
ありがとうございました。

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

2016/09/04 (Sun) 16:59 | EDIT | REPLY |   
Akira  
To ぱぴくる♪さん

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

2016/09/05 (Mon) 13:30 | EDIT | REPLY |   
rio  
画像の推奨サイズ

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

2016/09/08 (Thu) 09:29 | EDIT | REPLY |   
Akira  
To rioさん

ありがとうございます

> 画像サイズがバラバラ

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

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

=======

> 画像の推奨サイズ

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

2016/09/08 (Thu) 11:36 | EDIT | REPLY |   
ぼっちん  
To Akiraさんへ

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

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

ご確認を~ m(_ _)m

2016/09/08 (Thu) 11:59 | EDIT | REPLY |   
rio  
トップ画像の件

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

2016/09/08 (Thu) 12:30 | EDIT | REPLY |   
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 | EDIT | REPLY |   
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 | EDIT | REPLY |   
rio  
お手数おかけします。

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

2016/09/08 (Thu) 16:02 | EDIT | REPLY |   
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 | EDIT | REPLY |   
rio  
直ったようです!

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

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

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

2016/09/08 (Thu) 17:53 | EDIT | REPLY |   
Akira  
To rioさん

良かったですー

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

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


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

===========

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

2016/09/08 (Thu) 19:05 | EDIT | REPLY |   
ぼっちん  
To Akiraさん

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

2016/09/08 (Thu) 19:55 | EDIT | REPLY |   
rio  
To Akiraさん、ぼっちんさん

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

2016/09/08 (Thu) 20:22 | EDIT | REPLY |   
Akira  
To ぼっちんさん

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

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

2016/09/08 (Thu) 23:22 | EDIT | REPLY |   
Akira  
To rioさん

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

作業お疲れ様でした

2016/09/08 (Thu) 23:24 | EDIT | REPLY |   
ぼっちん  
スマホでのハンバーガーボタンを

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

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

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

2016/09/12 (Mon) 11:45 | EDIT | REPLY |   
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 | EDIT | REPLY |   
ぼっちん  
To Akiraさん

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

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

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

2016/09/13 (Tue) 10:22 | EDIT | REPLY |   
Akira  
To ぼっちんさん

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

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

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

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

2016/09/13 (Tue) 14:46 | EDIT | REPLY |   
れぃん  
コメント欄ボタンの位置設定につきましてのご質問です

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

2016/09/13 (Tue) 18:56 | EDIT | REPLY |   
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 | EDIT | REPLY |   
れぃん  
ありがとうございました 

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

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

2016/09/13 (Tue) 21:23 | EDIT | REPLY |   
Akira  
To れぃんさん

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

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

2016/09/13 (Tue) 22:26 | EDIT | REPLY |   
れぃん  
記事本文のセンター文字入れにつきまして

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

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

2016/09/25 (Sun) 14:27 | EDIT | REPLY |   
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 | EDIT | REPLY |   
れぃん  
ありがとうございました

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

2016/09/25 (Sun) 23:32 | EDIT | REPLY |   
Akira  
To れぃんさん

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

2016/09/26 (Mon) 23:25 | EDIT | REPLY |   
みなみ  
フリーエリア

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

不躾な質問なのですが

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

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

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

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

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

 

2016/11/15 (Tue) 22:45 | EDIT | REPLY |   
Akira  
To みなみさん(追記あり)

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

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

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

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

2016/11/18 (Fri) 10:57 | EDIT | REPLY |   
みなみ  

お世話になってます。
テンプレ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 | EDIT | REPLY |   
Akira  
To みなみさん

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

2016/11/19 (Sat) 11:05 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/11/19 (Sat) 13:36 | EDIT | REPLY |   
Akira  
To みなみさん

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

2016/11/19 (Sat) 13:37 | EDIT | REPLY |   
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 | EDIT | REPLY |   
みなみ  
To -さん

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

2016/11/19 (Sat) 15:35 | EDIT | REPLY |   
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 | EDIT | REPLY |   
みなみ  

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

2016/11/19 (Sat) 16:37 | EDIT | REPLY |   
Akira  
To みなみさん

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

2016/11/20 (Sun) 12:44 | EDIT | REPLY |   
Akira  
To yukoさん(移動先)

> SNSリンク設定について

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

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

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

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

2017/01/31 (Tue) 12:56 | EDIT | REPLY |   
yuko  
To Akiraさん

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

2017/01/31 (Tue) 18:05 | EDIT | REPLY |   
Akira  
To yukoさん

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

2017/02/01 (Wed) 15:54 | EDIT | REPLY |   
みなみ  
No title

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

2017/03/11 (Sat) 00:56 | EDIT | REPLY |   
Akira  
To みなみさん

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

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

2017/03/11 (Sat) 01:23 | EDIT | REPLY |   
みなみ  

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

2017/03/11 (Sat) 08:35 | EDIT | REPLY |   
みなみ  
No title

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

2017/03/19 (Sun) 09:09 | EDIT | REPLY |   
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 | EDIT | REPLY |   
みなみ  
ありがとうございます

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

2017/03/19 (Sun) 23:03 | EDIT | REPLY |   
Akira  
To みなみさん

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

2017/03/20 (Mon) 01:11 | EDIT | REPLY |   
みなみ  
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 | EDIT | REPLY |   
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 | EDIT | REPLY |   
みなみ  
お世話になります

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


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

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

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

2017/04/07 (Fri) 08:52 | EDIT | REPLY |   
Akira  
To みなみさん

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

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

<!--more-->

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

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

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

2017/04/07 (Fri) 13:42 | EDIT | REPLY |   
みなみ  

ありがとうございます。

2017/04/07 (Fri) 16:30 | EDIT | REPLY |   
Akira  
To モウリさん(移動先)

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

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

2017/06/01 (Thu) 21:33 | EDIT | REPLY |   
モウリ  
関連記事のサムネイルについて

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

2017/06/03 (Sat) 08:37 | EDIT | REPLY |   
Akira  
To モウリさん

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

2017/06/03 (Sat) 10:58 | EDIT | REPLY |   
モウリ  
アイキャッチ画像について

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

2017/06/26 (Mon) 15:51 | EDIT | REPLY |   
モウリ  
先ほどの

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

2017/06/26 (Mon) 16:00 | EDIT | REPLY |   
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 | EDIT | REPLY |   
モウリ  
ありがとうございます。

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

2017/06/26 (Mon) 22:32 | EDIT | REPLY |   
Akira  
To モウリさん

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

2017/06/27 (Tue) 10:04 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い