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)使い方】ブログカードの作り方&カスタマイズ方法

まずは、ブログカードの呼び出し方法から。

step
1
"を押す

【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法②

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

【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法③

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

【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法④

step
4
"カード"をクリックする

【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法⑤

するとこのようなコードが表示され、プレビューするとコード下にあるようなイメージが表示されます。

[st-card myclass="" id="" label="" pc_height="" name="" bgcolor="" color="" webicon="" readmore="on" thumbnail="on" type=""]
【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法⑥

まずは設定をカスタマイズ

step
A
"外観"から"カスタマイズ"をクリック

【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法⑦

step
B
"オプション(その他)"をクリック

【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法⑧

step
C
"ブログカード/ラベル"をクリック

【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法⑨

step
D
ラベルデザインを"デフォルト(たすき掛け)"もしくは"リボンデザイン"から選ぶ

【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法⑩
【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法⑪
サンプル:デフォルト(たすき掛け)
【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法⑫
サンプル:リボンデザイン

おすすめは、リボンデザインです。
理由は、デフォルト(たすき掛け)ですと、長い文にしたときに欠けてしまうからです。

ただのでぶ

step
E
"枠線"、"ラベル背景色"、ラベルテキスト色"の設定をします

【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法⑬
【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法⑭
サンプル:"枠線"色変更
【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法⑮
サンプル:"枠線を太くする(3px)"にチェック
【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法⑯
サンプル:"ラベル背景色"を変更
【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法⑰
サンプル:"ラベルテキスト色"を

これで設定のカスタマイズは完了です。

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

ポイント

デフォルト備考
① id=""カードに表示させたい記事等のID番号
② label=""入力した文字がラベルデザインに反映されます
③ name=""記事のタイトル部分が変更されます
④ bgcolor=""ラベルデザインの色が変更されます ※#000000などカラーコードを入力 外観カスタマイズよりもこちらが優先されます
⑤ color=""ラベルデザインの文字の色が変更されます ※#000000などカラーコードを入力 外観カスタマイズよりもこちらが優先されます
⑥ webicon=""ラベルデザインの文字の先頭にアイコンが追加されます アイコンコードを入力します(FontAwesome5など)
⑦ readmore="on"「on」を消すことで、「続きを読む」が非表示になります

① id="" : カードに表示させたい記事等のID番号

記事のIDは、投稿から確認ができます。

【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法⑱

② label="" : 入力した文字がラベルデザインに反映されます

【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法⑲

③ name="" : 記事のタイトル部分が変更されます

【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法⑳

④ bgcolor="" : ラベルデザインの色が変更されます ※#000000などカラーコードを入力 外観カスタマイズよりもこちらが優先されます

【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法㉑

⑤ color="" : ラベルデザインの文字の色が変更されます ※#000000などカラーコードを入力 外観カスタマイズよりもこちらが優先されます

【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法㉒

⑥ webicon="" : ラベルデザインの文字の先頭にアイコンが追加されます アイコンコードを入力します(FontAwesome5など)

【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法㉓

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

【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法㉔

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

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

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

続きを見る

ワンポイントテクニック

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

[st-card myclass="" id="" label="" pc_height="" name="" bgcolor="" color="" webicon="" readmore="on" thumbnail="on" type=""]

この「webicon=""」

アイコンコード+半角スペース+アニメーションコードを入力します。

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

st-svg-heartがアイコンコードです。

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

のようにアイコン部分にアニメーションが付いているのがわかると思います。

アイコンにアニメーション追加する方法
【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法

【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法 みなさま、おはこんばんは☺️今回は、FontAwesome5の ...

続きを見る

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

アニメーション
(クラス)
アイコン装飾アニメーションコード
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

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

⑦ readmore="on" : 「on」を消すことで、「続きを読む」が非表示になります

【AFFINGER6(アフィンガー6)使い方】ブログカードの作り方&カスタマイズ方法㉕

ブログカードは作れたでしょうか?
ぜひ、魅力的なデザインにして見てもらいたい記事への誘導に使って見てください☺️

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

AFFINGER6の使い方

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

 こんなページもあります 

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

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

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

  • この記事を書いた人

ただのでぶ

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

-AFFINGER, メイン