Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

Empty-streetテンプレート


名称 Empty-street
カラム数 2
プラグイン対応 ○ (右サイドメニュー)
レスポンシブ対応
サイドメニュー デフォルト 右
記事幅 可変 最大930px
サイドバー幅 固定 300px
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
テンプレ固有機能 画像にドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大(Intense Images)
見出しデザイン(手書き風, ドッグイヤー, カール)
使い方詳細ページ
テンプレート固有機能説明
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.7.23


No image画像のリンク切れを修正しました。申し訳ございません。

詳細ページ


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



FC2はSSL化する気が無いんでしょうかね (´・ω・`)
このタイミングで「JPドメインを2年間999円!」とかやってんの。非SSLのまま。
うーん… (;`ー´)



えんぷてぃ すとりーと
承認されました。ありがとうございます。
今回は試験的な意味も含めて製作しました。
何を試験したか = 各ベンダーのCSS実装状況やグリッチあるいは誤解釈など。
もうねー、Microsoftブラウザ(Edge, IE11)が酷い (´-ε-`;)
あいつらがいなけりゃもっと楽なんだよ!!!という心の叫び。



TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ



仕様
・トップページはグリッドレイアウト。
・パララックススライダー(新着記事)
・サイドメニュースクロールアンカー。
・トップページのみ Lazyload を導入。
・個別記事ページ送りサムネイル。
・SNSリンクに Bloglovin を追加しました


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・トップページの表示タイプ変更・レイアウト変更(要約表示から全文表示へ変更, カラム数変更 など)
・レスポンシブの固定幅化。
・テンプレートと無関係なプラグイン導入のお手伝い。


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



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


#main-container

を検索されますと、htmlソース内に1箇所、CSSソース内に2箇所ヒットします。
CSSソースの方の最初のものが対象です。
この括りの
padding: 0 60px 100px;
の直下に以下を 追加

flex-direction: row-reverse;

続きまして検索。

#primary

CSSソース内で2箇所ヒットします。やはり最初のものが対象です。
この括りの

margin-right: 50px;

緑部分 rightleft に変更。
以上2手順です。



全体幅調整の仕方

デフォルトは全体像の最大横幅を 1400px に設定しています。
1400
で検索して頂きますと、CSSソース内に 5箇所 ありますので、5箇所全てを希望の数値(同数値)に変更してください。
(メインコンテンツ横幅が500pxを下回った際にシングルレイアウトに切り替わるよう調整してあります)



Lazyload(レイジーロード)について

jQueryプラグインの Lazyload をトップページのみ導入しています。
画像の読み込みを遅延させてファーストビューを速くするのが目的です。
今回はグリッドで、かつ、記事の要約文も非掲載ですので、1ページあたりの記事数を多めにしても良いかと思います。
Lazyloadでページローディング時の負荷はかなり軽減されている、と思います。

デフォルトではトップページのみの適用ですが、個別記事でもお使い頂けます(FC2独自変数の操作が必要です)。
が、imgタグの記載が特殊ですので、個別記事での使用につきましては自己責任でお願いします。
既にご自身で導入済みの方は追加をされますと衝突しますので、いずれか一方を採用するようにしてください。

LazyloadはSEO的に良くない、という懸念材料もありましたが、現在ではGoogle botが非常に進化しておりまして。
JS内容もかなり正確に分析してくれるようになってますのでこの件は解消済み、ということで導入しました。



パララックススライダーについて

パソコンではパララックスになっていますが、この演出に不可欠な background-attachment というCSSプロパティがスマートフォンで全滅です。
現存機種でこれを正しく解釈できるデバイスはありませんので、スマートフォン及びタブレットではパララックスを排除してあります。この点をご了承くださいね。

単なる固定背景ではなくパララックスですので、背景画像はスクロール差分を設ける必要があります。
なので思うような上下位置合わせにならないかもしれませんが、デフォルトの状態がベストですので位置合わせのご相談についてはごめんなさいということで (o'ω')ノ



ナビゲーション内について
本作ではトップページにサイドメニューがありませんので、移動に必要と思われる カテゴリ一覧, 最新コメント一覧 をナビゲーションに登録しておきました。
先日以下のような記事を書きましたので、その記事をご覧になって導入されている方向けに同じエフェクト、同じ装飾にしておきました。

注: Google Chromeだと閉じる際のアクションが「無い」ように見えますが、実際は無いわけでなくイージングよりも先にz-indexが戻ってしまうという挙動です。
開く時は綺麗なモーションなんですけどね (´・ω・`)
これはChromeのz-index + transition の独自バグです。
その他ブラウザ、FirefoxやSafari等では閉じる際も綺麗な戻り方をします。IEやEdgeでさえ(笑)
Chromeというか、Chromium。なのでVivaldiとかOpera, Braveなども同じです。



ナビゲーション内容の追加やリンクテキストの日本語置き換えをされます方は 各リンク要素が下の行へ繰り越さないよう留意してください。
レスポンシブデザインですのでパソコンでの作業を一定の幅だけで行わず、マウスでブラウザ幅を拡大・縮小しながら見た目を確認してくださいね。
文字数が多い、リンク数が多い、などが原因で内容が下に繰り越してしまう場合には

navi breakpoint

で検索されますとhtml, CSS各ソース内に合計7箇所ヒットします。
それぞれの

(max-width: 810px)

緑の部分 810 を 大きな数字に変更 してください。
この処理でデフォルト設定よりも早い段階で折りたたまれるようになり、レイアウトに影響を与えません。


2017.8.5 追記 li要素を追加する場合

管理画面上、つまりブラウザ上でカスタマイズをされます方は、li要素追加時に 前後のli要素と文頭の位置を合わせようとしない ようご注意ください。
ブラウザ上で tabキーspaceキー を利用してソースの見た目を整形してしまうと、その空白は描画後の見た目に影響します。
li要素の文頭揃えは行わない を念頭に作業をお願いします。
html専用エディターを利用する方はエディターの仕様に則ってください。

間違い例)
<ul>
    <li><a href="遷移先アドレス">テキスト1</a>
    <li><a href="遷移先アドレス">追加1</a>
    <li><a href="遷移先アドレス">追加2</a>
    <li><a href="遷移先アドレス">テキスト2</a>
</ul>

正しい例)
<ul>
    <li><a href="遷移先アドレス">テキスト1</a>
<li><a href="遷移先アドレス">追加1</a>
<li><a href="遷移先アドレス">追加2</a>
    <li><a href="遷移先アドレス">テキスト2</a>
</ul>



ドミナントカラー

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

例) 51,51,51


rgb(145,134,116) 基本リンク色, ナビゲーション背景色 など

… って、一個しかないし((((笑)



管理人コメントと訪問者コメントを分ける方
デフォルトはグレー背景アイコン。
サンプル




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

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

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

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

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


サンプル



* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)
注意) ハンドルネームを判別してデザインを振り分けています。
同じハンネの方がコメントされますと管理人のそれと同じデザインを踏んでしまいますので割りきってお使いください。





EdgeやIE11のおかげでなかなかスッキリしたCSSが書けませんが、それでも随分合理的な内容になってきてはいると思います。
つか「四則計算できます(ニコ)」とか言いながらできねーじゃん!
お前奇数計算できねーじゃん!できるとかハッタリかますなボケェ!!!
なんてことを思いながら作業致しました(微笑み)
あとはIE11のサポート終了を心待ちにするということで ←


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





みなさんいつもありがとうございます (●'0'●)/
関連記事

Comments 9

There are no comments yet.
Bitou  
グローバル・ナビゲーションについてのご質問

初めまして。
「Empty-street」を使用させていただいているBItouと申します。
表題の件について1点ご質問させていただきたいと思いコメント欄から失礼します。

カスタマイズ初心者ながら、グローバル・ナビのリンク先を変更したくて
次のようにHTMLを変更したところ、ナビ上の「カテゴリ」の右側に大きな余白が出来てしまいました。
(スタイルシートは変更していません。)

 <li><a href="<%url>">Home</a>
 <li><label for="category-modal-trigger" id="category-modal-trigger-label">カテゴリ</label>
 <li><a href="<%url>blog-category-1.html">店舗案内</a>
 <li><a href="<%url>blog-category-25.html">通信販売</a>
 <li><a href="<%url>blog-category-28.html">買取り</a>
<!-- <li class="pc-hide"><a href="<%url>?sp">Mobile</a> 注)スマホ版誘導ボタン必要な方コメント削除 -->
<li class="sp-hide"><a href="<%url>?xml" target="_blank">RSS</a>
<li class="expand-form">
<form id="search-form" action="./" method="get">
<input id="search-text" type="text" name="q" placeholder="キーワードを入力してください" value="">
<input id="search-submit" type="submit">
<span id="search-btn">検索</span>

初心者なりに色々と試してみたのですが修正ができません。
お手すきの時で結構ですので、どこを修正すれば良いか、
教えていただけきたいのですが・・・

お手数おかけいたしますがどうぞよろしくお願いいたします。

2017/08/02 (Wed) 02:07 | EDIT | REPLY |   
Akira  
To Bitouさん

お返事大変遅くなりました (*_ _)

> ナビ上の「カテゴリ」の右側に大きな余白が出来てしまいました〜

これはですね、実際はそういうことではありません。

X カテゴリの右横に空白
✔ 追加要素のテキストリンクに空白ができて縦幅が大きくなっている

後者が実際で、その影響をカテゴリのリンクが受けている状態です。
推測するに

● カスタマイズをwebページ上で行った(html専用エディターに内容を移して修正を行っていない。管理画面のまま行った。)
ソース内で<li>の行(各li要素)の文頭を揃えるために半角スペースを利用した

後者に該当しませんでしょうか。
htmlソースはインデントなどが用いられていますが、それは「半角スペース」とは全く別のものです。
ソース内でBitouさんがspaceキーを利用して文頭の調節を行ったのであれば、それはインデントではなく「空白の挿入」になります。
そしてナビゲーションの縦幅も狂いが生じ、正しい状態よりも大きくなっています。
デフォルト状態のEmpty-streetの、ナビゲーションとスライダーとの距離は現在のBitouさんのものよりも狭いはずですので比較してみてくださいね。

上記に該当するのであれば修正方法は、既にカスタマイズされていますので再DLが困難ということであれば、
追加したリンクを一度削除してください。
そしてあらためて、追加したい場所の前要素(今回の場合は「カテゴリ」)の後ろで一度改段落(Enter/ Returnキー押下)し、前要素(カテゴリ)と次要素(RSS)と文頭を揃えようとはせずにすぐに内容を書きます。
ソースの見た目がガクガクとした感じにはなりますが、揃えたい場合にはhtml専用エディターを利用してください。
管理画面での半角スペース利用による文頭揃えは厳禁です。

スクショ ↓

現在の状態(推測)
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/capture9287493th.jpg

正しい状態
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/capture92847923th.jpg

li要素というのは終了タグ</li>を書いてしまうと横並びにした時に隙間ができてしまいます。
隙間ができると計算が合わなくなりますので、終了タグを「書かない」方法を取っています(li要素終了タグの省略は文法的に許可されています)
終了タグはブラウザが自動補完しますが、その位置というのは次のli要素の「直前」ですので、文頭揃えの空白スペースが入っている場合、その空白は自身の「前」にある要素の「後ろ」にくっつくことになります。
わかりますかね ^^;
「カテゴリの右側が広くなっちゃった」の原因は、追加したli要素の文頭に入れた(つもりの)空白が、実際には前のli要素の文末にくっついている、ということです。
li要素の横並びはちょっと特殊ですので、今後は注意書きをしようと思います。
その点私が不親切でした。申し訳ないです。

上記に心当たりが無い、という場合は再度検証しますのでその旨お伝えください。
よろしくお願いします。

2017/08/03 (Thu) 22:26 | EDIT | REPLY |   
Bitou  
修正のご報告

Akiraさま
丁寧な解説をいただきありがとうございます!
早速、指示通りに修正したところ、正常に表示されるようになりました!!
ナビゲーションの縦幅も気になっていたのですが、同一の原因だったんですね…。

>htmlソースはインデントなどが用いられていますが、それは「半角スペース」とは全く別のもの

こんなことも知らなかった初心者の質問にお時間を割いていただいてホント恐縮です(^-^;

おかげさまですごくスッキリしました。
ありがとうございました!
Bitou

2017/08/04 (Fri) 21:00 | EDIT | REPLY |   
Akira  
To Bitouさん (修正完了のご報告)

いえいえ。私が不親切でした。
終了タグなしのli要素の扱いを書いておけば防げたことですので私が不親切でした。
お手間取らせてごめんなさいね。
修正できたということで安心しました。
お疲れ様でした

2017/08/05 (Sat) 17:29 | EDIT | REPLY |   
Akira  
To 足達さん(移動先)

http://vanillaice000.blog.fc2.com/blog-entry-570.html#comment4037

> 記事ヘッダー部「comment 0」を消去したい件〜

Ctrl+F(Windows)/ Command+F(Mac)キー検索で
<div class="entry-header-content-box" id="entry-comment">
を見つけ、スクリーンショットと照らしながら該当部位を削除してください。

スクショ
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/captureeditor98ywedth.jpg

よろしくお願いします。

2017/09/03 (Sun) 15:16 | EDIT | REPLY |   
足達  
場所が・・・

何度も申し訳ないです。
これはスタイルシートで治しますか?
なんだか場所がどうしても分かりません(涙)
初心者で申し訳ないです。

2017/09/03 (Sun) 17:38 | EDIT | REPLY |   
Akira  
To 足達さん

管理画面はおわかりですよね。
このページから飛ぶのであれば上部にあるナビゲーションメニュの「LOG IN」を押してください。
今これから押す場合には
右クリック → 新しいタブで開く
を選択して開きます。
これやらないとこのページが切り替わってしまいますので注意。

ご自分の管理画面に行きましたら、左側にある緑色の見出し「設定」の中に「テンプレートの設定」という項目がありますので、そちらをクリック。

スクショ
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/capturempage9i3th.jpg

今回操作するのは「html」で、「上段」にあるものがそれです。CSSが「スタイルシート」で、「下段」にあります。
このページを開いた上で、恐らくWindowsパソコンだと思いますので
Controlキーを押したままFキーを押してください。
するとブラウザによって場所は違いますが、大抵は検索バー付近に「ページ内文字列検索」のためのバーが出てきます。
そこへ

<div class="entry-header-content-box" id="entry-comment">

と入れると(コピペでどうぞ)、該当箇所まで導いてくれます。
この「ページ内検索」を利用しないと、htmlもCSSも内容が長大ですのでとてもじゃないが探せません。

という説明で良かったかしら ^^;
わかりづらければお手数ですがまたその旨お申し出くださいね。
よろしくお願いします。

---------

ここから余談ですので修正は任意でお願いします。

① プロフィールの電話番号の位置ズレ
② プロフィール画像未設定
② HPへの誘導リンク

①ですが、プロフィール設定画面で、住所と電話番号の間にスペースを設けることで調整しようとした… のかな?
スペースというのは絶対的な調整はできませんので、住所の後ろで改行された方が良いと思います。
そして電話番号は半角数字で ^^;

② プロィール画像が設定されていませんので、記事下の「著作者」の部分(posted by)が No image になっています。
せっかくの商用ですので是非プロフィール画像を設定して頂きたいところです。
屋号のロゴでも良いですし、代表者の顔写真でも、紋でも良いと思います。
正方形でロゴなど作成しておくと汎用的に使えますのでおすすめです。

③ あとは公式ページをお持ちですので、そちらへの誘導のために相互リンクを設けると良いですね。
ナビゲーション内の「About」を「公式HP」などにテキスト書き換えし、リンクを設ける。
そしてHP側にも「ブログ」への誘導リンクを入れておかれると良いと思います。
Aboutを書き換える際には target="_blank" の指定もお忘れなく。

<li><a href="ここにHPアドレス" target="_blank">公式HP</a>

注)予備リンク
で検索されますと該当箇所が出てきます。

2017/09/03 (Sun) 17:55 | EDIT | REPLY |   
足達  
ご丁寧に。

Akiraさん、ご丁寧にありがとうございます。
今日は酔っちゃったので明日頑張って治してみます。
他にもいろいろとアドバイス嬉しいです。
些細なことにも時間がかかり、ダメな私ですが、こうして丁寧に教えてもらえて本当に助かります。
ありがとうございます。

2017/09/03 (Sun) 22:05 | EDIT | REPLY |   
Akira  
To 足達さん

大変申し訳ございません。
ご利用のテンプレートって、Empty-streetじゃなくてClassicaですよね?
わー!間違えちゃった!ごめんなさい (*_ _)
全部私の勘違いのせいです。
テンプレートが違うのだから見つかるはずもありません。
ホントにごめんなさい(汗)

再三で申し訳ないのですが、該当記事へ移動をお願いします。

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

2017/09/03 (Sun) 22:13 | EDIT | REPLY |   

Leave a reply

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