ホームページの自社運営に役立つ仕組みをプレゼント

キャラ右

ホームページの自社運営を楽にするためには、少しでもHTMLの知識やCSSの知識を不要にすることが大切です!


この記事の最後にホームページの自社運営を楽にするための2種類のファイルをダウンロードしていただけるように準備しています。
本記事の概要


WordPressを使ったホームページの自社運営を楽にするためには「クイックタグ・ボタン」を自社好みにすることが大切です。

ワードプレスのThemeによっては、オリジナルのクイックタグ・ボタンが表示されますが、使わないボタンは邪魔でしかないので、適宜整理することが大切です。

過度な、文字装飾は読者が記事を心地よく読む妨げになるので注意が必要です。また、読者が「次の段落」に興味を持つ「スクロール・フック」というテクニックを覚えると、更に精読率が高まります。

クイックタグを追加して編集作業を楽にしよう!

クイックタグとは、WordPressの編集画面に表示される下図のようなボタンです。

クイックタグ ボタン
ただ、クイックタグ・ボタンを押して編集画面に挿入されるのはHTMLのタグやCSSのソースですので、多少の専門知識を必要とします。

本記事では、私たちが採用している「最低限揃えておきたいクイックタグ」に関して解説を行なっています。

WordPressデフォルトのクイックタグ・ボタン

最新バージョンのWordPress(5.0.3–ja)では、新しい編集画面が提供されています。

新しい編集画面が使いやすいか、使いにくいかは、それぞれの好みがあると思いますが、本記事でプレゼントさせていただいている「クイックタグ・ボタン」を利用するためには、プラグイン「Classic Editor」が必要です。

プラグイン「Classic Editor」をインストールするにはWordPressの管理画面、左サイドメニューから「プラグイン」→「新規追加」をクリックすると下図のような画面が表示されます。

Classic Editorのインストール
「Classic Editor」の右上に表示されている【今すぐインストール】をクリック後、

Classic Editorの有効化
【有効化】をクリックしてください。

WordPressのクラシック・エディターにデフォルトで表示されるクイックタグ・ボタンは以下の通りです。

デフォルトで表示されるクイックタグ・ボタン
左から順に解説いたします。

「b」のボタンは太文字に装飾するためのボタンで<strong>という強調タグが挿入されます。ただ、現行のHTMLやSEOにおいては、この「storong」タグは使わないのが一般的です。

「i」は斜体文字で<em>という強調タグが挿入されます。こちらも近年では使わなくなったタグです。

「link」は、文字や画像にリンク先を指定するためのボタンで、頻繁に使うことになる必須のボタンの一つです。

「b-quote」をクリックすると<blockquote>というタグが挿入されます。これは<blockquote></blockquote>で囲まれた文章が「引用文」であることを示すタグです。こちらも、あまり使いません。

使用する際には「blockquote」タグのスタイル(装飾様式)を変更することをお勧めします(Themeによっては、あらかじめ、そのTheme仕様にスタイルがカスタマイズされていることがあります)。

「del」は、ブログ記事の更新時に、古くなった情報などに「打ち消し線」を掲載し、情報の変更を示す際に使われます。

例えば
文字を太文字にする場合は「storong」を使ったほうがSEO的に有効である。
上記のコードはいこの通りです。

delの使用例

Googleは「storong」タグを特に検索ランキングへの指標としては活用しなくなりました。今後この「storong」は廃止される予定ですので太字の文字装飾はスタイルシートでコントロールするのが望ましい。


「ins」は、過去のブログ記事に追加の文章を掲載した時に使うもので、追加された日付と時間がソースコードに記載されるHTMLタグです。

「img」は、画像のURLを指定して記事内に画像を表示させるボタンですが、通常は「メディアを追加」のボタンを使ってWordPressに画像をアップロードし掲載するので、このボタンも必要ないと考えています。

「ul」は箇条書き「ol」は数字付きの箇条書きを示すもので「li」は、「ul」や「ol」の要素として使います(listの略ですね!)。

「code」は、このタグで囲まれた文字列が「コード」であることを知らせるタグです。WordPressでこの<code>タグを使わず、HTMLやCSSのコードを書いてしまうと、そのソースコードの命令に従った表示がされてしまい、ソースコードの紹介になりません(※ 使用するThemeによっては<code>タグが機能しない場合があります)。HTML形式の記事を書くブログ以外は必要ないボタンです。

キャラ右

最近ではコードを記事内に掲載する場合は、「Crayon Syntax Highlighter」というプラグインを使って記載します(当サイトでも採用しています)。

Crayon Syntax Highlighter

「more」も私は過去を遡っても全く使わないボタンです。Themeによっては「more」タグを使って記事を折りたたんで見せる仕組みを採用しているものもあるようです。

今回プレゼントしているクイックタグの使い方

次の画像がWordPressの国産テーマ【賢威】をインストールした後に、使い勝手が良いようにカスタマイズした編集画面です。

クイックタグ ボタン

賢威8のオリジナルのクイックタグ・ボタンは「ビュジュアル・エディタ」を開いた場合のみ使用できます。

文字色だけでも、これだけのボタンが用意されているのですが、使わない色は削除したほうがスッキリして良いですよね!

キャラ右

最新バージョンの「賢威8」では、「テキスト・エディタ」を選択した際には、これらのクイックタグ・ボタンは表示されず、コメントなどで使用する「キャラ挿入」のボタンは「テキスト・エディタ」を選択しなければ表示されないというのも使い勝手が悪いですので、一気に整理したわけです。


注意!

賢威8は現段階(2019年1月)ではベータ版です。賢威7の場合は「テキスト・エディタ」を開くとたくさんのクイックタグ・ボタンが表示されます。

プレゼントファイルor記事に掲載しているソースコードの使い方

本記事末でダウンロード可能なファイルは、

  1. functions.php
  2. editor-style-tmc.css

上記2つです。

どちらのファイルもWordPressの子Themeフォルダにアップロードしてください。

Themeによっては、スタイルシートの呼び出しや、その他のセットアップ情報が記述してある場合もあるので、その場合はダウンロードいただいたfunctions.phpファイル内に記載の部分をコピーし貼り付けてください。

「editor-style-tmc.css」は、編集画面(テキスト・エディタ)に表示されるクイックタグ・ボタンを一目でどんなボタンなのかわかりやすく装飾しているスタイルシートです。

今回ダウンロードいただくファイルでは、使用頻度の低いクイックタグ・ボタンを非表示にしています。

クイックタグ・ボタンを編集

上記画像の緑枠で囲った【お問合わせフォームを追加】と【お問い合わせフォーム】は、プラグインJetpackを有効化している場合に表示されるクイックタグ・ボタンです。

私たちは、お問い合わせフォームには、プラグインの「Contact Form 7」を使っているので非表示にしています。

キャラ左

Jetpackのお問い合わせフォームには、自動返信機能がないので不便なんですよね。おまけに、ボタンが2つあるのも意味不明です。


Jetpackの【お問合わせフォームを追加】ボタンを非表示にする場合は、以下のコードを「editor-style-tmc.css」に追加してください。

赤枠で囲った部分がWordPressにデフォルトで設置されているクイックタグ・ボタンです。

黒枠で囲った【PopUpLink】は、プラグイン「Popup Maker」によって追加されているクイックタグ・ボタンです。
Popup Maker

オリジナルで追加したボタンの解説

「①②③」は、番号付きリスト「ol」のスタイルをカスタマイズしたものです。下記のような違いがあります。

「①②③」を使った番号付きリスト

  1. りんご
  2. みかん
  3. バナナ

通常の「ol」だけの場合

  1. 牛肉
  2. 豚肉
  3. 鶏肉

「リンクカード」は、賢威8に追加されている機能をクイックタグで呼び出すために追加したものです。賢威8を利用されていない場合は…
「editor-style-tmc.css」に下記のコードを削除してください。

加えてfunctions.phpファイル内にある下記のコードを削除してください。

「目次【任意】」は、賢威8の目次機能を好みの場所に表示させるためのクイックタグ・ボタンです。不要な場合は、「editor-style-tmc.css」に下記のコードを削除してください。

加えてfunctions.phpファイル内にある下記のコードを削除してください。

「h2」と「h3」「h4」は見出しタグの<h2><h3><h4>を呼び出すためのボタンです。<h1>タグは多くのWordPressのThemeでは記事タイトルに使用されることが多く、本文中に<h1>タグを使うことがないので<h2>と<h3>、<h4>タグだけボタンを作っています。

キャラ右

子Themaのスタイルシートを使って、h2やh3、h4にスタイルを指定すると、あなた好みの見出し装飾を実装することができます。


「nofollow」「_target=”_blank”」は、リンクに「rel=”nofollow”」の「nofollow」を追加するものです。

現在のWordPressのバージョン(5.0.3–ja)の場合、リンクを設定する際に「リンクを新しいタブで開く」にチェックを入れると自動的に「rel=”noopener”」が記載されますので、「noopener」の「r」の後ろにカーソルを合わせ「nofollow」ボタンを押すと半角スペースを空けて「nofollow」が挿入されます。

また「target=”_blank”」も、「リンクを新しいタブで開く」にチェックを入れると自動挿入されますので、使う頻度は少ないですが、外部サイトの参照リンクなどを手作業で行う場合や、「リンクを新しいタブで開く」にチェックを入れ忘れた際などに「_target=”_blank”」を使用してください。

「影付き画像」下図のように挿入した画像の四方に影をつけたスタイルを呼び出すボタンです。

なし画像
 
影あり画像
 

「メディアを追加」から画像を挿入した後に、下記のコード例にならって「影付き画像」のボタンをクリックしてください。

「<span class=””>」は、以下のボタンを使用する際に初めに使用するボタンです。

ひと口メモ

「span」とは、「選択した範囲(<span></span>)で囲った範囲」という意味で「class」はスタイルシートで指定したclass名を呼び出すという命令文です。

「class=””」の「” “」の中には半角スペースを空け、複数のclassを記載することができます。


「class=””を追加」は、見出しタグの<h2>やリストタグ<li>などにスタイルシートで指定したクラスを挿入する時に使用します。

キャラ右

頻繁に使用するスタイル・タグはクイックタグ・ボタンとして登録しておいたほうが、作業は捗りますが、それほど使用頻度の高くないスタイルのボタンまで表示させると編集画面の操作性が落ちてしまいます。

そのため、「class=””を追加」ボタンを使い、スタイルシートから任意のクラス名だけをコピーして、文字装飾やページのデザイン作業の効率を上げます。

以下は、文字装飾です。
「太字」は、このように表示されます→「太字
「赤細」は、次のように表示されます→「赤細
「斜体」は、文字を傾けます。→『本サイトでは引用文などを掲載するときなどにも使うことがあります。』

キャラ左

「太字」と「赤細」を組み合わせるとソースは<span class=”text_bold text_Red”>となり、表示は→「赤太」ソースは順序を入れ替えた<span class=”text_Red text_bold”>でも、同じ文字装飾になります。


「下線黒」は→このように文章に黒い下線を引きます。
「下線赤」は→文章に赤の下線を引きます。
「破線黒」は→文章の下に破線を引きます。

使い方としては、私の場合ですが、下線と強調文字を使う場合は文章全体に「破線」を引き、強調したい語句だけ「赤細」や「赤太」にします。

「→中央寄せ←」は、文章全体をセンタリングします。

「text_centerのみ」は、見出しタグ<h2>などをセンタリングする際に「class=””を追加」と併用して使います。

「→中央寄せ←」のコードを見ても分かる通り文章を中央寄せする場合は<p>から始まります。<span>は、選択範囲の指定(これを「インライン要素」と言う)ですので、文章全体を<span>で囲んでもセンタリングは起こりません。

「ブロック要素」と呼ばれる<div>や<p><h>タグなどの場合のみセンタリングは有効になります。

「黒板」「青Box」「緑Box」「ピンクBox」「黄色Box」は、段落を囲むスタイル装飾です。本サイトでは、次のような条件でBoxスタイルを採用しています。あなた好みの使用用途で使い分けを行ってみてください。下記が「黒板」を使ったデザインです。

  1. 「黒板」は、注目していただきたい「条件」や「要件」をピックアップしている段落で使用しています。
  2. 「青Box」は記事の「補足」や「ポイント」を掲載している記事で使用しています。
  3. 「緑Box」は記事の「概要」や「まとめ」使用しています。本記事では、冒頭の「記事の概要」で使用しています。
  4. 「ピンクBox」は、注意喚起を行う場合などに使用しています。このページでは「注意!」として使用しています。
  5. 「黄色Box」は、用語説明や注釈を加える際に使用しています。このページでは「ひと口メモ」で使用しています。

「文字1.25倍」から「文字2倍」のボタンは、デフォルトで設定している文字の大きさを大きくするボタンです。

「区間開業禁止」は、<span></span>で囲んだ範囲内で改行させず、その前後で改行を行います。

例えば、この文章のように長文をセンタリングした際などに語句の途中で改行されてしまいます。読みにくいのではないでしょうか。

キャラ右

上記のセンタリング文章と下記のセンタリング文章を、スマートフォンとタブレットやパソコンなどで改行位置の確認をしてみてください。

こちらの文章は、上記の文章とほぼ同じ文字数ですが「区間改行禁止」を指定していますので、比較的読みやすいはずです。

ボタンを追加したいときは、プラグインもあるよ

クイックタグ・ボタンを追加する場合は、直接「functions.php」に書き込む方法とクイックタグ・ボタンの追加を行ってくれるプラグイン「AddQuickTag」などを使う方法があります。

AddQuickTag

クイックタグ・ボタンを追加したい場合は、このプラグインを使うか、ダウンロードしたfunctions.phpのコードを下記のようにコピペし、必要項目を変更すれば追加することもできます。

キャラ左

functions.phpやスタイルシートを変更する際は、必ずバックアップを取って行ってください。

ファイルを受け取る

今月のダウンロードページ・パスワードは以下の通りです。※ パスワードは毎月変更されます。

補足


ホームページの自社運営を成功させるためには、少しずつHTMLやCSSのスキルを身につけることが重要です。また、functions.phpファイルをカスタマイズする程度の「php」を学とWordPressの操作性を向上させることができ、ますます、自社運営の作業が捗るようになります。

今月のパスワード


今月のパスワードは「20190HpTra0203」です。
パスワードは月の途中で変更される場合もあり、定期的に変更されます。