この記事は最後に更新してから1年以上経過しています。

Fotepo:プラグイン作ってみました

説明

仕事柄、Chromeの「デベロッパーツール」を使ってページのフォントを変更することがある。そんな時、無効なフォント名を指定してしまったり、フォント名をまちがえることがあり、もう少しお手軽にできないかと思って作ったのが今回紹介するプラグイン「Fotepo」である。

インストール

プラグインのインストール方法はいつもと同じ。

  1. 「Fotepo」のアーカイブファイルを「こちら(15KB)」からダウンロード((wordpress.org申請公開中))。アーカイブファイルを解凍したら、フォルダごと /wp-content/plugins/ の中にコピーする。
  2. 管理ページのプラグインページで「Fotepo」を有効にする。
  3. ツールバー(管理バー)に「body (default)」メニューが追加されたら、インストール完了。
    ツールバー(管理バー)に「body (default)」メニュー

body要素のフォントを変更

まずは基本機能であるbody要素のフォント変更から。

  1. ツールバーの「body (default)」の上にマウスカーソルを移動すると、プルダウンメニューが表示されるので、さらに「font name」に移動するとフォント名が表示される。
    展開されたフォント名のサブメニュー
  2. 「default」以外(ここでは「Helvetica」)をクリック。ツールバーの「body (default)」が「body (Helvetica)」に変わり、ページ全体のフォントが変更される。
    フォントの変更前(上)と変更後(下)

指定した要素のフォントを変更

もう1つの機能は、Ctrlキーを押しながらクリックした要素のフォントを変更するもの。「Fotepo」は使用しているテーマがツールバーに対応していれば、コンテンツサイト側でも使用できる。

  1. ツールバーの「body (default)」の上にマウスカーソルを移動すると、プルダウンメニューが表示されるので、さらに「target」に移動し、「ctrl+clicked element」をクリック。
    「target」のサブメニューに「body」と「ctrl+clicked element」が表示される
  2. 続いてツールバーの「element (default)」の上にマウスカーソルを移動すると、プルダウンメニューの「font name」から「Verdana」をクリック。
  3. 表示されているページ内で、フォントを変更したい場所でCtrlキーを押しながらクリック。
    フォントの変更前(上)と変更後(下)

ちなみに、同じ場所でもう一度Ctrlキーを押しながらクリックすると、フォントの変更前に戻るようになっている。

変更フォントを元に戻す

フォントを変更したbody要素および任意の要素は、「font name」で「default」を選択することで変更前に戻すことができ、ページをリロードする必要はない。

よくある質問

Q. 「font name」サブメニューに表示されるフォントは何でしょうか。
A. 現在のブラウザで使用できる英語および日本語のポピュラーなフォント。

変更履歴

  • 2019.09.18 Fotepo 0.5.0をリリースしました。

最終更新 : 2019年09月19日 08:47

お勧め

get_next_post(2018年5月27日 更新)

object get_next_post( [ bool $in_same_cat$in_same_term = false [ , string $excluded_categoriesmixed $excluded_terms = '' [ , string $taxonomy = 'category' ] ] ] )
1つ後の投稿情報を取得する。

wp_loginout(2018年5月27日 更新)

void wp_loginout( [ string $redirect = '' ] )
閲覧者がログインしているかどうかを調べ、ログインしていなければログインページのリンクを、ログイン済みならばログアウトページのリンクを表示する。

get_terms(2020年12月14日 更新)

array get_terms( mixed $args = array(), mixed $deprecated = '' mixed $taxonomies, [ mixed $args = '' ] )
条件を指定してタクソノミー情報を検索し、マッチしたすべてのデータを取得する。

wp_localize_script(2018年5月27日 更新)

bool wp_localize_script( string $handle, string $object_name, array $l10n )
スクリプト向けの変数を追加する。

get_post_status_object(2014年10月9日 更新)

object get_post_status_object( string $post_status )
投稿ステータス情報を取得する。