AFFINGER メイン

2022/1/14

【AFFINGER6(アフィンガー6)使い方】〜トップページのカスタマイズ〜 流れる文字の表示方法

【AFFINGER6(アフィンガー6)使い方】〜トップページのカスタマイズ〜 流れる文字の表示方法 みなさん、おはこんばんは😊今回は、トップページに流れる文字を表示する方法について解説します☺️動くものにはついつい目がいってしまいます✨ぜひ、素敵なブログのコンセプトやお知らせの一つに活用して、お好みのトップページを作ってみてくださいね🤗 こんな感じに流れる文字を加えることが簡単にできます😊ついつい見ちゃいませんか?? ...

続きを読む

メイン 副業

2022/5/6

話題の副業〜スポットワーク(SpotWORK)〜をやってみた!

話題の副業〜スポットワーク(SpotWORK)〜をやってみた! 話題の副業〜スポットワーク(SpotWORK)〜をやってみた! スポットワーク(SpotWork)って?  スポットワーク(SpotWORK)とは、SpotWORK株式会社さんが行っている、スキマ時間を使って簡単にできるモバイルバッテリーを移動させるお仕事です。 モバイルバッテリーが十分足りている場所で回収作業をし、そのモバイルバッテリーを不足している場所へ補充をする作業。また、機械が汚れていれば、簡単に掃除をすることもあります。  まずは、 ...

続きを読む

でVlog メイン

2021/12/28

【糖質制限ダイエットのやり方】#1 44日間で10.1kg減量達成

【糖質制限ダイエットのやり方】#1 44日間で10.1kg減量達成 【糖質制限ダイエットのやり方】#1 44日間で10.1kg減量達成 身長・体重 身長:180cm 体重:100.5kg(ダイエット開始時) これまでの最高体重は103kgくらいだった気がします。 糖質制限ダイエットの成果 44日間で10.1kg減の記録 ※ダイエット開始の11月13日の100.5kg時の写真は撮ってません。 お腹周りは減ってくるのは最後なので、10kg減っていてもあまり違いが分かりませんね。 実際の数値とグラフはこちら 食 ...

続きを読む

でVlog メイン

2021/12/27

[24時間365日、自分の好きな時に好きな場所で働ける!BIZcomfortが汐留にOPEN] BIZcomfort ザ ロイヤルパークホテル アイコニック 東京汐留

24時間365日、自分の好きな時に好きな場所で働ける!BIZcomfortが汐留にOPEN BIZcomfort ザ ロイヤルパークホテル アイコニック 東京汐留 みなさん、おはこんばんは😊今回は、ただのでぶもちょー愛用しておりますBIZcomfortの記事です✨ BIZcomfortさん、やってくれましたね😭めちゃくちゃ最高な拠点じゃないですか!!!!!!!!2021年12月22日に「BIZcomfort ザ ロイヤルパークホテル アイコニック 東京汐留」が ...

続きを読む

AFFINGER メイン

2021/12/27

【AFFINGER6(アフィンガー6)使い方】〜トップページのカスタマイズ〜スライドショーの下にお知らせを挿入する方法

【AFFINGER6(アフィンガー6)使い方】〜トップページのカスタマイズ〜スライドショーの下にお知らせを挿入する方法 みなさん、おはこんばんは😊今回は、なんと初めてコメントを頂けましたので、そちらの質問について解説していきます☺️ 質問:「スライドショーの下にお知らせを入れることは可能でしょうか」 可能です😊ウィジェットの機能を使うことで、実現ができます✨ぜひ、参考にしてお好みのトップページを作ってみてくださいね🤗 ...

続きを読む

AFFINGER メイン

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①

みなさん、おはこんばんは☺️
今回は、タグ機能の中にあるボックスメニューの使い方について解説します✨
メニューを色々カスタマイズできるので、ぜひステキなブログに利用してみてください🤗

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①①

それでは解説します✨

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①

ボックスメニューはこのような形で、クラシックのタグ カスタムボタン ボックスメニューより4種類から好みのフォームを選べます。

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①②

基本(4列)

サブあり(4列)

縦並びタイプ

縦並びタイプ(サブあり)

縦並びタイプ(単品)

"サブあり(4列)"を使って解説します。

[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューA" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューB" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューC" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューD" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]
ボックスメニューのボタンを増やしたい場合は…

[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューA" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]

このコードを追加してください。


[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
(この間に追加する)
[/st-box-btn]

step
1
"を押す

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①③

step
2
ブロックのテキストから"クラシック"を選択

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①④

step
3
書く場所に出てきた"クラシック"をクリックする

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑤

step
4
"タグ" "カスタムボタン" "ボックスメニュー"から"サブあり(4列)"を選択

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑥

step
5
を参考にカスタマイズ

ポイント

デフォルト備考
① pc_show="4"1列に並べる数(2 ~4)
② icon_image=""使いたい画像のURL
③ webicon="st-svg-wordpress"アイコンコード(FontAwesome5など)※画像(icon_image=""が優先表示)
④ icon_size=""アイコンのサイズ 数字を入力(画像、アイコン共通)
⑤ text="メニューA"タイトル
⑥ subtext="サブテキスト"サブタイトル
⑦ url=""クリックされた際に見せたいリンク先のURL
⑧ bgcolor=""ボタンの背景色 ※#000000などカラーコードを入力
⑨ color=""サブタイトルの文字色(アイコンを利用の場合、アイコンの色へも反映) ※#000000などカラーコードを入力
⑩ fontsize="90"タイトルの文字サイズ

① pc_show="4" : 1列に並べる数(2 ~4)

pc_show="3"の場合

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑦

pc_show="2"の場合

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑧

② icon_image="" : 使いたい画像のURL

画像のURLの挿入方法

step
A
ホームから"メディアを選択

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑨

step
B
画像を選択すると、右下に"ファイルのURL"が表示されるので、"URLをクリップボードにコピー"をクリックでコピー完了

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑩

step
C
icon_image=""に貼り付けをする ※画像が表示されたら「Ctrl + Z」でURLに変更

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑪
【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑫

③ webicon="st-svg-wordpress" : アイコンコード(FontAwesome5など)※画像(icon_image=""が優先表示)

"タグ" "ショートコード補助" "Webアイコン(クラス)"から確認可能

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑬

より多くのアイコンを使用したい場合は、FontAwesome5もあります。導入方法等は下記記事を参考にしてください。

参考【AFFINGER6(アフィンガー6)使い方】FontAwesome5の設定方法・使い方

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

続きを見る

④ icon_size="" : アイコンのサイズ 数字を入力(画像、アイコン共通)

アイコンの場合は、デフォルトの通り、数字の入力不要でちょうど良いと思います。
画像を利用する場合は、各々調整をするのが良いと思います。

⑤ text="メニューA" : タイトル

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑭

この部分です。

⑥ subtext="サブテキスト" : サブタイトル

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑮

この部分です。

⑦ url="" : クリックされた際に見せたいリンク先のURL

url=""の""の中に、http://〜 のボタンがクリックされた際に見せたいリンク先のURLを入れます。

⑧ bgcolor="" : ボタンの背景色 ※#000000などカラーコードを入力

このように、各々ボタンの背景色を変更できます。

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑯

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

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

https://www.colordic.org

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

⑨ color="" : サブタイトルの文字色(アイコンを利用の場合、アイコンの色へも反映) ※#000000などカラーコードを入力

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑰

この部分です。

のように、アイコンを利用の場合は、アイコンの色もお揃いになります。

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑱

⑩ fontsize="90" : タイトルの文字サイズ

【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑲

この部分です。

ワンポイントテクニック

アイコンを使用する場合、アイコンにアニメーションを加えることも可能です!!

[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューA" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]

この「webicon="st-svg-wordpress"」

st-svg-wordpressのアイコンコードの後ろに半角スペース+アニメーションコードを挿入します。

「webicon="st-svg-wordpress st-ring animated"」のようにします。

st-ring animatedがアニメーションコードです。

アニメーションコードは下の表を参考にしてください。

アニメーション
(クラス)
アイコン装飾アニメーションコード
45°揺れ

st-wrench animated
ベル揺れ

st-ring animated
横揺れ

st-horizontal animated
縦揺れ

st-vertical animated
点滅

st-flash animated
バウンド

st-bounce animated
回転

st-rotation animated
ふわふわ

st-float animated
大小

st-pulse animated
シェイク

st-shake-s animated
シェイク(強)

st-shake animated
拡大(ゆれ)

st-tada animated
過ぎる

st-passing animated
戻る

st-passing-reverse animated
バースト

st-burst animated
落ちる

st-falling animated

さらに目立ち、アイキャッチにもなりますので、ぜひ使ってみてください。

ステキなブログの作成に役立てば幸いです😊
ぜひ、使ってみてくださいね✨

このブログでは、WordPressテーマは"AFFINGER6"を利用しております。おすすめですよ。

AFFINGER6の使い方

AFFINGER6の使い方のページをご覧頂きありがとうございます🤗
こちらでは、「稼ぐ」に特化したWordPressテーマ〜AFFINGER6〜の使い方の解説をしてます。
初心者さまへもわかりやすくをモットーに書いております。
他のページでも絶賛解説中です。みなさまのブログ作成に役立てば嬉しいです。

 こんなページもあります 

トップページのカスタマイズ
  お知らせの作成方法
  タブ式カテゴリー一覧の作成方法
  カテゴリー一覧(スライドショー)の作成方法
  "TOPに戻るボタン"のカスタマイズ方法
  ヘッダーカードの作成方法
  ボックスメニューの使い方② サイドバーへの表示方法
  スライドショーの下にお知らせを挿入する方法
  流れる文字の表示方法

記事の書き方
  ブロックエディタ基本的な使い方
  ブロックエディタの装飾一覧
  タグ機能の装飾一覧
  光るボタンの作り方
  文字にアニメーションをつける方法
  フォント(Google Fonts)の設定方法
  FontAwesome5のアイコンにアニメーションを付ける方法
  ボックスメニューの使い方①
  ブログカードの作り方&カスタマイズ方法
  吹き出し・会話アイコンの使い方・設定・カスタマイズ方法

その他
  FontAwesome5の設定方法・使い方
  「今日の運勢」の作り方

  • この記事を書いた人

ただのでぶ

ただのでブロガーのただのでぶです(*^^*) 数多あるサイトの中から、訪れてくれてありがとうございます☆ 「稼ぐ」に特化したWordPressテーマ〜AFFINGER6〜を使ってブログを書いています。早くたくさん稼ぎたいです(*´∇`*) 今はAFFINGER6の使い方をメインに更新しています。 雑記ブログになると思いますが、ぜひ色々覗いてみてくださいね♪ ただのでブロガーのただのでぶをよろしくお願いします(*゚▽゚)ノ

-AFFINGER, メイン