アフィンガー5 書き方。 【画像付き】AFFINGER5（アフィンガー5）の初期設定を優しく解説

Affinger5（アフィンガー5）で「会話ふきだし」を使う方法

吹き出しの設定• AFFINGER5 アフィンガー 5 の使い方・装飾方法【クラシックエディター編】• AFFINGER5 アフィンガー 5 の使い方・装飾方法【ブロックエディター（Gutenberg）編】• まとめ：できればブロックエディター（Gutenberg）を使いこなそう！ テーマの有効化がまだ終わっていない方はこちらの記事の最後の章で詳しく解説しています。 まずはそちらをどうぞ。 テーマを有効化したけど初期設定が終わっていないという 方 は先にこちらをどうぞ。 この記事を書いている僕は、先日AFFINGER5 アフィンガー5 を導入しまして、最初は記事の装飾の多さに驚きました。 元々cocoonを使っていましたが、cocoonも記事装飾はかなり豊富です。 しかし、AFFINGER5 アフィンガー 5 はそれを超えます。 いまだに使ったことのない装飾が山のようにありまして、さすが有料テーマって感じです。 僕もそうでしたが、最初はどうやって使えば良いのかがわからないと思います。 本記事では、AFFINGER5 アフィンガー 5 の使い方、記事装飾の方法をクラシックエディターとブロックエディター（Gutenberg）にわけて説明します。 この記事を読めば記事を基本的な使い方をマスターでき、さらに記事をおしゃれに装飾できるようになりますので是非じっくりご覧ください。 AFFINGER5 アフィンガー 5 吹き出しの設定 AFFINFER5 アフィンガー 5 の吹き出しを使用するためには、画像の登録が必要です。 登録方法から呼び出し方を紹介します。 向きを変えたい場合は、前半の[ ]内の最後に『r』を入れると、右側になります。 AFFINGER5をインストールした時にフォルダ内に入っています。 やり方わかんないよって方は、こちらの記事の『最低限必要なプラグイン』というところで解説していますので参考にしてください。 プラグイン『Classic Editor』の導入 デフォルトではブロックエディターとなっているので、Classic Editorのプラグインをインストールして有効化しておきましょう。 プラグイン『TinyMCE Advanced』を導入 プラグイン『TinyMCE Advanced』を有効化していない方は、インストールして有効化しましょう。 TinyMCE Advancedとは、記事の編集画面を拡張するプラグインです。 簡単に言うと、記事装飾のボタンをデフォルトの状態より増やすことができます。 必ず導入しましょう。 ただ、導入後にちょっとした設定が必要なので、こちらの記事のプラグイン導入の章をみて設定してみてください。 クラシックエディターの表示 AFFINGER5をインストールすると、デフォルトの状態だと記事編集画面がブロックエディター（Gutenberg）となっています。 クラシックエディターに変更する必要がありますので、手順を解説します。 どこのボタンにどんなデザインがあるのかは、『AFFINGER5記事作成用パーツ一覧』の記事にすべて掲載してあります。 これを見ればどんな記事パーツがどこにあるのかがわかりますので参考にどうぞ。 AFFINGER5 アフィンガー 5 の使い方・装飾方法【ブロックエディター（Gutenberg）編】 次に、ブロックエディター（Gutenberg）の使い方を紹介します。 とはいえ、AFFINGER5の推奨はクラシックエディターです。 ブロックエディターだけだと機能が足りないので、適宜クラシックエディターをミックスさせて記事を書いていく必要があります。 ここではその方法を紹介します。 プラグイン『TinyMCE Advanced』を導入 プラグイン『TinyMCE Advanced』を有効化していない方は、インストールして有効化しましょう。 TinyMCE Advancedとは、記事の編集画面を拡張するプラグインです。 簡単に言うと、記事装飾のボタンをデフォルトの状態より増やすことができます。 必ず導入しましょう。 ただ、導入後にちょっとした設定が必要なので、こちらの記事のプラグイン導入の章をみて設定してみてください。 クラシックエディターでの記事の書き方・記事の装飾方法 それでは記事装飾の方法を解説します。 一般ブロック ここでは、一般ブロックのよく使う部分だけ紹介します。 また、リストをクリックすると右側サイドメニューに編集画面が表示されるので、アイコンを変えたり、 アンダーラインを引けたりします。 サンプル• サンプル• サンプル• （ブログカードなど） そういった時に部分的にクラシックエディターを出現させることができます。 こんな感じで、クラシックエディターが挿入されます。 クラシックエディターの使い方も覚えなければなりませんので、本記事の【クラシックエディター編】の章を参考にしてみてください。 サンプル STINGER ここでは、STINGERのよく使う部分だけ紹介します。 本記事の吹き出しの設定の部分でも触れていますのでそちらをご覧ください。 右側の編集画面でアイコンの種類や、色、大きさを変更できます。 まとめ：できればブロックエディター（Gutenberg）を使いこなそう！ WordPressより、クラシックエディターは2021年12月31日にサポートが終了すると発表されています。 今後はブロックエディターが主流となると考えられるので、初心者の方でどちらを使うべき？と言う方は、 ブロックエディター（Gutenberg）を使用しましょう。 直感的に作業できるので、とても操作しやすくオススメです。 というわけで今回は以上です！ AFFINGER5のカスタマイズがまだの人は、こちらの記事をどうぞ。

次の

初心者のためのWordPressの基本の書き方・はじめ方

お知らせ 今だけ限定で、当サイトオリジナルの「」を、お得に購入することができます。 本当に役立つ、価値のある「特典」を手に入れて、WING AFFINGER5（アフィンガー5）でブログやウェブサイト作成を有利にスタートさせましょう！ 文字装飾やボックスなど全種類の一覧表はコチラ！ WING AFFINGER5（アフィンガー5）には、デザインをカスタマイズする機能が大きく分けると「スタイル」と「タグ」の全2種類があります。 どちらかと言うと、前回の記事の方が基本的なカスタマイズになるので、先にチェックしておくと良いです。 デザインや会話ふきだしなど全種類の一覧表でまとめてみた！ 「タグ」メニューから選ぶことができる文字装飾は、「デザイン」「レイアウト」「その他パーツ」「会話ふきだし」「webアイコン」「HTMLカラーコード」です。 WING AFFINGER5（アフィンガー5）の文字装飾は、使いこなせないほど種類があるので、一覧表で見比べてみて気に入ったものだけを使用するのがおすすめです。 クリップメモは、「メモ」「おしらせ」「はてな」「コメント」「コード」「ポイント」「ユーザー」「初心者」「注意分」の全9種類です。 使い方は文章で注意を引いて記事にアクセントを付ける時に使うのがおすすめです。 デザイン＞ミニふきだし ミニふきだし ミニふきだし ミニふきだし ミニふきだし ミニふきだし ミニふきだし ミニふきだしは、「基本」「オレンジ」「ピンク」「ブルー」「うすい注意」「注意」の全6種類です。 使い方は『見出しの前』や『注意を引きたい文章の前』がおすすめです。 デザイン＞まるもじ（小） まるもじ（小） まるもじ（小） まるもじ（小） まるもじ（小） まるもじ（小） まるもじ（小） まるもじ（小）は、「基本」「オレンジ」「ピンク」「ブルー」「うすい注意」「注意」の全6種類です。 使い方は『見出しの中』や『注意を引きたい文章の前』がおすすめです。 デザイン＞まるもじ（大） まるもじ（大） まるもじ（大） まるもじ（大） まるもじ（大） まるもじ（大） まるもじ（大） まるもじ（大） まるもじ（大） まるもじ（大）は、「基本」「オレンジ」「ピンク」「ブルー」「はてな」「チェック」「うすい注意」「注意」の全8種類です。 使い方は『見出しの中』や『注意を引きたい文章の前』がおすすめです。 WING AFFINGER5（アフィンガー5）では、カスタムボタンがキラリと光る仕様になっていて、記事の中でも目立つのが特徴です。 スター 「 」「 」「 」 「 」「 」「 」「 」 スターは、「ランキング記事」や「商品を評価する記事」で使うと便利です。 WING AFFINGER5（アフィンガー5）ではランキング機能が充実しているのが特徴です。 参考ランキングへ アドセンス スポンサーリンク WING AFFINGER5（アフィンガー5）で、ビジュアライザーの中の「スタイル」で出来る、カスタマイズの全種類を一覧表でまとめています。 カテゴリーの一覧は、記事の途中でカテゴリーの一覧を表示したい時におすすめです。 こちらも「目次」と同様に、1記事に1か所しか挿入できないので注意してください。 スマホに表示しないボックス テスト スマホに表示しないボックスは、PCにだけ表示をさせたいコンテンツだけに使用するのがおすすめです。 PCに表示しないボックス PCに表示しないボックスは、スマホにだけ表示をさせたいコンテンツだけに使用するのがおすすめです。 会話ふきだし 会話ふきだしは、全8種類登録することができます。 そして更に、WING AFFINGER5（アフィンガー5）からは「動かす」ことや「右は一」が簡単に出来るようになりました。 webアイコン（クラス） webアイコンは「メモ」「チェック」「注意「はてな」「矢印右」「矢印下」「ユーザー」「コメント」「電球」「おしらせ」「ギフト」「ダイヤモンド」「ダウンロード」「王冠」「初心者」の全15種類です。 ちょっとした注意を引くことができるため、『ミニふきだし』『まるもじ（小）』『まるもじ（大）』に挿入して使用することができます。 HTMLカラーコード HTMLカラーコードは、「赤 f44336」「赤薄 ffebee」「青濃 039BE5」「青 03A9F4」「青薄 E1F5FE」「緑濃 43A047」「緑 4CAF50」「緑薄 E8F5E9」「橙濃 FFB300」「橙 FFC107」「橙薄 FFF3E0」「黒濃 212121」「黒 424242」「黒薄 FAFAFA」「黄薄 FFFDE7」の全15種類です。 WING AFFINGER5（アフィンガー5）のデザインまとめ WING AFFINGER5（アフィンガー5）の『デザイン』や『会話ふきだし』など全種類を一覧表でまとめてみました。 CSSなど難しいカスタマイズをせずに、これだけの機能が充実しているwordpressテーマは、それほどありません。 使いこなせないほど充実していますが、あなたのサイトに合ったものを選んで、楽しんで記事を書いてみてくださいね！.

次の

AFFINGER5(WING)の使い方＆カスタマイズ設定。注意ポイントも【動画解説】

カラー設定の変更ができない 初心者が、まず一番最初につまづくのはカラー設定です。 アフィンガー5のサイトカラーを変更するためには手順があります。 そのため、この手順に沿わないと、まったく色が反映されないのです。 まずは、ダッシュボードの【AFFINGER5管理】から、【AFFINGER5管理】をクリックします。 【はじめに】というタブを選択し、【保存】を1回クリックします。 それから、【外観】の【カスタマイズ】に移動。 【全体カラー設定】を選択し、『簡易設定を使用する』をご覧ください。 ここで一度、【 1 全体的に反映】を選択して、【公開】ボタンを押してください。 そして、【 3 初期値として設定】を選択し、『Color Palette』で好みの色を選びます。 この手順を踏まないと、サイト内のカラーは変更できないので注意しましょう。 見出しのデザインが分からない 見出しとはhタグと呼ばれている部分です。 見出しは、読者がひと目で分かるデザインにしましょう。 なぜなら、記事の目印となる箇所だからです。 見出しのデザイン変更自体は難しくありません。 ただし、こちらもカラー設定で戸惑う場面があります。 見出しのデザインは【外観】の【カスタマイズ】より行います。 【各テキストとhタグ（見出し）】をクリックします。 H2～H5まで、それぞれタグのデザインは変更できます。 そのため、見出しの種類ごとにデザインは変更したほうが良いでしょう。 そして、見出しのカラー変更ができない場合の対処法についてです。 【全体カラー設定】の【 1 全体的に反映】もしくは 【 3 初期値として設定】のどちらかにチェックがついているはずです。 現在、選択している方と反対にチェックを入れて【公開】します。 そして、【各テキストとhタグ（見出し）】にもどってカラー設定をしましょう。 このカラー設定は非常に複雑で、【全体カラー設定】のチェック箇所を試しながら調整してください。 サムネイルが異常にデカくなる サムネイル画像表示の大きさについてのトラブルです。 トップページのサムネイルが大きすぎるときがあります。 サムネイルが大きいと、画像の粗さが目立ってしまい印象が良くありません。 ですから、最小限の大きさで良いでしょう。 サムネイルの調整は【AFFINGER5管理】から、【AFFINGER5管理】をクリックします。 【デザイン】を選択し、『サムネイル画像設定』をご覧ください。 必要以上にサムネイルが大きい場合、こちらにチェックが入っている可能性が高いです。 プロフィールが表示されない 記事数が多くなってくると、ブログのファンが増えてきます。 そんな読者にアピールする必要があります。 そこで、あなたのプロフィールを作成しましょう。 やり方は、まず【固定ページ】から【新規追加】をクリックします。 タイトルは『〇〇のプロフィール』などにします。 あとは記事本文にあなたの経歴やPRを記載します。 プロフィールが記載できたら【更新】しましょう。 このときに固定ページのURLをメモ帳などにコピーしておきます。 そして、【ユーザー】から、【あなたのプロフィール】を選択します。 『連絡先情報』の『ニックネーム』にあなたの名前を記載し、 『サイト』に先ほどコピーしたプロフィールページのURLを貼り付けます。 そして、『プロフィール情報』にあなたのカンタンな紹介を記載します。 完了したら、【プロフィールを更新】しましょう。 『この記事を書いた人』が表示されない プロフィールは、『この記事を書いた人』というタイトルで表示されます。 しかし、このままの設定ではサイト内に表示されません。 各記事で表示させる設定が必要になります。 まずは【AFFINGER5管理】から、【投稿・固定記事設定】をクリックします。 【「この記事を書いた人」を有効化する】にチェックを入れて【save】すれば完了です。 会話風アイコンができない アフィンガー5では、マンガ風の吹き出しアイコンが設定できます。 記事を会話風にすれば、読者がより読みやすくなるのでオススメです。 やり方は、【AFFINGER5管理】から、【会話・ファビコン等】をクリックします。 『会話風アイコン』の項目があり、１～８まで設定が可能です。 アイコン名に吹き出し人物の名前を入れます。 画像のURLもしくは、アップロードから画像を選び【保存】します。 このとき、100px以上の正方形画像が推奨されているので注意してください。 あとは、記事内で吹き出しのセリフを記載してドラッグで選択します。 『タグ』から、『会話ふきだし』をクリックして、該当する番号を選びます。 これで、会話風アイコンが完成です。 SNSボタンの設定が分からない アフィンガー5では、記事の上下にSNSのシェアボタンを設定できます。 記事内容が良ければ、読者にシェアしてもらうためにあります。 SNSボタンについては、デザイン変更や削除することも可能です。 【AFFINGER5管理】から【SNS】を選択します。 SNSボタンに丸みをつけたり、投稿ページや固定ページなど表示させる場所も選べます。 SNSボタンを表示させたくない場合は『非常設定』にチェックを入れてください。 まとめ アフィンガー5は人気の高いWordPressテーマです。 しかし、機能が豊富すぎるため、設定難易度が高いのがデメリットです。 そのため、ネット初心者は初期設定でつまづいてしまうのです。 でも一度、設定さえすればデザインが整っているため満足度の高いテーマです。 まだWordPressテーマを購入していない方は選択肢のひとつに入れてみてください。 アフィンガー5のインストールと初期設定についてはこちらです。 それでは、また！.

次の