サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
WWDC24
www.cherrypieweb.com
これからのWordPressの制作の中心となる「ブロックテーマ」 ほぼノーコードで制作するブロックテーマを使った制作手法(FSE:フルサイトエディティング)は、従来のPHPでテンプレートを作成する方法とあまりにも異なっています。 WordPressデフォルトテーマとして初めてのブロックテーマである「Twenty Twenty-Two」が同梱されたWordPress5.9がリリースされたのが2022年1月。 それからすでに2年が経過していますが、未だにチュートリアル的な情報以上のものが少ないのが現状です。 そんな中、クラシックテーマで制作されていた本サイト(Cherry Pie Web)をブロックテーマでリニューアルいたしましたので、制作メモをまとめて記事にいたしました。 ブロックテーマでの制作を始めたいけれど、クラシックテーマに慣れきってしまってどうしようと思っている方に少しでも参考になれ
htmlタグに「font-size: 62.5%」を指定するのを、CSSのフォントサイズ指定にremを使用するうえでの便利技のように書かれているブログ記事を多く見かけますが、筋が悪い方法なのでやめましょう。 便利技どころか、制作作業が非常に面倒になる悪手です。 なぜ font-size: 62.5% なのか? remは root em の略でルート階層のemを意味します。 つまり、html要素のフォントサイズです。 現在主に使用されているブラウザのデフォルトフォントサイズは16pxです。 つまり、1rem = 16px です。 ここでフォントサイズを13pxの大きさにしたいとき、remで指定しようとすると font-size: 0.8125rem; と指定しなくてはなりません。 (13 / 16 = 0.8125) これではフォントサイズ指定の際にいちいち計算が必要になってしまいます。 そ
先日、10年間使っていたPCを買い換えました。 その際にWindows10のライセンスが再認証できなくて困ってしまいました。 ネットの情報を見ていると、無料アップグレードしたWindows10は別のPCに移行すると再認証できない?という話を見つけて不安になっていたのですが、なんとか再認証できましたので、その内容を備忘録として残しておきます。 今回やろうとしたことは次のようなことです。 現在使っているPC(フロンティア製)の動作が遅くなり、CPUファンが爆音でオンラインミーティングに支障をきたすので、新しいPCに買い換えたい ちなみに、OSはこんな感じで乗り換え Windows7 Home Premium(DSP版) → Windows7 Home Premium(パッケージ版) → Windows Anytime Upgrade で Professional にアップグレード → 無料アッ
先日のWordPress5.4.1へのマイナーアップデートで、非常にショッキングな変更がありました。 パーマリンクに「日付のみ」の設定がされていた場合、投稿が表示されなくなったのです。 WordPressのサポートフォーラムに投稿があり、そこで経緯がわかります。 wordpress 5.4.1 からの障害について このウェブサイトはありがたいことに多くのウェブサイトから各記事にリンクをしていただいています。 しかし、今回のマイナーアップデートで記事が表示されなくなってしまいました。 この事実に気づいたとき、慌てて自身のFacebookにヘルプを出したのですが、ありがたいことにすぐに上記のサポートフォーラムの投稿を教えていただき対応することができました。 どのような問題が起きたのか 記事のパーマリンクが日時のみで構成されている場合、5.4以前は記事が表示されていたのですが、5.4.1からはタ
最近、WordPress界隈をにぎわしているTwitter上のアンケートがあります。 「WordPressの固定ページの内容は、テンプレートファイル(page-xxxx.php)に書くか? それとも、管理画面のエディタで書くか?」 というものです。 正直、私はこの質問を読んで『管理画面に書くにきまってるだろう。今どき、こんなことを聞く人がいるのか?』と驚いたのですが、もっと驚いたことに回答した人の中でテンプレートファイルに書くという人の割合がかなり多かったのですね。 結論から言うと、WordPressでテンプレートファイルにコンテンツを直書きするのはやめたほうが良いです。 その理由と、ではどうすればよいのかということを、この投稿では書いておきたいと思います。 テンプレートファイルに固定ページの内容を書くとはどういうことか? まず、テンプレートファイルに固定ページの内容を書くというのはどうい
最初にお断りしておきますが、この記事で紹介している「投稿の本文内にstyleタグを書く」手法は厳密には文法違反です。 (HTML5では、bodyの子要素であればstyleタグを書けるが、WordPressの投稿本文は孫要素になるので文法違反) ただ、ほとんどのブラウザで動作するようですので「開発時の一時的なテスト」や「この方法しか手がない」時だけ使ってみてください。 なお、投稿の本文内にscriptタグを書くのは文法違反ではありませんが、ページの読み込みが遅くなったり、内容によっては脆弱性を生じるなどのデメリットがあります。 そのページだけにCSSやJSを追加したい WordPressで記事を投稿する際、まれに、そのページだけに CSSやJavaScriptを追加したいことがあります。 技術記事でCSSやJavaScriptに関する投稿をしたときに、ちょっとしたデモを入れたい場合などです。
ここ数年、日本では外国人観光客の数がとても多くなっています。 私の住んでいる京都府舞鶴市は、京都市に近いこともあり、地域活性化のために観光にも力を入れているようです。 そのためか、行政関係のウェブサイト制作案件でも「多言語化」はほぼ必須の要件となっています。 ただ、行政主導で作られている多言語ウェブサイトがあまりにも酷すぎて「これなら多言語化しないほうがマシ」と思うくらいの惨状なので、市民としては大変恥ずかしいのですが指摘させていただきたいと思います。 ちょっと酷いと思う公的なサイトたち 舞鶴引揚記念館 https://m-hikiage-museum.jp/ 舞鶴引揚記念館は、2015年にユネスコ世界記憶遺産に認定された『舞鶴への生還 1945-1956シベリア抑留等日本人の本国への引き揚げの記録』を所蔵しており、舞鶴市が特に力を入れている観光施設です。 そんな観光施設のウェブサイトです
今や常識ともいえる「ウェブサイトの常時SSL化」ですが、先日、既存のWordPressを常時SSL化する際にハマってしまいました。 下層ページがhttpsにリダイレクトされない! 既存のWordPressサイトを常時SSL化する際、私は下記のような手順で行っています。 SSL化プラグインを使うとプラグインが外せなくなるのと、WordPress以外に対して常時SSL化ができないので、多少面倒でも下記のようにしています。 サーバーでSSLを有効にする Search Replace DB で、WordPress内の文字列を http → https に置換 SearchRegexプラグインを使う記事を多く見かけますが、このプラグインではカスタムフィールド内の文字が置換されなかったりすることがあるのでお勧めしません。.htaccess に、httpでのアクセスをhttpsにリダイレクトする設定を追
Dreamweaverでは出力先は一つしか指定できない 以前書いた記事「ほぼDreamweaverだけでWordPressのテーマ制作をしてる話」で、 ソースフォルダと出力フォルダはサイト単位の設定となります。 テーマごとやプラグインごとに別のフォルダを指定することはできません。 と書いていたのですが、さっきふと思いついてやってみたら出来てしまったので紹介しておきたいと思います。 (みんな知ってることだったらごめんなさい・・・) 下記のようなフォルダ構成があったとします。 一つの管理サイト内で静的サイトとWordPressサイトが混在していて、それぞれでSassを使いたいと思ったらどうしますか? root └static └sass └css └wp └wp-content └themes └sample └sass └css DreamweaverのCSSプリプロセッサ設定では、ソースフ
カスタマイズの準備 まず、カスタムテンプレートを作成します。 今回は「multi_calendar」という名前のカスタムテンプレートを作ります。 そして、そこに/concrete/blocks/calendar/view.phpをコピーし、これを修正します。 application └blocks └calendar └templates └multi_calendar └view.php カスタマイズの方針 カレンダーを表示させる対象のdivタグを追加divタグの数だけFullCalendarをループで回す next/prevボタンをクリックしたときにすべてのカレンダーを同時に次月/前月に移動させるそれぞれのカレンダーのヘッダーツールバーを設定できるようにする 1. divタグを追加 元の構造としては、view.phpの13行目にあるDivタグの内側にカレンダーが表示されます。 <div
concrete5 バージョン8.3 にイベントカレンダー機能が搭載されました。 非常に高機能なカレンダーを「カレンダーブロック」としてページに追加できます。 どれくらいすごいかは下記の記事が参考になります。 8.3.0 のカレンダー機能がとにかくすごい | コンクリートファイブジャパン – concrete5 Japan Inc. ところが、実案件に使うためにカスタマイズをしようとしたところ他のブロックと仕組みが違っていて困ってしまいました。 そこで、いろいろ調べたことを備忘録としてまとめておきたいと思います。 カレンダーブロックの正体 カレンダーブロックの正体は「FullCalendar」というjQueryプラグインです。 カレンダーブロックのview.phpを見てみると「FullCalendar」のオプションを設定して呼び出しているだけ。 つまり、カスタムテンプレートでできることは「
この記事は「Adobe Illustrator Advent Calendar 2017」24日目の記事です。 タイトルがイラレと関係ないと思われる方もいらっしゃるかもしれませんが、私にとっては完全にイラレの話ですので、しばしお付き合いいただければと思います。 Webデザインとの親和性が高いIllustratorのデータ構造 Webデザインツールとしてデファクトスタンダードだった「Fireworks」の開発中止がAdobeから発表されたとき、多くのWebデザイナーはFireworksの代わりに「Photoshop」を選びました。 しかし私は、Webデザインとの親和性が高いのは「Illustrator」だと考えました。 Illustratorのデータ構造がHTML/CSSの構造に似ていると思ったからです。 画像を「リンク」で配置できる スタイル(段落スタイル・文字スタイル・グラフィックスタイ
(2018年11月1日追記:CSSプリプロセッサ―の設定で複数フォルダへの出力方法を追記しました) ※この記事は「WordPress Advent Calendar 2017」の17日目のエントリーです。 2017年の WordPress Advent Calender はQiitaだからか、参加者はプログラマ・エンジニアの方が多いようですね。 私は正直言って半分くらいの記事は内容が全然理解できません・・・私が使ってるWordPressと他の方が使ってるWordPressって本当に同じものなんだろうかと思っています(笑)。 さて、この記事は2017年10月に行った「WordBench京都 in 舞鶴」での私のセッションの後半部分を抜き出して詳しくしたものになります。 WordBenchではDreamweaver愛を語り過ぎましたので、今日は時間が無くなって駆け足になった後半の運用部分を詳し
※この記事は「登壇者 Advent Calendar 2017」の13日目の記事です。 昨日までの「登壇者 Advent Calendar」の記事は、登壇者としての心構えとか感想とか、気持ちの面での記事が多くて『みなさん凄いな、見習わないとな』と思いながら読ませていただいています。 そんな中、私はちょっと違った視点で書かせていただきたいと思います。 登壇に欠かせないスライドですが、登壇される皆さんはどんなアプリケーションを使って制作されているのでしょうか? 多くの方は、いわゆるプレゼンテーションソフトを使われていると思います。 「PowerPoint」「Keynote」「Google Slides」「Prezi」などですね。 多くの方が使われているわけですから、それらのソフトは決して使い勝手が悪いわけではないと思うのですが、私は以前それらのソフトを使っていて、使い勝手が悪く感じイライラして
(2017年5月26日:よしぱんさんのスライドを追加しました) まだ5月なのに30度を超える暑さになった5月21日(日)に、WordPressコミュニティの勉強会「WordBench京都」に参加してきました。 今回のテーマは「サイト制作時のテーマやプラグインを見直そう」だったのですが、なんと前日の5/20(土)に行われたWordBench神戸のテーマ「プラグイン・ウィジェットについて話そう」と丸かぶり(笑)。参加者の中には、神戸と京都の両方に参加された方も多数いらっしゃいました。 今回は、いちおうセッションという形で登壇者が前で発表をするのですが、参加者からもどんどんツッコミが入ることで話をどんどん膨らませ、登壇者も含めたみんなで教えあっていく形で進められました。 最近みんなどうやってんの? ~テーマ制作の話~ 最初のセッションはWordBench京都のモデレーターでもある小西大祐さん。
Wixはブログが苦手? Wix、Jimdoなど、Web制作の知識が無くてもWebサイトを作ることができるサービスで作られたWebサイトが多く見られるようになってきました。 特にWixで作られたサイトは、見た目がオシャレでカッコイイものが多く、写真家・建築家・造形作家・ミュージシャンなどのIT系以外のクリエイターや、ブランドイメージを大切にするショップなどが好んで使っているようです。 しかし、Wixは「ショップ案内やイベントページはいいけれど、ブログは作りにくい」という声をよく聞きます。 メインのページはWixで作っているのに、ブログはアメブロなんていう構成のサイトもよく見かけます。 しかし、そのような構成にすると、Wixのメインページよりも外部のブログのほうが検索順位が上になってしまい、ユーザーに不便をかけてしまいます。 どうしてもブログのほうが更新頻度が高く、情報量も多くなるためです。
前の記事「1月のWordBench京都でconcrete5のお話をしてきました」も意味不明でしたが、今回も知ってる人ほど「?」となるタイトルですね(笑) さて今回の「WordBench京都」は、「kintone Café 関西女子会」とのコラボ企画です。 kintoneは、グループウェアで有名なサイボウズが提供している、ノンプログラミングで業務改善アプリがサッと作れてしまう凄いWebサービスです。 例えば、顧客管理などをExcelで関数を駆使してやっているのを、ドラッグ&ドロップでアプリ化(これがExcelより圧倒的に簡単)して、しかもチームで共有出来たりするという、本当に凄いサービスです。 今回は、1月の「WordBench京都」の続きと言った感じで、1月の時はkintoneのざっくりとした紹介とWordPressとの連携プラグインの話で終わったのですが、今回はkintoneだけに集中し
今日、急にカミさんのパソコンがインターネットにつながらなくなりました。 カミさんのパソコンは無線LAN接続で、最近電波が混み合っていて接続しづらいことが多かったので今回もそうかなと思っていたら、どうやら電波は強いのにインターネットにつながらない状況なのです。 IPアドレスが自動取得できない こういう時は、まずネットワークの接続状況を調べてみます。 コマンドプロンプトを開いて「ipconfig」と入力しIPアドレスを調べてみると、案の定「169.xxx.xxx.xxx」というアドレスになっています。 (正しく接続されていれば「192.168.xxx.xxx」になります) IPアドレスとDNSサーバーアドレスは自動取得になっているはずなのですが、うまく取得できていないようです。 「ワイヤレスネットワーク接続」を切断して再接続したりしても、状況が変わりません。 仕方がないのでパソコンをシャットダ
この記事はAdvent Calendar 2016の「フリーランスの今年とお金の話」の14日目の記事です。 昨日の、あかつかゆうこさんの記事がとても読みやすくていい記事だったので、あわてていろいろ書き直しました(笑) はじめましての方もいらっしゃると思いますので、簡単に自己紹介をいたします。 川井昌彦と申します。 東京での長い会社員生活を経て、今は京都府北部の舞鶴市でWeb・DTP制作をしています。 今年7月に大阪大学で行われたWordPressの大規模カンファレンス「WordCamp Kansai 2016」でセッションスピーカーをさせていただきました。 その他、年に何度か、関西のWeb系の勉強会で登壇したりしています。 カレンダー共通のテーマは「フリーランスのお金にまつわること」となっていますので、会社員時代の時間とお金の話と、それがフリーランスになってどう変わったかというようなことを
この記事は、concrete5 Japan Advent Calendar 2016の7日目の記事です。 6日目の菱川拓郎さんの「concrete5 サイトをAMPに対応させる」からバトンを引き継いでいます。 コンクリートファイブジャパン代表取締役の次の日にまともな技術記事を書くのは若干緊張しますが、私なりに頑張って書いていきたいと思います。 先日、とある地元企業様のWebサイトをconcrete5.7で制作させていただいたのですが、「外部フォーム」ブロックを使ったフォームの作成で、思いのほか苦労してしまいました。 特に変わったフォームを作ろうとしたわけではなく、WordPressの「Contact Form 7」でさらっと作ることができるようなレベルのフォームを作ろうとしただけなのです。 多分、私以外にも、同様なことで行き詰まっておられたり、機能の実装をあきらめてしまった方がおられるので
この記事は「WordPress Theme Lightning & BizVektor 他 Advent Calendar 2016」の6日目の投稿です。 Lighting&BizVektorコア開発者の石川さんからバトンを引き継いで、「実際にLightningを使用した」というか「Lightningだからできた」サイト制作事例をご紹介いたします。 私は職業として「Webデザイナー」を名乗っていますので、WordPressでサイト制作を行う際は、通常は既存のテーマは使用せず、案件ごとにオリジナルテーマを制作しています。 そのため、デザインから公開までは、どうしても1か月~3か月程度かかってしまいます。 しかし、あるとき、どうしても超特急でWebサイトを制作・公開しなければならない案件があり、初めて既存テーマを使用してサイト制作を行いました。 その際に使用したのが「Lightning」と「V
エラーメッセージから、スクリプトの実行に承認が必要になったということのようです。 これまで約2年間は承認なしで動作していましたから、最近になって必要になったのでしょうか? 関数の実行を承認する Googleにログインし、Googleドライブからフォームを開きます。 「ツール」から「スクリプトエディタ」を開き、エラーが出ている関数「submitForm」を選択します。 そして、おもむろに「▶(実行:右向きの黒い三角)」をクリックすると・・・ 「承認が必要です」 というダイアログが表示されました。 「続行」して、「承認する」と進むと、次からは関数を実行しても承認を要求されることは無くなりました。 (フォームから実行していないので関数自体はエラーで止まりますが、今は問題ありません) エラーメッセージと原因が、全然結びつかないエラー さてこれで解決と思いきや・・・上記の作業を行った後にテストでフォ
紅葉シーズン真っ盛りの2016年11月19日、WordBench奈良のモデレータ 高井さんからお誘いを受けて、WordBench奈良に初参加させていただき、お話をさせていただきました。 当初は、以前に京都や神戸でやった「デザイン教えて君」のような内容を希望されていたのですが、参加者の傾向からデザイナー寄りの話が良いだろうということで、Fireworks開発中止以降のWebデザイン手法についての話をさせていただくことになりました。 (参考)WordBench京都のときの記事 https://www.cherrypieweb.com/wp/weblog/technical/20140325125217.php
(追記:本記事は、游ゴシックをWindowsで綺麗に表示するためのベストプラクティスを示すことを目的にしたものではありません。ご了承ください) (追記:Macの代替ウェイトの表示は仕様に沿っているというご指摘を受けましたので、すこし表現を変えました) 先日投稿した「Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い?」には、思ったよりも大きな反響をいただき、ありがとうございました。 私の記事に対して検証をしてくださったりご指摘をいただいたりといったリアクションも多く、大変ありがたく思っています。 特に参考になったのは、下記の2つの記事です。 ありがとうございます。 Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる | WWW WATCHRe : Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い
(2016年7月26日:フォロー記事を書きました。「Windowsで游ゴシックが汚いのは、結局誰が悪いのか?」) (2016年7月11日追記:Windows8.1においても細字ではなく標準が使用されているのではないかというご指摘を受けて、若干表記を修正しました) (2016年6月29日追記:Twitterでご指摘を受けて、Windows8.1と10での違いを追記しました) (2017年3月27日追記:当サイトでの使用CSSについて追記しました) (2020年9月13日追記:当サイトでの使用フォントについて追記しました) タイトルが旬を外していて、しかもちょっと釣り気味で申し訳ありません・・・ OS X MavericksとWindows 8.1に共通のフォント「游ゴシック」・「游明朝」が搭載され、CSSのfont-familyに「游ゴシック」を指定すれば、Webデザイナーの長年の悲願であっ
大寒波が日本に襲来し、沖縄に雪が降るかもというとんでもない予報が出た週末、帰りの電車が止まるかもしれないなと思いながらも「懇親会から始まるイベント」というとんでもないコンセプトのイベント「WordBash Kyoto」に参加してきました。 このイベント、とにかくスピーカーが豪華です。 石川栄和さん、キタジマタカシさん、Toro_Unitさん、Mignon Styleさん、森山まゆこさん、コンチさん、hide(岡本秀高)さん、深沢幸治郎さん、おおはらかずきさんと、最近のWordPress界隈を賑わせてくれている旬な方々が勢ぞろい。 それぞれの方がセッションをしてくださるだけでなく、トークセッションもたくさん予定されており、しかも最初からお酒が入っているので、いつもとは違う本音トークも期待できるとあっては楽しみしかありません。 参加者募集がスタートしてすぐに定員いっぱい。キャンセル待ちが10人
Cherry Pie Web > ブログ > 技術記事 > 意外に難しい? WordPressの「あなたのプロフィール」管理画面の項目を非表示にする方法 ユーザー管理画面は他の管理画面とコードが違う? お客様のWebサイトをWordPressで構築する際、更新しやすいため、また、誤った操作をされないために、ユーザー権限を制限したり、管理画面の不要な項目を非表示にするカスタマイズを行うことは多いと思います。 ダッシュボード、投稿、固定ページなどといった画面は、「User Role Editor」、「Adminimize」、「WP Admin UI Customize」などのプラグインで設定することができますし、remove_meta_box関数を使って、functions.phpや自作プラグインで設定する方法も探せばすぐに見つかります。 Function Reference/remove m
みなさん、こんにちは。川井昌彦です。 好きなAdobeは Fireworks です(笑) というわけで、2015年11月28日に大阪で行われた、第26回リクリセミナー「天下分け目のベクター祭り SVGじゃ! Illustratorを持てい!」に参加してきました。 インターネットがありとあらゆるデバイスで表示されるようになり、従来の小さな点の集合で画像を表示するラスター形式(JPEGなど)だけでは限界を感じてきたところで、座標と方向で図形を描くベクター方式(SVGなど)が注目され始めています。 そして、ベクター形式を扱うソフトウェア「Adobe Illustrator」をWebデザインツールとして使用する流れも出てきました。 私は元々DTP出身という事もあり、Illustratorは5.5(CSじゃありませんよ、無印の5.5です)からずっと日常的に使用しています。 Webデザインツールとして
私は仕事でどうしても必要なので「Adobe Creative Cloud」を年間プランで契約しているのですが、たまにAmazonなどでオンラインコードが大きな割引で販売されていることがあり、「新規の人だけずるいなぁ」とずっと思っていました。 でも、オンラインコードって、年間プランの途中で契約延長の為にも使えるのですね! 今日はたまたま12か月分のオンラインコードが40%オフで販売されていて、「これは買わねば損だ!」と思って、早速購入して使ってみました。 ただ、その際にスムーズに行かなくてかなり焦ってしまったので、同じような経験をされた方に方法をお伝えできればなと思います。 アカウント管理画面からはオンラインコードが入れられない 契約途中でクレジットカードからオンラインコードによる支払いに変更するのですから、普通は、アカウント管理画面の「お支払方法の確認・更新」から支払方法を変更してコードを
次のページ
このページを最初にブックマークしてみませんか?
『Cherry Pie Web』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く