WordPressでいろんな装飾を追加できる「Shortcodes Ultimate」／CMSのBiNDup

投稿者：相田
様々な装飾を追加できる「Shortcodes Ultimate」
ボタン、テーブル、タブ、リストそのたもろもろのいろんな機能が搭載されているようです。
リストで使ってみたんですが、先頭の装飾（チェックマークとか星とかその他色々）を選択できて、1字下げの頭ぞろえも自動でやってくれました。
こちらにまとめてあるので良ければご覧ください。

すごい作り方が簡単なCMS「BiNDup」
（LIGのレビュー記事があったのでこっちのが分かりやすいかもしれません）
結構老舗のCMSだそうなのですが、私は最近初めて知りまして…
文章はもちろん、コンテンツのブロックの移動等も完全にビジュアルエディタで編集できるCMSです。
テンプレートデザインもオシャレ（CSS・HTMLがイジれれば可変も可能）で、WEBフォントも使えるし、SEOもできるし、セキュリティもめちゃくちゃ高いし、費用もそこまで高くないという…
世界の3割くらいのホームページはCMSだと言われてるのでこれからもどんどん便利なCMSが出てきそうですね~

HTML5 入れ子チートシート

投稿者：本田
以前、有元さんがHTML5の入れ子ルールの記事を紹介していたので、私がいつも使ってるツールをご紹介します。

HTML5 入れ子チートシート
https://yoshikawaweb.com/element/

これは該当のタグの「親」ボタンを押すと、そのタグの親になれるタグを、
「子」ボタンを押すと、そのタグの子になれるタグを教えてくれる便利ツールです！
迷ったときにぜひ…

PDFをページめくりで読めるWPプラグイン

投稿者：西
最近見つけたWPの面白いプラグインをご紹介いたします。

flowpaper
WPの投稿画面でショートコードを記載するだけで、PDFをパラパラ本をめくるようにみれるプレビューが表示できます。（テストで実践済み）
全画面表示・ダウンロードができるボタンも表示され、気軽にできるので、問診票など載せる場合に良いかもしれません:考え中:

remについて

投稿者：土佐
コーディング時にpx指定は古くてこれからの時代はremなのかなと思っていたりした時があったので、とても参考になった記事共有させていだだきます。
https://zenn.dev/tak_dcxi/articles/26280e7607bcd2

画像を水彩加工にする方法

投稿者：川目
以前、写真の水彩画化について聞かれたりしましたので、改めて自分が参考にしている（パクっているw）サイトをご紹介します。（もう皆さん知ってらっしゃるかと思いますが…）
また、自分が以前制作したpsdを下記にアップしておりますので、使えそうでしたらご利用ください。
\\TS5600DB48\share\制作・サポート\素材\デザイン素材\水彩画写真.psd
https://taitokatsumata.com/archives/1492

position:absoluteについて

投稿者：尾高
今まで子要素にposition:absoluteをかける場合は親要素にrelativeをかけなければいけないと思っていたのですが、
実は「「absolute」が基準として必要とする要素のposition指定は「relative」ではなく「static以外」」らしいです。
なので、親要素がabsoluteであっても、入れ子で子要素にabsoluteをかけられるみたいです。
目から鱗だったので、共有します。
https://1-notes.com/css-position-absolute-in-absolute/

コーディング（プログラミング言語）をすると副産物が得られる

投稿者：豆成
実は、プログラミング言語をより早く正確に習得した人々は『言語能力と問題解決能力が優れている』傾向がみられたそうです！
そして、コードを処理する際に、脳みその前頭葉と頭頂葉全体が動き、
この部分は『一度に多くの情報を必要とするタスクやさまざまな精神的タスクを実行する能力を担っている』とのことなのです！そしてそして、こういう作業は左脳をよく使うのかと思いきや、右脳も左脳もまんべんなく使われているみたいなのです('ω')

コード処理の際の脳の動きは、言語理解時のものでもなく、数学や論理の時とも違う動きをしているとのことです。
コンピュータープログラミング自体が、まだまだ新しいものであり、優れたプログラマーになるための物理的なメカニズムも発見されていないそうです。
我々は一体、どこに向かっているのか、今後が楽しみです！

https://gigazine.net/news/20201217-reading-computer-code-brain-region/

2021年注目のWebデザインのトレンド

投稿者：東江
このサイトでも紹介されていますが、しばらく前からグラデーションが人気の傾向にあるようですが、確かにAppleとかその他のスマホの広告なども画面がグラデーションになっているものをちらほら見かけるなと思いました！
https://photoshopvip.net/126127
https://www.marukin-ad.co.jp/marulog/?p=2858

Deepl翻訳／jpgの画質をキープしたまま圧縮できる「Squoosh」

投稿者：河鰭
自分が使ってるサイト紹介です。

■Deepl翻訳
https://www.deepl.com/home
コーディングで詰まった時にめちゃくちゃググった結果「英語の壁」にぶち当たることってあると思うのですが（あってほしい）、そういう時に使います。
Google翻訳よりも日本語で読みやすい翻訳をしてくれるのでおすすめです。※主観です

■Squoosh
jpgの画質をキープしたまま圧縮したい！という時に使ってます。
https://squoosh.app/
メリットは、
・Googleが作ってるのでセキュリティ面の懸念がない（アプリを追加すればローカルで使える）
・画質を任意の数値にでき、どれくらい容量が削れるか等をリアルタイムで確認できる
・フォーマットが豊富（Mozjpeg、OxiPNG、SVGなどもできます）
デメリットは、一括で圧縮できないことです……画像をしこたま使うデザインの場合はちょっと手間かもしれません。
pngに関しては、あんまり圧縮できない？っぽいので結局TinyPNGも併用しています。

印刷プレビューで崩れる問題事例／秀英丸ゴシックはfontplusが綺麗

投稿者：有元
実務で引っ掛かる度に忘れないようメモしています。
為になるかはわかりませんが、そちらを共有します

■印刷プレビューで崩れる問題事例
主な問題点：プレビューで一部SP表示になる、所々崩れる

◇メディアクエリを下記に書き換え
@media only screen and (max-width: 460px) { /*SPレイアウト*/}
@media print, screen and (min-width: 461px) { /*PCレイアウト*/}

◇@media printで下記追記
・bodyに幅指定
width: 1280px !important;
・崩れているところ調整
→変に文字改行されてしまっているところの左右のpaddingを0にしたり、少しだけfont size小さくしたり

◇GoogleMapが表示されない
iframe→htmlとcssのwidthとheightを100%にする
iframeを囲っている要素にoverflow: hidden;

■秀英丸ゴシック
typesquareよりfontplusのほうが綺麗
※fontplusのほうがじゃぎりが少ない

2020年12月のログ