こんな風なアニメーション
アニメーションはScriptだと簡単に実装できるのですが、CSSの方が動作が軽く、一般的にはCSSで実装した方が良いらしいので方法を解説。
方法は簡単で@keyframesを記述するだけです。
1.@keyframes
まずは、@keyframesでアニメーション効果を設定しましょう。
CSS
@keyframes...
【Blogger】コメント欄をカスタマイズ！コメントを新しい順番で表示させ、「コメントを投稿」の表示位置を移動してみた
CSS/HTML JavaScript ガジェット コメント タグ デザイン別ブログでコメントの表示方法などに不満を感じてアレンジしたため記載。
「コメントの場所」は「埋め込み」で、他の形式の場合機能するかは不明です。
また、jqueryを使用するので、導入がまだの方は以下のコードを<head> ～ </head>の中に記述してください。
jquery
<script...
【Blogger】ブログ検索・ラベル検索の結果に合わせてメッセージの表示を分岐させる方法
Blogger CSS/HTML タグ デザインBloggerでは検索をすると、自動でメッセージが表示されますが、それをアレンジして該当記事数が0だった場合と、1以上あった場合で、メッセージ分岐させてみたいと思います。
以下のコードを<data:navMessage/>に上書きすれば実現できます。
HTML
<b:if...
【JavaScript/jQuery】シンプルな方法でページが完全に読み込まれるまで要素を表示しない代わりにローディング画像を表示してみる
JavaScript デザインデザインの乱れ等の理由によって、ページが完全に読み込まれるまで要素を非表示にしたい場合は様々な方法がありますが、今回はシンプルな方法でこれを実現してみたいと思います。
方法は至って簡単で、ページが完全に読み込まれるまで表示したくない要素にdisplay:noneを付与し、ローディング画像など最初から表示させたい要素だけ表示。
ページが完全に読み込まれたら、/jQueryのshowメソッドで非表示にしていた要素を表示させ、ローディング画像などをhideで非表示にするといった方法です。
HTML
<!--ページが完全に読み込まれるまで表示する要素--><div...
【JavaScript】簡単にクリックで要素の表示・非表示を切り替える方法hide、show、toggle
CSS/HTML JavaScript デザイン初心者でもコピペだけで導入できるJavaScript第二弾です。
第一弾はこちら
【JavaScript】初心者でも簡単！CSSよりも便利に使えるJavaScriptコード 2選！
https://bloggercustoman.blogspot.com/2019/08/cssjavascript-2.html
jQueryを導入していない方はheader要素内に以下のコードを記述しておいて下さい。
<script...
【CSS】CSSだけで要素を横並びにし、横スクロールを実装してスマホに対応させる方法！
CSS/HTML スマホ デザインデスクトップよりもスマホからのアクセスが増す一方の現代。
スマホでの観覧を考えると、多くの情報を表示したくてもユーザビリティへの悪影響を考えて情報を減らすこともありますよね。
そんなときに便利なのがスクロール機能で、表示領域を制限させたうえで必要な情報をスクロールで表示されることができます。
縦スクロールは簡単ですし、スマホの場合は誤操作を招く場合があるので、今回は横スクロールを実装する方法をご紹介します。
...
登録:
投稿 (Atom)