![Lightningの横並びアイコンブロックの使い方のタイトル画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/eye_catch_29.jpg)
こんにちは、今回の第29回のウェブ講座では、 WordPressのテーマLightningのVKブロック(VK Blocks)一つである「横並びアイコンブロック」の使い方を解説していきたいと思います。
「横並びアイコンブロック」はFont Awesomeのフォントアイコンを横並びに配置して表示できるブロックです。Lightningの配布元・ベクター社のウェブサイトにもありますように、主な使い方としてはSNSやメールのアイコンを並べて表示させて、自社ウェブサイトから、SNSや問い合わせへのアクションをより起こさせやすくする、という働きがあると思います。
とはいえ、SNSアイコンや問い合わせのメールアイコンを並べて表示させるブロックは、WordPress標準で「ソーシャルアイコンブロック」という名称で用意されています。
ですので、ウェブサイトのページにSNSボタンやメールボタンを並べて表示させたい場合、WordPress標準の「ソーシャルアイコンブロック」、VKブロックの「横並びアイコンブロック」、どちらを使っても可能です。
ただ、WordPress標準の「ソーシャルアイコンブロック」に用意されているアイコンに[LINE]がありませんので、[LINE]のアイコンを表示させたい場合は、VKブロックの「横並びアイコンブロック」を使用するといいです。
それと、VKブロックの「横並びアイコンブロック」はFont Awesomeのフォントアイコンを表示できるので、より多種多様なアイコンを表示させることが可能です。また、アイコン表示のデザイン調整についてもより多様です。
以上のことを踏まえまして、WordPress標準の「ソーシャルアイコンブロック」を使うか、VKブロックの「横並びアイコンブロック」を使うかを判断される良いかと思います。
なお、WordPress標準の「ソーシャルアイコンブロック」の使い方については、次回のだ第30回ウェブ講座で取り上げる予定です。
それでは、LightningのVKブロック一つである「横並びアイコンブロック」の使い方を解説していきたいと思います。
以下のような「横並びアイコン」を作る過程を、キャプチャ画像(スクリーンショット)を交えながら解説していきたいと思います。
![横並びアイコンブロックでSNSアイコンを並べて表示させた見本例](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_00.jpg)
キャプチャ画像を撮った作例はこちらのデモサイトでご覧いただけます。
⇒ https://d-elephant.com/demo_7th/archives/192
VKブロックの「横並びアイコンブロック」をページに追加します
固定ページ、投稿ページ、どちらでもVKブロックの「横並びアイコンブロック」を使うことができます。
では、ページで「横並びアイコンブロック」を追加するところから始めていきたいと思います。
ブロックの追加方法は、
①または②の[■+]ボタンをクリックするか、
③の[ブロックを選択するには「/」を入力]のスペースに「/」を入れて追加するか、のどちらかです。
(※③の場合、例えば「/横並びアイコンブロック」と入力します)
![新しいブロックを追加する方法のキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_01.jpg)
今回は①の[■+]ボタンをクリックして[横並びアイコンブロック]を追加してみようと思います。
ページ左側に、ブロックの選択ウィンドウが開きますので、[横並びアイコンブロック]が出てくるまで下へスクロールしていきます。
![ブロックの選択ウィンドウで横並びアイコンブロックを探すキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_02.jpg)
かなり下までスクロールすると、
①「VKBLOCKS」が見えてきます。
その中に②[横並びアイコンブロック]がありますのでクリックします。
![ブロック選択ウィンドウ内に横並びアイコンブロックがありました](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_03.jpg)
①に[横並びアイコンブロック]が追加挿入されました。
デフォルトでアイコンが2つ表示されます。
②の[■×]をクリックして、ブロック選択ウィンドウを閉じます。
![ページに横並びアイコンブロックが追加されたキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_04.jpg)
①画面右上にある[設定ボタン]をクリックして
ブロックパネルを開きます。
![設定ボタンをクリックするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_05.jpg)
ブロックパネルが表示されました。
![ブロックパネルが表示されたのキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_06-1.jpg)
表示させたいアイコンを選択します
では、表示させたいアイコンを選択して表示させていきたいと思います。
①[横並びアイコンブロック]に表示されている左側のアイコンをクリックして選択します。
![横並びアイコンブロックに表示された左側のアイコンをクリックして選択するキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_07.jpg)
左側のアイコンをクリックして選択した状態で、
①[アイコンを選択]をクリックすると、
②アイコンの選択ウィンドウが開きます。
表示させたいアイコンをクリックして選択します。
一番初めに配置したいアイコンはツイッターのアイコンなので、
③[ツイッターのアイコン]をクリックします。
すると、
④選択していた左側のアイコンがツイッターのアイコンに変更されます。
![アイコンを選択するキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_08.jpg)
同じようにして隣のアイコンを
「Facebook」のアイコンに変更します。
![Facebookのアイコンを選択して表示させたキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_09.jpg)
表示するアイコンをFont Awesomeから選択する場合
3番目に表示させたいアイコンは「インスタグラム」のアイコンです。
「Facebook」アイコンの隣の空白部分をクリックすると[■+]ボタンが表示されますので
[■+]をクリックします。
![表示させるアイコンを追加するキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_10.jpg)
すると、アイコンが追加されます。
![アイコンが追加されたキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_11.jpg)
そのアイコンを「インスタグラム」のアイコンに変更していきます。
「インスタグラム」のアイコンはアイコン選択ウィンドウ内にありませんので、
①[Font Awesome アイコンリスト]をクリックします。
![](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_12.jpg)
クリックすると、
「Font Awesome」のウェブサイトが立ち上がります。
①画面を下にスクロールして「インスタグラム」のアイコンを探してもいいですし、
②検索窓に「instagram」と入力して検索してもいいです。
![フォントオーサム・ウェブサイト内、アイコンを検索できるページのキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_13.jpg)
ここでは下へスクロールしました。
上から3段目に「インスタグラム」のアイコンがありましたので
その[インスタグラムのアイコン]をクリックします。
![インスタグラムのアイコンをクリックするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_14.jpg)
アイコンのHTMLコード取得画面が立ち上がりますので、
①[HTMLコード]をクリックしてコピーします。
※クリックするとコピーされます。
![フォントオーサムのアイコンのHTMLコードをクリックしてコピーするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_15.jpg)
WordPressの画面に戻って、
①へコピーしたHTMLコードをペーストします。
すると②アイコンが「インスタグラム」のアイコンに変更されました。
![アイコンがインスタグラムのアイコンに変更されたキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_16.jpg)
同じようにして、
「ティックトック」「ユーチューブ」「メール」「LINE」のアイコンを配置していきます。
●「ティックトック」「ユーチューブ」のアイコンは、Font AwesomeのウェブサイトからHTMLコードをコピーしてきました。
●「メール」「LINE」のアイコンは、アイコン選択ウィンドウ内にありました。
![ティックトック、ユーチューブ、メール、ラインのアイコンを並べて配置させたキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_17.jpg)
アイコンのデザインを変更してみます
では、次に、配置したアイコンのスタイルを変更したいと思います。
[アイコンのみ]のスタイルにしたいので、
①[アイコン共通設定]の
②[スタイル]で
③[アイコンのみ]をクリックします。
すると、
アイコンが[アイコンのみ]へ変更されました。
![アイコンのスタイルが「アイコンのみ」へ変更されたキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_18.jpg)
①アイコンのサイズについてはデフォルトの36pxのままでいいですが、
②余白を狭くしたいので、デフォルトの22pxを4pxまで狭めました。
![アイコン並びの余白を調整したキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_19.jpg)
次に、アイコンの色を黒に変更したいと思います。
アイコンの色変更については、
アイコン1つ1つやっていきます。
では、一番左の「ツイッター」のアイコンの色を黒へ変更してみたいと思います。
「ツイッター」アイコンを選択した状態で、
右側のブロックパネルの「色」の
①[黒]をクリックします。
すると、
②「ツイッター」アイコンが黒になりました。
![アイコンの色を変更するキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_20.jpg)
同じように、他のアイコンも黒へ色変更をします。
![全てのアイコンの色を黒へ変更したキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_21.jpg)
アイコンにURLリンクを貼ります
次に、各アイコンにリンクURLを貼っていきます。
では、一番左の「ツイッター」のアイコンにURLを貼ってみたいと思います。
「ツイッター」アイコンを選択した状態で、
右側のブロックパネルの
①「リンクURL」へご自身(自社)のツイッターのアドレスを入力します。
②リンク先を別ウィンドウで開きたい場合はチェックを入れます。
![アイコンにリンク先URLを入力するキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_22.jpg)
同じように、他のアイコンにもリンクURLを貼っていけば完了となります。
アイコンのスタイルを変更した場合の例
ここからは補足となりますが、
「横並びアイコンブロック」でアイコンのスタイルを
①[ベタ塗り]にして
②[枠線のRの大きさ]を25にすると以下のようになります。
![アイコンのスタイルを「ベタ塗り」、枠線のRを25にしたアイコンのデザイン例](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_23.jpg)
上記のアイコンのスタイルを
①[アイコンと枠]にするとこうなります。
![アイコンのスタイルを「アイコンと枠」、枠線のRを25にしたデザイン例](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_24.jpg)
3つのパターンを並べてみますとこうとなります。
![3つのスタイルを並べたアイコンのデザイン例](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_25.jpg)
サイズや色、余白、Rの大きさなどを変えてみて、
ご自分のウェブサイトに合う「横並びアイコン」にするといいと思います。
比較としてのWordPress標準のソーシャルアイコンブロックでの表示例
ちなみに、WordPress標準の「ソーシャルアイコンブロック」も追加してみましたので見比べてみてください。
![VKブロックの「横並びアイコンブロック」のアイコンデザインと、WordPressの「ソーシャルアイコンブロック」のアイコンデザインを並列比較した例](https://d-elephant.com/de_2nd/wp-content/uploads/2023/03/yoko_icon_26.jpg)
※WordPress標準の「ソーシャルアイコンブロック」の使い方については、次回、第30回ウェブ講座で取り上げる予定です。
以上で、第29回のウェブ講座、
「Lightningの[横並びアイコンブロック]の使い方」は終了です。
大変お疲れ様でした。
それでは、次回の第30回ウェブ講座でまたお会いいたしましょう~^^