【AFFINGER6（アフィンガー6）使い方】「今日の運勢」の作り方

【AFFINGER6（アフィンガー6）使い方】「今日の運勢」の作り方

ただのでぶ

みなさん、おはこんばんは😊
今回は、STINGER:スライドのブロックを使った「今日の運勢」の作り方を解説します✨
こんなこともできるので、ぜひみなさんもSTINGER:スライドのブロックを活用して、ステキなサイトを作ってくださいね

うしくん

おみくじやりたいモ〜

どうぞどうぞ、下の３つから選んでね〜

ただのでぶ

No.1

No.2

No.3

【AFFINGER6（アフィンガー6）使い方】「今日の運勢」の作り方

step
1おみくじ画像をGETしよう

今回のこのかわいいイラストは、
「かわいいフリー素材集　いらすとや」さんから
ダウンロードさせて頂きました✨リンクはこちらになります😊

「かわいいフリー素材集　いらすとや」さんへはこちらから

検索窓に"おみくじ"と入れて検索すると出てきます。

step
2"を押す

step
3ブロックの中から、デザインの"カラム"を選ぶ

step
4カラムから"33/33/33"を選ぶ

step
5""を選び、"すべて表示"を押す

step
6ブロックの中から、"STINGER:スライド"を選ぶ

step
7"+クリックして下さい"のブロックが出たら、右にある"STINGER:スライド"の中をカスタマイズしていきます。

step
8全般設定の"テキスト"を入れる

step
9全般設定の"アイコンクラス"にコードを入れる（テキストの左側に表示される）

アイコンについては、AFFINGER6よりFontAwesome5が使用できるようになってます。
FontAwesome5の設定方法と使い方は、の記事を参考にしてください。

【AFFINGER6（アフィンガー6）使い方】FontAwesome5の設定方法・使い方

【AFFINGER6（アフィンガー6）使い方】FontAwesome5の設定方法・使い方 皆さま、おはこんばんは😊WING AFFINGER5からACTION AFFINGER6になり ...

続きを見る

step
10全般設定の"センター寄せ"をONにする

step
11色設定で"テキスト色"と"背景色"を選ぶ

おすすめ！カラー選択方法

「色の名前とカラーコードが一目でわかるWEB色見本」

https://www.colordic.org

このサイト、とっても便利です。好みの色の見本とカラーコードが非常に見やすくなっているので、カラーを選ぶのが楽しくなりますよ🤗
良かったら、参考に見てみてください✨

step
12"ブロックを選択するには「/」を入力"に"/"を入れ、画像を挿入

step
13step5〜step12を真ん中と右のブロックにも同様にカスタマイズする

これで完成です🤗

うしくん

おみくじやりたいモ〜

どうぞどうぞ、下の３つから選んでね〜

ただのでぶ

No.1

No.2

No.3

ぜひ、応用して様々なカスタマイズを楽しんでください✨
ひと手間かけることで、ブログ作りが楽しくなってきますね😊