Note

【初心者】AFFINGER5!ウィジェットのデザインカスタマイズ法

2020年9月11日

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

・AFFINGER5のウィジェット設定が分からないぞ!

・ボタンの配置とか、手順が知りたい!

・このウィジェットの使い方は?

今回は、こんな声に応えていきます。私はCocoon3ヶ月、AFFINGER5は2週間程度で当記事を書いています。

初心者目線、新鮮さなども考慮して解説していきますので参考にどうぞ!

本記事の内容について

・ウィジェットエリアについて

・ウィジェット設定について

・コードの意味などについて

WordPressテーマ 「WING(AFFINGER5)」

ウィジェットエリアについて

最初にウィジェットエリアについて説明します!

薄めの灰色部分に「ウィジェット」として、コンテンツなどを挿入していきます。

設定画面

・WordPress管理画面>外観>ウィジェット

・WordPress管理画面(or ページ)>カスタマイズ>ウィジェット

初期設定

AFFINGER5管理画面>その他で、以下の「ウィジェットにショートコードを使用する」にチェックすると便利です。

タイトルは個別でも設定できます。お好みでどうぞ。


今回は、管理画面>外観>ウィジェットを見てみましょう。

量が多くて何のこっちゃ!

トップページ画面

赤枠部分から説明していきます。

トップページ画面周囲の設定はざっくりですけど上図のイメージ!

デザイン設定などで多少変わります。

サイドバーウィジェット

サイドバーを左に変更したい方はコチラを参照してください!

「サイドバートップ」で意識して並べていれば、特に「サイドバー」と大きな違いは無さそうです。

「スクロール広告用」は、PC閲覧時に追尾してきます。厳密に言うと、サイドバーの一番下ですね。記事などで内部リンクを行う際に有効です。

ここにアドセンス広告を貼るのは禁止です。

AFFINGER5管理画面>その他>PC閲覧時にサイドバーの最下部広告エリアをスクロール追尾しないにチェックすると追尾しません。

設定について

当サイトは以下の様に設定しています。

オリジナルボタン

任意のアイコンアニメーションを設定して、タイトルとURL、色を設定するだけです。

クリックすると詳細に飛びます。

Profile

基本設定:WordPress管理画面>ユーザー>プロフィールで行います。

カスタマイズ>オプションカラー>サイト管理者紹介(プロフィールカード)で追加設定ができます。

任意の言葉(Follow me!)を入れるには?

step
1
WordPress管理画面>外観>テーマエディタ

step
2
WING-AFFINGER5>st-author-master-profile.php

step
3
「<div class="sns">」の上段に「<p class="follow">〇〇〇</p>」を挿入する

〇〇〇を改変してください!エディタを触るので、backup推奨・自己責任で御願いします。

広告

HTML形式、フリーボックス形式などで設定できます。フリーボックスは見出しがトピック風です。

ボックスメニューボタンにするには?

ボックスメニューボタンの作り方はコチラです!

カスタマイズ>メニューのカラー設定>ボックスメニューで追加設定ができます。

ウィジェットを挿入すると、画像2枚目の右端(3記事x2)のところに表示されます。カテゴリー、記事、その他HTMLなどでカスタマイズできます。人気記事や紹介したい概要など、お好みで入れましょう。

ヘッダーウィジェット

「ヘッダー右(フッター)」詳細設定:AFFINGER5管理画面>ヘッダー>H ヘッダー設定

画像の「ヘッダーを分割しない」のチェックを外しておくと表示されます。また、電話番号を入力すると同じ箇所に表示でき、クリックで電話を掛けられます。フッターの表示設定は、画像一番下の「ヘッダー右ウィジェットをフッターに表示しない」にチェックをすると表示されなくなります。

分割しないにチェックするとロゴが結構大きくなります。


その他の「ヘッダー」、「トップページ上部」などは下の画像の通りです。

カードの設定について

AFFINGER5管理画面>おすすめ記事一覧>おすすめヘッダーカードで、画像の項目に従って設定していけば簡単にできます!

「ヘッダー右(フッター)」は先程説明した通りです。他の2種類に関しても、画像の通りです。

「トップページ下部」は、フッターの直上に表示されます。

「広告・Googleアドセンス(A・B・スマホ)」について

左右に分割させて表示させたいんだけど?

step
1
AFFINGER5管理画面>投稿・固定記事>PC閲覧時に記事下のアドセンス広告を横並びにする ※「PC閲覧時のサイトの幅」を1114px以上に設定して下さい、にチェックをします。

記載通り幅が1114px以上にします。

(AFFINGER5管理画面>デザイン>サイト全体の設定>サイト全体のレイアウト一括設定)

step
2
Googleアドセンス>広告>広告ユニットごと>ディスプレイ広告>広告サイズ固定>サイズ調整(当サイトは336x250px)

step
3
同じ要領で2つ目を作る

step
4
コードをコピーし、A・BにHTMLで貼り付ける

step
5
A・BはPC用なので、スマホ用にも貼り付ける

336pxを越えても表示されます。Googleの規定では以下になってます。

・450pxを超えて良いのは高さか幅のどちらか一方のみ

・最小幅は120px、最小高さは50px

・高さと幅のどちらも1200pxまで

スライドメニュー画面

次はピンク枠を説明していきます。

画面

左:虫メガネが検索メニュー

右:三本線がスライドメニュー

中央のボタンは以下の画像2枚目で2つまで設定できます。

AFFINGER5管理画面>メニュー>スマホ用スライドメニューで以下を設定できます。

クール:細くなる

カット:図参照

スライドメニュー

私のサイトの場合、ヘッダーメニューが「Welcome~」になっていて、その上下でエリアが分かれます。

上:「スライドメニュー内上に表示」

下:「スライドメニュー内上に表示」

スマートフォンだと、このメニューにサイドバーが表示されるので、同じように設定しています。

検索メニュー

「スライドメニュー(検索)に表示」:私が試した限りでは、ウィジェットを挿入する代わりに検索ができなくなるので使っていません。

その他

最後に、青矢印を説明していきます。

広告・Googleインフィード広告

AFFINGER5管理画面>Google・広告/AMP>インフィード広告の設定

「広告・Googleインフィード広告」にHTMLなどでコードを挿入していきます。

右の画像は関連記事の部分です(数値は「3」です)。ディスプレイ広告などでも表示可能です。アドセンスの作成方法は前述したコチラを参考にしてください。

オリジナルのショートコード作成ウィジェット

[ originalsc ](タグ>その他パーツ>オリジナルショートコード)で任意のテンプレートを挿入できます。地味に便利ですが、「ステ子」を持っていると要らない子かな?

404ページ

エラーで404ページに飛んだ場合に、任意の画像などを表示できます。広告は控えた方が良いと思います。

STINGER専用ウィジェットについて

違いが分かり辛そうなウィジェットだけ、分かる範囲で説明していきます!

カスタムHTML

・題名を入れて非表示にできます。

カテゴリ別ボックス

・コンテンツ内で、指定したカテゴリーにだけテキスト、記事、その他色々と設定できます。例えば「1」、「2」、「3」、「4」にカテゴリーIDを持っていた場合に「1,2」と入力すると「1」、「2」に分類される投稿記事を開いた際にのみ表示されます。

記事別ボックス

カテゴリ別の記事IDバージョンです。

ガイドマップメニュー

「WordPress管理画面>外観>メニュー」で作成したテンプレートを挿入します。

今回は以上になります。参考になれば幸いです。お勧めの記事などを以下に貼っています。疑問・質問・要望などは「Twitter」・「Mail」までお気軽にどうぞ^^v

Medical

2021/7/21

【医療学生】iPad・タブレット・アプリなどを活かした図解ノート作成方法について

iPadを使っているんだけど、良いノートのまとめ方は無いかな? 今回は、こんな声に応えていきます。 当記事で分かること iPad活用術 目次 iPad ...

Medical

2021/7/20

糖新生とは?ダイエット・筋肉・アミノ酸・肝臓・血糖値などとの関係について

糖新生って何のこと? 今回は、こんな声に応えていきます。 当記事で分かること 糖新生とは アミノ酸・グリセロールって? 肝臓での代謝について 筋肉・血 ...

Medical

2021/7/16

【PLR】プロラクチンとは?男性・女性・作用などについて簡単に解説します

プロラクチンって男性にも出るの? 今回は、こんな声に応えていきます。 当記事で分かること PLR・プロラクチンとは 作用・男女差について 目次 プロラ ...

Medical

2021/7/16

【GH】成長ホルモンとは?分泌部位・過程・時間・作用・疾患について解説します

成長ホルモンって、どんな作用を持つの? 今回は、こんな声に応えていきます。 当記事で分かること 成長ホルモンとは 分泌部位・時間帯・作用について 疾患 ...

Money

2021/5/27

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

失業手当って幾ら貰えるの?雇用保険って何?看護師も貰える? 今回は、こんな声に応えていきます。受け取り方やタイミングを間違えると損になってしまうので気を付けましょう。 こう言った社会保障制度については大して習わないので、疎い人も多いです。私もその中の一人でした。世の中の仕組みを学ぶのは人生を楽にする為にも大事です! 当記事で分かること 雇用保険・失業手当とは 受給資格について 看護師も受け取れるの? 金額と経験談について 目次 雇用保険・失業手当とは対象者受給資格給付日数給付金額申請方法アルバイト等認定日 ...

Money

2021/5/27

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

派遣看護師って、どんな働き方なの? 今回は、こんな声に応えていきます。 派遣看護師との違いって、施設に雇われていると実感が湧かず、よく分からないですよね。 今回は派遣のメリットやデメリットを解説していくので、今の働き方に疑問を持っている人は参考にして、解決の糸口にしてくださいね! 本記事の内容について 派遣看護師とは 労働可能な条件とは メリット・デメリット お勧めな使い方について 目次 1.派遣看護師の仕組みについて>労働条件>勤務先制限>継続勤務制限>保険・給料・待遇2.派遣看護師のメリット・デメリッ ...

Money

2021/5/27

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

看護師の副業は何が良いの?ブログって良いの?看護学生でも出来るって本当? 今回は、こんな声に応えていきます。 その前に副業が可能なのかと、心構えについてコチラの記事で説明しています。 この記事では、看護学生や看護師をしながら副業をしたい人に勧める4つのコンテンツを紹介します。私は株式、投機、アフィリエイト、デジタルコンテンツ販売、YouTube、フリマアプリなどの経験を持っています。 また、ブログのメリットやデメリット、適性などを細かく解説します。この記事を参考に、自分の性格に合った副業を選びましょう。 ...

Money

2021/5/27

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

心身辛くて・・・。看護師って副業して良いの?何に気を付ければ良い?看護学生は可能なの? 今回は、こんな声に応えていきます。 大前提として「肉体労働を減 ...

WordPressテーマ 「WING(AFFINGER5)」

  • 執筆者
  • 最新記事

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

-Note
-,

© 2021 Liberal Nurse