IT初心者向けの・操作ガイド(WordPress編その2)

インターネット
この記事は約7分で読めます。

ブロックエディターの装飾

ページの「目次に戻る」ボタンの設置

ここでは、ページの行数が増えると下にスクロールした後に戻るボタンでも、目次に戻ることができないか迷っていました。簡単な設定で解決できましたので下記に記載します。(テーマによって相違があると思いますが下記はCocoonでの例です。)
※ リンク先を「#toc」とすれば目次にリンクされます。

ちなみにリンク先を「#」や「#top」はページトップに戻ります。

[手順1]
[手順2]
[手順3]
[手順4]
[完成]

WordPressで挿入した図に枠を表示させる

ここでは、WordPressで挿入した画像の範囲がわからずにいたので、画像に枠を付けられる方法で簡単な方法がないか等で悩んでいました。簡単な設定で解決できましたので下記に記載します。参考にしていただけると幸いです。
下図のように「画像の囲み効果」を選択するのみです。
手順:「Cocoon設定」⇒「Cocoon設定」⇒「画像」タブの選択⇒「画像の囲み効果」を選択。

リストのアイコンを装飾する方法

ここでは、ブロックエディターのリストで文頭につくアイコンを記号に変えたりわかりやすく変更する簡単な方法がないか試行錯誤の結果下記方法が見つかりましたので記載します。参考になれば幸いです。
操作方法:「リスト」を選択する。(下図の画面①)⇒バーの左側の「親ブロックを選択リスト」をクリック⇒「ブロック」を選択する。(下図の画面②)⇒「[C]スタイル」を展開しお好きな記号を選択する。(下図の画面③)⇒完成(下図の画面④)です。(詳細は下図を参照ください。)

画面①
画面②
画面③
画面④

ブロックにボーダーを設定し目立つようにする

ここでは、記事のブロックエリアにボーダーの装飾を設定し目立たせる場合の方法を初心者にわかるよう解説します。
ボーダーを付けたいブロックを選択⇒右側のブロックタブの「ICボーダー」を選択し好きなタイプを選ぶと終了です。
もし、「ICボーダー」が表示されない場合親ブロックに切替えてみてください。

ページの途中にリンクを貼る(ブログカードの場合)

ここでは、ページのリンクにテキストでなく該当ページのアイキャッチ画像などのリンクを貼る場合ブロックエディターの「ブログカード」を利用しました。リンクの貼り方についてわかりやすく下記に記載します。ご参考にしていただければ幸いです。

[操作手順:イメージ図]

ブロックエディター画面の左側にある「ブログカード」を選択し「直接URLを入力する」とページに上記のようなリンクが貼られる。

ラベルを変更する場合

ここでは、下図の「サイトでの表示画面」の例のようにラベルの変更方法を下記に記載します。ご参考にしていただければ幸いです。

操作方法:ラベルを変更したいブログカードのラベルを選択し、右側の「ブロック」⇒「ラベル」より選択します。

[サイトでの表示画面]

ブロックエディターのカスタマイズ

ブロックではCSSを使えないということではありません。そのため「装飾を加えるために、最初から最後までコードエディターで書く必要はありません」。むしろ、現在のWordPressでは「ブロックエディターを使いながら、必要な部分にだけ追加CSSを使う」のがミスの少ない方法です。
基本的にはブロックを使い、必要に応じてブロックでCSSの「クラス属性」だけを指定するのが良いと思います。
以下、手順です。
1:ブロックエディターで普通に画像や文章を配置する。
2:そのブロックを選択し、右側の設定パネルの一番下にある「高度な設定」を開く。「追加 CSS クラス」という欄に、好きな名前(例:my-special-border)を入力する。
3:「外観」>「カスタマイズ」>「追加CSS」に、その名前に対応するCSSを書く。
【具体例】画像を丸くして影をつけたい場合
ブロック側: 追加CSSクラスに circle-shadow と入力。
追加CSS側: .circle-shadow { border-radius: 50%; box-shadow: 5px 5px 10px #ccc; } と記述する。

ブログカードに表示される内容記載の場所

記事を見直したときに記事内容と、ブログカードの内容が違っていてどこで記入されているか迷いました。

下図のようにに手順を記載します。
操作:「編集」⇒抜粋内容のところの記入です。

タイトルとURLをコピーしました