Empty-street - FC2ブログテンプレート

投稿 2017年06月28日
35
テンプレート
FC2TemplateHTML5CSS3Responsive
Empty-streetテンプレート
PCアイコン TBアイコン SPアイコン

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

最終更新2018.7.30

特定条件下でレイアウトが崩れる問題を修正しました。

名称 Empty-street
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大930px
サイド --- 300px
記事内で利用可能な見出しレベル h2からh6
構造化マークアップ(個別記事のみ) BreadCrumbs(パン屑リスト)
BlogPosting
GTmetrixスピードスコア
固有機能 画像ドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
見出しデザイン
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 全体幅調整, カラム入れ替え
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 Microsoftブラウザ(Edge, IE11)では個別記事ページ送りのサムネイル縦横比が狂います(該当プロパティ未実装のため)
特に対策はしていませんので予めご了承ください。
valid-html5.png
パソコン タブレット スマートフォン
パソコン タブレット スマートフォン
2カラム 1 or 2カラム
(デバイス幅依存)
1カラム
右サイドメニュー
(デフォルト)
下 or 右サイドメニュー
(デバイス幅依存)
下サイドメニュー
更新履歴 2018.1.26

メンテナンスを行いました。
主な変更点は以下の通りです。

  • 画像遅延読み込みをのJSを変更しました(デフォルトではグリッドページのみ適用)
  • リセットCSSを最小限にし、一部CSS内容を圧縮しました
  • フォントのサイズ指定にremを導入しました
  • 構造化マークアップ及びパン屑リストを導入しました
  • 個別記事の記事タイトルをh2からh1に昇格しました

不具合修正ではありませんので旧バージョンの方はそのままご利用頂けます。

更新履歴 2017.7.23

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

Empty-streetのNo image画像リンク切れ修正のお知らせ - テンプレ不具合・修正など

またしてもワタクシのポカでございます (*_ _)Empty-street - テンプレート名称 Empty-street カラム数 2 プラグイン対応 ○ (右サイドメニュー) レスポンシブ対応 ○ サイドメニュー デフォルト 右 記事幅 可変 最大930px サイドバー幅 固定 300px 任意個人設定 レスポンシブ利用 = スマホ版非表示設定 SNSシェア...

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

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

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

TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ

お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)

・トップページの表示タイプ変更・レイアウト変更(要約表示から全文表示へ変更, カラム数変更 など)
・レスポンシブの固定幅化。
・テンプレートと無関係なプラグイン導入のお手伝い。

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

左右カラム入れ替えの仕方
How to reverse the direction of rows
#main-container

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

flex-direction: row-reverse;

続きまして検索。

#primary

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

margin-right: 50px;

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

全体幅調整の仕方
How to increase or decrease width of container

デフォルトは全体像の最大横幅を 1400px に設定しています。
1400
で検索して頂きますと、CSSソース内に 4箇所 ありますので、4箇所全てを希望の数値(同数値)に変更してください。

パララックススライダーについて
About parallax scrolling in slider

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

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

ナビゲーション内について
Important thing to be careful when adding links to navigation

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

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

本不具合はGoogleの修正が入りました。

ナビゲーションにメールフォームを追加する方法 - カスタマイズ

こちら私が製作した最近のテンプレに限っての内容です。 汎用的に使える面もありますが、他製作者様テンプレートご利用の方はご自身の判断でお願いします(すみません) 最近は予備リンクとして About me あるいは About をナビゲーション内入れていますが、予備ですので空リンクです。 サンプル(Dark-Divine) 赤く囲った部分ですね。 お好きな用途で使って頂くためのものですので、誘導したいページがある方は...

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

navi breakpoint

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

(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>
ドミナントカラー
Dominant colors

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

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

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

管理人コメントと訪問者コメントを分ける方
The way to identify admin comments

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

サンプル

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

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

35 COMMENTS

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

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

Bitou  

修正のご報告

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

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

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

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

2017/08/04 (Fri) 21:00

Akira  

To Bitouさん (修正完了のご報告)

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

2017/08/05 (Sat) 17:29

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

足達  

場所が・・・

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

2017/09/03 (Sun) 17:38

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

足達  

ご丁寧に。

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

2017/09/03 (Sun) 22:05

Akira  

To 足達さん

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

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

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

2017/09/03 (Sun) 22:13

福長  

slider

Akiraさま
sliderに関して3つ質問があります。
1.動き出すのと止まるのはどのタイミング(動作)でされるのでしょうか? ずーと動いている時もあれば、止まっている時があるように感じます。
2.CSSを見てはいるのですが、どうやって動いているのか理解できなくて、画像が切り替わる時間とかは、変えられるのでしょうか? javaを使って同じようなことをしたことはあるのですが。
3.sliderに表示される画像は、記事の画像の上の方を切り出しているように思うのですが、この切り出し位置は指定できるものなのでしょうか、それとも固定のものなのでしょうか?
どうしても画像の中心あたりを切り出さないと、よくわからない画像になってしまうので。

いろいろ質問させていただきましたが、よろしくお願いいたします。

2017/11/27 (Mon) 10:03

Akira  

To 福長さん

こんにちは (●'0'●)/

1 > ずーと動いている時もあれば、止まっている時があるように感じます〜

・ウィンドウが非アクティブ状態のとき
・マウスが上に乗っているとき
は動きを止めます。
非アクティブの時は動かしてもメモリ食うだけで無駄ですし、マウスオーバーの時にはクリックなどが行われる可能性がありますので、画像が推移しては都合が悪い、という判断です。

2 > 画像が切り替わる時間とかは、変えられるのでしょうか?〜

Ctrl+F(Windows)/ Command+F(Mac)キー検索
slideshowSpeed:3500
が表示秒数(ミリ秒指定)です。
animationSpeed:1000
が切り替えに要する時間(ミリ秒指定)ですので、各々都合の良い数値に変更してください。

3 > この切り出し位置は指定できるものなのでしょうか〜

「切り出す」というよりも「窓を造る」と捉えるとわかりやすいと思います。
通常の全面背景(固定含む)というのは表示範囲を指定し、その範囲全面に画像を配しますが、パララックスで用いる background-attachment というプロパティはブラウザ画面を範囲対象とします。
ブラウザ全体に背景が敷いてあり、その上(重なり上位)にテンプレートレイアウトが乗っている、という感じですかね。
窓を設けることでその窓の部分だけ下敷きの画像が見える、という仕組みです。
ですから「切り出し」という感覚ではないんです。

固定背景はスクロール量が合致していない場合や、左右上下いずれかの寸が足りていない場合はスクロール中のどこかで途切れが生じてしまいます。
パララックスでは特にスクロール差分をわざと生じさせ、少しづつ上に移動させていますので途切れの可能性が高くなります。
このページの本文中の

思うような上下位置合わせにならないかもしれませんが、デフォルトの状態がベストですので位置合わせのご相談についてはごめんなさい

という但し書きは仕組みによるものです。
パララックスで「画像表示位置」を重要視されるのであれば、窓を大きくする以外にありません。
サンプルとしてジプシー・ラリさんのサイトをご紹介します。

https://gypsie-raleigh.myshopify.com/

パララックスを利用していますが、イラストの見切れが最小限になるように窓を大きく設定しています(全画面ヘッダー)
こちらのパララックスはEmpty-streetとは異なる手法で表現していますが、特徴については同じです。

Empty-streetのスライダー縦幅は580pxがデフォルトですが、福長さんご自身のカスタマイズで380pxにされていますよね。
縦幅が短ければ縦表示範囲が狭くなるわけですから、表示位置が気になるのであればデフォルト値に戻されることをおすすめします。

2017/11/27 (Mon) 16:24

福長  

slider

Akiraさま
迅速かつご丁寧な説明ありがとうございます。
380pxに変えたのは、画面がsliderでおおわれてしまい、記事が見えなくなっていたので、記事が見えるぐらいが良いかと思って、小さくしてみました。ご説明は理解しました、但し書きがあったのには気が付いたのですが、思わず聞いてしまいました。
実際にはOut-of-styleを利用させてもらおうと思っていて、Empty-streetもいいかな~と思いこちらも試していました。現在Out-of-styleの変更版をテンプレートに設定しました。
ホームページ(http://newfarmerschool.org/)とブログと両方で運用しようとしていて、Akiraさんのテンプレートがどれよりも素晴らしかったので、いろいろなものを試していました。
http://fukunaganana.html.xdomain.jp/も作った(と言っても無料のテンプレート改造しただけなおですが)のですが、こちらがEmpty-streetに近かったので、Empty-streetを試そうとしていました。
なんせHTMLに比べて膨大なCSSなので私ではとても理解が及びません。HTMLも十分には理解できませんが。

大変ありがとうございました。また何かあれば質問させてください。

2017/11/28 (Tue) 00:08

Akira  

To 福長さん

了解です。ご期待に添えずごめんなさいね。
お疲れ様でした

2017/11/28 (Tue) 15:00

Meane  

スライダー削除について

Akira様

《Empty-street》を利用させて頂いておりますMeaneと申します。
以前、ナビゲーションリンクの件で《Southerly》と《Empty-street》どちらが適しているか
質問させていただいた者です。
その節はご丁寧にありがとうございました(・∀・)

今回はトップページのスライダーの件で教えて頂きたいことがあります。
トップページのスライダーを停止して
トップ用の画像を固定にしたいのですが
《スライダー不要の方ここまで削除 1/3》の1/3〜3/3の3箇所を削除したところ
トップが真っ白になってしまい、元に戻した状態です。

どのようにカスタマイズしたらいいのか教えていただけますでしょうか。
(トップ画にかかるグラデーションはとても気に入ってるのでこれも残したいところです...)

Akiraさんがお手すきの時で構いませんのでよろしくお願いいたします。

2018/01/10 (Wed) 23:49

Akira  

To Meaneさん

こんばんは (●'0'●)/

> 3箇所を削除したところトップが真っ白になってしまい〜

正しい箇所を正しく削除して頂ければhtml要素自体が無くなりますのでブログタイトル下にグリッドが並んでレイアウトの崩れなどは無いはずなのですが、白い空間ができてしまうということでしょうか?
ちょっと「トップが真っ白」の状況がよくわからないです。ごめんなさい。

で、
①スライダーを削除してスライダーが有った箇所に固定画像を入れるという意味でしょうか。
それとも
②スライダーの画像を新着記事から引っ張るのではなく固定にしたいということでしょうか。

スライダー無し1枚固定画でパララックスを作成するには大幅なhtml, CSSの書き直しが必要ですので、こちらについては申し訳ありませんがお受けできません。
ごめんなさいね。

スライダーを流用して数枚の固定に取り替えるだけという意味なのかしら。
察しが悪くてすみません (´・ェ・`)
こちらお返事待ちにさせてくださいね。よろしくお願いします。

2018/01/11 (Thu) 02:07

Meane  

お返事遅くなりました

Akira様

深夜にもかかわらず、早々のお返事ありがとうございました。
説明不足で申し訳ありません〜〜(/ω\)

トップ画面がすべて白くなるのではなく、スライダーがあった箇所が白い状態(白い空間)になってしまうという意味でした。


> スライダー無し1枚固定画でパララックスを作成するには大幅なhtml, CSSの書き直しが必要ですので、こちらについては申し訳ありませんがお受けできません。

とのことでしたので、

当初、①のつもりでご質問させていただいてましたが

スライダーはそのまま活かして、新着記事を引っ張るのではなく
固定の画像を複数枚スライドさせることがもし可能でしたらやり方を教えていただけますでしょうか?

何度もすみません〜よろしくお願いいたします。

2018/01/11 (Thu) 16:04

Akira  

To Meaneさん

こんばんは。
正しい削除を行えば以下のスクショのように整うはずですので、削除範囲を間違えられたのではないかと思います。

https://blog-imgs-118.fc2.com/v/a/n/vanillaice000/captureemptynosliderth.jpg

--------
スライダー画像を固定に変更

<!--recent-->
で検索されますとhtml内に1箇所ありますので、その<!--recent-->から<!--/recent-->までを一旦削除。
削除した同じ箇所に以下を枚数分追加。

<li class="para-normal para-item" style="background-image: url(ここに画像アドレス);">

CSSの修正は不要ですが(無駄は出ます)、テキストが無くなりますのでグラデーションも不要です。
グラデーションを削除される場合には

.slides li:before
という箇所がCSSに1箇所ありますのでその内容を削除。
以上です。その他細かいCSS修正などは自己責任・自力で。
よろしくお願いします。

2018/01/11 (Thu) 23:25

Meane  

できました(๑˃̵ᴗ˂̵)و

Akiraさま

ありがとうございました〜〜できました+゚。*(*´∀`*)*。゚+

白い空白は私のミスでした...スクショまで入れていただき
お手数かけてしまいすみませんでした。

スライダー画像を固定画像にする方法もありがとうございました。
おかげで思い通りのテンプレートにカスタムできました。

悩んでいた数ヶ月が二日間で解決して嬉しいです(๑˃̵ᴗ˂̵)و
また何かありましたらご質問させてください。

2018/01/12 (Fri) 16:24

Akira  

To Meaneさん

ご希望の沿う形になりましたでしょうか。
お疲れ様でした

2018/01/12 (Fri) 17:35

ヴィオラ  

テンプレートのカラムについての質問

はじめまして。
いつもAkiraさんの素敵なテンプレートを利用させていただいております。m(._.)m
さっそく質問です。
今現在「Alternative」を使っているんですが、
今まで2カラムで右側にプラグイン画面があったんですが、
昨日からプラグイン画面が下になってしまいました。
もちろん何も触ってはいません。
これはテンプレの仕様が変わったのでしょうか?
もし元に戻せるなら戻したいと思うのですが、可能でしょうか?
お忙しい中、申し訳ありません。どうぞよろしくお願いいたします。

ブログ名「人形ときどき犬猫」http://masachi999.blog.fc2.com/

2018/01/13 (Sat) 10:27

Akira  

To ヴィオラさん

ありがとうございます。
コメント投稿欄(Leave a replyの下)に明記してある通りお約束事をお守り頂いた上で再度お尋ねください。
よろしくお願いします。

2018/01/13 (Sat) 15:33

大諸居拓吾郎  

Empty-streetのPC版TOPページに不具合が起きました

Akira 様

夜分に失礼します。 大諸居拓吾郎と申します。

先日より下記ブログで、貴Empty-street を利用させてもらっております。
素敵なテンプレートがたくさんで幾つかの作品から随分迷って決めました。
編集していた途中で、いよいよ壁にぶつかってしまいました。

大諸居拓吾郎商店FC2店様前臨時屋台
https://oomoroitakugoro.blog.fc2.com

そこで、『PC用のTOPページのみと思われ』ますが昨日より(TOPページの)表示がおかしくなって(大きく崩れて)しまいました。
その画面は以下の状態です。御確認をお願いします。

https://blog-imgs-97.fc2.com/o/o/m/oomoroitakugoro/201804012057239af.jpg  ◀1/4

https://blog-imgs-97.fc2.com/o/o/m/oomoroitakugoro/20180401205725221.jpg ◀2/4

https://blog-imgs-97.fc2.com/o/o/m/oomoroitakugoro/20180401205721274.jpg ◀3/4

https://blog-imgs-97.fc2.com/o/o/m/oomoroitakugoro/20180401205723c45.jpg ◀4/4

私(ども)の構文間違いなどの単純ミスでこの様になったと考えて、昨日から長くPC画面とにらめっこしていますが、どうにも分からなくなってしまいました。
ブログの開設から1年強、CSS等未だ判っていません <(_ _)> 。
カスタマイズ点は、『フォント、文字色、太さ、サイズ』『背景色』『各max-widthを拡大』『サイド欄に各FC2プラグイン挿入』『スクロールボタンを丸に変更』などの表面部分のみです。

どうぞお助け下さい。
よろしくお願いします。

追記  大変お手数ですが、この貴テンプレートの英文字と数字のフォントをさわりたいのですが、これも未だにどれを変えていいか見つけられません。
どれをさわるのか、教えて頂けますか。
上述質問と併せ、たいそうお手間をお掛けします。

重ねてどうぞお助け下さい。<(_ _)> m(__)m <(_ _)> m(__)m


大諸居拓吾郎 (商店FC2店管理者店長代理)

2018/04/01 (Sun) 22:51
vanillaice (Akira)

Akira  

To 大諸居拓吾郎さん

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

htmlソース内に
rel="canonical" href="<%url>"
という箇所が2箇所あります。
正しいのは

<link rel="canonical" href="<%url>">

ですが赤字部分の記号が欠損しています。
2箇所とも記述が正しいかチェック及び修正を行なってください。
それでも直らない場合はその旨お知らせください。

欧文フォントの変更は
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,400i">
削除した上で
body {
へのフォント指定
font: 1.4rem/1.9 'Lora', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', '游ゴシック', 'Yu Gothic', 'メイリオ', 'Meiryo', sans-serif;

赤字が欧文フォント指定(数字及びアルファベット)ですので変更してください。
フォントは閲覧者のOS依存ですので指定したいフォントがWindows, Mac双方にあるかどうか、無いのであればWindows用・Mac用を設定するなどご留意ください。

参考ページ
意外と知らないフォント設定の仕方
https://vanillaice000.blog.fc2.com/blog-entry-484.html

また、Lora で検索し、CSS内のLoraフォントも全て変更をお忘れなく。
全部で10箇所あります。
よろしくお願いします。

2018/04/01 (Sun) 23:44

大諸居拓吾郎  

Empty-streetのPC版TOPページの乱れ、治りましたぁ!!

Akira 様

深夜に再び失礼します。さらに浮かれて空メールを飛ばしてしまいましたのはぼく等です、御免なさい。
m(_ _)m <(_ _)>

報告致します。 Akira様のご指摘通りに修正しまして、TOP画面が 治りましたあ♬!!
英数字フォントの方もちゃんと変わりました!

ありがとうございました !!

大変遅い時間にかかわらず、すぐに返信下さりご丁寧に的確に教えて下さいました。
また、借りましたテンプレートを、見た目のみ変えまして恥ずかしい限りですがそれも大目に見ていただいていると思うと『感謝の2乗』です。

返信に手間取りさらに遅くなりました。FC2のような大きなブログでも、もうAkira様位しか今現在に対応したテンプレートを作製している有り難いお方がいないだろう事を想います時、きっと自分のような単純な質問やややこしい質問に日々忙殺してはんにゃろうな、と思います。

もっと勉強せなあかんですね。お手数お掛けしました。

Akira様、どうもありがとうございました。


大諸居拓吾郎(商店)
店長代理
L男
C次郎

2018/04/02 (Mon) 02:16
vanillaice (Akira)

Akira  

To 大諸居拓吾郎さん

修正できたということで安心しました。
お疲れ様でした

2018/04/02 (Mon) 04:09

ゆうぴん  

記事本文のフォントサイズ変更

はじめまして。ゆうぴんと申します。
記事本文のフォントサイズを少し大きくしたいのですが、その場合どこから変更すればよいのか教えていただけないでしょうか?

初歩的な質問ですみません。
font-sizeで検索とするとヒット数が多く、どれが本文記事に対応しているのか分かりませんでした。


最近ブログを始めたばかりで、当初は公式テンプレートを使用していましたが
Akira様の非常にお洒落なテンプレートを発見してすぐに採用させていただきました。

お忙しいところ恐れ入りますがよろしくお願いします。

2018/06/30 (Sat) 00:26
vanillaice (Akira)

Akira  

To ゆうぴんさん

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

記事本文の文字だけならば
body {
で検索するとCSSソース内に3箇所あり、一番最初のものが対象です。

font: 1.4rem/1.9 〜省略

赤字を1.5にすると15pxに、1.6にすると16pxになります。
全体の文字を調整する場合はbodyではなくそのすぐ上にある
html {


font-size: 62.5%;

赤字部位を以下のサイトを参照しながら修正してください。
http://pxtoem.com/

よろしくお願いします。

2018/06/30 (Sat) 12:15

ゆうぴん  

To Akiraさん

早速お返事をいただきありがとうございます。

テンプレートのお洒落さにも感動しましたが、対応の早さも感動です。
ありがとうございます!

2018/06/30 (Sat) 12:23
vanillaice (Akira)

Akira  

To ゆうぴんさん(完了のご報告)

お役に立てたのならば幸いです。
お疲れ様です

2018/06/30 (Sat) 12:46

-  

管理人のみ閲覧できます

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

2018/07/30 (Mon) 18:09
vanillaice (Akira)

Akira  

To Empty-streetレイアウト崩れの件 内緒さん

こんばんは。ご迷惑おかけしております。

こちら私の制作上のミスです。申し訳ございません。
今修正・上書きしましたのでお手数ですが再DLをお願いします。
また他にもお気づきの点がありましたら教えてくださいね。
よろしくお願いします (*_ _)

https://admin.blog.fc2.com/control.php?mode=design&process=download&no=45701

2018/07/30 (Mon) 21:42

Seishu  

美しいペン字

こんにちは。Seishuと申します。
とても素敵なテンプレートでしたので利用させて頂いております。

そこで、お伺いしたいのですが、トップページに表示される画像は記事に挿入した画像が
表示されると思うのですが、Read Moreの部分に表示される画像は、画像の中間あたりから
の表示になっています。これをトップに表示される画像のように、画像の上段からから表示
させる方法などはありますでしょうか。

写真ならばとてもいい感じになると思うのですが、私の場合文字の画像が主になりますので
出来ることなら上段から綺麗に表示させられたらと思い質問させていただきました。
よろしくお願い致します。

利用端末 : Windows7 Ultimate 64bit
利用ブラウザ : Google Chrome

2018/07/31 (Tue) 16:00
vanillaice (Akira)

Akira  

To Seishuさん

こんにちは ('0')/

> Read Moreの部分に表示される画像は、画像の中間あたりからの表示になっています。〜

画像のオブジェクトの位置合わせのことでしょうか。
.image-wrapper img
で検索されますとCSS内に1箇所あります。
object-position: center center;
最初のcenterが水平位置、赤字のcenterが垂直位置の合わせなので、画像の上辺を基点にするには赤字部位を top に変更してください。
また、近接にあるIE11用後方互換用の
font-family: 'object-fit: cover; object-position: center center;';
こちらも同時に変更してください。

鍵付きブログのご質問時にはパスワードをお伝え頂くお約束になっていますので、
(現状確認ができないと問題点・原因の把握ができません)
今回はわかる範囲でお答えしましたが次回以降はご配慮頂けると助かります。
よろしくお願いします。

2018/07/31 (Tue) 17:48

-  

管理人のみ閲覧できます

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

2018/07/31 (Tue) 18:09
vanillaice (Akira)

Akira  

To パスワードの件 内緒さん(完了のご報告)

そういうことでしたか。システムをご存知なかったんですね。

コメント欄の下にあるパスワード入力欄は、ご自身が投稿したコメントに対するパスワードです。
これを設定しておくと投稿後に編集することができます。
パスワードを入れずに送信したコメントは編集できません。

ブログのパスワードは全く別で、ブログ入室のためにブログ主が設定するものです。
コメント欄のパスワードとブログパスワードは用途が違うということです。

コメントパスワードは閲覧者もブログ管理人も見ることはできません。入力した人だけが知っています。
ブログパスワードの方は、第三者にパスワードを伝えるにはコメント欄を利用するか(他の人に見られたくない場合にはsecretにチェック)、メッセージを送るなどの方法があります。
第三者ブログのコメント欄でご自身のブログパスワードやアカウントパスワードの入力を迫られる場面はありません。
これはFC2ブログサービス内の共通事項なので覚えておかれると良いと思います。


修正の方は完了したということでお疲れ様でした

2018/07/31 (Tue) 20:11