初心者向けオンライン勉強会 フォローアップ & 次回勉強会のお知らせ

今月17日に【初心者向けオンライン勉強会 】WordPressのサイトの見た目をCSSでカスタマイズしよう 他 を開催しました。

質問と回答

当日あった質問で時間内に解決しなかった質問の回答です。

Charm にもヘッダー上部ナビゲーションとお問い合わせボタンを追加したい

Charm についてはもともと販売開始時にはヘッダー上部の拡張機能が存在せず、
既に請負のウェブ制作などでも多数利用されている事から、今の段階で仕様変更すると既存サイトでの表示崩れを引き起こす原因となるので、簡単には追加できない状態です。

しかしながら、子テーマのfunctions.phpなどに以下のコードを貼り付けると使用する事が可能です。

$skin = get_option( 'lightning_design_skin' );
if ( $skin == 'charm' ) {
	require get_parent_theme_file_path( './inc/header-top/class-header-top.php' );
}

Google ウェブフォントを使いたい

Lightning Pro にはフォント切り替え機能がありますが、この機能では全ての見出しが同じフォントにしかできません。

特定の見出しだけフォントを変更したい場合は以下の手順になります。

1. 使いたいフォントを選ぶ

まずはGoogleウェブフォントのサイトにアクセスします。

https://googlefonts.github.io/japanese/
2. 使いたいフォントを選んでフォントを読み込む

使いたいフォントのHTMLをコピーします。

子テーマのfunctions.phpなどに以下を貼り付けます。
link の行をコピーした内容に変更してください。

add_action( 'wp_head', 'my_add_google_fonts' );
function my_add_google_fonts(){ ?>
	<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet">
	<?php
}
3. CSSの指定

フォントを読み込んだら次はCSSの指定です。まずCSSの部分をコピーしてください。

コピーしたCSSを 外観 > カスタマイズ の「追加CSS」や 子テーマのstyle.css や ExUnit > CSSカスタマイズ 画面に貼り付けてください(いずれか一つで可)

その際、上記画面キャプチャの黄緑色の部分を、変更したい文字のセレクタ( h3 など )に変更して貼り付けてください。

h3 { font-family: "Nico Moji"; }

次回勉強会のお知らせ

次回は「【初心者向けオンライン勉強会 】WordPressで使うPHP超入門」です。詳しくは下記イベントページをご覧ください。

Follow me!

Author Profile

石川栄和代表取締役
名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本(共著)
・現場でかならず使われているWordPressデザインのメソッド(共著)
[ 最近のWordPressコミュニティでの活動 ]
2018 WordCampOsaka セッションスピーカー
2017 WordCampKyoto セッションスピーカー
2016 WordCampTokyo LT
2016 WordCampKansai ハンズオン世話役
2015 WordCampTokyo セッションスピーカー
2015 WordCampKansai セッションスピーカー
2014 WordFesNagoya 実行委員 & セッションスピーカー
2013 WordCampTokyo セッションスピーカー(パネラー)
2013 WordFesNagoya 実行委員 & セッションスピーカー
2013 WordCrabFukui セッションスピーカー

初心者でも簡単!無料WordPressテーマ

100%GPL / 商用利用可能

Lightning は WordPress公式ディレクトリに登録されているカスタマイズ性の高いテーマです。
デモデータも配布されているので、ビジネスサイトの雛形が数分でセットアップできます。

VWSオンラインコミュニティー

有料ユーザー限定のオンラインコミュニティでは、より良いテーマ・プラグイン開発のため、機能改善・追加要望などの書き込み大歓迎です!
ユーザー同士の交流や意見交換の場としてもお気軽にご参加ください。

Previous article
WordCamp Europe 2019 #2

Next article
Gutenberg(ブロックエディタ)で不要なブロックを隠す方法3選