WordPressの仕様など

このページではWordPressの仕様などを説明しています

URLを英数字に変更する意味

パーマリンクが日本語のままだと、URLがとても長くなってしまいます。

長過ぎるURLはエラーの原因になる可能性がありますので、英数字の短いURLに変更しましょう。

日本語URLが長くなる理由とよく見られるエラー

日本語以外の環境で互換性を保つために、日本語URLは自動的にPunycode変換されます。とても長くなり、URLをメールなどで送るときに途中で切れてしまって、URLが正しく送れないことがあります。

 

文字につける属性の仕様

文字に属性をつけるプルダウンリストの使用方法は以下のとおりです。

段落

本文に使用します。

ワードプレスの段落のルール
  • 段落終わり:Enter
  • 改行:Shift+Enter

 

段落と改行の違い

こちらのダミーテキストは、原文に以下の変更を加えたものです。

  • 句点「。」で改行しました
  • 段落はじめの字下げをなくしました
ダミーテキスト:ポラーノの広場(宮沢賢治)より

十八等官でしたから役所のなかでも、ずうっと下の方でしたし俸給もほんのわずかでしたが、受持ちが標本の採集や整理で生れ付き好きなことでしたから、わたくしは毎日ずいぶん愉快にはたらきました。
殊にそのころ、モリーオ市では競馬場を植物園にえ直すというので、その景色のいいまわりにアカシヤを植え込んだ広い地面が、切符売場や信号所の建物のついたまま、わたくしどもの役所の方へまわって来たものですから、わたくしはすぐ宿直という名前で月賦で買った小さな蓄音器と二十枚ばかりのレコードをもって、その番小屋にひとり住むことになりました。
わたくしはそこの馬を置く場所に板で小さなしきいをつけて一疋の山羊を飼いました。
毎朝その乳をしぼってつめたいパンをひたしてたべ、それから黒い革のかばんへすこしの書類や雑誌を入れ、靴もきれいにみがき、並木のポプラの影法師を大股にわたって市の役所へ出て行くのでした。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

上記ダミーテキストの改行と段落の違いは見た目でもわかると思いますが、マウスドラッグでダミーテキストを全部選択するとさらにハッキリとわかります。

 

見出し1

🙅 見出し1は使用しないでください 🚫

SEOのルール

見出し1(htmlで言うh1)は1ページにひとつというルールがあります。協会HPは全てのページにh1は「群馬県自閉症協会」を指定しているため、投稿ページで「見出し1」を使うことはできません。

見出し2

記事内で一番大きい見出し

見出し3

記事内で二番目に大きい見出し。上に見出し2がある場合は内包され、見出し2の子要素になります。

見出し4

記事内で三番目に大きい見出し。上に見出し2や見出し3がある場合は内包され、孫要素になります。

見出し5

記事内で四番目に大きい見出し。(以下略)

見出し6

記事内で五番目に大きい見出し。(以下略)

整形済みテキスト

整形済みテキストを選ぶと文字が固定幅フォントで表示されます。
基本的に記事内では使用しません。

 

トップページに表示されるカテゴリー

  • 主催セミナー
  • 他関連セミナー
  • 【開催済み】過去のイベントのようす

 

Quicktagsを利用した装飾

Quicktagsを使うと簡単な装飾ができます。

矢印QのQuicktagsをクリックするとプルダウンリストが表示されます。
リストの意味は以下のとおりです。

リンクボタン

リンクボタンに表示したい文字列を選択したまま(矢印Q1)、Quicktagsの「リンクボタン」を選択する(矢印Q2)と、リンクボタンになります。
エディタ上での表示はただのリンクに見えますが、実際はリンクボタンになっています。
心配な場合は、プレビューボタンを押して確認してください。

リンクURL設定方法
  1. リンクになった文字列をクリックして、Edit|button(鉛筆マークの編集アイコン)をクリックします。
  2. ダミーで「#」が入力されているので、削除してリンク先のURLをコピー&ペースト
  3. リンクボタンの完成

DX勉強会-2024

タイトル付囲み-青、タイトル付囲み-シンプル

タイトルがついた囲み罫線を作れます。
青は青い罫線、シンプルはグレーの罫線になります。

Quicktagsの「タイトル付囲み-青」を選択すると下のような囲み罫線が出てきます。
「タイトル」と「ここに文字を入力」の部分を任意の文字列に変更して使用してください。

タイトル

ここに文字を入力

※囲み内の文字列を改行すると表示がおかしくなってしまいます。改行したい、リスト表示にしたいといった場合は以下の方法がオススメです

タイトル付囲み内で改行する・リスト表示にする

  1. 囲みたい文字列を用意します。リスト表示にしたい場合はリスト表示にしてください 図1
  2. 囲みたい文字列をコピーまたは切り取ります 図2
  3. タイトル付囲み内の「ここに文字を入力」を選択して貼り付け 図3

図1:文字を用意します
図2:文字列をコピー、または切り取り
図3:貼り付け

 

ボックス-青、ボックス-グレー

文字列の周りを囲む罫線を作れます。
青は青い罫線、グレーはグレーの罫線になります。

Quicktagsの「ボックス-青」を選択すると下のような囲み罫線が出てきます。
「ここに文字を入力」の部分を任意の文字列に変更して使用してください。

ここに文字を入力

 

画像のリサイズ・トリミング・配置

画像が大きすぎると表示に時間がかかってしまいます。
配置する前に適切なサイズに変更します。

iPhoneで撮影した画像。サイズが18.4MBと、とても大きい

I♥IMGは登録不要・無料でリサイズや切り抜き、JPG変換ができます。
もちろんその他のツールやアプリでも大丈夫です。

今回I♥IMGで行った作業

  1. 切り抜き(トリミング)
  2. リサイズ(幅1000px)
  3. JPG変換
  4. ダウンロード

まずは不要な部分を切り抜きます
幅1000pxにリサイズします
JPGに変換してダウンロード。477KBまで小さくなりました

横幅いっぱいに表示したい場合は、幅1000pxを目安にリサイズしてください。

画像の準備ができたら、編集画面にドロップして画像を追加します。
「メディアを追加」ボタンを押してもOKです。

写真は必ずJPGで

同じ画素数(解像度)の画像でも、PNGはファイルサイズが大きく、JPGはファイルサイズが小さくなります。写真は必ずJPGに変換してください。

 

画像で配置したチラシの文字は読みにくい

テキストなしでチラシを画像で配置して「詳しくはチラシをご覧ください」とチラシ画像に丸投げするのはオススメしません。

チラシ画像に丸投げをおすすめしない理由

  • チラシは印刷物に最適化されたデザインなのでWEBだと読みにくい
  • 小さい文字が読めなくなる可能性がある
  • ほとんどの人はWEBをスマホで見ます。スマホの画面にQRが表示されても困ります
  • JPG画像はリンクURLが機能しない。タップしてもなにもおきない

 

できるだけテキストで掲載してください

協会HPに掲載する際には、テキストはできるだけテキストで掲載してください

もちろんセミナーなどのイメージでチラシを配置することはいい事ですが、小さめの画像内にある小さい文字は全く読めなくなってしまう可能性があります。

画像内の文字はおよそ14pt程度あると読むことができます。(下図参照)

JPEG保存時にファイルサイズを小さくするために高圧縮にしたり、JPEG画像を何度も保存を繰り返すと画質が低下します。

画質が低下すると全体的にジャギーが現れ、文字は読みにくくなります。

画像内の文字どのサイズまで読める?

 

Googleマップ・Googleフォームの埋め込み

セミナーやイベントなどの会場はGoogleマップがあると、はじめて参加される方も安心です。

また、各種申し込みはメールよりもフォームの方がオススメです。
申込者は入力が必要な項目がわかりやすく、管理者も管理しやすいため、ぜひフォームを利用しましょう。

フォームは埋め込まなくても、リンクボタンなどでフォームへ遷移させる方法でも問題ありません。
質問事項が多いフォームを埋め込むと縦長になりやすいので、好みで使い分けてください。

Googleマップの埋め込み方法

  1. Googleマップで任意の場所を検索
  2. 共有ボタンを押す
  3. 共有ウインドウの「地図を埋め込み」を選択 図の矢印M1
  4. HTMLをコピーをクリック 図の矢印M2
  5. WordPressをテキストモードに切り替え 図の矢印M3
  6. 埋め込みたい位置にコピーした内容を貼り付け
  7. WordPressをビジュアルモードに戻すとMAPが表示されます

Googleフォームの埋め込み方法

  1. Googleフォームの右上にある「送信」ボタンをクリック
  2. フォームを送信ウインドウの「< >」マークをクリック 図の矢印F1
  3. 「コピー」ボタンをクリック 図の矢印F2
  4. WordPressをテキストモードに切り替え 図の矢印M3
  5. 埋め込みたい位置にコピーした内容を貼り付け
  6. WordPressをビジュアルモードに戻すとフォームが表示されます

 

WordPress投稿例(動画)

投稿している画面を動画にしました。


関連ページ