vanillaice (Akira)

vanillaice (Akira)

TheCityテンプレート


名称 TheCity
カラム数 1 と 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー PC・タブレット --- 右・下/ スマホ --- ドロワー(左からスライド)
新着サムネイル表示 あり
鍵つきブログの方は表示されませんので削除をお願いします
Google Feed API廃止に伴いFC2独自変数での表示に変更しました
記事幅 可変 最大850px(内寸 810px)
サイドバー幅 PC --- 右300px 下最大600px/ スマホ --- デバイス依存 最大320px
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = 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新着サムネイルを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適用版は記事の最後に掲載しています)
配布終了致しました


TOP PAGE DEMO
LIST PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ




仕様
・サイドメニュー右固定 折りたたみ
・サイドメニューはスマホのみドロワー(左からスライド)
・記事内にUPした画像には自動でドロップシャドウが付きます


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・サイドバーの形状変更
・トップページの表示タイプ変更(全文表示から要約表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更
位置変更はこちらを参考にどうぞ ↓
テンプレートのカラム位置変更


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




画像のドロップシャドウについて

記事にUPした画像へは自動でドロップシャドウがつくようにしてあります
・ FC2エディターツール内「絵文字」
・ 拍手やSNSボタン
上記2条件は除外にしてあります



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

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




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

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

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

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

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


サンプル



* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)
注意) ハンドルネームを判別しています 同じハンネの方がご訪問されると… ごめんなさい (割りきってお使いくださいね)




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


みなさんいつもありがとうございます ( ゚Д゚)ノ
関連記事

Comments 8

There are no comments yet.
-  
管理人のみ閲覧できます

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

2015/09/08 (Tue) 18:40 | EDIT | REPLY |   
Akira  
To スライドサイドバーの件 内緒さん

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

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

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

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

2015/09/08 (Tue) 20:10 | EDIT | REPLY |   
パセリ  
はじめまして&ありがとうございます&ご質問

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

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

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

----------

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

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

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

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

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

----------

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

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

2015/11/09 (Mon) 00:02 | EDIT | REPLY |   
Akira  
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) 10:35 | EDIT | REPLY |   
パセリ  
To Akiraさま

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

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

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

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

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

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

2015/11/09 (Mon) 17:31 | EDIT | REPLY |   
Akira  
To パセリさん

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

2015/11/10 (Tue) 00:24 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/12/18 (Fri) 18:44 | EDIT | REPLY |   
Akira  
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の場合にはバージョンも教えてください)

③カスタマイズの有無

---------

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

2015/12/20 (Sun) 11:03 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
2017.8.8 本日より10日ほど留守にしますのでお返事遅れます。すみません