WordPressブロックテーマで一新された、ブログデザインと制作フロー 2023年12月に、このブログのWordPressテーマをリニューアルしました。 その際、あえてこれまでのWordPressテーマ制作手法と違う手法で制作したため、この記事では新しいWordPressのテーマ形式である「ブロックテーマ」について解説をします。 今回のWordPressテーマ制作手法 今回のブログリニューアルの際に、あえて行った手法は以下の通りです。 これまで主流だったクラシックテーマではなく、これから主流になる（と思われる）ブロックテーマと呼ばれる新しいテーマ制作手法で制作する FigmaやAdobe XDのようなデザインツールを使用しない WordPressのフルサイト編集機能でデザインする HTMLとCSSを書いてからWordPressテーマに変換しない functions.php にコードを追加

ホームページを作成する時に、制作会社へ外注するか、ホームページ作成サービスを利用して自分で作成するかを検討する場合が多いと思います。 その中でも、無料で利用できるホームページ作成サービスはどれが良いか迷いますよね。 そこでこの記事では、無料ホームページ作成サービスについて、以下の内容を解説します。

「ブロックテーマ」とは、WordPressのサイトエディタのために用意された新しいテーマのフォーマットで、Gutenbergのブロックを使用してテンプレートを構成するものです。WordPressが後方互換を考慮するかぎり、今までのクラシックエディタや初期のGutenbergも使用できると思いますが、これからWordPressのテーマを制作するなら、このブロックテーマが必須になります。 WordPressのこれからのテーマ制作の標準「ブロックテーマ」をしっかり学べる解説書を紹介します。 著者はHTMLやCSSをはじめ、JavaScriptの解説書などWeb制作系の解説書で、はずれ無しのエビスコム様。ていねいで詳しい解説は分かりやすく、実践的なサンプルもたくさんあるので、かなり役立つと思います。 本書もWordPressのブロックテーマをその基礎知識から実践的なテクニックまで詳しく解説されてお

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 IE11サポート終了 Internet Explorer 11 はサポートを終了しました。長年のご愛顧ありがとうございました。 – Windows Blog for Japan 6月の大きなニュースは、やはりIE11サポート終了だと思います。 この記事には Internet Explorer を開くと、モダン ブラウザーである IE モード搭載の Microsoft Edge に徐々にユーザーをリダイレクトします と書かれており、つまり「今後IEを起動しようとすると、Chromeと同じ表示結果のEdgeが起動する」ことになります。 将来的に、IEは完全にアンインストールされるそうです。 Microso

最近のWebサイトやアプリで見かけるUIコンポーネントやエフェクトを実装するCSSのテクニックを紹介します。 一昔前まではJavaScriptが必要だったりしましたが、現在ではCSSのみで実装できるようになり、覚えておくと非常に便利です。 10 Useful CSS Tricks for Front-end Developers by Alex Ivanovs 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. タイプライターのようなエフェクト 2. 透過画像用シャドウ 3. カーソルのカスタマイズ 4. attr()でシンプルなツールチップ 5. ピュアCSSによるチェックリスト 6. is()と:where()による要素のスタイル 7. キーフレームを使用したアコーディオン 8. ホバーエフェクトのサイドバー 9

どういうハッキングをされるのか？ さて、本題です。ここ10年ちょっとWordPress専門で仕事をしていますが、自分が遭遇したり知り合いが遭遇したケースは「サーバー内のファイルが書き換えられて、アクセスすると他のサイトにリダイレクトされる」というケースです。 サーバーのファイルを見てみると概ね以下の症状になります WordPressをインストールした各ディレクトリのindex.phpなど、phpファイルの文頭に怪しげなコードを書き込まれているwp-content/uploads/ の中には通常画像ファイルなどばかりのはずが、見に覚えのないファイルを大量に置かれる通常の投稿内にいろいろ投稿される（このケースは近年は自分や周りでは遭遇していない） これらのファイルは全部キレイに駆除しない限り、該当部分を削除したり、該当ファイルを削除しても残っているファイルから再度改竄してくるので面倒です。 復

WordPressの公式ブログによると、7月リリース予定のWordPress 5.8でIE11のサポートを終了する、とのことです。これにより、IE11を使用しているとダッシュボードで警告が表示されるようになり、最適に機能することが保証されなくなります。 Dropping support for Internet Explorer 11 WordPress5.8がリリースされると、IE11はサポートされなくなる サポートの削除とはどういう意味か WordPressのテーマへの影響 WordPress5.8がリリースされると、IE11はサポートされなくなる 2021年7月にリリースが予定されているWordPress5.8で、Internet Explorer11のサポートを終了するとアナウンスがありました。現在IE11を使用している場合は、Chrome、Firefox、Safari、Edgeな

[レベル: 中級] この記事では、Wordpress 5.5 に標準実装されたサイトマップ生成機能を無効化する方法を紹介します。 WordPress のコア XML サイトマップ機能 リリースされたばかりの WordPress 5.5（この記事を公開している時点での最新バージョン）は、検索エンジン向けの XML サイトマップを作成する機能をコア機能として標準実装しました。 これまでサイトマップ生成にはプラグインを利用していました。 コア サイトマップは WordPress をインストールしたディレクトリの直下に作られます。 ファイル名は wp-sitemap.xml です。 example.com に WordPress をインストールしていたらサイトマップの場所は example.com/wp-sitemap.xml になります。 アクセスしたサイトマップはこんな感じです（正確には、サイ

[レベル: 中級] Google は WordPress のプラグインとして Site Kit を正式リリースしました。 Site Kit を利用すると、Search Console や Google アナリティクスなどの Google のツールによるレポートを WordPress のダッシュボードから確認できます。 Site Kit はベータ版としてこれまでは提供されていました。 Google のサイトから直接ダウンロードしてインストールしました。 正式公開となったので、WordPress の公式プラグインディレクトリから今はインストールできます。 インストールは簡単、WP ダッシュボードから SC のレポートをチェック Site Kit の利用方法は難しくありません。 手順を簡単に説明すると次のようになります。 インストール Google アカウントにアクセス権付与 AdSense・G

WordPressのGutenberg（グーテンベルク）が導入されてから、htmlなどの知識がなくてもおしゃれなホームページが簡単にできるようになりました。 WordPressテーマは不要になるのか？ WordPress関連のブログ記事でもテーマは不要になるのではないかという意見もでています。（実際には現在、WordPressテーマは必要になります。しかし、いろんなテーマを選ばなくても簡単におしゃれなホームページができるようになるのでは。。。という意味です。） とはいえ、配置やデザインを考えたり、詳細な使い方を勉強したりせずにもっと簡単に作りたいという方に、今回紹介するテンプレートが用意されているWordPressプラグイン「LIQUID BLOCKS」を紹介します。このプラグインのイメージ画像は英語表記されていますが、製作者は日本人のため、もちろん日本語対応。またWordPress公式の

WordPressは初心者でも簡単にWebサイトを作ることができる人気のソフトウェアです。 しかし、機能がやや複雑で初めてWordPressに挑戦する人には導入時のハードルがやや高く、どのように設定すればいいのか分からないという方も多いのではないでしょうか。 そこで、今回はWordPressの基本的な使い方からおすすめの設定方法について詳しくご説明していきたいと思います。 初心者でもOK！WordPressサイトをたった10分で公開する手順まとめ WordPressはブログやコーポレートサイトなど、様々なサイトに使われている人気のソフトウェアです。 しかし、レンタルサーバーの用意やドメインの取得など、初心者がWordPressサイトを公開する場... Web Design Trends ConoHa WING最新キャンペーンまとめ。WordPressテーマや月額料金がお得に！ お得な料金で

ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ

全く未経験の人がゼロからWebデザインを学んで、Webデザイナーとして仕事を得るまでの方法について、具体的かつ、わかりやすく書いてみる。 前半ではWebデザイナーのスキルに関して、学習の優先順位から勉強法のコツについて。後半では、Webデザイナー就職のヒント＆アドバイスを詳しく解説している。 このページは、以下のような内容になっている。 【目次】 未経験ウェブデザイナーに必要なスキルと知識 ① Webデザインの独学 ② HTML/CSSの独学 ③ WordPressの独学 ④ JavaScript(jQuery)の独学 未経験からWebデザイナーの仕事を得る方法 ① スクールの就職サポートを利用する ② 転職エージェントを利用する ③ インハウスデザイナーの求人を狙う ④ クラウドソーシング、ココナラで仕事を請ける ⑤ ブログを運営してスキルを売る また、ここでは「独学」を前提で書いている

SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。 以前公開したSimplicityの後継となるテーマです（※後釜ということで完全な互換性はないです）。 新しくテーマを作成したのは、Simplicity自体元々、個人用に作成したものを公開したテーマだったので、機能を増設するにつれて、多少の無理も出てきて、動作確認が大変になってきたからです。 また、Simplicityは、約4年前に公開したものなんですが、「当時のWEB状況」と「最近のWEB状況」に乖離もでてきました。ですので、一度現在の状況に合わせて作り直しておきたかったからです。 元々Simplicity自体、僕が初めてPHPで作成したプログラムだったので、当時はPHPの作法などをよくわかっておらず、書き直したい部分もいろいろ出てきたというのもあります。 こういった複合的な理

[su_note note_color=”#feb1b1″]ここでは、WordPressを使って、自身のビジネスに顧客を集めたい、集客したいと思っている人向けの内容を編集します。PV数ありきの広告表示による収益の増やし方には対応していません。[/su_note] WordPressの機能の向上により、WordPressの導入を推奨する企業がますます増加しています。 ただし、WordPressを導入するのには、それを選ぶ理由があるわけで、初心者の方が、それを理解せずに導入しても意味がありません。ここでは、WordPressの導入を検討している初心者の方のために把握しておきたいことを取り上げたいと思います。 1.WordPressとは？ 世界で、最も普及しているCMSです。CMSとは、簡単に言うと、発信したい情報の管理を簡単にするためのシステムのことで、これを導入することで、記事の追加や編集が

TL;DR WordPress の functions.php に書いておくと捗ることをまとめておきます。 固定ページ判別。body に固定ページのスラッグ名を追加 body に固定ページのスラッグ名を追加。トップページは home のクラス名がつく。固定ページなどは guide about などのスラッグ名を取得しクラス名が付与される。 function pagename_class($classes = ''){ if (is_page()) { $page = get_post();//get_page()は廃止されたので使わない $classes[] = $page->post_name;//スラッグ名取得 } return $classes; } add_filter('body_class', 'pagename_class');

今回はWordPress初心者の方に向けて「WordPressの基本」や「最初につまずきやすい点」などを紹介していきます。すでに知っている部分はサクッと読み飛ばしてくださいませ（とくに前半は簡単な内容です）。