} 0% {opacity: 0;} height: auto; 100% {opacity: 0;} animation-name: slide5; アメブロカスタマイズ スライドショー ヘッダー画像の一部分をスライドショー！！ | 加藤敦志,Ameba Ownd,札幌,ホームページ作成,アメーバオウンド,アメーバオウンドマイスター width: 100%; 実は、全部1つのブログの中に記事を書いています。 ITブログなのか？サービス案内なのか？は } id="slide7"/>
, /*ココからCSSでのスライドショー*/ 100% {opacity: 0;} #slide1,#slide2,#slide3,#slide4,#slide5,#slide6,#slide7 { 20% {opacity: 0;} } 15% {opacity: 1;} position: absolute; 100% {opacity: 0;} 45% {opacity: 0;} width: 100%; 過去に、 サイドバーにスライドショーを設定するには 、といった記事を書いておりますが↓ 【再アップ記事】サイドバーにスライドショーを設定するには . position: relative; 5% {opacity: 1;} 60% {opacity: 1;} /*2枚目*/ } CSSはこんな風にカスタマイズしています。.site-info__description {font-size: 1.6rem;} 文字の大きさを1.6remに。 スマホ版は24px。 なんで単位を変えたんだっけ？忘れました（笑） ブログ記事の日付を消すCSSは、.page__main--blog-detail .blog-article__date {display: none;} /*6枚目*/ 35% {opacity: 1;} top:0px; 65% {opacity: 1;} 0% {opacity: 0;} 75% {opacity: 1;} left:0px; } height: auto; Ameba Owndのブログは1つしかありません。 ITブログもサービス案内もリンク集も各メンバープロフィールも. /*3枚目*/ animation-name: slide4; width: 100%; @keyframes slide1 { left:0px; 100% {opacity: 1;} 0% {opacity: 0;} 15% {opacity: 0;} /*4枚目*/ 100% {opacity: 0;} left:0px; この記事では、5枚の画像だったもので、 「画像を増やすにはどうしたらいいでしょうか？」 さて、Ameba Owndユーザー様はすでにご存知かと思いますが. 20% {opacity: 1;} left:0px; } 35% {opacity: 0;} }, フリースペース編集やCSSを修正する前に、元のちゃんと動いていたコードはメモ帳などのエディタにコピーしてバックアップしてください！, また、修正した後は、ご自分のブログを更新してください。（F5キー、またはCtrl＋F5キーなど）, サイドバーにスライドショーを設定するには（画像7枚用） | パソコンが好きになるブログ〜表技・裏技・便利技伝授！, 北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。. 80% {opacity: 1;} パソコンで見ると、このブログのサイドバーに画像のスライドショーが設置されています。, 過去に、サイドバーにスライドショーを設定するには、といった記事を書いておりますが↓,
