【ワードプレス 使い方】WordPress 5.4 アダレイ update
ワードプレス最新バージョンWordPress5.4がメジャーリリースされました。
投稿のブロックエディタは変わらずGutenbergでバージョン7.8になっています。
![WordPressの更新](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-01-2-1024x733.jpg)
エディタを見ていきましょう。
「表示」は変わらず
トップツールバー
スポットライトモード
フルスクリーンモード
![トップツーツバー](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-03-1024x769.jpg)
になっていてお好みで切り替えます。
記事ブロックではドラッグ&ドロップでアイキャッチ画像が追加できるようになっています。
![カラム](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-05-1-1024x716.jpg)
![アイキャッチ画像追加](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-04-1024x728.jpg)
文章の中で部分的に色をつけることができるインラインカラーという設定が追加されています。
![インラインコード](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-06-1024x661.jpg)
![カスタムカラー](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-07-1024x721.jpg)
ボタンブロックが新しくなり、複数のボタンを並べて追加できるようになりました。
ボタンの背景色にグラデーションが使えるようになっています。
![レイアウト要素のボタン](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-08-1024x945.jpg)
![テキストカラー](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-09-1024x630.jpg)
カバーブロックも新しくなりました。
背景色も単色からグラデーションまで設定することが出来ます。
カバーブロック内のテキストもインラインカラーが使えるようになっています。
![カバー](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-10-1024x877.jpg)
![カバーブロック・グラデーション](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-11-1024x543.jpg)
![カバーブロック・ インライン](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-12-1-1024x698.jpg)
ギャラリーブロックでは配置した画像のサイズをサムネイル、中、大、フルサイズに選択できるようになりました。
![ギャラリー](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-13-936x1024.jpg)
![ギャラリーブロック](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-14-1024x702.jpg)
アイキャッチ画像では画像をドラッグ&ドロップで直接アップロードできるようになりました。
![アイキャッチ画像](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-15-1024x659.jpg)
新しいブロックでは「Social Icon」と「TikTok」が追加されました。
「Social Icon」はアイコンを追加してクリックするとリンク用のURLが挿入できるようになります。
「TikTok」はembed用のURLを入れます。
![ソーシャルアイコン](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-16-1024x946.jpg)
![ソーシャルアイコン](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-17-1024x406.jpg)
![TikTok](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-18-1024x496.jpg)
バージョンアップしたらカレンダーの表示が崩れていました。
![カレンダーの表示崩れ](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-19-1024x740.jpg)
![カレンダーCSS修正](https://tatsuya-lab.com/wp-content/uploads/2020/04/tatsuya-lab-20-1024x799.jpg)
カレンダーウィジェットの月の部分を表示するタグが<table>から<nav>に変更してありました。
CSSを下記に修正します。
CSS
/*カレンダー*/
#calendar_wrap{
padding-top:10px;
}
#wp-calendar{
width: 100%;
font-size:12px;
padding-top: 10px;
}
#wp-calendar tr{
display: flex;
justify-content: space-around;
}
#wp-calendar tr:first-of-type{
justify-content: flex-end;
}
#wp-calendar tr:last-of-type{
justify-content: flex-start;
}
#wp-calendar th,
#wp-calendar td{
display: block;
width: calc(100% / 7);
text-align: center;
margin-bottom: 10px;
}
#wp-calendar td:first-of-type,
#wp-calendar th:first-of-type{
color: red;
}
#wp-calendar tbody td:first-of-type a{
color: #ff9999;
}
#wp-calendar td a{
padding: 0;
}
#calendar_wrap nav{
display: flex;
justify-content: center;
}
#calendar_wrap nav span{
width: calc(100% / 3);
text-align: center;
}
#wp-calendar #today a,
#wp-calendar #today{
color: white;
background-color:#6699ff;
font-weight:bold;
}