ブロックエディタ 応用編
WordPress編集のステップ５
多機能♬ ブロックエディタ
バージョンアップ！ 応用編
今回はブロックエディタ応用編ですね。
前回の基礎編でブログが書けるようになりました。
この応用編でブログのバージョンアップを目指しましょう！！
バージョンアップ！ 応用編
目指せ！ ブログのグレードアップ☕
テーブル
表の作成も簡単に設定ができます。
当サイトでも利用しています。
（ローカル環境準備）
カラム（列）と行の数の指定をして 表を作成 をクリックします。
詳細設定でスタイル（表のデザイン）やヘッダー、フッターの有無、背景色の指定もできます。
オレンジ枠で列や行の挿入、削除もできます。
表を取り入れると見やすくなりますね。
グループ化
いくつかの項目をまとめてグループ化することができます。
グループに対して枠線で囲んだり、背景色をつけたりするときに利用できます。
オレンジ枠のファイル名とイラストをグループ化して背景色と枠線の設定をしました。
緑線の文章はグループに入れていません。
このピンクで囲っているところもグループだよね！！
グループ化したい項目をドラッグ、または Shift ＋ クリック で選びます。
オレンジ枠をクリックして グループ化 を選びます。
緑枠をクリックしてグループ化のアイコンをクリックすることもできます。
グループの中にグループを入れ子にすることもできます。
再利用ブロック
同じような項目やグループを何度も利用したいことがあると思います。
いちいち作成しなくとも再利用ブロックというものがあります。
ボクのこの部分も再利用ブロックだよね🐾
再利用ブロックの追加
登録したいブロック（グループ）の詳細メニューから 再利用ブロックに追加 を選びます。
これで再利用ブロックに追加できました。
わかりやすい名前を入力して保存します。
再利用ブロックの利用
今まで項目を選ぶ際には緑線のブロックのタブから項目を選んでいました。
再利用ブロックはオレンジ枠の 再利用可能 タブをクリックします。
そこに今までに登録した再利用ブロックが表示されています。
ここから利用したいブロックを選択します。
再利用ブロックが表示されたら必ず 通常のブロックへ変換 をクリックします。
通常のブロックに変換してからグリーン線の部分の文章を変更します。
通常ブロックに戻してから文章を直そうね！！
再利用ブロックはとてもよく使います。
グループ化したものをよく登録しています。
ショートコード
ショートコードとは「ショートカット」＋「コード」の意味で汎用的に使用する処理を簡単呼び出せるようにしたものです。
本来はショートコードを入力して、function.php に関数の追加をします。
ですが、 function.php はWordPressでも最重要ファイルで
修正、追加方法を間違えてしまうとサイト全体に影響を及ぼしてしまいます。
（最悪の場合、画面が表示されなくなってしまいます）
初心者にはあまりおすすめしません。
興味がある方はこちらの記事を参考になさってください。
https://briarpatch.co.jp/wordpress-shortcode#toc1こっちはプラグインを使うから初心者向きだよ！
オレンジ枠の ショートコードを挿入 をクリックします。
プラグインでご紹介した Shortcodes Ultimate を使うことができます。
さまざまなメニューがあり、詳細な設定もクリックでできます。
Shortcodes Ultimate の紹介
プラグインは何？
これは Shortcodes Ultimate の スペーサー です。
縦方向に30pxの間隔をあけることができます。
ワードプレス編集編でお役立ちプラグイン特集「Shortcodes Ultimate」を書いています。
https://snowlilas.com/study/shortcodes_ultimate/リスト
リストアップが作成できます。
リスト表示しています。
初期設定で「・」が表示されるのですが
cssで非表示にしています。
①②…… はテキストで入力しています。
- リスト
- リスト
- リスト
オレンジ枠を選択すると「・」が冒頭に表示されます。
- リスト
- リスト
- リスト
番号を振ることもできます。
（緑枠）
- リスト（親）
- リスト（子）
- リスト（親）
- リスト（子）
- リスト（子）
子要素も作成できます。（青枠）
親要素にする場合は黄枠をクリックします。
- リスト（親）
- リスト（子）
- リスト（親）
- リスト（子）
- リスト（子）
番号でも子要素もナンバリングできます。
設定の仕方は「・」と同じです。（青枠）（黄枠）
テキストエディタの設定では「・」か番号が表示されることになっています。
上記の私のリストのように「・」や番号を非表示にする方法は
css装飾で行います。
プログラミング編で書く予定です。
高度な設定
今までにも css装飾 と書いていました。 このcss装飾をするには 高度な設定 でクラス名かID名を付与します。
CSS装飾とは付与したクラス名やID名を使ってデザインや配置などの設定をすることです。
今までにもご案内していたように背景色や文字の色をつけたりなどの簡単な装飾はブロックエディタのメニューバーでも行うことができます。
メニューバーで行えないデザインをするには高度なメニューバーで設定を表示をクリックします。
高度な設定のところに HTMLアンカー（オレンジ枠） と 追加 CSS クラス （グリーン枠） を入力する項目があります。
HTML アンカー
htmlファイルやcss装飾では ID名 と呼ぶことが多いです。
半角英数字で設定します。
“注意！！" HTMLアンカー（ID名）は同じ名前を複数の項目につけることができません。
ですから「この部分にだけ機能させたい！」ときに利用します。
#copyright {
border-top: none;
}これはフッターの copylight という部分です。テーマのデザインファイルの設定で上罫線(border_top)が設定されていたのですが、不要なのでなし(none)に設定しています。
追加 CSS クラス
htmlファイルやcss装飾では クラス名 と呼ぶことが多いです。
半角英数字で設定します。
HTMLアンカーと違い、複数の項目に同じ名前をつけることができます。
またひとつの項目に複数の名前を付けることもできます。
どんな風に装飾したいかを style.css にコーディングします。
外観 → テーマエディター → style.css
.border_sepia {
border: 3px solid #622d18;
border-radius: 5px;
}
.font_20 {
font-size: 20px;
}上記のように設定しておくと項目を茶色の線で囲んで(border_sepia)、フォントサイズを20px(font_20)にすることができます。
他の項目でもこの名前を設定しておけば同じように茶色の線で囲んだりフォントサイズの変更ができます。
カスタムHTML
先ほどの高度な設定で付与したID名を使ってページ遷移やページ内遷移をさせることができます。
ここの見出しの カスタムHTML にHTMLアンカーの設定をしています。
これはページごとにある 今回のメニュー です。
カスタムHTMLの部分をクリックするとここ（カスタムHTML）に飛ぶようにコーディングしています。
html のコードを入力します。
ここに飛ぶコードはこんなカンジです。
見出しの カスタムHTML に custu_html というHTMLアンカー（ID名）を付けています。
飛ばしたい部分（クリックするところ）でこのID名を使います。
コーディングでは名前の前に # を付けます。
<a class="report_content" href="#custum_html" data-type="internal" data-id="#custum_html"">カスタムHTML</a>これで「今回のメニュー」の 「カスタムHTML」 をクリックすると カスタムHTML の見出しのところにジャンプします。
他にはWordPress模写編でスライドショーをカスタムHTMLで設定しています。
WordPress編集編でスライドショーのコーディングを編集予定です。
お待ちくださいませ。
このサイトで一番多く利用しているカスタムHTMLが マーカーアニメーション です。
次にご紹介しますね。
マーカーアニメーション
プラグインは何？ でマーカーアニメーションを紹介しました。
https://technote.space/marker-animation#toc4このマーカーアニメーションはとってもラクです。
ただこのサイトではこのプラグインとの相性がよくないらしく使えませんでした。
とはいえ、 画面に見えたらマーカを引いてくれるアニメーションの機能は欲しい！
ということでカスタムHTMLでコーディングすることにしました。
文章全体にマーカーアニメーション！①まずカスタムHTMLに以下のコードを入力します。
<span class="marker-animation"> 文章全体にマーカーアニメーション！ </span>②次に style.css にコードを記述します。
style.css の記述は外観 → テーマエディター の画面で style.css のファイルを選択します。（オレンジ枠）
テーマによって冒頭部分は違うと思いますが、
「これより下に書いてください」とガイドがあると思います。
冒頭部分は消さずにガイドに従った部分に記述をしてください。
/* マーカーアニメーション 2021/1/21 */
.marker-animation.active {
background-position: -100% .8em;
}
.marker-animation {
background-image: -webkit-linear-gradient(left, transparent 50%, rgb(236,156,153) 50%);
background-image: -moz-linear-gradient(left, transparent 50%, rgb(236,156,153) 50%);
background-image: -ms-linear-gradient(left, transparent 50%, rgb(236,156,153) 50%);
background-image: -o-linear-gradient(left, transparent 50%, rgb(236,156,153) 50%);
background-image: linear-gradient(left, transparent 50%, rgb(236,156,153) 50%);
background-repeat: repeat-x;
background-size: 200% .8em;
background-position: 0 .5em;
transition: all 2s ease;
font-weight: bold;
}③最後に動きをつける javascript の記述を add_header.php に追加します。
（ルクセリタスの場合）
追加する箇所はそれぞれのテーマによって違うかと思います。
javascript の追加をするファイルを調べます。
この記述でマーカーを引きたい箇所が画面上に見えたら
マーカーアニメーションを起動 させることができます。
<script>
$(window).scroll(function (){ // マーカーの動きをつける
$(".marker-animation").each(function(){
var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
var scroll = $(window).scrollTop(); //スクロールの位置を取得
var windowHeight = $(window).height(); //ウインドウの高さを取得
if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
$(this).addClass('active'); //クラス「active」を与える
}
});
});
</script>プラグインなしでもマーカーアニメーションができたね♬
ちなみに文章の一部分にだけマーカーアニメーションを使いたい場合はカスタムHTMLのコーディングがこちらです。
<span class="marker-animation"> 〇〇〇 </span>で囲まれた部分の文章がマーカーアニメーションの対象になります。
<p>この記述でマーカーを引きたい箇所が画面上に見えたら
<br><span class="marker-animation"> マーカーアニメーションを起動 </span>させることができます。</p>追加したいファイルを探すのが少しタイヘンかもしれません。
「テーマ名 javascript の追加」で調べるといいと思います。
どうでしょうか。
少し大変でしたか？
前回の基礎編だけでも十分ブログを作成できます。
余力があれば今回の応用編にチャレンジしてみてください。
負担に感じない範囲でいきましょう♪
ストレスフリーがいちばんだよね🌟
わかりづらい点、うまくいかなかった箇所などありましたらお知らせください。 コメント欄へ
最後まで読んでくれてありがとう！
上手く設定できた？ ブログデビューだね！
ブロックエディタ バージョンアップ！ 応用編でした。
次のSTEPに進んでくださいね。
趣味で源氏物語を【超訳】しています。
話し言葉でお気軽GENJI
よかったら遊びにきてください。
小倉百人一首も【超訳】しています。
話し言葉でお気軽 OGURA
よかったら遊びにきてください。
