Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)




名称 Corridor
カラム数 2
プラグイン対応
プラグイン1・2 --- 右サイドメニュー
プラグイン3 --- フッター上サイドメニュー
レスポンシブ対応
サイドメニュー パソコン --- 右, フッター上
タブレット --- 同上
スマートフォン --- 右サイドメニューのみドロワー (右からスライド)
記事幅 可変 最大1046px (内寸 966px)
サイドバー幅 固定 300px (内寸 260px)
新着サムネイル表示 あり (フッター下)
鍵つきブログの方は表示されませんので削除をお願いします
Google Feed API廃止に伴いFC2独自変数での表示に変更しました
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = 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 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム 色調変更, 文字大きさ変更 etc.


valid-html5.png


更新履歴 2017.1.25


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

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


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



更新履歴 2017.1.13


・RSS新着サムネイルをFC2独自変数での表示に切り替えました

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

表示件数はブログ個人設定に依存します
デザイン上の最適件数は 6件 です


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



ほっちきちーが降板 (´・ω・`)
豆知識: ほっちきちー = ホッチナー警部 = クリミナル・マインドの中の人
だからなんなんだって話しですけど(毎度すみません)



こりどー
12日申請予定 審査通過致しました ありがとうございます



TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ




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


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


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




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


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


プラグイン3を使わない = フッター上サイドメニューを使わない
という方はソース内から該当箇所を削除してください
Ctrl+F(Windows)/ Command+F(Mac) キー検索

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

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



No image画像変更


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

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

ソース内該当箇所は

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

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

デフォルト画像 (縮尺掲載 1000✕562 64KB public domain)




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



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


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



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



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



ドミナントカラー


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

例) 51,51,51


rgb(250,250,250) 全体背景色
rgb(51,51,51) 基本文字色
rgb(220,227,233) グローバルナビ背景色, タグホバー時背景色, フッター上SNSボタン背景色, ページ送りボタン背景色, トップページread moreボタン背景色 など
rgb(200,207,213) リボン切れ端の色
rgb(180,187,193) ドロワーハンバーガーボタン(スマホのみ)



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


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




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

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

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

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

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


サンプル



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




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


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

Comments 16

There are no comments yet.
きろろ  
おっ!

出ますか?
このテンプレート、何気にずっと待っていました。
申請、早く通過するのを楽しみにしています!(^^)!

2016/09/12 (Mon) 00:45 | EDIT | REPLY |   
ぼっちん  
そうなんです。

この「Corridor」だと、Gridタイプでもトップページの記事数を偶数設定した時に収まりが良いんです(笑)
審査通過お待ちしてま~す o(^-^)o

2016/09/12 (Mon) 08:52 | EDIT | REPLY |   
Akira  
To きろろさん

今日申請しました (o'д`o)ゝ
いつもありがとうございますー

2016/09/12 (Mon) 21:30 | EDIT | REPLY |   
Akira  
To ぼっちんさん

ぼっちんさんもありがとうございます

2016/09/12 (Mon) 21:32 | EDIT | REPLY |   
きろろ  
お借りしました<(_ _)>

きれいですよね♪、これ、好きです。
優しい色合いが、見ていて癒やされますね。

夏場はずっとMochaを使っていたんです。
黄色のネイルが可愛くてw

「続きを読む」をずっと使ってこなかった私には、
全表示のテンプレートは、ちょっと手が出ないんですよねw

2016/09/14 (Wed) 02:46 | EDIT | REPLY |   
Akira  
To きろろさん

私もどちらかと言うと要約タイプの方が好きかなー (´・ω・`)
要約の方がデザインのし甲斐がありますし。
ただなんとなくみなさん、昔から見慣れた全文表示の方が安心感があるみたい。
なんとなく ^^;

2016/09/14 (Wed) 18:42 | EDIT | REPLY |   
カズ  
ヘッダー画像の設定方法

Akira様

先日AMP対応の件で質問させていただきましたカズです。
その節はありがとうございました。

早速、貴殿のCorridorをダウンロードさせていただきました。
オシャレですし、スマホで見ても綺麗に見えるので気に入りました。

度々の質問で恐縮なのですが、メニュー(「HOME INDEX RSS ADMIN 」)の上の「The other way round ARTICLE PAGE」をヘッダー画像に変更することはできるのでしょうか?

他のテンプレートなら画像を貼り替えるだけでできたのですが、こちらのテンプレートでは見つけられませんでした。
よろしけれは、推奨の画像サイズ、CSSの記述をご教示いただけますでしょうか?

どうぞよろしくお願いいたします。

2016/12/16 (Fri) 16:17 | EDIT | REPLY |   
Akira  
To カズさん

こんにちは (o'ω')ノ
なかなかログインできず、お返事が遅れがちで申し訳ないです。

カスタマイズのご質問に関してはブログアドレスの記載を必須とさせて頂いておりますのでご協力をお願いします。

で、ご質問の要件ですが、

① ヘッダーに背景画像を敷きたい
② ヘッダーのブログタイトルとブログ説明文をテキストからバナー画像に変更したい

このどちらでしょうか。
ご回答頂いてから改めますね。
よろしくお願いします。

2016/12/18 (Sun) 16:04 | EDIT | REPLY |   
カズ  
No titleTo Akiraさん

こんにちは。

説明がわかりにくくて申し訳ございません。

>② ヘッダーのブログタイトルとブログ説明文をテキストからバナー画像に変更したい
こちらでございます。

どうぞよろしくお願いいたします。

2016/12/18 (Sun) 16:26 | EDIT | REPLY |   
Akira  
To カズさん

ブログアドレス記載必須です。

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

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

2016/12/18 (Sun) 19:26 | EDIT | REPLY |   
Akira  
To カズさん

お返事遅れております。
申し訳ございません (*_ _)
次回からブログアドレス記載の無い場合にはお答えできませんのでご理解をお願いします。
既存のバナーがあるのだろうとは思いますが、カズさんがイメージされている配置と私が想像するそれに食い違いがあるかもしれません。
最も早い解決としては実際のページを見せて頂くこと、既存の画像を見せて頂くことです。
場合によってはこれから記す私の説明が全て無駄になりかねません。
何卒ご理解とご協力をお願い致します。

> ヘッダー内テキストをバナー画像に変更したい件

まず選択肢です。
① 画像サイズはヘッダー全画面に設定するのか
② コンテンツ横幅に合わせて制御するのか(デフォルト設定はmax 1400px)
上記が画像サイズ設定

③ ヘッダー内に設置した画像の範囲だけをリンクにするのか
④ ヘッダー全体をリンクにするのか
上記はリンク範囲設定

--------

既存バナーは未確認ですので言及できません。
以降は画像準備段階からのお話しになります。

準備するバナー画像サイズ実寸は 横1500px程度が望ましいと思いますが、①を選択される場合には閲覧者によっては画面サイズが相当大きなものになりますので、あるいは1500px以上で準備された方が良いかもしれません。

スマホでのサイズは横300pxまで縮小されますので、その数値を意識されまして
300pxになった時に文字が小さすぎて読めない、などということが無いように作成してください。

また、場合によっては左寄せあるいは右寄せの配置もあるかと思います。
こちらは既存の画像をお見せ頂くことがあればご回答します。
単に画像に変更するにしろ、CSSはそれぞれ異なる内容になります。
今回のご説明で左右寄せについては除外します。

さらにこちらのテンプレは左横に花の画像が付いています。
ここを削除されるか温存されるかでまた処理が変わってきますが(そういった意味でもブログアドレスはお伝え頂きたいんです。目視確認できるように。)
仮に温存されるのであれば、バナー画像は透過PNGあるいは透過GIFの拡張子で作成をお願いします。

--------

● html修正 ①②共通作業

welcome to my blog の文言も不要、という前提でいきます。
Ctrl+F(Windows)/ Command+F(Mac) キー検索 (htmlソース内)

<p id="welcome">

上記を目印に、上記を含み

<div class="mobile-toggle">

の2行上にある </p> までを削除
削除して空いた箇所に以下を追加

ここから作業分岐。
③の場合

<h1 id="blog-title">
<a href="<%url>"><img src="バナーアドレス" alt="ブログタイトル"></a>
</h1>

④の場合

<h1 id="blog-title">
<img src="バナーアドレス" alt="ブログタイトル">
</h1>
<a href="<%url>"></a>

--------

CSS修正

①+③の場合
検索

#blog-name-container

2箇所ヒットしますが最初のものが対象です。
この項目を以下の通り変更

#blog-name-container {
margin: 0 auto;
width: 100%;
padding: 画面上辺とバナー上辺までの距離px 0 バナー下辺とナビゲーションまでの距離px;
}

バナー画像自体に空白があれば赤字部分の設定は不要になりますので
padding に関する1行は削除してください。


②+③の場合
同じく #blog-name-container の項目を以下の通り修正

#blog-name-container {
margin: 0 auto;
width: 90%;
max-width: 1400px;
padding: 画面上辺とバナー上辺までの距離px 0 バナー下辺とナビゲーションまでの距離px;
}

①+④
②+④ の場合はそれぞれ padding設定の下の行に

position: relative;

を追加。

ここまでが画像を収めるブロックの設定です。
続きまして画像設置の設定。

①②共通
検索

/* 注)ブログタイトルフォント関連 */

上記を目印に

/* 注)ブログタイトル下ブログ説明文 */

までに挟まれた内容を削除
削除した箇所に以下を追加

#blog-title img {
width: 100%;
}

上記は画像実寸に依存するならば不要。
作成したブロック範囲いっぱいに表示させるのなら必要です。
実寸依存の場合には画像は左に寄ります。
中央にしたいのならば #blog-name-container に
text-align: center;
も追加。

④を選択している場合にはさらに以下の内容も追加
(③を選択時は以下は不要)

#blog-name-container a {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

--------

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

2016/12/20 (Tue) 16:57 | EDIT | REPLY |   
カズ  
No titleTo Akiraさん

こんばんは。
ご多忙のところ、詳細な説明誠にありがとうございます。

また、URLの記載がなく誠に申し訳ございませんでした。色々といじっている最中でまだ記事はおろか肝心のバナーすら用意できていない状況でした。

説明を読む限り私がやりたかったのは②+③です。
ご教示いただいた内容を踏まえ、取り組んでみます。

親切丁寧なご対応に感謝いたします。

2016/12/21 (Wed) 01:42 | EDIT | REPLY |   
Akira  
To カズさん

> 他のテンプレートなら画像を貼り替えるだけでできた〜

という一文がありましたので、既存の画像があるのかと ^^;
はい。一度お試しください。

2016/12/22 (Thu) 14:55 | EDIT | REPLY |   
Akira  
To kanakoさん(移動先)

http://vanillaice000.blog.fc2.com/blog-entry-516.html#comment3783

> 記事のフォントサイズを大きくしたい〜

このフォント変更はトップページを含む全体的なものでしょうか。それとも個別記事だけでしょうか。

------ ① 全体的な場合(トップページ含む、サイドメニュー含まず)
Ctrl+F(Windows)/ Command+F(Mac)キー検索

/* 注)記事本文フォント */

この行の
font: 13px/1.7

赤字部分がフォントサイズですので大きい数字に変更してください。
/ 1.7
この1.7は行間ですので、バランスを見て少し大きくされた方が読みやすいかもしれません(1.8 や 1.9 など。単位不要)

------ ② 個別記事のみの場合(トップページ含まず、サイドメニュー含まず)
CSSソース(管理画面下段)の末尾に以下を追加

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

以上です。よろしくお願いします (●'0'●)/

2017/06/14 (Wed) 18:07 | EDIT | REPLY |   
kanako  
できました!

Akira様

ありがとうございました。
個別記事だけのほうだったのですが、無事変更できました。

質問が不十分でしたのに、詳しく説明していただきまして、
ありがとうございました。

また質問させていただくかもしれませんが、よろしくお願いいたします。

2017/06/15 (Thu) 20:32 | EDIT | REPLY |   
Akira  
To kanakoさん

お出来になったようで安心しました。
はい。いつでもお気軽にどうぞ。
修正作業お疲れ様でした

2017/06/16 (Fri) 17:18 | EDIT | REPLY |   

Leave a reply

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