(↑Pinterestでシェアお願いします!)

Diviのテーマをコードを使ってカスタマイズする方法

執筆者 | 更新日 2020年02月15日 | Diviの使い方 | コメント0件

今回は、Diviの使い方の応用編ということで、ちょっと高度な使い方をご紹介していきたいと思います。主にコードを使って、デザインを変更していきます。サイト全体の外観にも影響してきてしまいますので、コードを入力する場合は気をつけてください。

ブログモジュールで表示するサムネイル画像の大きさを変更する方法

まずは、ブログモジュールで表示するサムネイルの大きさを変更する方法をご紹介します。僕はPinterestというSNSを使っていて、記事の最初に表示させていました。しかし、サムネイルに設定すると、16:9くらいでカットされてしまうため、サムネイルにはできずにどうしようか考えていました。そんな時に見つけたのが、次のコードです。

こちらのコードを

2

「外観」の「テーマエディター」から「Theme Functions(function.php)」に切り替え、一番下の行に追加します。

そしたら、コードを修正します。どこを変えるかというと、上記の画像の部分です。「height」の部分は高さを意味しますので、サムネイルの縦の幅を、「width」は横幅になります。「return」の部分の数値を変更しましょう。それから、「add_image_size」の行の数値も変更しましょう。こちらの数値も縦・横の順番に並んでいるので、同じ数字を入力しておきましょう。

列を整列させる方法

Elementorというプラグインであれば、縦に中央に寄せたり、上・下に寄せたりという機能がデフォルトで備わっているんですけど、Diviの場合は、今の所コードを使わないといけません。

こちらのコードを使います。

具体的な使い方としては、まず「行」の設定に移動します。

次に、「コンテンツ」に戻って、縦の整列を設定したい「列」のギアアイコンを設定します。ちなみに、並び順は、一番左のカラムが一番上に来るようになっています。

そしたら、「詳細」の「カスタムCSS」に移動して、コードを入力します。

更新日を追加する方法

Diviでは、記事を投稿した日にちは表示してくれますが、更新日は表示されません。更新日を表示しておくことで、新しい情報が書かれている記事だということを示すことができるので、お客さんにとっては安心です。

更新日を追加するためのコードは、こちらです。最初にご紹介したサムネイル画像の大きさを変更するコードと同じように「Theme Functions」でコードを入力します。

上のコードは、投稿日を更新日に変更するためのコードです。つまり、投稿日は表示されず、更新日のみが表示されるようになります。

一方で、下のコードについては、こちらの画像のように更新日と投稿日の両方が表示されるようになります。

ヘッダー・フッターを非表示にする方法

特に、Diviを使ってランディングページを作成したいという場合はヘッダーやフッターなどを表示しておくと、読者の気が散る原因になってしまうので、非表示にしたいということがあると思います。

その場合は、上記のコードを使用しましょう。

コードを入力する場所は、今までとは違って、「Divi」の「テーマのオプション」にある「カスタムCSS」に入力します。ただし、このコードはサイト全体でヘッダーとフッターが非表示になってしまいます。

特定のページだけで非表示にしたいのであれば、こちらのコードを使用します。入力する場所は同じなのですが、そのままコードを入力するのではなく、「(番号をここに入力)」という箇所に、ページIDを入力します。

WordPress記事のページID

そのIDはどこで取得するかというと、非表示にしたい投稿記事もしくは固定ページの上にカーソルを置きます。すると、左下にリンクが表示されるので、「post=」の後ろの番号をチェックしてみてください。それが、その記事のページIDになります。今回の場合であれば、「314」になっていますが、これがページIDになります。

フォントを変更する方法

Diviは、特に日本語で使用する場合、表示スピードが遅いです。その一番の原因となっているのが、フォントなんです。

なので、こちらの記事にあるコード(上記のもの)を使ってフォントを設定することをお勧めします。

Divi テーマカスタマイザー

コードを入力するために、まず「Divi」の「テーマカスタマイザー」に移動します。

CSSにフォントのコードを入力

そして、「追加CSS」という場所に入力すれば完了です。

KohsukeNemoto.comニュースレターに参加しませんか?

あなたがニュースレターに登録すると、、、

  • 週に1,2回程度のニュースレター
  • 有料販売している5コース(4,900円相当)
  • 新着有料コースの無料提供(不定期)

無料で受け取れます。右(スマホの方は下)のフォームにお名前とEメールアドレスを登録し、無料でニュースレターと特典をお受け取りください。

0コメント

コメントを提出

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

KohsukeNemoto.comのニュースレター

(特典付き!)

無料

・週に1回のニュースレター

・有料販売している5コース(4,900円相当)

・新しい有料コース

 

これらが無料!以下のフォームから、無料でゲットできます。

※いつでも解除できます。

Elementorの使い方を"無料"で学びませんか?

プロのようなランディングページが作れるElementorの使い方が無料で受講できます。