その他

WING(アフィンガー5)のショートコード便利帳 ver.20200414

こんにちは、ひかぱんです。

こちらのブログは、「アフィンガー5」という有料のWordpressテーマを使っています。正直なところ、有料テーマなど買わずとも、無料プラグインを駆使して同等のサイトを構築できるんですが、騙されたつもりで買ってみました。それでも使い続けているので、値段なりの価値はあったのでしょう。

詳しくはコチラ

例えば、上記のようなボタンが一発で設置できます。これをCSSでやるとなると、サンプルコードをネットで探し、CSSファイルを編集する必要があります。

前置きはさておき、こちらのページは自分のための便利帳として、アフィンガー5のショートコードを分類整理してみました。役に立ちそうであればブックマークして使ってください。全てのショートコードを網羅するのは不毛なので、使用頻度の高そうなものに絞っています。その点はご注意を。

目次

テキストパーツ

「テキストパーツ」では、ショートコードで囲んだ部分のテキストを、吹き出しにしたり、テキストボックス風にアレンジできます。

おそらく、affingerのショートコードの中では使用場面が一番多いと思います。

クリップメモ

アイコン付きのシンプルなテキストボックスです。

12種類ありますが、それぞれの違いはアイコンと背景色だけです。パラメータをいじることで、アイコン種類(fontawesome)や背景色などを自由に変更できます。

メモ

これがデフォルトです。

ここにテキストを入力

パラメータで背景色をブルーにしてみました。

ここにテキストを入力

注意文

注意文はデフォルトのままで使い勝手が良さそう。

ここにテキストを入力

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

次に「クリップメモ(テキスト)」です。

クリップメモ(テキスト)は、アイコンの下にキャプション(説明)のついたテキストボックスです。上述した「クリップメモ」より縦幅がやや太いので、複数行書きたいときに便利。

こちらも、パラメータをいじることで、アイコン種類(fontawesome)や背景色などを自由に変更できます。

Check

ここにテキストを入力

質問

ここにテキストを入力

ミニふきだし

アクセントに便利な吹き出し。

デフォルトのカラーは基本色(グレー)を含め6パターンです。

パラメータをいじることで、カラーのほか、余白、角丸、吹き出しの位置(▼部分を中央にできる)、div要素にclass付与などの調整が可能です。

同じものをCSSで実現しようとすると、吹き出し位置(▼部分)の調整が非常に難しいです。ブログテーマ本体のCSSにもいろいろ影響されるため、複数サイトでコードを使いまわしできない難点もあります。ここはショートコードを使うのがオススメです。

レッド

デフォルト色ではレッドが使いやすいですね。

ここにテキストを入力

マイボックス

「マイボックス」は、吹き出し付きのテキストボックスです。

パラメータでいろいろいじれますが、あまり使用場面は多くないでしょうね。

ふきだしテキスト

ここにテキストを入力

複合

上述のクリップメモに吹き出しを付けた感じ。「複合」じゃ分からん。

自由なメモ

悪くはないけど、上述の「クリップメモ(テキスト)」のほうが良い?

自由なメモ

ここにテキストを入力

複合(アイコンなし)

上述の「複合」からアイコンを省いた感じ。使用場面は少ないかな。

ココがポイント

なんかバランス悪いな。

ココがポイント

ここにテキストを入力

まるもじ(小)

ボタンとかに便利そうな角丸のテキストボックス。

パラメータで背景色をいじれますが、デフォルトで6色あります。

基本

アフィンガーでは「基本」というのはグレーの意味らしい。

ここにテキストを入力

まるもじ(大)

上述のまるもじ(小)にアイコンと太字を足した感じですかね。

うすい注意

便利そうではあるが、「うすい注意」というショートコード名が分かりづらい。

ここにテキストを入力

注意

「うすい注意」との違いが気になったのでご参考まで。

ここにテキストを入力

HTML(カスタム)

おそらくHTML5を使った?ショートコード。個人的に、できれば使いたくない。

ルビ

文字通りのルビですね。WEBで使うかなあ。

檸檬れもん

Pタグ

以下のショートコードでP要素にスタイルを設定できるようです。使わないですね。

[st-p add_style=””]ここにテキストを入力[/st-p]

SPANタグ

同じくショートコードでテキストにSPANタグを設定できるようです。

[st-span add_style=””]ここにテキストを入力[/st-span]

カスタムフォント

パラメータで、テキストの大きさ・太さ・色だけでなく、影付き、アイコン、ウェブフォント、余白を設定できます。

設定によってはボタンも作れますが、デフォルトの状態からパラメータをいじるのは面倒ですね。したがって、ほぼ使用場面は無いと思います。

ちなみに、CSS的にはブロック要素のため、インライン(文章の途中)では使えません。

デフォルト

初期状態では以下のフォントになります。ここからパラメータをいじります。

これがデフォルトです

ステップ

手順を示したいときに便利なショートコード。これを自作CSSでやると沼にハマります。

step
1
お湯をかける

容器に熱湯を注ぎます

step
2
フタを閉める

容器をフタで密閉します

step
3
3分待つ

時計で3分はかります

ポイント

要点を強調したいときに便利かも。

パラメータで、フォントの大きさ・太さ、ボーダー色を変更可。

ここにテキストを入力

ラベル

画像の左上にラベル(リボン)を付ける。

パラメータで、文字、文字色、背景色を変更できる。

おすすめ

流れる文字

昔のホームページにあったやつ。

ここにテキストを入力

以上でテキストパーツは終わり。

ボックスデザイン

ショートコード一発で、見栄えのするテキストボックスが作れます。

個人的には「マイボックス」がおすすめです。

バナー風ボックス

パラメータで色関係、縦横幅、角丸など設定できるけど、使い所が微妙。

基本

こちらの「基本」の他に、「背景無し」と「左寄せ」のパターンあり。これは不要かと。

タイトル

ここにテキストを入力

マイボックス

ショートコード一発でテキストボックスを作れます。

affingerのショートコードの中では一二を争うほど使用頻度が高いので、以下に全種類を列挙します。

基本

アイコン+見出し付きのシンプルなテキストボックスです。

もちろん、アイコン、色関係、テキスト、角丸などもパラメータで変更可能です。

同じことをCSSで実現しようとすると、実は非常に難しいです

ポイント

ここにテキストを入力

枠のみ

ここにテキストを入力

まるみ

ここにテキストを入力

参考

参考

ここにテキストを入力

関連

関連

ここにテキストを入力

メモ

メモ

ここにテキストを入力

ポイント

そのまま使えますね。

ポイント

ここにテキストを入力

注意ポイント

使用場面が多そう。

注意ポイント

ここにテキストを入力

はてな

こちらも便利そう。

はてな

ここにテキストを入力

+ミニふきだし

吹き出しとセットのパターン。これは要らない。

ふきだしテキスト

ここにテキストを入力

ショートコード

上述の「テキストボックス」と何が違う?

ここにテキストを入力

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

上述の「マイボックス」の見出しをテキストボックス内に埋没させたパターン。

こちらはパラメータでclassを追加することも可能。

基本

悪くないんだけど、デフォルトの色違いパターンが少ないので、使うたびにパラメータをいじるのが面倒かなという印象。

メモ

ここにテキストを入力

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

箇条書きのパターンです。

必要なモノ

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

簡単な流れ

番号付きリストのパターンです。

簡単な流れ

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

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

ボックス内に見出しを埋め込んだテキストボックス。

注意

アイコンの点灯がうるさいけど、パラメータで変更可。

注意

ここにテキストを入力

注意(タイトル幅100%)

見出しを横幅100%にした「タイトル幅100%」のほうが、個人的には好みです。

デフォルトではアイコンが点滅しますが、パラメータで点灯をオフにしています。

注意

ここにテキストを入力

メモボックス

上述の「マイボックス」との違いが不明。

パラメータによる各種変更はできません。

メモ

ここにテキストを入力

スライドボックス

シンプルなアコーディオンボックス。

クリックするとテキストボックスが開きます。

+ クリックして下さい

ここにテキストを入力

ここにテキストを入力

ここにテキストを入力

パラメータでアイコンと背景色を付けてみました。

クリックして下さい

ここにテキストを入力

ここにテキストを入力

ここにテキストを入力

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

これ要る?

ここにテキストを入力

こんな人におすすめ(V)

箇条書きのリスト。

上述の「マイボックス(+CSS)」にも似たようなのがあったけどご愛嬌。

なお、パラメータによる各種変更はできません。

こんな方におすすめ

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

こんな人におすすめ[V]

こちらはリストマークがチェックボックス風。

こんな方におすすめ

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

pre

上述の「見出しつきフリーボックス」と見た目は同じですが、内部で<pre></pre>が効いているため、コードがコードのまま表示されます。

 html
[st-midasibox-intitle title="注意" fontawesome="fa-exclamation-circle" bordercolor="#f44336" color="" bgcolor="#ffebee" borderwidth="" borderradius="5" titleweight="bold"]
ショートコードがそのまま出力されています
[/st-midasibox-intitle]

pre(terminal)

背景が黒のパターン。アイコンやテキストはパラメータでいじれます。

 command
[st-midasibox-intitle title="注意" fontawesome="fa-exclamation-circle" bordercolor="#f44336" color="" bgcolor="#ffebee" borderwidth="" borderradius="5" titleweight="bold"]
ショートコードがそのまま出力されています
[/st-midasibox-intitle]

pre(shortcode)

背景が薄墨のパターン。

[/] shortcode
[st-midasibox-intitle title="注意" fontawesome="fa-exclamation-circle" bordercolor="#f44336" color="" bgcolor="#ffebee" borderwidth="" borderradius="5" titleweight="bold"]
ショートコードがそのまま出力されています
[/st-midasibox-intitle]

ボックスデザインはここまで。

カスタムボタン

LPとかでボタンが欲しいときに便利ですね。

ただ、記事中で多用するなら、万一の引っ越しに備えてCSSで実現したほうが良さそう。

ノーマル

アフィサイトっぽいボタンです。

マウスオーバーで色が変わります。

基本

これは使わないかな。

ボタン

詳しくはコチラ

デフォルトでは、オレンジ・レッド・グリーン・ブルーの4色。

詳しくはコチラ

光る演出が不要なら、パラメータでオフにできます。

詳しくはコチラ

お問合せ

問合せボタン。横幅はパラメータで変更可。

お問合せ

もっと詳しく

デフォルトでは、オレンジ・ピンク・ブルーの3色。

デフォルト色はパステル系で、ボタンとしては使いづらい?(パラメータで変更可)

もっと詳しく

もっと詳しく

人気ランキング

アイコン付きのパターン。

アイコンは上述の「詳しくはコチラ」でもパラメータをいじれば付けられます。

人気ランキング

ランキングはコチラ

要らないでしょ。

ランキングはコチラ

角丸

ボーダーで囲ったシンプルなボタン。マウスオーバーで色が変わります。

基本

アフィンガーでは「基本」は、基本色(グレー)という意味らしい。

角丸ボタン

詳しくはコチラ

デフォルトでは、オレンジ・レッド・グリーン・ブルーの4色あります。

角丸ボタン

ミニ

こちらは小さいサイズのボタン。見た目も控えめ。

基本

shadow以外の装飾が無い、シンプルなボタン。

ボタン

パラメータで光る演出も可能です。

ボタン

詳しくはコチラ

テキストの右側にアイコン(>)を付けたパターンデフォルトでは、オレンジ・レッド・グリーン・ブルーの4色あります。

便利そうですが、記事中で多用するならCSSで実現したいですね。

詳しくはコチラ 詳しくはコチラ

ブロックではない(インライン)らしく、横並びができます。

MCボタン

アフィサイトでそのまま使えそうなボタン。

デフォルトでは、オレンジ・レッド・グリーン・ブルーの4色あります。

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

ボックスメニュー

用途がハマれば便利そう。

これを自作でやろうとすると、tableやCSSの調整で軽く30分は費やします。

基本(4列)

こちらがデフォルト。ワードプレスのアイコンは、画像ではなくfontawesomeです。

パラメータでPC表示での列数を指定できます。下は2×2列の例。

もちろん、ボックスの数を増減させることも可能です。

サブあり(4列)

縦並びタイプ

縦並びタイプ(サブあり)

縦並びタイプ(単品)

ボタンA

パラメータでの各種変更はできません。このまま使うタイプです。

 

ボタンB

パラメータでの各種変更はできません。このまま使うタイプです。

前のページに戻る

これはCSSでやるのが普通では?要らない。

パラメータでアイコンのみ変更可。

カスタムボタンは以上です。

会話ふきだし

有料テーマらしいショートコード。

アフィンガーの管理画面で、画像を8つまで設定可能。8つで足りなければ有料プラグイン(税込み2,980円)あり。

ここにテキストを入力

ショートコードの末尾に「半角スペース+r」を加えると、逆向きになります。

ここにテキストを入力

ランキング

hタグ無しの見出し。

いかにもアフィサイトな見た目がイマイチ。

ここにテキストを入力

ここにテキストを入力

ここにテキストを入力

ここにテキストを入力

レイアウト

段組みやdiv要素などに関するショートコードです。

あえてショートコードを使う必要を感じません。

全サイズ

「全サイズ」というのは、どの画面サイズでも使えるという意味(分かりづらいなあ)。

ボヤキはさておき、こちらのショートコードを使うと、好きな場所で段組みができます。

かつては便利だったのかもしれませんが、いまや新エディタ(グーテンベルク)で同じことができますからね。役目を終えた感じだと思います。

左右30:70%

左右で段組み。

このほか、横幅の比率が異なる3パターンあり。

このテキストは最後に消して下さい(30%)

このテキストは最後に消して下さい(70%)

PCとTab(959px以上)

「PCとTab」とは、PCとタブレットで使えるという意味(分かりづらいなあ)。

3分割

こちらも左右で段組み。他にも5パターンあり。

このテキストは最後に消して下さい(33%)

このテキストは最後に消して下さい(33%)

このテキストは最後に消して下さい(33%)

DIV

DIV要素で囲んでclassを設定できる。

意地でもHTML編集したくない人向けのショートコード?

メイン

classを設定しないと、ただのテキスト行です。

ここにテキストを入力

サブ

上述の「メイン」との違いが不明。使わないので調べません。

ここにテキストを入力

背景ワイド

見出しや仕切り線の代わりにも使えそう。

パラメータで、背景に画像を指定できるほか、class、style、背景色の設定も可能です。

ここにテキストを入力

ここにテキストを入力

タブ(切り替えボタン)

タブをクリックすると、コンテンツが切り替わります。

メーカーの製品ページとかでよく使われるけど、視認性に欠けるためSEO的には不向きか?

4つ

デフォルトでは、タブは2つから4つの3種類あり。






タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ

タブ4のコンテンツ


タブ

上述の「タブ(切り替えボタン)」の亜種ですね。

3つ

デフォルトでは、タブは2つか3つの2種類のみ。





タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ


タイムライン

アフィンガーに唯一欠けていたタイムラインが登場(2020.3.27β update)。

カスタマイザーを設定することで、リストマークを番号表示したり、classに”now”を設定した箇所だけ色変えや点滅させることも可能です。

詳しくはアフィンガー公式にて。

基本

こちらが基本パターン。


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


なお、「基本」以外のパターンは以下のとおりです。これらはパラメータでいじれる内容なので、「基本」をベースに加工すればいいでしょう。

「センター」:テキストの縦位置をやや中央寄せにします。

「(ステップ)」:見出しのテキストを「step.◯」にします。

ブログカード

公式によると「記事を読んで欲しい時系列で並べるデザイン」とのこと。使うかな?

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

リストマークを番号表示にしたバージョン。より手順っぽく見えますね。

基本

こちらの「基本」以外に、「センター」と「ブログカード」のパターンがあります。


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


table

ビジュアルエディタでtableタグが書けるのは便利(HTML編集と切り替えなくていいので)。

table(シンプル)

デフォルトでは1×1。





テキスト

ビジュアルエディタ上で、簡単に行と列を増やせます。










テキストテキスト
テキストテキスト

table(属性あり)

こちらは、パラメータでテーブル幅、列幅、ボーダー色、テキストスタイルを調整可。

それ以上に複雑なことはHTML編集するしかありません。






テキストテキスト

ワイドデザイン forEX

使い方が不明。

公式にも使用例が見当たらないので、どなたか知ってたら教えて下さい。

その他のパーツ

全般的に要らないかな。以上!

Googleアイコン

Googleデザインのアイコンをショートコードで貼れます。まあ使わないでしょう。

desktop_macphone_iphonetablet_mactimerlocation_ondirections_bikedirections_rundirections_cardirections_transit

スター

テキスト(★)で打ち込んだ方が早い。

ちなみに、下の星4.5をCSSでやると意外に難しい。

星5

星4.5

星1

カウントダウン

文字通りのカウントダウン。よく使い方が分からないけど、使わないので問題無い。

--時間---

年月(自動更新)

本日の年月を表示。何に使うのだろう。

2020年8月

画像付きコメント

アフィサイトで使うのかな。使い方もよく分からない。

画像(60×60)

タイトル

◯代男性

アドセンス

使い方が不明だし、たぶん使わない。

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

これも使い方が不明。専用のプラグインを使った方が幸せになれそう。

YouTube

動画IDを指定してYouTubeを貼れる。

こちらのショートコードにはパラメータによる設定変更が無いので、YouTube公式からスニペットを貼り付けたほうが手軽で多機能。

三角(下矢印)

仕切り線みたいに使うのかな?テキストで打った方が早そうだけど。

スクロールナビ

何に使うのだろう?

目次(カスタム)

手動で加工する目次です。

目次(TOC+)

冒頭の自動目次(Table of Contents Plus)を好きな位置に挿入できます。

記事一覧/カード

記事一覧をショートコードで挿入できます。

固定ページでトップページを作っている人とかには便利でしょう。

カテゴリ一覧

パラメータで、カテゴリーID、表示数、昇順・降順、スライドショーなどを指定可能。

WordPressを覚えたての頃、同じことをしようとテーマファイルをいじるのに半日かかりました。

2020’辛口比較【なんでも炭酸化】炭酸水メーカー全11製品の比較と選び方

こんにちは、ひかぱんです。 今日は、健康や美容に大人気の「炭酸水メーカー」について、ベストバイを検証してまいります。 炭酸水メーカーと言えば、圧倒的な知名度を誇る「ソーダストリーム」が有名ですが、水以 …

2020’辛口評価【象印で決まり】ホットプレート全26製品の比較と選び方

こんにちは、ひかぱんです。 今回は、ホットプレートの主要メーカー6社から、ベストバイを検証していきます。 こちら、ホームパーティーや週末のパパ料理に大活躍の調理家電ですが、「ドンキで買ってしまった(笑 …

WING(アフィンガー5)のショートコード便利帳 ver.20200414

こんにちは、ひかぱんです。 こちらのブログは、「アフィンガー5」という有料のWordpressテーマを使っています。正直なところ、有料テーマなど買わずとも、無料プラグインを駆使して同等のサイトを構築で …

カテゴリ一覧のほかに、「記事一覧」と「タグ一覧」があります。見た目はこれと同じです。

なお、「カテゴリ一覧(読込)」と「タグ一覧(読込)」については、自分の環境では「カテゴリ一覧」と「タグ一覧」との違いが分かりませんでした。

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

カテゴリ一覧とタグ一覧はスライドショーにもできます。

2020/8/10

2020’辛口比較【なんでも炭酸化】炭酸水メーカー全11製品の比較と選び方

こんにちは、ひかぱんです。 今日は、健康や美容に大人気の「炭酸水メーカー」について、ベストバイを検証してまいります。 炭酸水メーカーと言えば、圧倒的な知名度を誇る「ソーダストリーム」が有名ですが、水以外の飲み物を炭酸化できる多機能モデルなど、購入前の比較検討が欠かせません。 結論から言うと、水以外も炭酸化できる高性能と、炭酸強度の強さから、ドリンクメイト社の「マグナムグランド」を猛烈にオススメします。特に、ガスシリンダー式で水以外の液体に炭酸を直接注入できるのはドリンクメイト社製品だけなので、わりと指名買 …

ReadMore

2020/8/9

2020’辛口評価【象印で決まり】ホットプレート全26製品の比較と選び方

こんにちは、ひかぱんです。 今回は、ホットプレートの主要メーカー6社から、ベストバイを検証していきます。 こちら、ホームパーティーや週末のパパ料理に大活躍の調理家電ですが、「ドンキで買ってしまった(笑」という声も耳にしますよね。この記事を読んでいただければ、必ず、ホットプレートのベストバイに出会えるハズですよ。 結論から言うと、ホットプレートは象印とタイガーの独占状態にあり、業界最大手でラインナップも豊富な象印を猛烈にオススメします。筆者も象印の「やきやき」を愛用していますが、プレート性能の良さは、値段な …

ReadMore

2020/7/6

WING(アフィンガー5)のショートコード便利帳 ver.20200414

こんにちは、ひかぱんです。 こちらのブログは、「アフィンガー5」という有料のWordpressテーマを使っています。正直なところ、有料テーマなど買わずとも、無料プラグインを駆使して同等のサイトを構築できるんですが、騙されたつもりで買ってみました。それでも使い続けているので、値段なりの価値はあったのでしょう。 詳しくはコチラ 例えば、上記のようなボタンが一発で設置できます。これをCSSでやるとなると、サンプルコードをネットで探し、CSSファイルを編集する必要があります。 前置きはさておき、こちらのページは自 …

ReadMore

2020/4/27

2019年版 SDXCカード比較【安くて速い】主要メーカー7社からベストバイを選ぼう

今回は、SDXCカードの主要メーカー7社から、ベストバイを検証していきます。 こちら、Androidスマホやデジカメには必須のメモリーカードですが、「速度表示の意味すら分からずに買ってしまった」という声も耳にします。この記事を読んでいただければ、必ず、SDXCカードのベストバイに出会えるハズですよ。 本記事の推定読了時間は8分です。「そんな長ったらしいレビューは読みたくねえっ」という方は、目次から文末にぶっ飛んでしまってくださいね(滝汗 目次 SDXCカードの選び方7大メーカーの特徴スピード(伝送速度)耐 …

ReadMore

2020/4/19

Anker比較’2019【やっぱり安全第一】モバイルバッテリー全26製品からベストバイを選びました

今回は、Anker製モバイルバッテリー(全26製品)から、ベストバイを検証していきます。 日常生活の必需品とも言えるモバイルバッテリーですが、「なんとなくAmazonでノーブランド品を買ってしまった」という声も耳にします。この記事を読んでいただければ、必ず、Anker製品のベストバイに出会えるハズですよ。 本記事の推定読了時間は4分です。「そんな長ったらしいレビューは読みたくねえっ」という方は、目次から文末にぶっ飛んでしまってくださいね(滝汗 + 今回の比較検討機種はこちら(全26製品) PowerCor …

ReadMore

おすすめ記事一覧

使い方が分かりません。アフィンガーの管理画面で設定が必要?

ブログカード

ブログカードもショートコードで設置できます。

もっとも、ブログカードまでショートコードを使うと、万一のテーマ乗り換えのときに面倒かなとは思います。下記サイトを参考にブックマークレットを作っておくと便利です。

はてな風のブログカードをブックマークレットから作ってみよう! | 株式会社グランフェアズ

こんにちは、めぐたんです。 ブログを書いていると、参考記事や過去に書いた記事など別ページへのリンクを貼る機会が何かと多くあります。…

参考

サイト名の前に「参考」と付きます。

参考2020’辛口比較【なんでも炭酸化】炭酸水メーカー全11製品の比較と選び方

こんにちは、ひかぱんです。 今日は、健康や美容に大人気の「炭酸水メーカー」について、ベストバイを検証してまいります。 炭酸水メーカーと言えば、圧倒的な知名度を誇る「ソーダストリーム」が有名ですが、水以 …

続きを見る

CHECK(ふきだし)

吹き出しが付きます。

こちらもCHECK

2020’辛口比較【なんでも炭酸化】炭酸水メーカー全11製品の比較と選び方

こんにちは、ひかぱんです。 今日は、健康や美容に大人気の「炭酸水メーカー」について、ベストバイを検証してまいります。 炭酸水メーカーと言えば、圧倒的な知名度を誇る「ソーダストリーム」が有名ですが、水以 …

続きを見る

サムネイルなし

サムネが付きません。要らないかな。

2020’辛口比較【なんでも炭酸化】炭酸水メーカー全11製品の比較と選び方

こんにちは、ひかぱんです。 今日は、健康や美容に大人気の「炭酸水メーカー」について、ベストバイを検証してまいります。 炭酸水メーカーと言えば、圧倒的な知名度を誇る「ソーダストリーム」が有名ですが、水以 …

続きを見る

影なし

たぶんサムネイルが影なしになるのだと思う。

2020’辛口比較【なんでも炭酸化】炭酸水メーカー全11製品の比較と選び方

こんにちは、ひかぱんです。 今日は、健康や美容に大人気の「炭酸水メーカー」について、ベストバイを検証してまいります。 炭酸水メーカーと言えば、圧倒的な知名度を誇る「ソーダストリーム」が有名ですが、水以 …

続きを見る

条件表示

ブログ画面上への表示/非表示に関するショートコードです。

ウィジェットとかで気軽に使えるので重宝するかも。

ただし、画面サイズによる表示/非表示の切り替えは、CSSで簡単に実現できます。記事中で多用するのは避けましょう。

コメントアウト

ビジュアルエディタ上でテキストをコメントアウト(非表示)にできる。

ただ、この程度でショートコードを使ってたら、乗り換え時に大変そう。このショートコードがあるのを覚えておくのも面倒なので、素直にHTML編集しましょう。

エディタ用メモ

コメントアウトの亜種。ショートコード内にコメントを書き、ショートコード自体が非表示となることで、コメントアウトと同様の効果が得られる。まず使わないですね。

PC閲覧時のみ表示・非表示

ショートコードで囲った部分がPCでのみ表示(スマホでは非表示)あるいはその逆となる。

PC閲覧時のみアドセンスを2つ並べたいとか、そういうときに使われます。

これの変化型で、以下のパターンが用意されています。

  • PC閲覧時のみ非表示
  • AMPページのみ表示/非表示
  • フロントページのみ表示/非表示
  • 指定したカテゴリーIDのみ非表示

AMPページのみ表示・非表示

ショートコードで囲った部分が、AMPページで表示or非表示となる。

「AMP」とはページを高速表示させるためのGoogleによるWeb規格ですが、AMP仕様のページを作るのが大変なので、個人サイトでは無用かなと思われます。

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

ショートコードで囲った部分が、フロントページのみ表示or非表示となる。

フロントページとその他のページでコンテンツや広告を切り替えられるので、ウェブデザインの幅が広がると思います。

このショートコードが無いと、テンプレートそのものを加工することになるため、使う人は仕様場面が多いと思いますよ。

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

ショートコードでカテゴリーIDを指定し、コンテンツを囲みます。囲まれた部分は、指定したカテゴリーIDのページでは非表示になります。

例えば、会社概要や問い合わせフォームでは広告を表示したくない、という使い方でしょうか。

とはいえ、それらのページは固定ページで作るのが一般的なので、仕様場面はほとんど無いかなと思います。

ログイン時のみ表示・非表示

ショートコードで囲った部分が、ログイン時のみ表示or非表示となります。

言うまでもなく、ログイン制をとっていないサイトでは不要です。

ショートコード補助

以下は、ショートコードではありません。

ショートコードのパラメータ内で使える色やアイコンのコードが用意されています。

使用場面はほぼ無いでしょう。

Webアイコン(クラス)

fontawesome4のアイコンコード(例:fa-file-text-o)を30種類ほど呼び出せます。まあ、fontawesome4公式から探しますけどね。

個人的には、fontawesome5への対応をお願いしたいところです。

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

同じく、fontawesomeで使えるアニメーションコード(例:点滅 faa-flash animated)を16種類ほど呼び出せます。

下手に使うとダサいので、そもそも要らないかなと。

カラーコード

カラーコード(例:#ffffff)を17種類ほど呼び出せます。

サイト内で使用する色を統一したいときは、ここで登録されている色のみ使うなどルール化するのもアリかもしれません。(個人サイトの場合、そこに気を遣うならサイトを充実させましょう)

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

ブランドロゴで使われているカラーコード(例:Twitter #40a2f5)を呼び出せます。

登録されているのは、Twitter、Facebook、はてな、WordPress、amazon、Lineです。必要なときに調べる手間が減るかもしれませんが、必要な場面ある?

定型文

テキストの定型文(例:\ バンザイ /)が4種類ほど登録されています。

こういうの要らないので、もう少し整理してほしいです。

というわけで以上となります。

-その他

© 2020 ひかくちう