attention admin about comments trackbacks you may also like

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

2015年09月08日
テンプレート
8
HTML5 CSS3 RWD
TheCityテンプレート

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

最終更新 2019.8.3
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)

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

既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...

①について

</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下の内容を 追加

<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->

続きまして <div class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め <div class="icon-position"> のすぐ上にある </div> まで(この文字列も含む)を以下の内容に 変更

<ul class="comment-info">
  <li><%comment_year>/<%comment_month>/<%comment_day> (<%comment_youbi>) <%comment_hour>:<%comment_minute>
  <!--comment_edit--><li><a href="<%comment_edit_link>" title="<%template_edit_comment>">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内に1箇所ありますので #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <h3 class="another-title">Leave a comment</h3> までを 削除

<!--/comment-->
<form action="./" method="post" name="comment_form" id="comment_form">

上記のような形になっていればOKです。

続いてスタイルシート末尾に以下の内容を 追加

#comment_form {
  padding-top: 40px;
}
③について

<p class="visitor-name"><%comment_name>&nbsp;&nbsp;<script>a="<%comment_url>",""!=a&&document.write('<a href="'+a+'" target="_blank" rel="nofollow noopener noreferrer"><svg class="svg-inline svg-inline-link" viewBox="0 0 512 512" role="img"><use xlink:href="#inline-link"></use></svg></a>');</script></p>
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<p class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->"><%comment_name></p>

テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に

.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}

こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。

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

名称 TheCity
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大800px
サイド --- 300px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.3.1)
Font Awesome導入 なし(インラインSVGのみ)
Lazyloading導入 なし
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Page Speed Insigtsスコア
固有機能 ・ 画像にドロップシャドウ
・ 動画縦横比固定
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 スマホのみサイドメニューがドロワーに切り替わります
パソコン タブレット スマートフォン
2カラム 1 or 2カラム(デバイス幅依存) 1カラム
サイドメニュー --- 右 サイドメニュー --- 下 or 右
(デバイス幅依存)
サイドメニュー --- 左ドロワー
最終更新 2019.4.27
  • C版Safariでモーダル検索背景が白くなる件修正
更新履歴 2019.1.25
  • Font Awesomeを廃しインラインSVGに変更
  • レイアウト関連CSSの追加及び一部削除
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークのシェアアイコンを追加
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • パンくずリストの位置をブログタイトル下に変更

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

更新履歴 2018.3.8
  • iOS11.2.6でモーダルが開かない件修正
  • Font Awesomeをバージョン4(CSS)からバージョン5(JS)へアップグレード
  • 新変数導入による管理人コメントプロフィールアイコンデフォルト表示

iPhoneでの不具合修正も含まれます ので是非アップデート(再DL)をお願いします。

更新履歴 2017.12.12

大規模なメンテナンスを行いました。
詳細は以下のページでご確認ください。

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

TheCityテンプレートのメンテンナスを行いました。 公式配布ソースは修正済みです。 今回のメンテナンスでは html構造及びCSS装飾及びJS内容全てに大規模な修正を入れています。 不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。...

更新履歴 2017.9.22

SSL化に伴うURL正規化

更新履歴 2017.1.25

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

更新履歴 2017.1.13

・RSS新着サムネイルをFC2独自変数での表示に切り替えました 関連記事
Google Feed API 廃止に伴うテンプレートの一部レイアウト変更

更新履歴 2016.11.1

メンテナンス
・ 全体レイアウト/ デザインの再調整
・ 関連記事サムネイル整形
カテゴリなど一部ページ表示をリスト形式に変更
・ 拍手ボタンにシャドウがつかないよう修正
・ ページ遷移時のエフェクト削除

トップの見た目にほとんど変更はありませんが html, CSS共に大きく変わっています
特にカテゴリやタグなどのページをリスト形式に変更しています
DEMO画面をご確認頂きまして再DLをご検討ください
不具合修正ではありませんのでそのままお使い頂いても問題ありません

本メンテナンスに伴い 記事内容を大幅に修正しましたことをご了承ください

更新履歴 2016.1.9

フッター構造を変更しました
タイトルタグを微調整しました(SEO対策)

更新履歴 2015.12.4

Google feed api 廃止に伴う新着サムネイル仕様変更

Google自体がこちらのAPIを排除してしまいましたので
この日付以前にDL頂きました方については新着サムネイルが反映されません
お手数ですが再DLをお願い致します

更新履歴 2015.9.22

iOS9 リリースに伴い スマホ・タブレットではColorbox起動させないよう修正しました
(Colorbox適用版は記事の最後に掲載しています)
配布終了致しました

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

サンプル

Samples

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

カスタマイズのコツ

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

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

コメント設定 > コメンテーターの情報「記憶する」

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

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

ドロワーの左右入れ替え

How to reverse the direction of drawer

html内に {align:'left' という箇所があります(JSです)ので、緑部位 left を right に変更。

続きましてスタイルシート内 .mobile {left: 8px; を同じく right に変更。

ご質問・ご相談時のお願い

Cautions before asking for something.

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

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

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

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

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

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(8)

There are no comments yet.

-  

2015/09/08 (Tue) 18:40

管理人のみ閲覧できます

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

Akira  

2015/09/08 (Tue) 20:10

To スライドサイドバーの件 内緒さん

こんばんは。ありがとうございますe-257

ホントはもう安心安全の下へ流し込みにしてしまおうかとも思いましたが、しなくて良かったです。
セーフ((((笑)
ページの上下移動が少なくてすみますので便利ですよね。
ただいろんな方がおみえになりますので、なんとも ( ̄∀ ̄;)
真逆のご意見を同時に頂いたりすると戸惑ってしまうことがあります。

あまり深く考えず、自分が「良し」と思ったものを大事にしていこうかな、と思います。

はい。他のテンプレについても需要があるようでしたらスライドの準備もしていきますね。
とりあえずリクエスト頂きましたテンプレートについては、申請は致しませんが別ファイル扱いで記事内に掲載、という形を取らせて頂こうと思います。
しばらくお時間くださいませね。

パセリ  

2015/11/09 (Mon) 00:02

はじめまして&ありがとうございます&ご質問

Akiraさま、こんばんは。はじめまして。
ハイセンスで美しく、すごく凝っているのに見やすいブログテンプレートの数々…本当に素晴らしくて、ぜひ、使わせていただきたいです!

どれも本当に素敵なので迷いましたが、こちらの「TheCity」を使わせていただきたく思っております。

このようなデータをご厚意で、無償にてお借りする立場にて、大変図々しいこととは存じつつ、4点ほど、もし可能であれば教えていただきたい点があり、ご質問コメントさせていただきました。

----------

※記事幅などは、配布してくださっているデータのまま、変更せずに使わせていただく場合のご質問です。

◇ご質問1
<!--plugin_third-->をブログタイトル直下に表示することは可能でしょうか?
もしくは、ブログタイトルの直下に、トップ画像を表示することは可能でしょうか。その場合、最大で横幅何pxの画像が表示できますか?そして、CSS上のどこに、どのような記述をすれば宜しいでしょうか。

◇ご質問2
記事内に収まる画像の横幅サイズは最大何pxでしょうか?
記事内に表示できる最大の画像サイズを教えていただければありがたいです。

◇ご質問3
質問1、2とも重なりますが、ブログタイトル直下にトップ画像が表示できる場合、トップ画像のサイズに制限はありますか?記事横幅など配布データのサイズを変更せず、そのまま使用させていただく場合です。表示できる画像の最大pxを教えていただけるとありがたいです。

◇ご質問4
「サイドバーを常に開いておく」ことがスタイルシート編集にてできるとのことですが(本当に、なんと細かいご配慮なのでしょう!)項目毎に開く、開かないを指定できるのでしょうか?

----------

一方的に、個人ブログで楽しませていただく立場ですし、ここでさせていただいても良いご質問の範囲を超えておりましたら、本当に申し訳ありません。
ご回答はしていただけない場合でも、こちらのテンプレートはもう、ぜひぜひ!お借りさせていただきますです。

初めましてのコメだというのに、質問責めにて申し訳ありません!
ブログ運営が益々楽しくなるようなデータを配布してくださることに、本当に心から感謝しています☆

Akira  

2015/11/09 (Mon) 10:35

To パセリさん

ありがとうございますe-257
ご質問一つづつお答えしますね。

◇1について
plugnin-thirdを... というよりはやはりそれ単体で挿入されることをおすすめします。
で、「ブログタイトル直下」ということですが、
ブログタイトルとSNS関連ボタンとの「間」ということでお間違いないでしょうか。

単純に<img>画像をはめこむだけでしたら以下の手順でどうぞ(htmlソースですのでテンプレ管理画面「上段」)
Ctrl+Fキー検索

<p id="subtitle"><%introduction></p>

この直下に以下を追加

<img src="画像アドレス" alt="代替テキスト" style="width: 100%; height: auto; padding-bottom: SNSボタンとの距離px;">

表示サイズは最大で横840pxです。
上記内容でブラウザ幅縮小時にも自動調整になります。
横840pxを超える画像でも自動で縮尺されるので大丈夫です。
逆に840pxを下回る横サイズの場合は拡大されてしまいますので、800〜900前後の横幅が理想的だと思います。

サンプルスクショ ↓(padding-bottom: 40px; を指定)

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/FireShot%20Capture%2082%20-%20The%20other%20way%20round%20-%20%20-%20http___bigblock1217.blog.fc2.com__zpspfmgmo2f.jpg~original

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/FireShot%20Capture%2084%20-%20The%20other%20way%20round%20-%20%20-%20http___bigblock1217.blog.fc2.com__zpsszsckzpt.jpg~original

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/FireShot%20Capture%2085%20-%20The%20other%20way%20round%20-%20%20-%20http___bigblock1217.blog.fc2.com__zpsd1pw0twc.jpg~original


◇2について
記事内の画像サイズはぶっちゃけて言うといくつでも構いません (´・ω・`)
上記内容と重複しますが、記事幅を超えるものについては自動縮尺です。
なのでパセリさんのおっしゃる通り、「表示サイズ」の観点で言うと、記事最大幅は810px。
810pxの横幅を下回るものは、上でご説明しましたバナーとは違って、拡大は行われず「寸足らず」になります。

◇3について
1の内容の通り、拡大表示だけ気をつけて頂ければサイズ制限はありません。
ただ、あんまり大きすぎてもページ表示の負荷が大きくなるとは思います。

◇4について
こちらはですね、FC2の使用上、プラグインとして収まっているものを個別に認識・抽出というのができないんです。
ですから一番簡単な方法は、開いておきたい要素はプラグインとして追加せず、html内に直接追加するのが良いと思います。
その方法を採用するのであれば以下の通り。

<!--/plugin_third-->
<!--/plugin-->

この直下に追加

<dl class="side_bar">
<dt class="plg_name">タイトル</dt>
<dd class="non-separate">
内容
</dd>
</dl>


内容についてはプラグインの編集画面(詳細)にある内容をゴソっと書き込めば大抵はいけるかと思います。
その際には同じ内容のプラグインは「非表示」に設定してください。
重複すると表示されないプラグインも多いです。
そしてプラグインによってはこの方法が取れないものもあるかもしれません。

一度お試しくださいませe-257

パセリ  

2015/11/09 (Mon) 17:31

To Akiraさま

初めましてのコメントながら、不躾な質問の嵐だったにも関わらず、
即日中に、このようにご丁寧にご対応いただけるとは…っ_:(´ཀ`」 ∠):_

感謝の言葉が見つかりませんっ。
本当に本当に、ありがとうございます!!!

ご説明も、ものすごく分かりやすく、いただいた内容はすべて
トライするつもりでおります。

本当に感謝です(。>д<)・゚
新作テンプレートの配布をこれからも楽しみにしておりますし、
無償でこのように素晴らしい作品を配布してくださる
そのプロフェッショナルさを見習って、私も諸々頑張りたく思います。

また、遊びにこさせてくださいませ。

この度は本当にありがとうございました<(_ _)><(_ _)><(_ _)>

Akira  

2015/11/10 (Tue) 00:24

To パセリさん

ご希望に沿う形にできると良いですね。
嬉しいお言葉もありがとうございます。
お疲れ様ですe-257

-  

2015/12/18 (Fri) 18:44

管理人のみ閲覧できます

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

Akira  

2015/12/20 (Sun) 11:03

To TheCity リンクの件 内緒さん

お返事大変遅くなりましてごめんなさい (*_ _)
そしてご迷惑おかけしております。

> タイトルリスト・ブログタイトル等のページ遷移が上手く動作しない件

当方の環境ではリンクへの影響を確認することができませんでした。
(Windows10, IE11/ Edge/ Google Chrome/ Firefox)
(Mac OSX yosemite elcapitan, Google Chrome/ Firefox/ Vivaldi/ Safari)
(iPhone, iOS9/ iOS7)

①上手く動作しない、というのは具体的にどういった症状でしょうか。
・リンクをクリックしても全く移動しない
・移動はするが何度も押さないといけない
・移動スピードが遅い
etc.

②ご利用の環境をお知らせください。
・パソコン or スマホ or 両方
・OS名(Windows7, Mac OSX yosemite, iOS9 など)
・ご利用のブラウザ名(IE11, Chrome など IEの場合にはバージョンも教えてください)

③カスタマイズの有無

---------

上記内容を改めてお伝えいただければと思います。
ページ遷移のエフェクトについてはフェイド系のものを導入しております。
それが原因で「ページの表示が遅い」と感じられる方もいらっしゃると思います。
その場合にはエフェクトを取り除かれることをおすすめします。
記事内に手順を追記しましたのでご確認ください。

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

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)