Note

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

2020年9月5日

集中治療室で10年以上働き、ブログを起点に医療情報やお役立ち情報を発信しています。医療学生・新卒看護師向けに分かり易く解説するコンテンツも制作しています!国家試験に合格したのに臨床で上手く使えない…と思っている人は結構多いです。折角学習するのに臨床で活かせないのは勿体無いです。効率的・体系的に学びつつ臨床に活かしましょう!

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

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

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

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

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

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

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

設定

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

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

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

記事一覧について

本記事の内容について

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

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

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

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

<Contents>

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を区切ると、複数出せます。

Note

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

2021/5/27    

AFFINGER5の購入を迷ってて・・・。無料テーマとの違いは何なの?どんな機能が備わっているの? 今回は、こんな声に応えていきます。 当記事で分かる ...

Note

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

2021/5/27    ,

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

Medical

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

2021/10/11    ,

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

おすすめ記事一覧

[ st-osusume ] 

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

ブログカード(参考)

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

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

続きを見る

カテゴリ一覧

Comic

【漫画学習】アンサングシンデレラ第17話<ネタバレ>で薬物中毒(OD)などを学ぼう!

漫画のストーリーを参考に、ネタバレも含めて楽しく解説・学習していきます! 当記事で分かること 第17話<ネタバレ> Over Doseとは <Cont ...

Comic

【漫画学習】アンサングシンデレラ第16話<ネタバレ>で月経・生理痛などを学ぼう!

漫画のストーリーを参考に、ネタバレも含めて楽しく解説・学習していきます! 当記事で分かること 第16話<ネタバレ> 月経と生理痛について <Conte ...

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

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

Comic

2021/10/20

【漫画学習】アンサングシンデレラ第17話<ネタバレ>で薬物中毒(OD)などを学ぼう!

漫画のストーリーを参考に、ネタバレも含めて楽しく解説・学習していきます! 当記事で分かること 第17話<ネタバレ> Over Doseとは <Contents> アンサングシンデレラ第17話<ネタバレ>:Over Doseアンサングシンデレラ第17話<ネタバレ>:葛藤アンサングシンデレラ第17話<ネタバレ>:薬剤師の役割とは アンサングシンデレラ第17話<ネタバレ>:Over Dose 17話はOver Dose(薬物中毒)の女性の話が展開していきます。内科病棟が満床で小児病棟に入院となりました。そこに「 ...

ReadMore

Comic

2021/10/20

【漫画学習】アンサングシンデレラ第16話<ネタバレ>で月経・生理痛などを学ぼう!

漫画のストーリーを参考に、ネタバレも含めて楽しく解説・学習していきます! 当記事で分かること 第16話<ネタバレ> 月経と生理痛について <Contents> アンサングシンデレラ第16話<ネタバレ>:生理痛アンサングシンデレラ第16話<ネタバレ>:受診アンサングシンデレラ第16話<ネタバレ>:セントジョーンズワート アンサングシンデレラ第16話<ネタバレ>:生理痛 リンク 16話は生理痛で起きることが出来ない女性のシーンで始まります。生理痛によって日常生活に支障を来し、ロキソニン®を頻回に使っています。 ...

ReadMore

Medical

2021/10/21

月経困難症・月経前症候群(PMS)の定義・症状・仕組みとは?<看護・医療国家試験>

月経困難症って何だろ? 今回は、こんな声に応えていきます。 当記事で分かること 生理・月経とは 月経前症候群と月経困難症について <Contents> 生理・月経とは経血量・止血初経・閉経月経困難症とはなぜ疼痛が起こる?治療・緩和月経前症候群(PMS)とはなぜ起こるのか?治療・緩和健康食品カルシウム(Ca)・マグネシウム(Mg)チェストベリーセント・ジョーンズ・ワート 生理・月経とは 生理は一般的な言葉で、医学用語では「月経」と言います。女性は28日前後の周期で生理を起こします。14日間の時間を掛けて子宮 ...

ReadMore

Comic

2021/10/19

【漫画学習】アンサングシンデレラ第15話<ネタバレ>で誤嚥性肺炎・疼痛などを学ぼう!

漫画のストーリーを参考に、ネタバレも含めて楽しく解説・学習していきます! 当記事で分かること 第15話<ネタバレ> 家族の心理状況について <Contents> アンサングシンデレラ第15話<ネタバレ>:誤嚥性肺炎とはせん妄・不穏についてアンサングシンデレラ第15話<ネタバレ>:覚悟アンサングシンデレラ第15話<ネタバレ>:麻薬アンサングシンデレラ第15話<ネタバレ>:蛙の子は蛙アンサングシンデレラ第15話<ネタバレ>:臨終 アンサングシンデレラ第15話<ネタバレ>:誤嚥性肺炎とは 15話は誤嚥性肺炎の説 ...

ReadMore

Comic

2021/10/18

【漫画学習】アンサングシンデレラ第14話<ネタバレ>で抗がん剤について学ぼう!

漫画のストーリーを参考に、ネタバレも含めて楽しく解説・学習していきます! 当記事で分かること 第14話<ネタバレ> 抗がん剤について <Contents> アンサングシンデレラ第14話<ネタバレ>:退院するアンサングシンデレラ第14話<ネタバレ>:化学療法スケジュールアンサングシンデレラ第14話<ネタバレ>:自宅ではアンサングシンデレラ第14話<ネタバレ>:再会 アンサングシンデレラ第14話<ネタバレ>:退院する リンク 14話は「樹里」の退院シーンから始まります。家族の話し合いが進んで順調に退院となり、 ...

ReadMore

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

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

こちらもCHECK

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

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

続きを見る

タグ>条件表示

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

・コメントアウト

・エディタ用メモ

・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対応)

他の関連記事やShopにも良ければ立ち寄ってくださいね!

L.Nurse Shop

最新・人気記事

Medical

2021/10/21

月経困難症・月経前症候群(PMS)の定義・症状・仕組みとは?<看護・医療国家試験>

Medical

2021/10/18

DNAR・BSCの違いとは?現場でも理解度の差の大きな医療用語を学ぼう!<看護>

Medical

2021/10/15

インスリンとは?注射・製剤の種類などを分かり易く解説します<看護・医療国家試験>

Medical

2021/10/14

妊娠高血圧症候群とは?定義・原因・症状・食事などについて解説します<看護>

Medical

2021/10/11

サイトカインの種類と働きとは?炎症・発熱などの機序も分かり易く簡単に解説します<看護>

Money

2021/8/11

【雇用保険】知らなきゃ損です!看護師の失業手当の受け取り方と金額について

Money

2021/7/23

【サイト】派遣看護師は副業ブログにも向いている?時給・給料・保険など

Money

2021/5/27

【看護師】学生も可能な4つの副業とブログをお勧めする6つの理由

Money

2021/5/27

【看護師】副業禁止?2つのバレない方法と稼ぐ心構えや確定申告について

Money

2021/10/15

【真実】看護師の初任給や給料、年収などを資格や夜勤も含めて解説します

電子ノート作成術

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

AFFINGER5の購入を迷ってて・・・。無料テーマとの違いは何なの?どんな機能が備わっているの? 今回は、こんな声に応えていきます。 当記事で分かる ...

続きを見る

  • 執筆者
  • 最新記事

集中治療室で10年以上働き、ブログを起点に医療情報やお役立ち情報を発信しています。医療学生・新卒看護師向けに分かり易く解説するコンテンツも制作しています!国家試験に合格したのに臨床で上手く使えない…と思っている人は結構多いです。折角学習するのに臨床で活かせないのは勿体無いです。効率的・体系的に学びつつ臨床に活かしましょう!

-Note
-,

© 2021 Liberal Nurse