CSSだけで要素をふわっと表示させるようなアニメーションを実装する方法



アニメーションはScriptだと簡単に実装できるのですが、CSSの方が動作が軽く、一般的にはCSSで実装した方が良いらしいので方法を解説。
方法は簡単で@keyframesを記述するだけです。

1.@keyframes

まずは、@keyframesでアニメーション効果を設定しましょう。

CSS
@keyframes test {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

要素を透過させるopacityの0から始まり、要素を透過なく表示させる1に向かって進むといった内容なので、要素がふわっと表示されます。
testの部分は任意の文字を記述してください。

2.アニメーション効果を与えたい要素に@keyframesを付与


アニメーション効果を与えたい要素に@keyframesの任意のネーム(上記の場合はtest)を付与してあげれば完成です。

完成版CSS
@keyframes test {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.anime-test{
animation-name: test;
    animation-duration: 1s;
}

animation-durationは遅延時間設の定なので、要素が完全に表示されるまでの秒数です。

最後に、記事トップの「こんな風なアニメーション」のサンプルは以下のようになっています。
@keyframes test-banana {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.sample-banana{
animation-name: test-banana;
    animation-duration: 5s;
background-color:#42dee1;
height:200px;
width:100%;
}

【Blogger】コメント欄をカスタマイズ!コメントを新しい順番で表示させ、「コメントを投稿」の表示位置を移動してみた


別ブログでコメントの表示方法などに不満を感じてアレンジしたため記載。
「コメントの場所」は「埋め込み」で、他の形式の場合機能するかは不明です。
また、jqueryを使用するので、導入がまだの方は以下のコードを<head> ~ </head>の中に記述してください。

jquery
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>


やったことを簡単にまとめると、コメントはlist形式で出力されているため、flexの下から順に表示させるcolumn-reverseを用いてコメントを新しい順番で表示させる。
また、「コメントを投稿」の表示位置をコメント部分の一番上に移動させました。

Bloggerのコメントを新しい順番で表示させる

Bloggerの場合、コメント部分のソースコードは以下のようになっています。
<ol id="top-ra">
<li class="comment" id="xxxxx"></li>
<li class="comment" id="xxxxx"></li>
<li class="comment" id="xxxxx"></li>
</ol>


CSSの方でこのtop-raにflexのcolumn-reverseを付与すれば、下から順に表示されるのでコメントが新しい順番で表示されるようになります。

こんな感じ
#top-ra { display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse !important;
flex-direction: column-reverse !important;}


デフォルトの古い順番で表示させる場合はこちら
#top-ra { display: -webkit-flex;
display: flex;
-webkit-flex-direction: column !important;
flex-direction: column !important;}


Bloggerの「コメントを投稿」の表示位置を移動する

「コメントを投稿」部分はid="top-ce"が付与されているので、これをjqueryを用いて移動させます。
自分はコメントの始まるid="top-ra"の前に移動させたので、こういったコードを追加しました。
<script>
$(function() {
$(&quot;#top-ce&quot;).insertBefore(&quot;#top-ra&quot;);
});
</script>
insertBeforeでid="top-ra"の前に移動させています。

以上です。
あまり使用頻度は高くないかもしれませんが、参考になる方がいれば嬉しいです。

【Blogger】ブログ検索・ラベル検索の結果に合わせてメッセージの表示を分岐させる方法

Bloggerでは検索をすると、自動でメッセージが表示されますが、それをアレンジして該当記事数が0だった場合と、1以上あった場合で、メッセージ分岐させてみたいと思います。

以下のコードを<data:navMessage/>に上書きすれば実現できます。

HTML
<b:if cond='data:numPosts == 0'>
    <b:if cond='data:blog.searchLabel'>
        <b expr:data-search="data:blog.searchLabel"/> の検索結果は0件です。 <!-- ラベル検索の表示結果が0件だった場合 -->
    <b:elseif cond='data:blog.searchQuery'/>
        <b expr:data-search="data:blog.searchQuery"/> の検索結果は0件です。 <!-- ブログ検索の表示結果が0件だった場合 -->
   
    </b:if>
<b:else/>
    <b:if cond='data:blog.searchLabel'>
        <b expr:data-search="data:blog.searchLabel"/> の検索結果です。 <!-- ラベル検索に該当記事があった場合 -->
    <b:elseif cond='data:blog.searchQuery'/>
        <b expr:data-search="data:blog.searchQuery"/> の検索結果です。 <!-- ブログ検索に該当記事があった場合 -->
    </b:if>
</b:if>
また、以下のフォーラムによると、<data:blog.searchLabel/>と<data:blog.searchQuery/>は安全ではないコードのため、以下のコードをCSSに書き加えた方が安全のようです。
b[data-search]::after {
    content: attr(data-search);
}

参考URL:https://stackoverflow.com/questions/21072954/blogspot-datanavmessage


簡単に説明をすると、<b:if cond='data:numPosts == 0'>が記事数が0だった場合のタグで、<b:else/>でそうでなかった場合の表示(<b:if cond='data:numPosts != 0'>)を分岐しています。

以上です。
「の検索結果は0件です。」などのメッセージはカスタマイズして使用してみてください。

【JavaScript/jQuery】シンプルな方法でページが完全に読み込まれるまで要素を表示しない代わりにローディング画像を表示してみる

デザインの乱れ等の理由によって、ページが完全に読み込まれるまで要素を非表示にしたい場合は様々な方法がありますが、今回はシンプルな方法でこれを実現してみたいと思います。

方法は至って簡単で、ページが完全に読み込まれるまで表示したくない要素にdisplay:noneを付与し、ローディング画像など最初から表示させたい要素だけ表示
ページが完全に読み込まれたら、/jQueryのshowメソッドで非表示にしていた要素を表示させ、ローディング画像などをhideで非表示にするといった方法です。

HTML
<!--ページが完全に読み込まれるまで表示する要素-->
<div class="photo1"><img src ="画像URL"/></div>

<!--ページが完全に読み込まれるまで表示したくない要素-->
<div class="body_test">要素</div>
CSS
.photo1 img{display:block;margin:0 auto;/*画像を画面の中央に*/}
.body_test {display:block;/*ページが完全に読み込まれるまで表示したくない要素を非表示に*/}
このままだとphoto1の要素が表示され、body_testの要素が表示されないだけなので、ページが完全に読み込まれた後に動作するjQueryを書き加えます。

ページが完全に読み込まれた後の処理を明記したい場合は主に以下の2つの書き方があります。
window.onload = function () {
/*処理*/
};
$(window).on('load', function() {
/*処理*/
});
今回は最初のメソッドを使用し、以下のようにshowとhideメソッドを加えます。
<script>
window.onload = function () {
$('.photo1').hide();
$('.body_test').show();
};
</script>
これでページが完全に読み込まれると、photo1がhideで非表示となり、body_testがshowで表示されるようになりました。

要素が表示されるときにふわっと表示されようなアニメーション効果を与えたい場合はshowをfadeInに書き換え、()内に完全に表示させるまでのミリ秒単位を指定しましょう(スライド表示させた場合はslideDown)。

(例)
<script>
window.onload = function () {
$('.photo1').hide();
$('.body_test').fadeIn(1000);
};
</script>


ページが読み込まれるまでに表示したい画像はお好みの画像にして下さい。
ローディング画面であれば、自由にカラーを設定できる以下のサイトを利用するのがオススメです。
以上です。
シンプルな方法なのでコピペで簡単に導入できると思います。

【JavaScript】簡単にクリックで要素の表示・非表示を切り替える方法hide、show、toggle

初心者でもコピペだけで導入できるJavaScript第二弾です。

第一弾はこちら
【JavaScript】初心者でも簡単!CSSよりも便利に使えるJavaScriptコード 2選!
https://bloggercustoman.blogspot.com/2019/08/cssjavascript-2.html

jQueryを導入していない方はheader要素内に以下のコードを記述しておいて下さい。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


hide、show、toggleを使い分けてクリックで要素の表示・非表示を切り替えよう

ベースとなるのは以下のコードです。
<script>
  
$('#ID名').click(function() {
       
/*ここに動作を記述*/

    })
    
</script>
ここから#ID名がクリックされた場合の動作を記述していくことになります。
  • hide = 要素を非表示にする
  • show = 要素を表示する
  • toggle = 要素の表示・非表示を交互に繰り返す

hide、show

hide

それでは、サンプルです。

HTML
<span id="bana_t1">バナナ</span>
<span id="bana_t2">リンゴ</span>
JavaScript
<script>
  
$('#bana_t1').click(function() {
$('#bana_t2').hide();
 })
    
</script>
ID属性bana_t1の「バナナ」をクリックすると、ID属性bana_t2の「リンゴ」が非表示になるコードです。

サンプル
バナナ リンゴ


「バナナ」をクリックすると「リンゴ」が消えましたよね?
CSSのdisplay:none;と同様の効果があります。
このままでは消えたままで出てきません。
showで出してみましょう。

show

showで要素を表示させるには、その要素を隠しておく必要があるので、予め表示したい要素をdisplay:none;で隠しておきましょう。

HTML
<span id="bana_t3">バナナ</span>
<span id="bana_t4" style="display:none;">リンゴ</span>
JavaScript
<script>
  
$('#bana_t3').click(function() {
$('#bana_t4').show();
 })
    
</script>
hideshowに変わっただけです。
ID属性bana_t3の「バナナ」をクリックすると、display:none;を指定したID属性bana_t4の「リンゴ」が表示されるコード。

サンプル
バナナ


どうでしょう。
今度は「バナナ」をクリックすると「リンゴ」が出てきましたよね。
しかし、今度は出てきたままで消えません。
そこで、1クリックごとに交互に表示・非表示を繰り返すtoggleを使用してみましょう。

toggle

toggleは、1クリック目が非表示であるのなら、2回目は以降は表示・非表示を繰り返します。
予めdisplay:none;で隠しておいたものであるなら、1クリック目が表示となるので、2回目は以降は非表示・表示を繰り返すことになります。

HTML
<span id="bana_t5">バナナ</span>
<span id="bana_t6">リンゴ</span>
<span id="bana_t7" style="display:none;">メロン</span>
JavaScript
<script>
  
$('#bana_t5').click(function() {
$('#bana_t6').toggle();
$('#bana_t7').toggle();
 })
    
</script>

サンプル
バナナ リンゴ


IDしか記述していない「リンゴ」は最初から表示され、1クリック目で非表示となった一方で、display:none;を記述してある「メロン」は逆に1クリック目で表示されていますよね。
toggleは何度クリックしても交互に動作を繰り返すのが特徴です。


おまけ

全てに共通することですが、.hide();の()の中に要素を表示・非表示するまでのミリ秒数(1000 = 1秒)を指定することが可能で、ちょっとしたアニメーション効果を演出できます。

HTML
<div id="bana_t11" style="padding:20px;background-color:#ff8080;">バナナ</div>
<div id="bana_t12" style="padding:20px;background-color:#226b80;">リンゴ</div>
JavaScript
<script>
  
$('#bana_t11').click(function() {
$('#bana_t12').toggle(1000);
 })
    
</script>

サンプル
バナナ
リンゴ


toggleとしか記述していないため、デフォルトの横方向のアニメーションが適用されていますが、toggleには他にもメソッドが存在します。
  • slideToggle = 縦方向のアニメーション
  • fadeToggle = フェードイン・アウトのようなアニメーション
toggleの箇所を上記のどちらかに書き換えるだけ。Tを大文字にすることが必須!

サンプル(slideToggle
バナナ
リンゴ

サンプル(fadeToggle
バナナ
リンゴ


toggleClassというメソッドもあり、新たにclass属性を追加、削除が可能です。


また、今回はIDを指定しましたが、IDではなく、class名を指定したいときは、#を.に書き換えてください。

<script>
  
$('.bana_t5').click(function() {
$('.bana_t6').toggle();
$('.bana_t7').toggle();
 })
    
</script>


第二弾は以上です。
簡単に応用できるJavaScriptなので、様々な形で使用してみてください。

【CSS】CSSだけで要素を横並びにし、横スクロールを実装してスマホに対応させる方法!

デスクトップよりもスマホからのアクセスが増す一方の現代。
スマホでの観覧を考えると、多くの情報を表示したくてもユーザビリティへの悪影響を考えて情報を減らすこともありますよね。
そんなときに便利なのがスクロール機能で、表示領域を制限させたうえで必要な情報をスクロールで表示されることができます。
縦スクロールは簡単ですし、スマホの場合は誤操作を招く場合があるので、今回は横スクロールを実装する方法をご紹介します。



キーコードはFlexbox

FlexboxはCSS3から使用できるようになったコードで、簡単に言うとdisplay: flex; と記述するだけで要素が横並びになります。

HTML
<div class="flex_1">
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
</div>
CSS
<style>
.flex_1 {display:flex;}
.f_1 {padding:30px;color:#fff;background-color:#1fab89;margin:5px;}
</style>
サンプル
テスト1
テスト1
テスト1
テスト1


HTMLの方を変更して子要素をもう少し増やしてみましょう。
<div class="flex_1">
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
</div>
サンプル
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1


デザインが汚くなってしまいましたが、折り返さないで横並びが永遠と続いていますよね。
Flexboxは折り返さないことが初期値となっていて、これが同じ横並びの作用を持つfloatやdisplay: inline-block;と違う所。

flex-wrap:を記述すれば、折り返すこともできますが、横スクロールは折り返さないことで実現するため、簡単な紹介だけしておきます。

flex-wrap:
  • nowrap = 折り返さない(何も記述しなければnowrapが初期値)
  • wrap = 折り返す
  • wrap-reverse = 逆方向へ折り返す



Overflow-xで横スクロールを実装してみよう

Flexboxで中身は完成しました。
では、表示領域を制限して横スクロールを実装してみましょう。

これも簡単です。
表示領域からはみ出した場合の処理を指定するoverflowを記述するだけです。
  • visible = ボックスからはみ出て表示(初期値)
  • hidden = はみ出た部分は隠す
  • scroll = スクロールで表示
  • auto = 一般的にはスクロールが適用

もうわかりましたね。
overflow:scroll;で横スクロールの実装は完成です。
overflowには水平方向の表示方法を指定するoverflow-xと、垂直方向のoverflow-yがありますが、横スクロールなのでoverflow-xを使用しましょう。

CSS
<style>
.flex_1 {display:flex;overflow-x: scroll;width:80%;}
.f_1 {padding:30px;color:#fff;background-color:#1fab89;margin:5px;}
</style>
サンプル(HTMLは上記と同様)
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1


今度は子要素の方法をアレンジしてみましょう。
コンテンツ内に表示する一つの子要素のサイズをflexで指定してみましょう。

CSS
<style>
.flex_1 {display:flex;overflow-x: scroll;width:80%;}
.f_1 {padding:30px;color:#fff;background-color:#1fab89;margin:5px;flex:0 0 30%;-webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;}
</style>
・flex:0 0 30%;は左から順番にflex-grow、flex-shrink、flex-basisの3つの値を指定していることになります。
今回はwithのように横幅を指定するflex-basisの値を指定しています。


サンプル(HTMLは上記と同様)
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1



-webkit-overflow-scrolling: touch;overflow-scrolling: touch;スマホでのスクロールを滑らかにするプロパティですので、合わせて記述しておきましょう。

以上です。
横スクロールはFlexboxの登場によって簡単に実装できるようになりました。

Flexboxには他にも様々なプロパティがあるので、機会があったら、またご紹介したいと思います。
では、長文にお付き合い下さって、ありがとうございました。