ブロックエディターの「ボタン」をカスタマイズ

フロントページから「投稿リストへのリンクの記述」は枠線で我慢してたが、ブロックエディターのボタンに切り替えてみようと試みた。その前にサイトで調べて分かったことが幾つかあってその部分を理解した上で追加CSSに加えてカスタマイズした。

前もってボタン用のスタイル（メニュー）の項目でデザイン（フォント、ボーダー色、リンク先、等）を作成してから「.wp-block-button .wp-block-button__link、.wp-block-button .wp-block-button__link:hover」をStyle.CSSに追加すると独自のボタンらしきものを作成することができる。

「.wp-block-botton .wp-block-botton_link」の部分は、前もって作ったデザインを除く、ボタンのトランジション（動き）等を指定する。
「.wp-block-button_link:hover」の部分は好みのボタン動作を指定する。

.wp-block-button .wp-block-button__link {
    background-repeat: no-repeat;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}
.wp-block-button .wp-block-button__link:hover {
    background-position: 70% 30%;
    padding: 10px 40px 10px 15px;  	
    color: none;
  	opacity:0.8;
}

見よう見まねの部分があるけど、「TwentySeventeen」には視覚的に修正できる「ダッシュボード→外観→カスタマイズ」で、好きなスタイルに近い ボタンになるように修正してフロントページへ加えることができた。