Article page

by
  • Comment:0
  • Trackback:0

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


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



ドミナントカラー

以下が基本色調です
数字の部分だけを抜き出して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'●)/
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 0

Leave a reply

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