Lightningでブログを作ろう｜第3週 機能を使い倒そう｜WordPress
zio
投稿者 Zio ジオ
Lightning でブログを作ろう（第3週目）『機能を使い倒そう』をお届けします。
1日の作業目安40分程度
関連記事
- WordPressのはじめ方｜図解でやさしく教えます！ConoHa Wingで最短１０分
- WordPressテーマLightning でブログを作ろう｜1週間目
- WordPressテーマLightning でブログを作ろう｜２週間目
Lightning 配信元Vektorが運営するオンライン学習サイト
広告｜AdSense
目次
３週間目
機能を使い倒そう
Menu
１日目 メディアライブラリに詳しくなろう
画像の挿入方法は第２週 固定ページを作ろう-画像で解説しましたが、今回はメディアライブラリの機能全般を解説します。
まずは WordPress管理画面＞メディア をクリックしてみましょう。
① 表示方法の切り替え
メディアライブラリには、表示方法が２種類あります。用途にあわせて表示方法を選択してください。
リスト
：画像（サムネイル）・タイトル・パーマリンク・投稿者・アップロード先・日付
→ファイルの拡張子を確認したり、メディアライブラリの更新をするときに便利な表示方法です。
グリッド
：画像（サムネイル）をグリッド状に表示
→サムネイルから該当画像を探す際に便利な表示方法です。
② 絞り込み機能
沢山の画像から絞り込み検索をすることができます。
ファイルの種類から絞り込む
以下のファイルの種類からメディアを絞り込むことができます
＜ファイルの種類＞
- すべてのメディア
- 画像
- 音声
- 動画
- 未添付：投稿や固定ページではなくメディアライブラリに直接アップデートされた画像
- 所有：ログインしているアカウントが使える画像
日付から絞り込む
- すべての日付
- 月ごと
③ 検索
画像タイトル・キャプション・説明・URL・代替テキストをもとに検索して画像を探すことができます。
『Zio』と検索した結果
⇩
次に１つ画像をクリックしてみましょう
Click
⇩
添付ファイルの詳細
選択した画像の詳細が、このように表示されます。この添付ファイルの詳細ページでは以下のような要素を設定したり・操作することができます。
＜設定できる項目＞
- 代替テキスト：画像が表示されない時に表示されるテキスト。一部ディバイスでは音声補助機能でも利用される。
- タイトル：デフォルトで保存したファイル名が表示される。変更可
- キャプション：キャプションを入力した際に表示される
- 説明：画像のソースコードに直接入力されます。画像検索の際にも使用できて編集者用のメモ代わりにすることもできる
＜操作できる項目＞
- ファイルURL：URLを表示
- URLをクリップボードにコピー：URLをコピー
- 添付ファイルのページを表示：添付ファイルページを表示
- さらに詳細を編集：詳細ページを表示
- ファイルをダウンロード：使用中のディバイスにメディアをダウンロード
- 完全に削除する：完全に削除します。
この『添付ファイルの詳細』ページで最も使うのが
代替テキスト
の項目です。
代替テキストが大切
代替テキストは、画像データになんらかの問題がある時に画像の代わりに表示される文章（テキスト）のことです。代替テキストの役割はそれだけでなく、設定しておくことで弱視を含む視覚障害のある人や学習障害・視覚過敏のある人に『見る支援』と『聴く支援』になるのです。
具体的には
- 読み上げ機能を利用して画像の内容を知ることができます。また点字として表示することもできます。
- 音声入力ソフトウェアを利用して画像を選択することができます。
- 検索エンジンで検索しやすくなります。
一番身近で手軽にはじめることができるWEBアクセシビリティ機能です。
色々なメリットがあるので、ぜひ代替テキストを設定してください。
⇩
では次に『さらに詳細を編集』をクックしてみましょう。
⇩
さらに詳細を編集
『さらに詳細を編集』ページはこのように表示されます
このページで特徴的なのは
説明
の項目です。
繰り返しになりますが
説明：画像のソースコードに直接入力されます。画像検索の際にも使用できて編集者用のメモ代わりにすることもできます
『さらに詳細ページ』の『説明』項目では、HTML入力の補助機能が付いています。
強調のために使われる<b>タグや箇条書きようの<ul><ol><li>などを使うことができます。リンク先を記録しておくこともできます。
また、最下部にあるAll In One Expansion Unit（ExUnit）から＜添付ファイルのページ＞で表示されるレイアウトなどを設定することができます。
画像を編集
- 切り抜き
- 伸縮
- 画像の反転
『画像を編集』機能でこの３種の編集ができます。編集した画像は、元のデータとは別に保存されます。
＊できる限り、アップロード前に画像ソフトウェアで編集しておいた方が効率的です。
フルサイズ・大・中・サムネイル
メディアライブラリに１つのデータをアップロードすると３つ（大・中・サムネイル）の画像が自動生成されます。
この自動生成される画像の設定はWordPress管理画面＞設定＞メディアから確認・変更することができます。
サイズ上限｜デフォルト
- サムネイル： 幅１５０ 高さ１５０
- 中： 幅３００ 高さ３００
- 大： 幅１１２０ 高さ１１２０
自動生成される画像はアップロードした画像よりも低画質のものなので
例えばアップロードした画像が
- 幅１０００ 高さ１０００
だった場合、自動生成される画像は中とサムネイルになります。軽い画像を記事中で使うことで、記事の表示スピードを改善できるので、画像を使う場合
に活用してください。
広告｜AdSense
２日目 ExUnitを使ってAdSenseに申請してみよう
２日目は
ExUnitの機能を使ってグーグル アドセンス（Google AdSense）に審査リクエストをします。
手順
１．Google AdSense🔗にアクセスします。
２．自身のGoogleアカウントでログインします。
Gアカウント ログイン画面
Google AdSense ホーム
３．GoogleAdSense管理画面＞メニュー＞アカウント＞設定＞アカウント情報の順にクリックしてパブリッシャーIDをコピーします。
４．WordPress管理画面＞ExUnit＞広告の挿入の順にクリックし、サイト運営者情報にコピーしたパブリッシャーIDを貼り付け、自動広告を有効にするにチェックをいれます。
５．GoogleAdSense管理画面＞ホーム＞『お客さまについておしらせください 必須』の内容を入力し送信します。
６．GoogleAdSense管理画面＞ホーム＞『サイトでどのように広告が表示されるかご確認ください オプション』をクリックし、自動広告をONにし『サイトに適用』をクリックします。
７．GoogleAdSense管理画面＞ホーム＞『サイトをAdSenseにリンク 必須』の順にクリックし、AdSenseコードスニペットを選択してた状態でAdSenseコードをコピーします。
８．WordPress管理画面＞ExUnit＞広告の挿入の画面上で『広告を挿入[記事の最初]』のボックスにコピーしてきたAdSenseコードを貼り付けて、「変更を保存」をクリックします。
注）『変更を保存』をクリックしたときに、以下の画面がでた場合は、レンタルサーバーのWAF（Webアプリケーション ファイアウォール）にExUnit経由のAdSenseコードがはじかれた状態です。各レンタルサーバーにアクセスして該当IP除外や例外に指定してください。除外できたら、もう一度『変更を保存』をクリックします。
閲覧できません（Forbidden access）
指定したウェブページは表示することができません
入力したURLの値が正しくない可能性がございますのでご確認ください。
The server refuse to browse the page.
The URL or value may not be correct. Please confire the value
９．次にAdSense管理画面＞ホーム＞『サイトをAdSenseにリンク 必須』でads.txtスニペットを選択した状態でコードをコピーします
１０．次にレンタルサーバーの管理画面にアクセスし、ファイルマネージャーなどでサイトのpublic_html＞｛サイト名のフォルダ｝の中にTXT形式のファイルを作成しコピーしたコードを貼り付けて保存します。
１１．AdSense管理画面＞ホーム＞『サイトをAdSenseにリンク 必須』にもう一度アクセスし、ads.txtスニペットを選択した状態で『ads.txtを公開済み』にチェックを入れて確認をクリックします。
１２．『お客さまのサイトは確認されました。』というダイアログが表示されたら『審査をリクエスト』をクリックして完了です。
これでAdSenseへの審査リクエストが完了しました。
広告｜AdSense
３日目 VK Blocksの詳細設定機能を使ってみよう
3日目は
標準プラグインのVK Blocksの詳細設定機能を使ってみましょう。設定しておくと記事作成を時短できるのでおすすめです。
WordPress管理画面＞設定＞VK Blocksから設定していきます。
設定できる内容
吹き出しブロック設定
記事内でつかう機会の多い吹き出しの共通設定をすることができる機能です。
【吹き出しブロック設定】
機能
①吹き出しの枠線の太さ（共通：１px～4px）を設定する
②吹き出しに使うよく使う画像を設定
画像と設定しておくメディアライブラリを開かずに、編集画面から選ぶことができるので便利です。おすすめ
共通余白設定
レスポンシブスペーサー 
の余白幅をカスタマイズできます
【単位】は以下から選ぶことができます。
- px：画像の1点の大きさ単位。
- em：親要素に対しての％
- rem：ルート要素に対しての％
- vw：ブラウザ幅の表示％
- vh：ブラウザ高の表示％
- svh：最小のブラウザ高の表示の％
- lvh：最大のブラウザ高の表示％
- dvh：動的なブラウザ表示高の％
分割読み込み設定
JSとCSSの分割読み込みを有効にする際に使います。
ブロックマネージャー設定
使うブロックを有効にし、使わないものは無効にすることでブロック挿入ツールから除外することができます。
ブロックスタイルマネージャ設定
Lightning独自のデザインスタイルを管理できます。使わないスタイルを無効かすることができます。
Lightningのデザイン（スタイル）に表示させたいデザインだけ表示させることができます。
エクスポート・インポート設定
各種エクスポートとインポートを行うことができます。
広告｜AdSense
４日目 VK Block Patternsで自己紹介パターンを作ってみよう
記事に必ずいれる定型文はブロックパターンに保存しておくと便利です。標準プラグインのVK Block Patternsを使って自己紹介ブロックを作ってみましょう
ブロックパターンをつくる
手順
１．WordPress管理画面＞VK Block Patternsの順にクリックし、『新規作成』ボタンをクリック
２．タイトルを入力したら、自己紹介ブロックを作ってみましょう。
例えばこんな感じ⇩自由に作ってみてください。
３．完成したら公開ボタンをおしてください。
ブロックパターンを記事に挿入する
つぎにブロックを記事に挿入してみましょう。
１．投稿ページ編集画面または固定ページ編集画面を開き、ブロックを挿入したい場所にカーソルを合わせます。
２．サイトロゴ横のブロック追加＋ボタンを押してパターン＞すべての順にクリックします。
３．表示された『自己紹介』ブロックをクリックすると記事の中にブロックが挿入されます。
完成🎉
５日目 VK スライダーレイアウトを使ってみよう
5日目は新機能のVKスライダー レイアウトを使ってみましょう
当サイトのトップページでも使用しています。挿入方法は次の通りです。
手順
１．まずは投稿ページ編集画面または固定ページ編集画面を開きます。
２．ブロック追加ボタンを押して『VKスライダー』を選択します。
３．編集画面上に配置されたVKスライダーを選択し、『ドキュメント概観』ボタンを押します
４．VKスライダーは親ブロック『スライダー』と子ブロック『スライダーアイテム』の階層構造になっています。この子ブロック『スライダーアイテム』にカーソルを合わせ右端の ⁝ をクリックし『複製』をおして必要な数の『スライダーアイテム』を追加します。
５．子ブロック『スライダーアイテム』を選択し、＋を押して挿入したいブロックを入れてください。編集画面上では縦積になっています。画像を追加する場合はサイズをそろえておくと綺麗です。
６．『スライダーアイテム』にブロックを入れ終わったら親ブロックの『スライダー』を選択して、『アイテムの複数表示設定』をクリックします。
PC・タブレット・モバイルそれぞれに値を入れます。上記動画中のスライダーでは
- PC ５
- タブレット 2.5
- モバイル 1.5
に設定しています。
７．アイテムの複数表示設定の中の『アクティブスライドを中央にする』をONにします。
VKスライダーが設定できました。
ちなみにスライドの速さを変えたい場合は
親ブロック『スライダー』を選択して、『スライド設定』から変更できます。スライドの他にもフェードを選択することができます。やってみてください。
広告｜AdSense
６日目 追加CSSを使ってみよう
6日目は
追加CSSを使ってアニメーションを設定してみましょう。
＊ブログ仲間のはっちゃんのブログTuriccoの記事『CSSでなめらかに点滅させる方法（コピペＯＫ）』を参考にしています。
手順
１．まずはWordPress管理画面＞外観＞カスタマイズの順にクリックし追加CSSをクリックします。
２．カスタマイズ中追加CSSの枠内にCSSを書き込みます。
/* 点滅1 */
.blink1 {
animation: blinking 10s ease-in-out infinite alternate;
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
＊詳しくは、ブログ仲間のはっちゃんのブログTuriccoの記事『CSSでなめらかに点滅させる方法（コピペＯＫ）』を確認してみてください。
アニメーションプロパティ
- .blink1 …CSSの名前
- animation: …アニメーションCSSだよっていう宣言
- blinking …アニメーションの名前
- 10s …アニメーションにかける時間
- ease-in-out …ゆっくり始まってゆっくり終わる
- infinite …繰り返すよ
- alternate …可逆的に
blinking（アニメーション名）の指定
- @keyframes blinking …blinkingっていうアニメーション名の動き方はこう指定するよ
- 0% {opacity: 0;} …スタートの時は不透明度0％から始まって（透明から始まって）
- 100% {opacity: 1;} …終わる時は不透明度100％で終わるよ。
- }
３．追加CSSにアニメーションCSSがかけたら『公開』をクリックします。
４．次に、点滅させたいアイテムを選びます。今回は画像ブロックを選択します。
５．高度な設定＞「追加CSSクラス」にカーソルを合わせます。
６．枠内にCSSの名前「blink1」を入力します。すでに他のCSSが入っている場合は半角スペースを空けて入力します。＊半角です。
７．下書き保存をしてから、プレビューしてみましょう。
思った通りに点滅していれば完成です。
広告｜AdSense
７日目 おすすめHowToブログ紹介
7日目は
これからさらにLightningブログをレベルアップしていくのに参考になるサイトをいくつかご紹介したいと思います。
Turicco All themes
ブログ仲間でCSSカスタマイズが大好きなはっちゃんのブログ。WordPressテーマCocoonのカスタマイズで有名なブログですが、他のテーマでも使えるCSSテクニックを公開しています。わかりやすくておすすめ！
魚沼情報サービス
Lightningを中心としたカスタマイズ方法を紹介されています。『なるほど！こうやってブロックを使うのか！』というヒントが満載です。
VK Pattern Library
パターンライブラリで公開されたパターンをVK Block Patternsに保存して使うことができます。Lightning Freeでもつかえるパターンがあるので探してみてください。おすすめです。
例えば⇩
募集要項
Requirements
こんなパターンが用意されていたり⇩こんなパターンが用意されていたりします。
採れたて野菜
- FRESH -
地元の採れたて野菜を使っています。
甘みたっぷりな野菜の味や歯ごたえ、色どりを堪能してください。
旬の素材
- SEASON -
旬の野菜を使っています。
お魚も、地元の漁港で買付けしています。
季節によって変化する素材を
お楽しみください。
シンプルな味付け
- SIMPLE -
素材の味を感じていただけるよう、シンプルな味付けを
こころがけています。
ぜひ活用してください。
広告｜AdSense
まとめ
全3週でお届けした「Lightningでブログを作ろう！」はいかがだったでしょうか。まだまだ力不足で、上手にお伝えできていないのでは…という不安もありますが、この記事を参考にブログを作っていただけたら嬉しいです。
「いかに最短でサイト制作ができるか」を実現したWordPressテーマLightning。ブログもビジネスサイトも簡単につくることができます。HTMLやCSSを使わなくてもかっこいいサイトをつくれるLightningにぜひ触れてみてください。
追記：
WordPressテーマでPTAホームページを作りたいというお問合せをいただきました。今回のシリーズ『Lightningでブログを作ろう』を活用いただければと思います。当サイトに掲載されている内容で『うまくいかない…』等のご相談ありましたら、気軽にお問合せください。
最後までご覧いただきありがとうございました。
広告｜AdSense
