WordPressの管理画面を使いやすくする簡単カスタマイズ18選 | knowledge / baigie
WordPressは機能として実装できないものはないのではないか、と思えるくらい自由度が高く多機能なCMSです。一方で多機能であるが故に管理画面のメニューも多く、サイトによっては使っていない機能なのに導線が残っていたり、設定画面に到達するまで階層が深かったり、操作が複雑だとユーザーに使いにくい管理画面だと思われてしまいます。 この記事では私が普段の制作でよく行うWordPressの管理画面のカスタマイズ方法について、独自で実装するものとプラグインを導入して実現するものを合わせて18個、ソースコードと解説を交えながらご紹介します。エンジニアだけでなくデザイナーやディレクターの方も「こんなことができるんだ」と知っておくだけで、より使いやすい管理画面に仕上げていくことができると思うので、ぜひ参考にしてみてください。 その1. ログインページのロゴを変更する 以下のログインページのWordPres
Prettierの設定オプションについてまとめてみた
はじめに コードスタイルを整えるためにprettierをよく使ってはいたのですが、 雰囲氣で使っていたところもあったので、設定できるオプションについてまとめてみました。 使用バージョン：prettier 2.7.1 動作確認はVSCodeにて行なっています。 Vueでの実装について確認していますので、JSX関係はほぼ公式の内容となっています。 さらに詳細を知りたい場合は公式サイトをご確認ください。 Prettier オプション 個人的おすすめ設定 以上！ 折り返しの幅だけは、ちょっと広めにしたいです。 他のオプションについては、調べてみると意外とデフォルトの設定であることが多く、 設定上記載しなくても私的には十分なものでした。 バージョンアップによって、デフォルト値が変わるものもあったりするので、明示的に定義しておくのも良いかと思います。 別な切り口として、チーム開発においては、スキルセッ
Sassのモジュールシステムを@importから@useに移行する方法を考えてみた
先日、KOJIKA17さんの「Sassを@importから@useに置き換えるための手引き 」という記事を見て、2022年10月ころにはSassで@importが使えなくなる可能性があることを知りました。まだ2年ありますが、新しく取り組むプロジェクトでは@useを使ったモジュールシステムにしたいので、自分が使っている構成の置き換えについて考えてみました。 まずはアイディアをシェアをして叩き台にしてもらうのが目的ですが、他に良い書き方があったらぜひアドバイスいただきたいというのもあります。 試しながら、考えながら書いているので内容は変更される可能性が高いかもしれません。 Sassの新モジュールシステムについて Sassの新しいモジュールシステムについては、上述の記事や SHIFTBRAINさんのブログ がわかりやすかったです。ありがとうございます。 公式の発表と@useと@forwardのド
To Hell with bad CSS! | | CSS Hell
CSS Hell Collection of common CSS mistakes, and how to fix them content is your Content? I saw a developer using the content property for adding extra text to a label, because why not, he said. Sadly, this raises several issues. .label::after { content: "My label"; } Check out what is going on here ⇸ One size should fit all? In modern web development, there is less and less reason to use fix sizin
『[買わせる]の心理学 消費者の心を動かすデザインの技法61』を読んでトイレットペーパーを大量に買った人々の心理を考察した
この記事は2020年3月5日に書きました。今世界で何が起きているかというと、新型コロナウイルスの感染拡大。 日本はウイルスそのものに対してまだ危機感が薄い人が多いのか、どこかのほほんとした空気もまだあります。この先どうなるかは分からないけど。 一方で、様々な商品の爆買い・買い占め問題が勃発。マスク、除菌アルコール、この辺はまあ分かる。 2月末頃からは、突如トイレットペーパー、ティッシュペーパーなどの紙類がスーパー、ドラッグストア、コンビニの棚から消え去りました。 備蓄の点検、買い足しが大体済んだタイミングで休校要請のニュース。その影響か、うちの近くのスーパーも空っぽの棚が🙃 ほんとは備蓄の事とかまたブログに書こうと思ったけど中止。今混乱を招きかねない事を発信できん。 今言えるのは、何がどれだけあれば何日位過ごせるか冷静に考えて、とだけ。 https://t.co/g90RQbEEBB —
![『[買わせる]の心理学 消費者の心を動かすデザインの技法61』を読んでトイレットペーパーを大量に買った人々の心理を考察した](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7a4f706a6f4288da41a414c260fa6e3e140af00/height=288;version=1;width=512/https%3A%2F%2Fwww.akaeho.net%2Fwp-content%2Fuploads%2F2020%2F03%2Fpsychology-of-web-design-eyecatch.png)
SEOとは？ 押さえておくべき24のSEO対策方法とポイント
ウェブサイトやホームページの運営者にとって、検索エンジンでの上位表示は不可欠です。 なぜなら、ウェブサイトへの集客は依然として検索エンジンを通じた流入が多く、その結果、検索エンジン最適化（SEO）はWebプロモーション成功の鍵となるからです。 特にGoogleのような主要な検索エンジンでは、上位にランクされることが、ターゲットユーザーにあなたのサイトを見つけてもらうための最良の方法です。 検索エンジンを通じてサイトに訪れるユーザーは、特定の問題を解決しようとする意図を持っており、コンバージョン（成果）を達成しやすいという傾向にもあります。 しかし、SEOは単にキーワードを散りばめるだけの単純な作業ではありません。 正しい知識と戦略が必要であり、間違ったアプローチは検索エンジンによる適切な評価を受けられません。 この記事では、SEOの基本的な定義から始め、Googleが重視する要素、さまざま
【第一人者書下ろし！】「コンテンツマーケティング完全ガイド」宗像淳によるコンテンツマーケティング成功のポイント
1 コンテンツマーケティングとは何かを理解しよう コンテンツマーケティングとは、読者にとって価値あるコンテンツの制作・発信をとおして見込み顧客のニーズを育成、購買を経て、最終的にはファンとして定着させることをめざす一連のマーケティング手法です。ポイントは「価値あるコンテンツを作る」こと、「顧客を育てる」こと、そして「ファン化する」の3つです。 商品に対するニーズが顕在化した「今すぐ客」をターゲットとする従来手法とは異なり、まだニーズが顕在化していない「潜在層」に対し、コンテンツをとおして自社の存在を認知してもらい、段階的に購買へとあと押ししていくことに重きを置くのが特徴です。コンテンツマーケティングとは単一のツールや手法を指し示す言葉ではなく、下の図のような段階的なマーケティングプロセスを構築するための「概念」であり「考え方」と理解するといいでしょう。 関連記事：Webマーケティングとの違
position: stickyの面白い使い方と使用時の注意点
スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案（Working Draft）の段階 で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポート されています。 position: stickyの仕様 ブラウザ・サポート状況（Can I use…） フィーチャー・クエリ（@supports） と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃいますよ」というデモからご紹介します。 面白い使い方 基本的な使い方だけでも便利なスティッキーですが、応用するとスクロール効果のような面白い使い方ができます。以
たった一行で重いスクロールが軽快に！will-change属性を付けるとFPSが上がる理由 - Qiita
HTMLやCSSのパフォーマンスチューニングを皆さん普段意識されているでしょうか？ フロントエンドはJavaScriptの進化と共にアプリケーションが年々複雑化してきたこともあり、パフォーマンスチューニングのトピックを目にする機会が増えました。 しかしHTMLやCSSも同様にレンダリングの仕組みを少し知り、それに応じた実装することでパフォーマンスを大きく上げることも可能です。 今回は最もシンプルかつ分かりやすい事例として、will-changeプロパティについて紹介したいと思います。 サンプルを使ってFPSを実際に測定してみる 今回はサンプルとして、TwitterのツイートにあたるHTML構造と同じものを4000個縦に並べ、高さ400pxでスクロールできる領域を用意し、スクロール時のFPS(Frame Per Second)を測定してみました。 // この実装は実質たった3行！ const
Sassを@importから@useに置き換えるための手引き - kojika17
Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から実装されていた@importは、テキスト形式でSassファイルを読み込むための機能です。便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面がありました。 新しいモジュールシステムは、この問題を解消し、Sassをより柔軟に使用できるようにします。 @importではグローバルに指定されていた変数などは、ファイルごとにカプセル化され、ファイルの内容に基づいて解決できるようになりました。 現在、Dart Sassしか新しいモジュールシステムは使えませんが、Lib
Webアクセシビリティ対応で「音声読み上げ・文字拡大・色変更」は的外れ。本当に必要なのはSEO？ | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
なぜ、的外れなのでしょうか？ それは、実際にユーザーが使っているシーンを考えればわかります。たとえば、PCを起動してからサイトのコンテンツを読むまでの流れを書き出してみましょう。 ブラウザを立ち上げるアドレスバーに文字列を入れて検索する検索エンジンの検索結果から該当のコンテンツを探すサイトに訪問し、コンテンツを読むサイト側で用意した支援機能は、4の「サイトに訪問し、コンテンツを読む」の段階になって初めて使えるものです。サイトに「音声読み上げ機能」があれば、そのサイトのコンテンツを読み上げることはできますが、他のサイトのコンテンツを読むことはできません。そしてもちろん、ブラウザを立ち上げたり、検索文字列を入れたりする際にも、この機能を使うことはできません。 もし、このような支援機能にニーズがあるとすれば、普段は目で見てアクセスする人が「何らかの事情でそのサイトのコンテンツだけ読み上げで聴きた
成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
Sassの新しいモジュールシステム
Sassに新しいモジュールシステムが導入されます。具体的には@useと@forwardという2つのルールが登場し、@importルールは将来的に廃止される予定です。現在、Sassのおもな実装としてDart SassとLibSassがありますが、まずDart Sassへの実装が進んでいて、今年10月に安定版がリリースされる予定です。この新しいモジュールシステムを簡単に紹介したいと思います。 なお、ここで言うSassの「モジュール」とは、メンバー（変数、関数、ミックスイン）のコレクションを指し、具体的にはSassのソースファイルのことです。 背景 新しいモジュールシステムが開発された背景として、@importルールがかかえる多くの問題があります。ファイルスコープがないため依存モジュールの把握が困難になったり、名前空間を持たないためにライブラリの作者と利用者が命名を工夫しないといけなかったり、と
1歩踏み込んでみる！ CSSグラデーションのマニアックな世界 - ICS MEDIA
CSSでグラデーションがかけられるようになって久しいですが、ただ2色をつないでいるだけの人も多いのではないでしょうか？ あるいはジェネレーターでコピペして終わりにしてはいないでしょうか？ 実は、値を細く設定することで、グラデーションに留まらない、より豊かな表現を実現できます。工夫すればこんな表現もCSSのみで行えます。 後半の応用例の実装は手入力のCSSでは困難な部分もあるので、SCSSを使って記述しています。SCSSを使うとCSSだけでは難しい処理もスムーズに行え、mixin機能を使えば、面倒な入力手間も省けるので便利です。記事内で紹介しているグラデーションの生成mixinも用意しました。 デモを別ウインドウで再生する 使われているmixinを確認する CSSグラデーションの種類 CSSグラデーションは色を扱うのでbackground-colorプロパティを使いたくなりますが、backg
リニューアルこそ事前の設計が最重要！ホームページのリニューアル前に読んでおきたい良記事15選
Webサイトを長年運営していると、デザインの流行り廃り、改善のために修正が必要になるのは当然です。 それが大規模になれば大幅なリニューアルを検討する必要もあるでしょう。 特にリニューアルはトラブルがつきものです。そのため、事前に要件定義として新たなデザイン案や仕様など細かく決めておきましょう。 今回は、Webサイトのサイトリニューアルする際、参考になる記事をまとめてご紹介します。 リニューアルを成功させるためにもぜひご一読ください。 サイトリニューアルの参考になる良記事まとめ 1.目的を達成させるための最適なWebサイトのタイプ(種類) http://creators-manual.com/kind_site/ 単にWebサイトを作ると言っても、目的によって最適なタイプは異なります。 せっかくサイトリニューアルをしてもWebサイトの目的につながらなければ意味がありません。 この記事では、W
Illustrator初心者でも簡単なイラストの描き方 | ネクストページブログ
HOMEブログIllustrator初心者でも簡単なイラストの描き方 | ネクストページブログ はじめまして。イラストレーターのこばやしです。 最近はフリーで利用できるイラストやアイコンが豊富ですね。 ただ、数が多くて見つけられなかったり、マイナーすぎて種類が選べない、なんてこともあると思います。 そこで、今回はIllustratorでのイラストの描き方をご紹介します。 CS6までの基本機能で作れる簡単な描き方ですので、「これからイラストを描いてみたい！」という初心者の方でもすぐにできる方法です。 目次 1.基本編 ものの多くは、円や四角形でできている 円柱・直方体の作り方 2.実践編 平面イラストを作る 立体イラストを作る 3.まとめ 1. 基本編 ものの多くは、円や四角形でできている 一見複雑そうなものでも、基本的に円や四角形に分類できます。（ちょっと無理矢理ですが…） 基本となる図形
BtoBサイトを成功に導く180のチェックリスト | knowledge / baigie
このたび、BtoBサイトの成功パターンをまとめた『BtoBサイト・チェックリスト』とワイヤーフレームを、株式会社ベイジ、株式会社才流、株式会社WACULの3社連名で発表しました。 チェックリスト（PPT版）ワイヤーフレーム（PPT版）ワイヤーフレーム（XD版）ここで取り扱っているBtoBサイトとは、BtoB企業のマーケティングあるいはセールスに貢献することを目的として作られたwebサイトのことです。そしてこの取り組みの根底にあるのは「BtoBサイトにおける車輪の再発明を減らしたい」という3社共通の思いです。 BtoB企業といっても多種多様な企業が存在するように、BtoBのマーケティングやセールスを含む購買プロセスも突き詰めれば、個別の商材特性、顧客特性、業界特性、組織特性、経営環境などの影響を受けた、多種多様なものになります。 しかしながら、個別最適化しか手がないわけでもなく、BtoBビジ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG
Webデザインの参考になるギャラリーサイト20選＆2020年のトレンド解説
Illustrator かんたんな図形で描くイラスト - アンカーポイントの移動と追加 - 初心者向けのかんたんなチュートリアル
