attention admin about comments trackbacks you may also like

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

2016年09月10日
テンプレート
26
HTML5 CSS3 RWD
Corridorテンプレート

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

最終更新 2019.11.5
  • コメント主のリンク表示用JS及びデザインの変更
  • SVGのIE向け調整
名称 Corridor
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大787px
サイド --- 260px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.3.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カラム
プラグイン1, 2 --- 右
プラグイン3 --- 下
プラグイン1, 2 --- 下 or 右(デバイス幅依存)
プラグイン3 --- 下
プラグイン1, 2 --- 右ドロワー
プラグイン3 --- 下
更新履歴 2019.8.1
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

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

【重要】テンプレートの変更点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 .5em 0 .3em;
}
②について

#community" で検索するとhtml内に2箇所あります。2つとも #comment_form"変更

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

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

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

続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。この直近、2行上にある </div>削除

</form>
</article>
<!-- コメント投稿ここまで -->

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

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

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

<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 を追加(セキュリティ対策)
  • 文字数制限のJSを廃しCSSに変更
  • アニメーションスピードを調整(旧来よりも若干速めました)

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

最終更新 2018.3.12

大規模なメンテナンス 及び 修正 を行いました。

  • iOS11.2.6でモーダルが開かない件修正
  • 画像遅延読み込みを導入(デフォルト設定: トップページサムネイル, 各ページ下新着サムネイル, 管理人コメントアイコン)
  • 新変数導入により管理人コメントプロフィールアイコンをデフォルト表示
  • Font Awesomeをバージョン4(CSS)からバージョン5(JS)にアップグレード
  • floatレイアウトからflexレイアウトへ変更
  • フォントサイズ指定にrem単位を導入
  • リセットCSS及び一部CSS内容を圧縮
  • 構造化マークアップを導入(個別記事のみ)
  • 個別記事の見出しレベルをh1に昇格
  • タグリンクの遷移先を外部から内部(自ブログ内)へ変更
  • その他調整多数

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

更新履歴 2017.1.25

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

更新履歴 2017.1.13

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

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

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

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

こりどー
承認されました。ありがとうございます。

サンプル

Samples

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

プラグイン表示位置について

Classification of plugin

パソコンなど大きな画面ではプラグイン1と2は右に、プラグイン3は下に表示されます。また、スマートフォンでは プラグイン1と2はドロワー内への掲載 になりますので、折り畳まれたくないものはプラグイン3への登録をお願いします。

プラグイン3を使わない(フッター上サイドメニューを使わない)という方はソース内から該当箇所を削除してください。

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

削除せずともレイアウトには影響が出ませんが無駄な内容なので削除をおすすめします。

左右カラム入れ替えの仕方

How to reverse the direction of rows

#main-container { を検索されますとCSSソース内に4箇所ヒット、最初のものが対象です。この括りの padding: 40px 60px 80px; の直下に flex-direction: row-reverse;追加

続きまして #primary { で検索。2箇所ヒットし、やはり最初のものが対象です。この括りの margin-right: 40px; 緑部分 rightleft に変更。
以上2手順です。

No image画像変更

How to change alternative image

記事内の然るべき箇所に画像が存在しない場合に代替として表示するNo image画像を変更する場合は

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

上記が該当URLですので全て差し替えてください。最適サイズは横800程度、縦横比不問ですが横長推奨。

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

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

ドミナントカラー

Dominant colors

以下が基本色調です
数字の部分だけを抜き出して検索されますと 不透明度つきのものも全て出てきますので上手に活用してください。
例) 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) ドロワーハンバーガーボタン(スマホのみ)

削除可能なJSについて

Delete specific JS if you want to

特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容 です。以下の2項目に当てはまる方は削除をおすすめします。

【FC2検索バーを利用しない人は削除】

<!-- 注)FC2検索バー非表示の方ここから削除可 -->

各々上記を目印にガイダンスに従って削除。

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

Cautions before asking for something.

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

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

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

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

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

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

コメント(26)

There are no comments yet.

きろろ

2016/09/12 (Mon) 00:45

おっ!

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

ぼっちん

2016/09/12 (Mon) 08:52

そうなんです。

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

Akira

2016/09/12 (Mon) 21:30

To きろろさん

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

Akira

2016/09/12 (Mon) 21:32

To ぼっちんさん

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

きろろ

2016/09/14 (Wed) 02:46

お借りしました<(_ _)>

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

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

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

Akira

2016/09/14 (Wed) 18:42

To きろろさん

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

カズ

2016/12/16 (Fri) 16:17

ヘッダー画像の設定方法

Akira様

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

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

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

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

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

Akira

2016/12/18 (Sun) 16:04

To カズさん

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

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

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

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

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

カズ

2016/12/18 (Sun) 16:26

No titleTo Akiraさん

こんにちは。

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

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

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

Akira

2016/12/18 (Sun) 19:26

To カズさん

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

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

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

Akira

2016/12/20 (Tue) 16:57

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/21 (Wed) 01:42

No titleTo Akiraさん

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

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

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

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

Akira

2016/12/22 (Thu) 14:55

To カズさん

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

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

Akira

2017/06/14 (Wed) 18:07

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'●)/

kanako

2017/06/15 (Thu) 20:32

できました!

Akira様

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

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

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

Akira

2017/06/16 (Fri) 17:18

To kanakoさん

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

-

2018/03/28 (Wed) 03:25

管理人のみ閲覧できます

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

Akira

2018/03/28 (Wed) 16:35
vanillaice (Akira)

To Corridorカスタマイズの件 内緒さん

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

> facebookなどの、SNSへのリンクは不要〜

<ul id="footer-sns">
を目印に検索されますとhtml内に1箇所ヒットします。
そのすぐ上にある
<footer> から </footer> までを削除してください。

--------
> 右端のプロフィール画像を少し小さくしたい〜

以下の内容をCSS(スタイルシート)末尾に追加してください。

.plugin-myimage {
width: 希望の数値px;
height: auto;
}


画像原寸が横200pxなのでそれ以下の数値をどうぞ。
(現在は原寸200×200の拡・縮無しで表示されています)

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

-

2018/03/28 (Wed) 20:13

管理人のみ閲覧できます

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

Akira

2018/03/29 (Thu) 02:44
vanillaice (Akira)

To Corridorカスタマイズの件 内緒さん(完了のご報告)

こんばんは。
お出来になったということで安心しました。
こちらこそありがとうございます

ゆき

2019/10/27 (Sun) 02:43

悩んでいます(汗)

お世話になっております。
上の方でも同じ様な質問があったんですが、ヘッダー部分をできればメニューも含めて「Juliette-Note」か「Donna」みたいにしたいんですが、できますか?
ブログタイトルのアニメーションは有っても無くても大丈夫です。

または「Haven」のトップページ記事にNo imageを付けられますか?
「Corridor」のNo imageが画像含め好きなので付けられればなぁと思いまして。画像は無理なら探してきます。
あと、文字を3列にするにはどこを触ったら良いでしょうか?

もしくは「La_Vita」にも「Haven」と同じ内容と、ヘッダー画像?の縦幅をもう少し小さくしたいんですが出来ますか?
Chromeなんですが、ズームを75%くらいにしないと、こちらのサムネイルと同じにならないので…何とか調整出来ないかと。

今思いつくのはこれくらいなんですが、簡単にできそうなテンプレートで良いので教えて下さい。
「Haven」と「La_Vita」の場合は何かありましたら、そちらに質問に参ります。
色々ダウンロードしていじっていたんですが、どれにしようか悩んでしまいまして。
上記のテンプレート以外にも2~3悩んでいます(汗)
ところで、Font Awesomeのアイコンは止められたんでしょうか?ADMINを以前みたいに鍵にしようと思ったらアイコンが出なかったので、あれ?と。

Akira

2019/10/27 (Sun) 16:05
vanillaice (Akira)

To ゆきさん

こんにちは。

要望を一度整理しましょう。あっちもこっちも、というわけにはいきませんので、ご自身の方向性をしっかりと決めてください。
ヘッダーのカスタマイズについては単純な調整・変更以外は原則「自己責任・自力」でお願いしています。
また、記事内に注意書きの有る通り「テンプレートのデザインを著しく変えてしまうようなカスタマイズの手引き」についてはお断りしています。
特に今回は(恐らく)スクロール固定ヘッダーを移植したい、ということだと思いますので、その上にナビゲーションもとなるとhtml, CSS, 場合によってはJSも付加されて大掛かりな修正になります。

要はヘッダーを「スクロール固定」にしたい、ということですよね。たぶん。
Juliette〜, Donna, La_vitaはスクロール固定タイプヘッダーです。
その一方で「サムネイルと同じにならない」というのは、これは元画像の縦横比と合わないということなのかな、と推測します。
サムネイルというのは「ヘッダー用画像」のことかなぁ。ちょっとよくわからないんですが。

固定スクロールを実装するのに一番簡単な方法は
position: fixed
または
background-attachment: fixed
のいずれかを用いることです(後者はスマホでは不可)が、これは画面全体に画像を敷く必要があるので元画像の全体を表示させることはできません。画像のほとんどの部位が隠れて見えなくなります。
それともHavenだけは別の方針なんでしょうか。

参考記事: テンプレートのヘッダー画像を変更する際のヒント
https://vanillaice000.blog.fc2.com/blog-entry-919.html

上記リンク先の記事をお読み頂きまして、「何を優先するのか」をはっきり決めてください。
レイアウトなのか、それともヘッダーの形状なのか。
ヘッダーの形状を優先させる場合には求める形に最も近いテンプレートの採用をおすすめします。
仮に移植をするとして最も難易度が高いのがLa_Vita、次いでJuliette-Noteです。この2つはJSが必須です。移植ならDonnaが良いと思います。
ただしfilter(ぼかし)をどうするのかなどは自己責任でお願いします。

ご要望の中で最も簡単にできそうなカスタマイズは
「Havenのヘッダー高さを変更」です。
ただし「No image画像の設定」については結構面倒ですね。かなり大きな範囲のhtml修正が必要です。なので今ここで内容をお伝えするのではなく方針が明確に決まった後にしてくださいね。

FontAwesomeについては当記事内に明記してある通りです。よろしくお願いします。

ゆき

2019/10/27 (Sun) 18:41

悩んでいますの続き

こんばんは。
FontAwesomeについてブログ内検索したら出てきました。検索をかなり失念していました(汗)

やっぱりどれも難しそうなんですね…
あまり画像を使わないんだけど全文タイプから要約タイプにしてみようと思って一番初めにカスタマイズしていたのはDonnaなんです。
素人カスタマイズなので色々「?」が出てきまして…(念の為にブログをDonnaにかえてみます)
それで次に見つけたのがCorridorで、これにJuliette-NoteやDonnaみたいなメニュー含めヘッダー置けたらこれ使わせて頂きたい!と質問させてもらいました。
そうですね、画像固定でメニューが上から下まで付いてくる(で良いでしょうか?)タイプを探していました。
ヘッダー的にはHavenが好みなんですが、それ以外はCorridorが好みで…と、迷走しています。
Donnaで進めた方が良いでしょうか。

あと、La_Vitaについての「サムネイルと同じにならない」というのは、私の画面が縦に短いので画像が少し隠れちゃうから、La_Vitaサンプル画像みたいに画像全部見えるようにしたい!
なのでヘッダー周辺を少しづつ上に上げて…という安易な考えです。すみません。

Akira

2019/10/27 (Sun) 22:27
vanillaice (Akira)

To ゆきさん

お疲れ様です。

設定中のDonnaを拝見しました。
まず、画像が圧倒的に向いていない ^^;
ヘッダーサイズは長辺1600px以上を推奨しています。そしてオリジナル画像がどんなサイズ(寸法)だったのかはわかりませんが、恐らく小さい画像を引き伸ばしているのではないでしょうか。解像度が低すぎるように思います。
Donnaのヘッダーの特徴は部分的にblur(ぼかし)がかかるところです。ですからはっきり見える部位とぼやけている部位の対比がないと成立しないデザインです。
今ご利用中の画像ではblurがあってもなくても同じようにぼやけているのであまり意味が無いというか。

Donnaでヘッダー画像を選ぶのであればデフォルト画像のようにオブジェクトが密になっているものをおすすめします。
例えば花ならば一輪ではなくブーケ、みたいな。また、空や海のような単調な画像は向きません。

-----
> La_Vitaサンプル画像みたいに画像全部見えるようにしたい!〜

そうですね。スクロール固定背景だとどうしても見切れ分が多くなるのでそれを補正するためにJSを利用しています。そのJSの扱いは知識がないと難しいと思います。加えてLa_Vitaは「パララックス」といって視差効果も出している(スクロール量をわざとずらして移動)のでさらに難易度が上がります。
なのでLa_Vitaをベースにする場合は「画像のURLを変更する」という単純なカスタマイズに留めると良いと思います。

-----
今お聞きした限りでは「画像の縦横比を固定したい」というのが望む形なのではないでしょうか。その件についてはリンク掲載した記事に書いてある通りです。縦横比を固定する場合の画像の選び方、テンプレートの選び方も同様。

まずは「画像に合わせてテンプレート選ぶ」のか「テンプレートを決めて画像を選ぶ」のか決めないといけませんね。そしてヘッダー画像の掲載方法のご相談は「この画像を使いたい」という形で実物を見せて頂かないとなかなかお答えしにくいというか、正しい答えをお伝えできないんですね。繰り返しになりますが、向き不向きというのが必ずあるからです。

私の要約テンプレートでヘッダー画像の縦横が固定されているというと
・Blowing
・Ample(限定配布, 上級者向け)
・Mocha(フェイドスライド)
・tremolo
・Haven
ぐらいかなぁ、と思います。縦横比固定自体は ヘッダー画像上にテキストが乗っていない場合には すぐに適用できますよ。

ゆき

2019/10/28 (Mon) 02:25

ありがとうございました

こんばんは、お返事ありがとうございます。

すみません、リンク先は説明にも書いてありますが、テストブログですのでカスタマイズ中のヘッダー画像は試験的に置いていたりします。
何度も同じような事書かせて申し訳ないです(汗)
テストでないブログでDonnaにさせて貰う場合はちゃんと合うように作ります。もしくは外せるならぼかしを外す方向で…

お勧めして頂いたテンプレートですが…
・Blowing=La_Vitaと同じで画像の下部分が見切れてしまうので止めにしました。私の画面縦が768pxなのがいけないんだと(泣)
・Ample=画像をそんなに使わないので記事無しでNoimageだらけになるので止めにしました。隣のTransitは希望に近そうなのでもう少し早くこれば良かったと…
・Mocha=これもLa_Vitaと同じく画像下が見切れてしまいます。ちなみにですが全文のBron-Broenが画像下に余白もあっていい感じ見えます。
・tremolo=これもAmpleと同じ理由です。
・Haven=やっぱりこれでしょうか。最初の「Noimage画像は付きますか?」はNoimage画像でもあれば華やかかなぁと思って伺ってみただけなので、難しそうでしたら無くても大丈夫です。

HavenとDonnaをもう少し触ってみることにします。
これ以上Corridorにコメントするのも申し訳なくなってきたので、これで終了とさせて頂きます。
また質問が出来たら宜しくお願いします。
お付き合い頂きありがとうございました!

Akira

2019/10/28 (Mon) 09:27
vanillaice (Akira)

To ゆきさん(終了のご報告及び私からのお願い)

おはようございます。
質疑応答は終了ということで了解です。

私からのお願いです。
参考記事: 弊ブログコメント欄利用に関するお知らせとお願い
https://vanillaice000.blog.fc2.com/blog-entry-773.html

完全にあてはまるわけではないんですが、今回の場合は実際に利用する画像が既に決まっているのならば、その画像を見せてもらえれば即解決できた問題です。
既に縦横比が固定されているヘッダーの、その縦横の比率を変更する(縦の高さを調整する)というのは最も簡単なカスタマイズの部類に入ります。

「xxx部位のyyの数値をzzに変更してください。」

で終わります。ですが実際の画像がわからなければ私からzzの正しい数値を伝えるのは不可能です。
手がかりが無いと、私が想像をしてその想像を基に説明しなければならず、非常に手間も時間もかかってしまいます。ときにはその想像が間違っており、全ての労力と時間が無駄になることもあります。
なので次回以降のご質問時は情報の出し惜しみをせず、解決の手がかりになるものはお伝えくださいね。
よろしくお願いします。

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

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