attention admin about comments trackbacks you may also like

Akiraさんのレスポンシブテンプレート「Ample」のグリッドをふわっと浮き上がらせるカスタマイズをしてみました

2019年12月10日
レスポンシブ
28
FC2ブログ レスポンシブテンプレート Akira Ample カスタマイズ

現在弊ブログでは、筆者がいつもWeb知識の師と敬愛しておりますAkiraさん作の多彩なレスポンシブテンプレートの内の「 Ample 」を利用させて戴いております。

Ample - ブログ内期間限定配布「配布終了」

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

このテンプレートはカスタマイズ性にいろいろと難しい面もあり、またFC2ブログのプラグインも利用しない構造のため一般配布はされず「ブログ内期間限定配布」と言うことで、もう既に配布は終了しているのですが、利用者も多い様子で、それはそれは皆さん多彩なカスタマイズをされていて、個々に「おっ このカスタマイズは参考になるねぇ♪」という感じでして、筆者も同じテンプレート利用者さんのブログをよく覗かせて戴いているんです。(当然HTMLソースやCSSの様子も(笑))


FC2ブログのレスポンシブテンプレート「Ample」のカスタマイズ

筆者的には、とっても弄くり甲斐(笑)のあるとても素敵で楽しいテンプレートなんです、毎日何処か弄くっているくらいでして ^^

要約記事欄(グリッド)部分にマウスを載せるとふわっと浮き上がる装飾

弊ブログでは今回、トップページ等で 要約記事欄(グリッド) 部分にマウスを載せると、そこがふわっと浮き上がるカスタマイズをしてみました。

実際の動作は、直接トップページの要約記事欄部分にマウスを載せてみると ふわっ と浮き上がるので判ると思いますが、後にテンプレートを他のタイプに模様替えしてから弊記事を閲覧される訪問者さんもあるでしょうから、どんな感じで表示されるのかスクショを貼っておきます。

マウスホバー時の画像切り替えの様子
[ マウスを載せると要約記事欄部分が浮き上がる様子が見られます ]

上図スクショではスパッと浮き上がってしまっております(笑)が、ごく単純なロールオーバーで画像切り替えを表現してありますのでご容赦を(笑) 実際は ふわっ と浮き上がります。

CSSの編集だけで実現出来ます

Ampleテンプレートの「スタイルシート編集」欄で グリッド grid で検索すると、直ぐ下に、、、

.grid-item {
  position: relative;
  box-shadow: 0 0 8px 1px rgba(0,0,0,.1);
  background: var(--content-bg-color);
}
が見つかりますが、それを下記のCSSに差し替えます。



念のため、CSS編集後のスタイルシート欄のスクショを貼っておきます。

スタイルシート編集後の様子
クリック拡大

これだけです(笑)

弊記事は初心者さん向けではありませんので、簡単に書きましたのでご了承ください。

あっ 忘れてました、このままですと、iPhone( Androidでは検証してありません ) 画面では要約記事欄をタッチしてもグリッドが浮き上がらないと思いますが、下記のブログカード記事を参照してそのように処理して戴いたら、iPhone画面上でもふわっと浮き上がるようになりますので、そこまで必要な方はどうぞご参照ください。 ■ 訂正 2019/12/11 12:15

iPhone ではふわっと浮き上がるのは確認は出来ておりますが、アンドロイドスマホから閲覧してくださっている方、どうでしょう? ふわっと浮き上がって見えますかね? お知らせ戴けましたら幸いです ^^

■ 追記 2019/12/13
アンドロイドスマホでも「ふわっ」は動作していることが確認出来ました、ご報告くださった mochiさん ありがとうございます ^^


WebP画像を扱いすぎて目の下にくまが出来たWeb担当者

あっ
iPhoneでも浮いたわぁ♪


自身のブログを各種ツールで分析しましょう

ブログがスマホで正しく表示されるかテストする!
モバイル フレンドリー テスト

ブログのスマホ表示速度分析は PSI が強力です!
Google PageSpeed Insights

ブログのPC表示速度分析は GTmetrix が強力です!
GTmetrix

検索からの方はトップページへもどうぞ


関連する記事
ぼっちん
Author: ぼっちん
記事に関わらないコメントでもOKですからね~ ^^

コメント(28)

There are no comments yet.

遠太  

2019/12/10 (Tue) 15:56

ぼっちんさん、こんにちは。

早速、記事にされたんですね。どこかで参考にさせていただきます。ありがとうございました。

ぼっちん  

2019/12/10 (Tue) 16:07
ぼっちん

To 遠太さん

遠太さん、こんにちは ^^

記事ネタもなかった(笑)ものですから、遠太さんのコメント返信で「あっ 記事にしてみよう」って感じでパパパっと書きました(笑)
使えるシーンがありましたら、参考になさってください ^^

よつば  

2019/12/11 (Wed) 10:21

ふわっとね☆⌒o(*^ー゚)

ぼっちん先生~♪ ヾ(^∇^)おはよーございまーす♪

グリッドをふわっと浮き上がらせたんですね~♪
このふわっと浮くアクションって好いですよね~♡
「Ample」は一応持ってるんですが、何もせず保存状態です(;^_^A
なので、また何か応用できそうなとき使わせて頂きますね☆

ぼっちん  

2019/12/11 (Wed) 11:20
ぼっちん

To よつばちゃん

よつばちゃん、こんにちは~ ^^

> このふわっと浮くアクションって好いですよね~♡

ねっねっ、なかなかこの動作って良い感じだよね~(笑)
まぁ、皆さん、よく使う動きではあるんだけど、弊ブログでは今まで使ったことがなかったから、試してみたのよ(笑)
CSSって、同じ動作でもまったく違う書き方も出来るしで「ああだ、こうだ、これが一番良い感じ」なんて根を詰めるとあっと言う間に時間が経っちゃうし (^_^; アハハ…

> 「Ample」は一応持ってるんですが、何もせず保存状態です(;^_^A

(笑)宝の持ち腐れにならないようにね~ (≧ω≦。)プププ

> なので、また何か応用できそうなとき使わせて頂きますね☆

「Ample」でなくても、Akira先生のテンプレートの要約記事欄の構造のCSSって、大体は似てるから、他のテンプレートでも応用はし易いですからね~♪

そふぃあ  

2019/12/11 (Wed) 11:34

こんにちは

私も昨日お邪魔した時、この「ふわっ」を発見して流石と思いました。
私のテンプレートは素っぴんのままなので、あまりジロジロ見ないでくださいね(恥)

いつも勉強させていただきありがとうございます。

【追伸】
導入できました!🙌
いい感じにフワッとなって嬉しいです。

ぼっちん  

2019/12/11 (Wed) 12:12
ぼっちん

To そふぃあさん

そふぃあさん、こんにちは~ ^^

> 私のテンプレートは素っぴんのままなので、あまりジロジロ見ないでくださいね(恥)

(笑) スッピンのテンプレート、とうとうお化粧しちゃいましたね~ (〃^▽^〃)oあはははっ♪

> 導入できました!🙌
> いい感じにフワッとなって嬉しいです。

あっ なんとなんと、そふぃあさんったら素早い(笑)
ダーク背景だと影がとっても良い雰囲気で表示されるんですねぇ、凄い凄い♪
いやぁ、Ampleテンプレートってダーク背景で利用しているブロガーさんの方が多いから、是非是非応用して欲しいですねぇ(笑)
しっかり iPhone でもふわ~っと表示されていることが確認出来ましたよ~ ^^
ちょっと記事修正しなくちゃ(笑)

mochi  

2019/12/11 (Wed) 21:04

Android動作報告

こんばんは。ぼっちんさん。(^^)/

Android+Chromeでもトップページのグリッドがフワッと浮くことを確認できましたのでご報告致します。(*^^*)

ぼっちん  

2019/12/11 (Wed) 21:16
ぼっちん

To mochiさん

mochiさん、こんばんは~ ^^

「mochiさんは、スマホは確かAndroid機だったよね~ o(^-^)oワクワク」って、お待ちしてたんですよね~(笑)

しっかり、ふわっと浮き上がってるご報告をありがとうございます ^^
ああ、やっと(^。^;)ホッとしました~(笑)

mizu  

2019/12/12 (Thu) 21:19

こんばんは

いつもありがとうございます。
早速、取り入れさせていただきました。
いい感じです^^
今後ともよろしくお願いいたします。

ぼっちん  

2019/12/12 (Thu) 21:39
ぼっちん

To mizuさん

mizuさん、こんばんは ^^

や~ 早速導入してくださってありがとうございます ^^
やっぱりダーク背景で、この「ふわっ(笑)」は映えますねぇ ^^
Akiraさんがデフォルトで設定してくださっている、ホバーするとグリッドの下部にグラディエーションの光(影)が走るようになっているんですけど、その走りと浮き上がった時の影の感じがとってもマッチしてて「おっ なんだかカッコイイ(笑)」って感じになりますよね。
白背景よりもむしろイイかも(笑)

は~い、こちらこそよろしくお願い致します ^^

びん  

2020/02/22 (Sat) 11:38

グリッドの間隔について

ぼっちんさん

こんにちは

いろいろ参考にさせていただいています。
テンプレートを「Lilting」に変更した時から「グリッドをふわっと浮き上がらせ」を使わせていただいてます。
本日、カスタマイズしようとオリジナルの「Lilting」と比較していたところ、グリッドとグリッドの間隔が無くなってしまって
重なっているところがあることに気が付きました。(言葉だと表現しにくいのですが)
他にも手を加えたのでおかしくしてしまったのか、そもそも「Ample」用の物なので仕方がないのでしょうか。

ぼっちん  

2020/02/22 (Sat) 12:19
ぼっちん

To びんさん

びんさん、こんにちは~ ^^

> 本日、カスタマイズしようとオリジナルの「Lilting」と比較していたところ、グリッドとグリッドの間隔が無くなってしまって
> 重なっているところがあることに気が付きました。(言葉だと表現しにくいのですが)

おや? びんさんブログのトップページだと、gridの隙間がある部分と重なってしまっている部分があって、単純な不具合ではないですよね (^^ゞポリポリ
あっ そうか、Liltingはグリッドが「メイソンリー(縦幅が自在に変化する)」構造だから、それも考慮に入れないとマズイですよね~ (^_^; アハハ…

う~ん、Lilting用の目的を達するCSSを考えてみます ^^

いつになるか、、、暫くお時間をくださいね~ ^^

■ 追記です

あのですね、びんさんのCSSで

/*マウスホバーでグリッドをふわっと浮かせる設定にしたためコメント
.grid-item {
overflow: hidden;
font-size: var(--ex-small-font-size);
}
*/

と、コメントアウトしてあるのを、デフォルトに戻してください。 それだけで正常動作出来るようになります。
つまり

/*マウスホバーでグリッドをふわっと浮かせる設定にしたためコメント
*/

を削除するだけで、キチンとこの記事のテンプレート「Ample」と同じように正常表示出来るようになります < 検証済みです。
お試しくださいね~ ^^

びん  

2020/02/22 (Sat) 16:38

おー

ぼっちんさん

お~、ありがとうございます。
前からある.grid-item { 以降は残したままじゃないといけなかったんですね。
素人にはなかなか難しいですね。

でもあきらめずに別のところにもう少し手を加えてみます。

ぼっちん  

2020/02/22 (Sat) 17:00
ぼっちん

To びんさん

は~い、直って良かったですね~ ^^

ところで、ブログヘッダーの上の、FC2の[ ブログ内検索 ]ツールは元々がレスポンシブ構造にはなっておりませんから、ブログの管理ページの
https://admin.blog.fc2.com/control.php?mode=setting&process=2#head_bar
のURLの「検索バーの設定」部分で「利用しない」設定にした方が良いですよ ^^
Akiraさんのレスポンシブテンプレートには、グローバルナビゲーションにある「SEARCH」がブログ内検索機能を持っておりますから、それで十分なんです ^^

> でもあきらめずに別のところにもう少し手を加えてみます。

は~い、これからもいろいろと楽しみながらカスタマイズ頑張ってくださいね~ ^^

びん  

2020/02/23 (Sun) 06:28

ありがとうございます

ぼっちんさん

ありがとうございます、表示されているを知りませんでした。
いつも自分で検索する時は、下の方の検索フォームを使っていました。

>は~い、これからもいろいろと楽しみながらカスタマイズ頑張ってくださいね~ ^^
次は、「ヘッダー背景画像をランダム表示」に挑戦したいと思っています。

ぼっちん  

2020/02/23 (Sun) 08:19
ぼっちん

To びんさん

びんさん、おはようございます ^^

> 次は、「ヘッダー背景画像をランダム表示」に挑戦したいと思っています。

あっ その前に、1つ私からの「お節介」を是非聞いてください。

それは、びんさんにとって、テンプレートのカスタマイズよりもずっと重要なことです。

今のびんさんのブログは「まだSSL化されていない状態」にあります。
ですから、ブログURL欄の先頭に「保護されていない通信」と表示されてしまっております。

もし、びんさんが「SSL」についての知識をお持ちでないとしたら、弊ブログのカテゴリ「AOSSL」
https://oops0011.blog.fc2.com/blog-category-18.html
にそれに関する記事を複数書いてありますから、過去記事から順に是非お読み戴いて知識吸収して戴いて「SSL化設定」を終わらせて、ブログURLの先頭に、セキュアなブログである印の「鍵マーク」が表示されるよう努力なさってみてください。

FC2では既に3年以上前から「SSL化」を勧めており、もうWebの世界は「SSL」が常識とされていることなんです。

びんさんが「SSL化設定」を済ませても、鍵マークが表示されない時には、私もお手伝い(鍵マークにならない原因箇所の指摘)することは、やぶさかではありません ^^

是非是非、カスタマイズよりも優先して「SSL化設定」を完了なさるようお勧め致します ^^
「SSL化設定」自体は、実はワンタッチで出来てしまう簡単なことなんです。
ただ、それをしても「鍵マークが付かなかったら」に対応するのは、場合によっては手間暇が掛かることにもありえます。

びん  

2020/02/23 (Sun) 12:17

No title

ぼっちんさん

>もし、びんさんが「SSL」についての知識をお持ちでないとしたら、弊ブログのカテゴリ「AOSSL」
SSLの知識もないので、ご忠告ありがとうございます。

「AOSSL」読み進めます。

取り急ぎSSL設定で「有効」に変更は致しました。しかしまだ「!」マークの状態ですね。
10年分の記事を全部見るとなるとちょっと気が遠くなりそうです。



ぼっちん  

2020/02/23 (Sun) 13:25
ぼっちん

To びんさん

びんさん、こんにちは ^^

> 取り急ぎSSL設定で「有効」に変更は致しました。しかしまだ「!」マークの状態ですね。
> 10年分の記事を全部見るとなるとちょっと気が遠くなりそうです。

はい、確認致しました。
とりあえずは「トップページ」で鍵マークになるようにしましょう。
過去記事ページのことは後回しでいいんです(笑)

さて、トップページでSSLの鍵マークが付かない原因箇所は「3箇所」で、下記の通りです。
全ては「サイドバー」にあるプラグインにその原因(混在コンテンツ)があります。

① 「カヌー・カヤック」バナー
http://outdoor.blogmura.com/canoe/img/canoe88_31.gif

② 「カウンター」
http://counter1.fc2.com/counter.php?id=6890246

③ 「カウンター」
http://counter1.fc2.com/views.php?id=6890246

の3箇所ですが、URLの先頭がみんな http になっておりますから、それを https に修正して保存して下さい。

その3箇所が修正出来れば、トップページURLに 鍵マーク が付くと思います ^^

びん  

2020/02/23 (Sun) 18:13

感謝です

ぼっちんさん

ありがとうございます。
とりあえずトップページが鍵マークになりました。

どの記事も最後に貼り付けてある「にほんブログ村」のバーナーが「http」なのでこれを変更する必要がありますね。大変だな。
2/22の最新記事を変更したら「鍵」マークになりました。

ぼっちん  

2020/02/23 (Sun) 19:10
ぼっちん

To びんさん

びんさん、こんばんは~ ^^

は~い、トップページがキチンとSSLになったこと、確認出来ました、良かったですね~ ^^

> どの記事も最後に貼り付けてある「にほんブログ村」のバーナーが「http」なのでこれを変更する必要がありますね。大変だな。
> 2/22の最新記事を変更したら「鍵」マークになりました。

http が「混在コンテンツ」の原因になる意味をご理解戴けたのと、対処の方法とコツも分かって戴けたご様子ですね。
後は、過去記事を、焦らず時間のあるときにコツコツと作業を進めるだけですから、のんびりと頑張ってください ^^

びん  

2020/02/23 (Sun) 22:16

コツコツと

ぼっちんさん

はい、過去記事はコツコツと作業していきます。ちょっと気が遠くなりますが。

いろいろ、お世話になりました。とっても勉強になりました。

ぼっちん  

2020/02/24 (Mon) 08:17
ぼっちん

To びんさん

びんさん、おはようございます ^^

> はい、過去記事はコツコツと作業していきます。ちょっと気が遠くなりますが。

ですよね~ (^_^; アハハ…
びんさんの記事って、私の4倍くらいの量がありますから、コツコツと書き換える作業って、、、お察しします (^^ゞポリポリ
う~ん、ほんとは ドドド~ って勢いで一気に書き換える方法って、ない訳じゃないんです、しかもブログの管理ページには、それを実現出来るシステムは存在しているんです。
そのシステムとテキストエディタ(Windows10 1903 以降のメモ帳なら使える)を使って実現させることはシステム的には「可能」なんですけど、何処を見回しても「その方法は解説されていない」んですよね。

それは、利用している個々のパソコンの処理能力にも関わるし、FC2側のサーバーのその時の動作状況によっては「失敗することもない訳ではない」ので、そういうことからも、その方法を解説することを避けるんでしょうね(笑)

いろいろと「システマチックなことが好き」なブロガーさんだったら、ブログの管理ページの左メニューを眺めれば「なんだぁ、これを使えば一気に書き換えられるじゃん(笑)」って気がつくだろうことなんですが、、、 (^^ゞポリポリ
実行するには、ちょっと「リスクも伴うかもしれない」ってことなんですよ~。
失敗すると、多数の記事が壊れるかもしれないと言うリスクです (^_^; アハハ…

ですから「コツコツと、、、」とお勧めしました (^^ゞポリポリ

あっ お返事はけっこうですからね~(笑)

びん  

2020/02/24 (Mon) 22:20

なるほど

ぼっちんさん

エクスポート、インポートですか。エディタはずっと秀丸を使ってますので置換は簡単だと思います。
でも壊れる可能性があるっていうところがちょっと怖いですね。

ぼっちん  

2020/02/24 (Mon) 22:41
ぼっちん

To びんさん

びんさん、こんばんは ^^

や~ びんさんは「秀丸」お使いなんですね(笑) それだったら話は早いです(爆)

私が「壊れる可能性がある」と言いましたのは、テキストデータを「全ての記事」で一括でダウンロードして、それを一気に「全て置換」で処理をして、それをインポートしてしまうと、FC2サーバーの方でキチンと「上書き」が出来るかが心配なんですよね。

ですから「全ての記事」ではなくて、試しに何処かの「1ヶ月」分をダウンロードして、それでお試ししてみてはどうでしょう?
置換設定は

http://outdoor.blogmura.com/canoe/img/canoe88_31.gif

https://outdoor.blogmura.com/canoe/img/canoe88_31.gif

とセットしたら良いんですが ^^
テキストデータをダウンロードすると、データは utf-8 ですから、秀丸エディタもそれで操作が必要なんですけどね。
置換完了したファイルを「インポート」して、その1ヶ月分の部分がキチンと鍵マークが付いたら成功ですよね(笑)

それで成功したら「1年分」ずつを作業したら、グッと短縮出来ると言うことなんです ^^

びん  

2020/02/24 (Mon) 22:49

ぼっちんさん

ありがとうございます。

Akiraさんの
https://vanillaice000.blog.fc2.com/blog-entry-621.html
を読んで、そういえば下書きを消したこともあったなと思い出しました。
「エクスポート&インポートするとURLが変わってしまいます」ちょっと気になります。過去の自分の記事を引用してたところもあったような・・・。

ぼっちん  

2020/02/24 (Mon) 22:54
ぼっちん

To びんさん

> 「エクスポート&インポートするとURLが変わってしまいます」ちょっと気になります。過去の自分の記事を引用してたところもあったような・・・。

あっ そうです、すっかり忘れてましたが、それもあるんですよね (^_^; アハハ…

まぁ、びんさんの「一番安全な方法」を選択なさるようお勧め致します(笑)

はんのすず  

2020/03/08 (Sun) 19:01

Ampleではないけど

とってもとってもお久しぶりです。いつもお世話になっています。

Akira先生のFallテンプレートに変更したとき、トップページの記事をマウスオーバーでふわっと動かしたいと思いました。そしたら、こちらの記事に丁寧な説明があって早速使用させていただきました。何とか、ふわってできて、うれしかったです。
ありがとうございました。又、お世話になります。よろしくお願いします。

ぼっちん  

2020/03/08 (Sun) 21:19
ぼっちん

To はんのすずさん

はんのすずさん こちらにもコメントをありがとうございます ^^

> Akira先生のFallテンプレートに変更したとき、トップページの記事をマウスオーバーでふわっと動かしたいと思いました。そしたら、こちらの記事に丁寧な説明があって早速使用させていただきました。何とか、ふわってできて、うれしかったです。

は~い、Akiraさんテンプレートの「Fall」にも応用出来たようですね、良かったです (^。^;)ホッ
なるほど、横長のgridがフワ~っと浮き上がると、けっこう見応えありますよね(笑) カッコイイです(笑)

これからも色々と楽しんでくださいね~ ^^