質問・要望など

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

Web・Life

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

2020年9月5日

アバター

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

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

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

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

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

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

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

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

設定

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

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

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

記事一覧について

本記事の内容について

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

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

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

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

目次

AFFINGER5って?

WordPressテーマ 「WING(AFFINGER5)」

様々な優良(有料)テーマの中の1つです。詳しくは下記記事を参考にしてくださいね。

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

続きを見る

スタイル

>テキスト

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

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

参照リンク

参考 必須 打消し 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

メイン

サブ

>タイムライン


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

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


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

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


  • step.1

    ここにコンテンツ


  • step.2

    ここにコンテンツ


  • step.3

    ここにコンテンツ


 

 

>背景ワイド

背景ワイド

>タブ(切替ボタン)




タブ1のコンテンツ

タブ2のコンテンツ


>タブ2つ




タブ1のコンテンツ

タブ2のコンテンツ


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

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


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


タグ>その他パーツ

>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で両端が切れる

>カテゴリ一覧

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

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

Nursing

2020/10/25

胃癌の症状・転移・手術などを12枚の画像で解説します<看護師国家試験>

・胃癌の特徴って? ・症状や治療について教えて! 今回は、こんな声に応えていきます。リボンの色は食道と同じ「ペリウィンクル」です。 本記事の内容について 目次 1.胃癌の死因順位と原因・好発について>死因順位>原因>好発部位2.胃癌の分類と転移について>深達度分類>ボールマン(肉眼的)分類>転移3.胃癌の症状・検査・治療など>検査・症状>治療4.胃切除術後の管理について 1.胃癌の死因順位と原因・好発について 9割程度が腺癌です。「腺」とは細胞が分泌する集まりのことです。胃は胃酸などを分泌するので想像し易 ...

ReadMore

Nursing

2020/10/25

胃切除術後・ダンピング症候群の合併症と食事について<看護師国家試験>

・ダンピング症候群って何だっけ? ・胃癌の術後は何に気を付けよう? ・胃の機能って何だったけな…。 今回は、こんな声に応えていきます。消化管の解剖は「コチラ」でまとめています。 本記事の内容について 胃切除後の合併症について 目次 1.胃切除術後症候群とは2.ダンピング症候群について3.鉄欠乏性・巨赤芽球性貧血について4.骨代謝障害について5.その他の症状について 1.胃切除術後症候群とは 胃癌の治療は侵襲的治療が一般的で、化学療法は予後不良な場合などが多いです。胃を切除すると胃の役割が失われたり、形態変 ...

ReadMore

Nursing

2020/10/24

周術期の役割とは?ドレーン・体温管理などについて<看護師国家試験>

・手術の時って何をすれば良いの? 今回は、こんな声に応えていきます。 本記事の内容について 術前に準備・確認すること 術中に看護師が担うこと 術後に観察・援助すること 目次 1.術前管理について>オリエンテーション>呼吸訓練>検査(関連項目)>薬剤管理>術前処置・確認項目2.術中管理について>褥瘡・医療関連機器圧迫創傷>深部静脈血栓症予防(DVT:Deep Vein Thrombosis)>肢位・保温3.術後管理について>ドレーン管理>術後回復過程について>リハビリテーション 1.術前管理について 今回は ...

ReadMore

Nursing

2020/10/24

【ピロリ菌】胃・十二指腸潰瘍の原因・治療・食事など<看護師国家試験>

・胃潰瘍って? ・十二指腸潰瘍との違いは? ・治療や原因って何なの? 今回は、こんな声に応えていきます。 本記事の内容について 胃・十二指腸潰瘍について 疼痛が起こる時間帯とは 5割が感染している菌について 目次 1.胃・十二指腸潰瘍(消化性潰瘍)>原因2.ヘリコバクター・ピロリ菌とNSAIDs潰瘍>検査について>NSAIDs潰瘍とは>症状>検査・治療>食事制限 1.胃・十二指腸潰瘍(消化性潰瘍) 胃・十二指腸潰瘍は消化性潰瘍とも言われ、潰瘍よりも浅い粘膜障害は糜爛びらんと言います。 好発部位 胃角部:中 ...

ReadMore

Nursing

2020/10/24

【肝細胞癌】原発性・転移性肝癌の症状・検査・治療など<看護師国家試験>

・肝癌って? ・転移と違うの? ・原因や種類は何が多いの? ・検査や治療について教えて! 今回は、こんな声に応えていきます。 ちなみに、肝癌のリボンは「エメラルドグリーン」です。 本記事の内容について 肝癌の分類について 原因・転移について 腫瘍マーカーについて 治療の種類や基準について 参考 癌検診・生活習慣病・感染症などに不安を持っている方は以下で検査できます。自宅で採取可能で、アプリ連動や医師へのWeb相談も可能です。 目次 1.肝癌(Liver Cancer)>分類>転移性肝癌の特徴とは2.肝細胞 ...

ReadMore

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

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

こちらもCHECK

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

続きを見る

タグ>条件表示

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

・コメントアウト

・エディタ用メモ

・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】ブログ初心者必見!デザイン性や特典などについて

続きを見る

 

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

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

-Web・Life

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