質問・要望など

Mail」又は「Twitter@liberal_nurse」のDMまでお気軽にどうぞ^^v

Web・Life

【保存版】初心者必見!AFFINGERデザイン一覧とカスタマイズの方法

2020年9月5日

アバター

集中治療室で10年以上働き、ブログを起点に様々な情報を発信しています。臨床や投資、お金の知識を基に、専門書やガイドラインなどでリサーチをしてから執筆中!Web関連、看護、お金、職場環境の情報などを発信しています。

・AFFINGER5の文章スタイルを一覧で見たいな。

・設定方法や英語の意味を知りたい!

・デザインの使い勝手とかは、どんな感じ?

今回は、こんな声に応えていきます。

私も導入して8日目なので、操作性を確認しつつ分かる範囲で説明します。

mobileの方は、左右で違いが分かるのでPC版の方が見易いです!

デザインの一覧では無く、設定方法を見たい場合は、以下よりジャンプできます。

設定

テキストパーツデザインについて

ボックスデザインについて(下記画像上のバナー風デザインなど)

カスタムボタン>ボックスメニューについて(下記画像下のボタンデザインなど)

記事一覧について

本記事の内容について

・スタイルの実際の動きについて

・一部使用方法不明なスタイルは抜きました

・タグ(テキストパーツ)一覧や設定方法について

・私の使用感やオススメなどについて

目次

AFFINGER5って?

WordPressテーマ 「WING(AFFINGER5)」

スタイル

テキスト

ここは一般的なデザインが多いところですね!

赤字 太字 赤字(太字) 大文字 小文字 ドット線

参照リンク

参考 必須 打消し Code Code風

NotoSans Rounded M+1c

アイコン

はてな     

注意

人物

チェック

メモ

王冠

初心者マーク

シンプルで、ちょっとした強調に使えそうで良いですね!

見出し

記事タイトル

h2風

h3風

h4風

h5風

まとめ

カウント

「風」なので、目次などには反映されないです。

目次などに影響を与えず目立たせるには良いですね。

写真

枠線

ポラロイド風

ワイド

アニメーション

45度  faa-wrench animated

ベル  faa-ring animated       

横   faa-horizontal animated     

縦   faa-vertical animated

点滅  faa-flash animated

バウンド  faa-bounce animated    

回転  faa-spin animated

ふわふわ  faa-float animated    

大小    faa-pulse animated     

シェイク  faa-shake animated

シェイク強  st-shake   

拡大  faa-tada animated        

  過ぎる  faa-passing animated 

戻る  faa-passing-reverse animated

バースト  faa-burst animated

落ちる  faa-falling animated

私はアニメーションを結構使います。文に動きが入ると目に止まりますよね。

スタイルから入れると、上記の様に動きを出せます。コードの場合は、fontawesomeの後にアイコン名を入れて、半角空けて入力します(詳細後述)。

この一覧みたいにアニメーションが多過ぎると目障りになるのもよく分かります。特に4種類程、主張が強いなあ・・・(笑

ランキング

1位 AFFINGER5

2位

3位

4位

マーカー

黄マーカー黄マーカー(細)

赤マーカー赤マーカー(細)

青マーカー青マーカー(細)

鼠マーカー鼠マーカー(細)

ボックス

黄色

薄赤

グレー

引用風

ワイド背景

ワイド背景(左寄)

ワイド背景(右寄)

 

タグ>テキストパーツ

以下の内容を設定すると、色々と変化を付け加えられます。

クリップメモなど、多くのタグの構成は以下の様になっています。

[ st-cmemo fontawesome="" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize="" ]  文章  [/st-cmemo ]

これを分解してカスタマイズをする場合、下の通りです。慣れないうちは「文章」の部分を打つだけでも使えるので、気にせず徐々に慣れれば良いと思います。

fontawesome="アイコン(+アニメーション)"

⇒ fontawesome4(Webフォント):初期設定以外のアイコンはコチラ ※Ver5.0以降は未対応

初期設定は、タグ>ショートコード補助>Webアイコンで呼び出せます。

⇒ アニメーションは半角空けて上述したテキストを入力すると設定できます。

初期設定は、タグ>ショートコード補助>アニメーションで呼び出せます。(呼び出すと自動で半角空けてくれるので、連続入力でOK)

iconcolor="#919191" アイコンカラー

bgcolor="#fafafa" 背景カラー

color="#000000" 文字カラー

bordercolor="#" ボーダー(枠線)カラー

⇒Material Design Colors(マテリアルカラーのパレット):materialui.co(クリックでコピー可能)

カラー系は「#+英数字6文字」の形式で設定します。

borderwidth="数字" ボーダー(枠線)の幅

iconsize="数字" アイコンサイズ

クリップメモ

メモ

外部リンク

ブックマーク

おしらせ

はてな

コメント

コード

ポイント

ユーザー

初心者

注意文

注意文(グレー)

ミニふきだし

基本

オレンジ

ピンク

ブルー

グリーン

レッド

マイボックス

マイボックス

私は、ちょっとしたメインの文章の付け加えなどに使ってます。

まるもじ(小)

基本 オレンジ ピンク ブルー うすい注意 注意
まるもじ(小)は横並びできますが、(大)は通常の方法では横並びしない様です。

まるもじ(大)

基本

オレンジ

ピンク

ブルー

はてな

チェック

うすい注意

注意

HTML>ルビ(ふりがな)

別の言葉も「ふりがな」で記載可能。こんな感じで、漢字なども可能です。

ルビ(ふりがな)

カスタムフォント

デフォルト

白影

ステップ

step
1
test

step
2
test

step
3
test

手順を説明するときに役立ちます!

クリップメモ(テキスト)

ここではアニメーションを付け加えてみます。

メモ

参考

関連

注意

Check

次へ進む

前に戻る

質問

回答

複合(+アイコンなし)

自由なメモ

自由なメモ

自由なメモ

自由なメモ(アイコンなし)

ココがポイント

ココがポイント

ココがポイント

ココがポイント(アイコンなし)

ココがおすすめ

ココがおすすめ

ココがおすすめ

ココがおすすめ(アイコンなし)

ココがダメ

ココがダメ

ココがダメ

ココがダメ(アイコンなし)

ココに注意

ココに注意

ココに注意

ココに注意(アイコンなし)

さらに詳しく

もっと詳しく

もっと詳しく

もっと詳しく(アイコンなし)

つまづきポイント

はてなマーク(アイコンなし)

◯才女性

女性コメント

◯才男性

男性コメント

ポイント

ポイント

ラベル

おすすめ

ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。

 

流れる文章

流れる文章(marquee風)

 

タグ>ボックスデザイン

WordPressテーマ 「WING(AFFINGER5)」

1つ1つ設定の方法を確認していきましょう!空欄でも問題無いので、デザインなどで必要な時に調べて設定するのが良いと思います。

画像URLは、ワードプレス>メディアライブラリ>画像選択>画像のURLコピーで引用できます。

全てを貼り付けると、編集画面で画像が表示されてしまうので、私は最後のアルファベットだけ残してコピー>貼り付け>手打ちをしています。

下の赤字は初期設定です。

 

 

st-flexbox url="" rel="nofollow" target="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0"

st-flexbox url=""    :リンク先設定

rel="nofollow"    :リンク属性設定

target=""       :新しいタブでの開閉設定

fontawesome=""   :アイコン

title="タイトル"    :見本「タイトル」

width=""        :幅

height=""       :高さ

color="#fff"       :文字色

fontsize="200"     :文字の大きさ

radius="0"      :角丸

shadow="#424242"  :影

bordercolor="#ccc"  :枠線色

borderwidth="1"    :枠線幅

bgcolor="#ccc"   :背景色

backgroud_image=""  :背景画像(メディアURL)

blur="on"       :ぼかし(OFF:空欄)

left=""       :左寄せ

margin_bottom="0" :隣との間隔

バナー風ボックス

デフォルトとデザイン済みの比較です。 初期設定は上述した赤字を参照してくださいね。

タイトル

基本(ボタン設置など可能)

タイトル

背景無し

タイトル

左寄せ

 

マイボックス

ポイント

基本

しかく(枠のみ)

まるみ

参考

参考

関連

関連

メモ

メモ

ポイント

ポイント

注意ポイント

注意ポイント

はてな

はてな

ふきだしテキスト

+ミニふきだし

ショートコード

見出し付きフリーボックス

見出し(全角15文字)

基本

注意

注意

はてな

はてな

ポイント

ポイント

メモ

メモ

見出し(全角15文字)

基本(タイトル幅100%)

注意

注意(タイトル幅100%)

はてな

はてな(タイトル幅100%)

ポイント

ポイント(タイトル幅100%)

メモ

メモ(タイトル幅100%)

こんな方におすすめ(v)

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

チェックボックス(番号なしリスト)

番号なしリスト

こんな方におすすめ[v]

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

マイボックス(+CSSクラス)

メモ

メモ

メモ

メモ(下線のみ)

メモ

メモ(枠のみ)

メモ

メモ(枠・下線あり)

ここに注意

注意(下線のみ)

必要なモノ

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

 

必要なモノ(ドット下線)

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

 

チェックリスト

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

 

チェックリスト(ドット下線)

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

 

簡単な流れ

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

 

簡単な流れ(ドット下線)

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

メモボックス

メモ

メモボックス

スライドボックス

+ クリックして下さい

ハイっ、ひょっこりはん
スライドボックスは、クリックをすると出現します。

ガイドマップメニュー

手順説明などで便利ですね。

pre

 html
pre

 

pre:terminal

 command
pre:terminal

pre:shortcode

[/] shortcode
pre:shortcode

タグ>カスタムボタン

ボックスメニュー

[ st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type="" ]
[ st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューA" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold" ]

カスタマイズ>メニューのカラー設定>ボックスメニューでも色は変えられます。

myclass=""       :CSS設定

pc_show="4"     :列数(PC)

margin=       :周囲との間隔

type="vertical"     :空欄で横並び(左だと縦並び)

icon_image=""    :アイコン画像(URL)

fontawesome=""   :文字アイコン

icon_size=""     :アイコンサイズ

text="       :文章

subtext=""     :サブ文章

url=""       :リンク

target="blank"      :新規タブで開く(off:空欄)

rel=""        :nofollow設定

bgcolor="#ccc"   :背景色

color="#fff"       :文字色

fontsize="200"     :文字の大きさ

fontweight="bold"  :太さ

カスタムボタン

会話ふきだし

AFFINGER5管理画面>会話・ファビコン等>会話風アイコンで設定しましょう。アイコン名を入れると、アイコンの下に表示されます。

8種類登録できます!

私はアイコン名を入れていないので、表示されないです。

タグ>ランキング

1位(基本)

2位

3位

4位以下

ID:[ st_af id="" ]

Slug:[ st_af name="" ]

Rank:[ st-rankgroup id="" label="" name="" ]

タグ>レイアウト

WordPressテーマ 「WING(AFFINGER5)」

%に応じて、左右に分割できます。全サイズでは、mobileでも分割されてしまうので、画面が小さいとテキストが滅茶苦茶になります。 基本的には以下の「PCとTab」を推奨します。この記事で左右に分けているのも、このレイアウト設定です(PCとTab)。

当サイトのトップページ(新着記事以下)も、この機能を使っています。結構使います^^

全サイズ

50%

これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです

50%

これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです

PCとTab(959px以上)

70%

これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです

30%

これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです

以下のタブメニューはクリックで切り替えできます。

DIV

メイン

サブ

タイムライン


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

タイムライン(センター)


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


背景ワイド

背景ワイド

タブ(切替ボタン)




タブ1のコンテンツ

タブ2のコンテンツ


タブ2つ




タブ1のコンテンツ

タブ2のコンテンツ


タイムライン(カウント)


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


タイムライン(基本ステップ)


  • step.1

    ここにコンテンツ


  • step.2

    ここにコンテンツ


  • step.3

    ここにコンテンツ


タイムライン(ブログカード)

タグ>その他パーツ

Googleアイコン

利用したい場合は、AFFINGER管理 > デザイン > Googleマテリアルアイコン > 使用するで有効化します。

有効にしないと・・・

desktop_macphone_iphonetablet_mactimerlocation_ondirections_bikedirections_rundirections_cardirections_transitsubwayflightlocal_parkingrestaurantstore_mall_directorycakesmoking_roomsarrow_backarrow_downwardarrow_forwardarrow_upwardradio_button_uncheckedclosemoodmood_badsentiment_satisfiedsentiment_very_dissatisfiedthumb_up_altthumb_down_alterrornew_releases

スター

画像付きコメント

画像(60×60)

タイトル

◯代男性

画像付きでコメント挿入ができます。

目次(カスタム)

目次(+TOC)

[ toc ] 

プラグイン利用者用です。

アドセンス

[ adsense ]

広告・Googleアドセンスのスマホ用が表示されます。

オリジナルショートコード

AFFINGER5

外観>ウィジェット>オリジナルのショートコード作成ウィジェットで作成できます。コードは1個だけなので、使いどころを考えないとかな?「ステ子」を持っていると、必要ないかもです。

YouTube

静止画で挿入したい場合に使います。idなので、https://youtu.be/「TQ8WlA2GXbk」、最後の「  」内の英数字の部分だけ入力します。

三角(下矢印)

スクロールナビ

 

タグ>記事一覧/カード

以下のコードも噛砕いて説明していきます!

[ st-catgroup cat="0" page="2" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off" ]

st-catgroup cat="0" :カテゴリーグループ選択

page="2"       :表示記事数

order="desc"    :降順・昇順

orderby="id"    :並び順

child="on"     :子カテゴリー設定

slide="off"        :スライド設定

slides_to_show="3,3,2"     :スライド枚数(画面の大きさを”大、中、小”の順で指定できる)

slide_date=""       :日付

slide_more="ReadMore"     :任意の言葉でClick誘導ができる

slide_center="off" ]      :onだとmobileで両端が切れる

記事一覧

「,」でidを区切ると、複数出せます。

Web・Life

【AFFINGER】ブログ初心者必見!デザイン性や特典などについて

2021/3/24  

AFFINGER5の購入を迷ってて・・・。無料テーマとの違いは何なの?どんな機能が備わっているの? 今回は、こんな声に応えていきます。 当記事で分かること 私が移行した理由について メリットとデメリッ ...

Web・Life

【簡単即解決】YouTubeの埋め込みを中央(センター)表示にする方法

2021/2/23  

YouTubeの埋め込み後のセンター表示が分からない・・・。 色々調べて、試してみたのに全然中央にならないよ? 今回は同じ悩みを抱えた方に、記事として残します。 私も色々調べて「CSS」、「<d ...

Nursing

【便利】看護記録や仕事が早く終わるパソコンショートカットキー10選

2020/11/8  

・仕事が定時に終わらない・・・。 ・レポートを早く終わらせたいな。 ・厳選したショートカットキーを知りたいな。 今回は、こんな声に応えていきます。 パソコンを使って仕事や作業をする人は多いのでは?看護 ...

おすすめ記事一覧

[ st-osusume ] 

以下の設定で使える様になるようです。

ブログカード(参考)

参考【保存版】初心者必見!AFFINGERデザイン一覧とカスタマイズの方法

・AFFINGER5の文章スタイルを一覧で見たいな。 ・設定方法や英語の意味を知りたい! ・デザインの使い勝手とかは、どんな感じ? 今回は、こんな声に応えていきます。 AFFINGER5(WING)の ...

続きを見る

カテゴリ一覧

Nursing

【学生】病院看護師が比較的よく遭遇する画像検査の種類について解説します

CT・MRIって何が違うの?よく耳にする検査について、ざっくり知りたいな! 今回は、こんな声に応えていきます。 当記事で分かること 放射線三原則 レントゲン・CT・MRI エコー検査 核医学検査 造影 ...

Nursing

原発性アルドステロン症とは?病態・症状などについて<看護師国家試験>

原発性アルドステロン症って、どんな疾患なの? 今回は、こんな声に応えていきます。 当記事で分かること 原発性アルドステロン症とは 副腎髄質について 症状・検査・治療など 目次 副腎皮質原発性アルドステ ...

私はモバイルスライドメニュー内(三本線メニュー)で使っています。

カテゴリ一覧(スライドショー)

Nursing

2021/4/13

【学生】病院看護師が比較的よく遭遇する画像検査の種類について解説します

CT・MRIって何が違うの?よく耳にする検査について、ざっくり知りたいな! 今回は、こんな声に応えていきます。 当記事で分かること 放射線三原則 レントゲン・CT・MRI エコー検査 核医学検査 造影検査・IVR 目次 放射線(Radiation)レントゲン検査シャウカステンバリウム検査マンモグラフィーCTMRI超音波エコー検査核医学検査SPECTPET血管造影IVR 放射線(Radiation) 放射線は自然界にも存在し、日常生活を送る上でも浴びています。医療では検査で放射線を用いることが多く、被曝を可 ...

ReadMore

Nursing

2021/4/5

原発性アルドステロン症とは?病態・症状などについて<看護師国家試験>

原発性アルドステロン症って、どんな疾患なの? 今回は、こんな声に応えていきます。 当記事で分かること 原発性アルドステロン症とは 副腎髄質について 症状・検査・治療など 目次 副腎皮質原発性アルドステロン症とは症状検査治療 副腎皮質 副腎の皮質部分で、以下のホルモンの中でもアルドステロン(鉱質コルチコイド)が過剰に分泌されます。副腎の詳細は下記記事で解説しています。 コルチゾール アルドステロン アンドロゲン 参考 *副腎について *視床下部・下垂体について 原発性アルドステロン症とは 腫瘍などによってア ...

ReadMore

Nursing

2021/4/5

クッシング症候群とは?副腎皮質・症状などについて<看護師国家試験>

クッシング症候群って、どんな病態なの? 今回は、こんな声に応えていきます。 当記事で分かること クッシング症候群とは 副腎皮質について 症状・検査・治療など 目次 副腎皮質クッシング症候群とはコルチゾール(↑)アンドロゲン(↑)ACTH・副腎皮質刺激ホルモン(↑)検査治療 副腎皮質 副腎の中の皮質部分で、ホルモンはコレステロールより合成されます。糖質(グルコ)コルチコイドと鉱質(ミネラル)コルチコイドと言う名称でも有名で、本疾患はコルチゾールとアンドロゲンが関係してきます。詳しくは下記記事で解説しています ...

ReadMore

Nursing

2021/3/31

【褐色細胞腫】副腎髄質との関係・症状・禁忌薬剤など<看護師国家試験>

褐色細胞腫って何? 今回は、こんな声に応えていきます。 当記事で分かること 褐色細胞腫とは 副腎髄質とクロム親和性細胞について 目次 褐色細胞腫副腎髄質とはクロム親和性細胞検査・治療 褐色細胞腫 副腎は皮質と髄質に分かれますが、副腎髄質に発生したカテコールアミン産生腫瘍を褐色細胞腫と呼びます。副腎髄質の外に存在する交換神経に発生する場合はパラガングリオーマとも呼ばれます。 サムネイルのエピネフリンはアドレナリンと同義で、商品名ではボスミン®などになります。 副腎髄質とは 副腎髄質はカテコールアミンを産生す ...

ReadMore

Nursing

2021/3/28

【アジソン病】慢性副腎皮質機能低下症の病態・症状とは<看護師国家試験>

アジソン病?どんな疾患なの? 今回は、こんな声に応えていきます。 当記事で分かること 副腎皮質とは アジソン病について 目次 副腎皮質とはアジソン病・副腎皮質機能低下症原因副腎皮質ホルモンACTH・CRH検査・治療 副腎皮質とは ステロイドホルモンを分泌する部位で、糖質(グルコ)コルチコイドと鉱質(ミネラル)コルチコイドなどが存在します。名前の通り、糖質コルチコイドは糖質などに関わり、鉱質コルチコイドはミネラル(Na・K)などに関わります。 参考 *副腎皮質について *視床下部・下垂体について アジソン病 ...

ReadMore

私のトップページで使っているタグです。

ブログカード(チェック)

こちらもCHECK

【保存版】初心者必見!AFFINGERデザイン一覧とカスタマイズの方法

・AFFINGER5の文章スタイルを一覧で見たいな。 ・設定方法や英語の意味を知りたい! ・デザインの使い勝手とかは、どんな感じ? 今回は、こんな声に応えていきます。 AFFINGER5(WING)の ...

続きを見る

タグ>条件表示

表示方法を設定できます。

・コメントアウト

・エディタ用メモ

・PC閲覧時のみ表示

・PC閲覧時のみ非表示

・AMPページのみ表示

・AMPページのみ非表示

・フロントページのみ表示

・フロントページのみ非表示

・指定したカテゴリーIDのみ非表示

・ログイン時のみ表示

・ログアウト時のみ表示

タグ>ショートコード補助

Webアイコン(クラス)

これ以外にも設定できます。AFFINGER5管理画面>はじめに>最下層で確認できます。

fontawesome

メモ:fa-file-text-o

チェック:fa-check

チェック(v):fa-check-circle

チェック[v]:st-svg-checkbox

注意:fa-exclamation-circle

はてな:fa-question-circle

虫メガネ:fa-search

虫メガネ(+):fa-search-plus

矢印右:fa-chevron-right

矢印下:fa-chevron-down

矢印右2:fa-angle-double-right

矢印下2:fa-angle-double-down

矢印右3:fa-angle-right

矢印下3:fa-angle-down

ハート:fa-heart

ユーザー:fa-user

コメント:fa-comments

電球:fa-lightbulb-o

おしらせ:fa-bullhorn

メール:fa-envelope

コード:fa-code

ギフト:fa-gift

ダイアモンド:fa-diamond

ダウンロード:fa-download

Twitter:fa-twitter

Facebook:fa-facebook-square

YouTube:fa-youtube-play

Amazon:fa-amazon

王冠:st-svg-oukan

初心者:st-svg-bigginer_l

アニメーション(クラス)

動きなどは最初に記載したところをご覧ください!

HTMLカラーコード

白#ffffff

赤濃#e53935

赤#f44336

赤薄#ffebee

青濃#039BE5

青#03A9F4

青薄#E1F5FE

緑濃#FFB300

緑#4CAF50

緑薄#E8F5E9

橙濃#FFB300

橙#FFC107

橙薄#FFF3E0

黒濃#212121

黒#424242

黒薄#FAFAFA

黄薄#FFFDE7

黒薄は黄薄の間違いかな?

HTMLカラーコード(ブランド)

Twitter#40a2f5

Facebook#415c9d

はてな#3290e1

WordPress#2d88c0

Amazon#eb9100

LINE#39b900

 

定型文

\ バンザイ / :\ バンザイ /

詳細は公式サイトにて:※時期により内容が異なる場合がございます。詳細は公式サイトにてご確認下さいませ。

無断利用禁止:※掲載されている文字、写真、イラスト等は著作権の対象となっています。無断利用を固く禁止しております。

ダミーテスト:これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです

まとめ

まとめ

今回は、文章デザイン全般の設定や見栄えなどを解説しました。Cocoon3ヶ月、AFFINGER8日目の私でも簡単に使えています。悩んでいる方は、是非参考にしてみてくださいね^^v

WordPressテーマ 「WING(AFFINGER5) AFFINGER PACK3(WING対応)

今回は以上になります。参考になれば幸いです。

お勧めの記事などを以下に貼っています。疑問、質問、要望などは「Mail」又は「Twitter@liberal_nurse」のDMまでお気軽にどうぞ^^v

オススメ
【AFFINGER】ブログ初心者必見!デザイン性や特典などについて

AFFINGER5の購入を迷ってて・・・。無料テーマとの違いは何なの?どんな機能が備わっているの? 今回は、こんな声に応えていきます。 当記事で分かること 私が移行した理由について メリットとデメリッ ...

続きを見る

  • 執筆者
  • 最新記事
アバター

集中治療室で10年以上働き、ブログを起点に様々な情報を発信しています。臨床や投資、お金の知識を基に、専門書やガイドラインなどでリサーチをしてから執筆中!Web関連、看護、お金、職場環境の情報などを発信しています。

-Web・Life

© 2021 Liberal Nurse -リベラルナース-