詳細を見る

Webコーディング

丸く配置したテキストがくるくる回転するデザインを作ろう！

よくおしゃれなサイトで丸配置のテキストがくるくると回転しているデザインを見ることが多くなってきました。 See the Pen 回転 by Ito Hiroki (@ito-hiroki) on CodePen. サイトのアクセントになって見栄えが増しますね。 今回はそんな丸配置のテキストが回転するデザインの実装方法を紹介します。 必要なツール Adobe Illustrator テキストエディタ […]

詳細を見る

Webコーディング

【CSSデモあり】横幅に合わせて文字を改行せずに省略して3点リーダーを表示させたい

プログやお知らせ一覧ページに文字を載せる際、文字数が多いと行数が増えてしまい、見た目がおかしくなってしまうことがありますよね。 そんなときは行数を制限すると見栄えが良くなります。 これを→ 2行に収めたい そんなお悩みはCSSで解消できちゃうかもしれません。 CSSでの実装方法 CSSでは横幅から余ってしまう文字を省略し、3点リーダーを表示させることができます。 以前はPHPで文字数制限をかけてい […]

詳細を見る

Webコーディング

TwitterシェアボタンをJavaScriptで実装しよう【Vanilla JS】

現代のWebサイトには欠かせない「SNSシェア」。SNSの中でもTwitterは拡散力が大きく、WebサイトをTwitterにシェアしたい人はたくさんいます。 そこで、ページごとのURLやタイトルをTwitterにシェアするボタンの実装方法を紹介いたします。 TwitterのシェアURLの仕組み 基本的に、Twitterのシェアボタンはリクエストパラメータでツイートの内容を設定できます。 パラメー […]

詳細を見る

Webコーディング

WordPressでサイト内検索フォームを実装しよう

Webサイトでコンテンツが増えてきた時にユーザーが探しているコンテンツを見つけるのに時間がかかるなんてことは多々あります。 そこで、サイト内検索フォームの導入を検討してみてはいかがでしょうか？ サイト内検索フォームを実装することで、サイト回遊率もアップすることでしょう。 テーマフォルダにsearchform.phpとsearch.phpを用意。 「/{ルートディレクトリ}/wp-content/t […]

詳細を見る

Webコーディング

MAMPでWordPressローカル開発環境を作ろう

今回はMAMPでローカル仮想環境を作ってそこにWordPressを設置する方法を紹介いたします。 開発環境 デバイス MacBook Pro 14インチ 2021（M1 Pro） OS Mac OS Monterey（ver 12.6） 必要なアプリケーション MAMP、ターミナル、その他テキストエディター 開発用のディレクトリを作成 まずは開発用のディレクトリを作成しましょう。 私は「/User […]

詳細を見る

Webコーディング

無料で使えるおすすめフォトストック「Unsplash」がすごい

「フォトストック」とはWebサイトなどに使う画像素材を取り扱うサイトです。 有料のものが質が高く使いやすいものが多いですが、無料のものでも充分にWeb制作で使用することができます。 Unsplash とりあえず無料で高画質な画像素材が欲しいのであれば「Unsplash」一択です。UIもおしゃれでシンプルなので使い勝手がいいサイトです。 ちょっとしたデメリット 拡張子がJPGのみ ちょっとしたデメリ […]

詳細を見る

Webコーディング

【Mac OS】MAMPでWordPress仮想環境を作成する方法

今回はMAMPでWordPress仮想環境を作成する方法 についてご紹介します。 前提として以下の条件を満たす方に読んでほしい内容となっております。 MAMPがインストールされている MAMPでバーチャルホスト設定が済んでいる エディターやターミナルの利用に慣れている データベースを触ることができる プロジェクトフォルダ作成 自身のPC内にプロジェクトフォルダを作成しましょう。 今回は「wp-de […]

詳細を見る

Webコーディング

【コピペでできる！】　右下のSNSシェアボタンをコードを公開します。

こんにちは、Web it Worksの伊東です。 今回は、本サイトの右下に配置しているSNSシェアボタンのソースコードを公開します。 早速、コードを公開！ CODEPENにて公開しています。 See the Pen シェアボタン by Ito Hiroki (@ito-hiroki) on CodePen.

詳細を見る

Webコーディング

【プラグインなし】WordPressでリッチリザルト対応のぱんくずリストを実装する

こんにちは、Web it Worksの伊東です。 今回は、WordPressでリッチリザルトに対応したぱんくずリストを実装する方法をご紹介します。 パンくずリストについての説明は以下の記事をご覧ください！ https://webitworks.jp/web/breadcrumb-seo-rich-result/ 本記事の対象者 早速、ソースコード紹介 まずは functions.php に以下の関 […]

詳細を見る

Webコーディング

【プラグインなし】WordPressで文字の大きさを統一にしたタグクラウドを実装しよう。

こんにちは。Web it Worksの伊東です。 今回はWordPressカスタマイズ時にタグクラウドを実装する方法をご紹介します。 タグクラウド自体はたった１行でできる WordPressでタグクラウドを実装する方法は以下です。 たったこれだけ。 以下のような表示になります。 WordPressは記事の多さが多いほど、文字の大きさが大きくなる仕様になっています。 文字の大きさを統一にしたい wp […]