ブログ

今回はCSSとGIFアニメだけでテキストをかっこ良く表現する方法をご紹介します。 具体的に説明すると、まずGIFアニメ画像を背景に敷いて、任意のテキストでマスクをかけるという感じです。サイトやページのファーストビューにこれをポンと配置するだけでインパクトを出すことが出来ます。 サンプル まずはサンプルで確認してみてください。背景に敷くGIFアニメ次第では、ソ …

MicrosoftのブラウザEdgeでの表示時、ページ内に電話番号（と、電話番号っぽい数字の羅列）が記載されていると、勝手にリンクが貼られてしまいます。 今回はそのリンクを無効にする方法をご紹介します。 方法(1)番号を囲むタグで制御 1つ目の方法としては、下記のような記述でリンクを無効にすることが出来ます。 <p x-ms-format-detect …

4月にリリースされたらしい、coffというアーティストのアルバム「Tiny Music」がすごく好きな感じで、ここ最近繰り返し聴いている。CDとしての販売はもちろん、spotifyやapplemusic等のサブスクリプションでも配信されているので是非一度聴いてみて欲しい。 coffとは 元々は「どついたるねん」というバンドのベーシストだったDaBass。昨年 …

WEBページやサイトでフォームをコーディングしていて、普通にCSSを書いていても、iPhone（iOS）環境ではinputボタンにCSSが反映されません。 そんなときの解決方法を紹介します。 iPhoneでのinputボタンにCSSを適用させるCSS -webkit-appearanceプロパティの値をnoneにすることで、iPhone独自のスタイルを無効化 …

レスポンシブ対応でサイトやページを制作するとき。問い合わせ先の電話番号を記載することがよくあると思います。 PCでの表示時は電話番号を記載するだけで良いですが、スマホ表示のときはその電話番号をタップすることで電話をかけられるようにしたい。 今回は、そんなときにつかえるCSSを紹介します。 実装方法 例えば、下記のようなコードがあるとします。 <a hr …

WordPressの私的チートシートに引き続き、今回はHTML/CSSのチートシートです。 基本的には個人的に最低限必要なものを記述したHTMLとCSSのテンプレートを用意しておいて、新規コーディング時にはそれを使い回しています。そして、気づいた点や追記したいものがあった時は忘れないようにすぐにアップデートするようにしています。 HTML 基本 宣言などの絶 …

WordPressでテーマを作成するときによく使うテンプレートタグやソースをまとめてみました。基本的なものからニッチなものまで、思いついたものは随時追記していきます。 うまくまとまった記事になれば、これを使うことでWordPressのテーマ制作がかなり捗るようになるはずです。何回も同じ事を調べなくても良くなるので、個人的にはそれだけでもかなりの時短になるかと …

今回はWordPressで特定のカテゴリーの新着記事を表示させる方法を紹介します。 例えば、「Aカテゴリーの記事は更新時に新着記事としてお知らせに掲載したいけど、Bカテゴリーの記事は更新してもお知らせには表示させたくない」という場合に使える方法です。 この方法を使えば、各カテゴリーの新着記事をまとめた固定ページを作ることも可能です。 特定カテゴリーの新着記事 …