WordPressでロゴを表示する方法(プラグインの有無にかかわらず)

WordPressでロゴを表示する方法(プラグインの有無にかかわらず)

ロゴはブランドの強力な視覚的表現です。あなたのビジネスが、パートナーシップや提携などを通じて他のブランドとつながっている場合、ウェブ訪問者の間で信頼と信用を築くために、そのブランドのロゴをウェブサイトに表示する必要があるかもしれません。

例えば、ポートフォリオのウェブサイトを持っている場合、あなたが仕事をしたブランドのロゴを表示する必要があります。他の多くのウェブサイトでも同様です。WordPressでは、様々な簡単で手間のかからない方法でそれを行うことができます。

このチュートリアルでは、WordPressでロゴを表示する最も簡単な方法を、プラグインを使う場合と使わない場合の2つご紹介します。始めましょう!

方法1:プラグインなし(カラムブロックを使う)

カラムはGutenbergエディタのデフォルトブロックです。

ステップ01:エディターにカラムブロックを追加する

追加 列ブロック をクリックしてエディターへ プラス(+)アイコン.

カラム・ブロックをエディターに追加する

ステップ02:カラムレイアウトの選択

カラムレイアウトを選択します。カラムを選択すればするほど、ロゴを追加することができます。レイアウトを選択してみましょう 33/33/33.

Select a column layout

ブロックが追加されたら、さらに列数を増やすことができる。

そのためには クリック その カラムアイコン ツールバー上のこちらへ その 設定タブ.そして、次のようになる。 コラムセクション.

You can 列のνを増やすメバー スケールをドラッグするか、図を直接入力する。

列数を増やす

ステップ03:画像ブロックをカラムに個別に追加する

カラムの中に他のGutenbergブロックを追加することができます。カラム内の 1列目 そして クリック その プラス(+)アイコン.

タイプイメージ を検索ボックスに入力する。ブロックが表示されたら、列に追加する。

画像ブロックをカラムに個別に追加する

次に、ローカルドライブまたはメディアライブラリからロゴをアップロードします。

Gutenbergのカラムブロックにロゴをアップロードする

カラムブロックにロゴが追加されているのがわかるだろう。

カラムブロックにロゴを追加

ステップ04:他のカラムにロゴを1つずつ追加する

同じように、ブロックの他の列にもロゴを追加する。

他の列にロゴを追加する

ステップ05:コラムブロックをスタイライズする

ブロックをスタイル化する、 行く その スタイルタブ 右サイドバーにある

ロゴを追加した後にカラムブロックをスタイライズする

タブをスクロールする、 来る ブロック間隔.このセクションでは、ロゴの間に縦にも横にもスペースを追加することができます。しかし、この場合、横方向にスペースを追加する方が良いでしょう。

それからだ、 ボーダーを加える カラムブロック全体を囲むボーダーの色と幅を変更することができます。

カラムとボーダーの間にスペースを入れる

高度なレベルのカスタマイズを行うには、サードパーティ製のプラグインを使用する必要があります。そのようなプラグインを使った方法を以下に説明する。

方法2:プラグインを使う(Tableberg)

テーブルバーグ は、テーブル、アイコンボックス、画像ボックス、ロゴボックスなどを構築するための多機能なプラグインです。このプラグインを使えば、ウェブサイト上で高度なカスタマイズを施したロゴを展示することができます。バナーブローから入手してください。

美しいテーブルを作る
ブロックエディター付き

インストール後は、以下の概要に従ってください。

ステップ01: エディターにTablebergブロックを追加する

このプラグインは、Gutenbergブロックライブラリに次の名前のブロックを追加します。 テーブルバーグ.エディタにブロックを追加します。

GutenbergエディタにTableBergブロックを追加する

表示したいロゴの数だけテーブルセルを定義する必要があります。行と列の数を指定して、必要な数のセルを作成するだけです。

例えば、8つのロゴを表示するには8つのセルが必要だ。列と行の番号を設定する 4*2.

行と列の数を選択する

ご覧のように、必要な数のセルが作成される。

ロゴ表示用に作成されたセル

ステップ02: Tablebergセルへのロゴ追加開始

Tablebergでは、セルにいくつかのカスタムブロックを追加することができます。検索と 画像ブロックを追加する をセルに送る。

Tableberg細胞にロゴを加える

今すぐだ、 ロゴをアップロードしてください、 アップロードでもメディアライブラリーからでも。

Tableberg細胞に加えられたロゴ

残りのTablebergセルに他のロゴをすべて加える。

すべてのロゴをTablebergセルに加える

ステップ 03: セルをスタイライズする

今すぐだ、 行く その スタイルタブ テーブル全体を選択したまま。すべての行とセルの背景色を個別に変更することもできます。しかし、チュートリアルでは必要ないので、このオプションは残しておきます。

Tablebergで表示されるロゴをスタイライズする

来てくれ その セル間隔 セクションのタブをスクロールダウンしてください。このセクションのオプションを使って、ロゴの列の間に縦にも横にもスペースを追加することができます。

ロゴのセル間にスペースを追加

カム・トゥ・テーブル・ボーダー.Inner Borderセクションで、ボーダーの色と半径を変更できます。

ボーダーの色と半径を追加する

こうして、ロゴの柱に美的感覚を与えることができる。

結論

Tablebergは、あなたのウェブサイトのための多数の魅力的なデザインを作成することができ、エキサイティングな多目的プラグインです.終了する前に, あなたは、プラグイン上でいくつかのより多くのチュートリアルの記事を探索することができます.



テーブルバーグ・チーム