WordPress QRコードを記事ごとに自動作成してブログのサイドバーに設置する方法
「パソコンで読んでいる記事の続きをスマホで読みたい！」という読者のために、今読んでいる記事に直接アクセスできるQRコードをサイドバーに設置しておくと親切なのでは？と考えました。しかし、記事を投稿するたびにQRコード作成サービスを使い、画像を...
Webデザイン
WordPress 
WordPress PublishPress Futureの機能を管理者権限以外のユーザーで使う方法
PublishPress Future（旧名: Post Expirator）はWordPressの記事に公開期限を設定し、期限が過ぎたら自動で記事を非公開にできる便利なプラグインです。ただし、初期設定では管理者権限以外のユーザー（編集者・...
Webデザイン 【HTML・CSS】スマホとPCで文章の改行位置を変える方法
レスポンシブコーディングで「スマホでは文章の途中で改行させたいけど、パソコンでは改行させたくない！」といった場合に役立つテクニックです。
Webデザイン 【HTML・CSS】疑似要素のテキストを途中で改行させる方法
::beforeや::afterといった疑似要素のテキストを、文章の途中で改行させる方法です。
Webデザイン 【HTML】相対パスの記述が面倒くさい！劇的に楽にする方法を紹介
相対パス面倒くさい問題Webサイトのコーディングで、リンクや画像のファイルパスを指定する際に「../」を数えた経験がある人には共感いただけるかと思いますが、相対パスって面倒くさい！作成中の階層によって「../」の個数を変える必要がある作成済...
Webデザイン 【HTML・CSS】テキストが1行なら中央揃え、2行になったら自動で左寄せさせる方法
「PCサイズでは中央揃えにしているテキストが、スマホで表示すると改行されてしまい、読みづらくなってしまう…そんな悩みをサクッと解決してくれる便利なCSSをご紹介します。中央揃えしたテキストが改行すると読みづらくなる問題セクションのタイトルな...
Webデザイン HTMLとCSSだけでページ内リンクにスムーススクロールさせる方法
アンカーリンク（ページ内リンク）をクリックするとリンク先までスーッとスクロールするあれです。いちいちJavaScriptを打たなくても、HTMLとCSSだけで良い感じのスムーススクロールが実装できます。ついでに固定ヘッダー時にアンカーリンク...
アニメーション 【HTML・CSS】マウスアウト時だけtransitionが効かない問題の解決方法
要素にtransitionでアニメーションを効かせる際に、マウスアウト（要素からカーソルを外す）した時だけアニメーションが効かない症状の解決方法です。マウスアウトした時だけtransitionが効かない症状以下のように、ボタンの上にカーソル...
レイアウト 【HTML・CSS】子要素の横幅を画面いっぱいに広げる方法
親要素の中にある一部の背景や画像を画面いっぱいに広げて表示するテクニックの紹介です。1カラムで構成されたWebサイトのデザインで頻繁に使われるレイアウトなので、この機会にコーディング方法をマスターしてしまいましょう！子要素の横幅を片側だけ画...