CSSだけでテキストを無限ループアニメーション可能です。実際のコード例と解説、注意点などまとめて掲載しています。

ChatGPTを使用してWordpressのタグにカラー設定の項目を追加する方法を聞いてみたら、functions.phpに記述するPHPコードがばっちり返ってきました。

よくやってしまいがちな日本語タイトルのままのブログ記事投稿。 一応モダンブラウザだと問題なく日本語URLで表示されますが、サーチコンソールでチェックしづらく、SEO的にもイマイチそうな文字化けの可能性があるURLになってしまいます。 ですので、気づいたらURLを正しく半角英数の自然なものに変更し、JavaScriptを使ってリダイレクトさせています。 その際につけてもらったはてなスターが消えてしまうのは残念で申し訳ないところではありますが、いた仕方無し。 具体的な方法を知りたい方は是非当記事をご覧頂ければ幸いです。

WordpressでContactform7を使用した際の確認/完了画面にMulti-Step Forms、条件分岐にConditional Fieldsを併用した際のうまく動かない問題解決方法。

AppleシリコンことM1チップ搭載のMacが2020年発表されて話題になりました。 // 最新 Apple MacBook Air Apple M1 Chip (13インチPro, 8GB RAM, 512GB SSD) - ゴールド 私は長らく2014年のMacbook Proを使っていましたが、ちょっと古くなったので売却。 今回M1チップのパフォーマンスがどうやら凄いらしいということで惹かれて新規購入しました。 巷で言われているように、バッテリーの持ちや動作の軽快さは非常に素晴らしいもので、M1にネイティブ対応していないアプリの互換起動も特に問題なく満足していました。 ただ一点、マイクに…

や$#"!'などの記号の正式名称、正しい読み方" title="" class="hatena-fotolife" itemprop="image" /> コーディングには「<>」←こんな大なり小なりに使う記号や「{}」←こんな波型のかっこ、「」←こういった角ばったかっこなど色々な記号が登場しますよね。 他にも「:」や「;」、「"」「'」なんかも常用します。 このあたりいつも使っているけれどなんと呼べばいいのか、正しい読み方はなんなのかを今回紹介したいと思います。 いつもレッスン時も伝わりやすいよう「ちょんちょん」とか「タグのカッコ」とか呼んでいますが、正しい読み方も覚えてさらっと使えるように…

Amazon.co.jpのKindleストアで50%オフのセールが開催されています。 インプレスグループフェアとしてIT・デザイン・ビジネス・実用などの電子書籍が2021年2月いっぱいまでお得に購入できるので、特に当ブログ対象のWeb/IT/デザイン系の方、学習中の方は是非これを機に欲しかった書籍をゲットして頂ければ幸いです。

Photoshop CCで簡単お手軽に矢印を描く方法をキャプチャを交えて解説しています。 Adobe CSからCCまで同じ方法で対応可能です。現在Photoshop 2021バージョン22を用いての解説となっています。

Amazon Kindle UnlimitedをWebデザイナー・エンジニア視点での活用の仕方や、料金・役立つ読み放題の書籍・雑誌などをご紹介。

Visual Studio Code、軽量で拡張性があって非常に使いやすい無料のコードエディターですが、初心者の方には少しとっつきにくい印象があります。 インストール直後は英語設定 プレビュー機能がない Microsoft製なのでWindowsのイメージ 個人の主観かもしれませんが、MicrosoftのOfficeに通じるような少し事務的というか、エンジニアっぽいお堅いイメージです。 ▼AtomとVScodeの公式ダウンロード画面。Atomかわいいおしゃれに対して、VScodeはものすごく普通。 ただ、2、3年前くらいに巷でやたらと「VScodeに乗り換えました！」「VScodeがサクサク」な…

デザイナー必須のイラストレーターやフォトショップなど、Adobe Createve Cloudのソフトウェア群。通称アドビCC。 かなり高額のソフトなので、定価よりなるべく安くなる方法で賢く購入していきましょう。 ▼月額のサブスクリプションの他、12ヵ月版がAmazonで販売されてます。 // Adobe Creative Cloud コンプリート 12か月版 Windows\/Mac対応 オンラインコード版 一年に何度かセールで安く買える時もありますが、それ以上に「学生・教職員向け」の学割版が安かったりします。 そんな事言っても、学生じゃないし、、社会人だし、、と嘆く方に朗報。 今回紹介する…

ネットショップを開きたいという場合、自社サイトに組み込む方法や他社の提供しているサービスと連携する方法など、いくつかパターンがあります。 ショップ開設のご相談の際に、ざっとパターンを比較してお話することもあるので、今回あらためて比較・解説記事としてまとめてみたいと思います。 これからネットショップを開くことに興味をお持ちの方や、ECサイトをどうやって作るかに興味を持たれた方の参考になれば幸いです。 ではやっていきましょう。

width、height、align、radius、relativeなど間違いがちなHTML/CSSの読み方を、一般的な読まれ方と実際の英語の発音などと照らし合わせてWeb現場で使えるようまとめて解説しています。

面白いサイトがないかリサーチしていると、ふと、「お！」と目を引かれるサイトがありました。 ▼株式会社フリースタイルエンターテイメントというWeb制作会社のホームページです。 www.freestyle-entertainment.co.jp フリースタイルエンターテイメントさんは、数多くの制作事例があり、リクナビ新卒採用の業界エリア部門4年連続1位を誇る人気企業。 そのフリースタイルエンターテイメントさんのコーポレートサイトがつい先日リニューアルしたということで見てみたのですが、、、

VScodeの設定の同期機能を使えば、拡張機能やUI設定などを、新しいデバイスへまるごと移行出来ます。 簡単便利な機能をキャプチャを交えて解説した記事ですのでお役に立てれば幸いです。

Youtube動画を埋め込む際に、評価スコアへの影響を下げるように動画を読み込ませる方法を解説します。 data属性を利用したjavascriptによる遅延読み込みと、代替画像に置き換えてクリック後に読み込ませる方法を解説しています。

前回に引き続きWordpressのマルチサイト機能をご紹介したいと思います。 ▼前回Part.1ではマルチサイト化におけるメリット・デメリットをご紹介しています。 webabc.hatenablog.jp Part.2の今回は実際に導入する手順を解説していきます。 Wordpressの多言語対応などでマルチサイト化しようと今から実践・検討される方の参考になれば幸いです。 ではやっていきましょう。

Wordpressには標準でいくつもサイトを運営できるマルチサイトの機能が備わっています。 通常は無効化されているこのマルチサイト機能を使うと、ひとつのWordpress本体データと、ひとつのデータベース内に異なるサイトを複数持つことが出来ます。 今回はとあるご相談者がサイトのの多言語対応をしたいというご要望だったので、マルチサイト化による方法をとらせて頂きました。 マルチサイトはこれまであまり触ってこなかったので、今回調べてわかった導入の手順など記しておこうと思います。 手順以外にまずPart.1ではメリット・デメリットなど考察もしていきますので、マルチサイト化について検討されてる方のお役に…

Wordpressのカテゴリーで分けた多言語化サイト化のご相談を頂きました。 その際に多言語に対応したメタタグを各記事ごとに挿入する必要があったので、調べた内容を記したいと思います。 多言語化とは関係なく、記事毎にheadタグ内に何かしら記述を挿入したい時に役立つ情報かと思いますので、ご参考頂ければ幸いです。 ではやっていきましょう。

Wordpressのテーマファイルの各テンプレート内で使う独自の関数をテンプレートタグと呼びます。 例えば記事ループ内で本文を表示させる「the_content()」などもテンプレートタグ。 前回記事で「Wordpressの独自テーマ作成に良く使う関数や記述」ということで、テーマ作成の際のstyle.cssへの記述やfunctions.phpへ書く関数なども取り上げたので、今回は良く使うテンプレートタグのみピックアップして取り上げたいと思います。 ▼前回記事は独自テーマ作成の流れに沿った解説多めの内容となっています。 webabc.hatenablog.jp オリジナルのテーマ作成をしている方…