開発の記事一覧

WordPressの投稿(投稿タイプpost)の一覧を任意のURLに変更し、投稿パーマリンクを下層ページに位置付ける方法

WordPressの標準的な投稿(投稿タイプ post)の記事一覧ページ(アーカイブページ)をトップページとは別に用意したいことはありませんか? この記事ではその設定方法を解説していきます。カスタム投稿タイプの一覧ページを作るときとはすこし違う設定が必要です。
開発
  • #WordPress
に公開

CSS ModulesでCSSを書く時に実務で必要になる書き方まとめ

このサイトのCSSはこれまでstyled-jsxだったのですが、Gatsbyを2から3にアップグレードしたのを機に、CSS Modulesに置き換えました。置き換える過程で、実務で必要になりような要件をどのようにクリアしていくのか体感できたので、まとめてみます。以下、GatsbyでSCSSを利用したCSS Modulesのサンプルになります。
開発
  • #CSS
  • #React
  • #Gatsby
に公開

WordPressの記事編集画面で誤って記事公開してしまうのを防ぐために公開ボタンの色を変える

WordPressでの記事作成、こまめに保存をしながら記事を書くことありますよね。保存しようと思って保存ボタンを押したつもりが実は公開ボタンだった。なんてことがたまにあります。なぜ公開ボタンを押してしまうのか。これは記事ステータス変更のエリア一帯で、公開ボタンが目立つように色がついているからだと思います。ぼんやりしているといちばん最初に目に入ってきたボタンを押してしまいます。ということで、この認知的なミスが起こりにくくなるように、公開ボタンの色を変えてしまいましょう。
開発
  • #WordPress
  • #WordPress管理画面
に公開

CSS:tableのセル内文字が長くなったときに省略をする方法

テキストを1行に収めたいとき、収まりきらない文字を三点リーダー(…)で省略することがあると思います。次のようなCSSです。div { text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}この例のように div 等の要素だったらこれで良いのですが、テーブルセル内ではもうひとつプロパティを追加する必要があります。
開発
  • #CSS
に公開

gitのremote urlを変更する方法(BitbucketからGitHubへの引っ越しを例に)

GiHubの無料プランでプライベートリポジトリが作成可能になってから、それまでBitbucketに置いてあったリポジトリを、機会があるごとにちまちまとGitHubに引っ越しています。この記事では具体的な引っ越し手順をメモがてら書いてみます。Changing a remote's URLリモート URL をリポジトリに変更する
開発
  • #git
  • #GitHub
  • #Bitbucket
に公開

初めてShopifyテーマ開発をするときに読みたい情報まとめ

ネットショップをつくれるサービスShopifyのテーマ開発を開始するのに必要な情報をまとめてみました。公式ドキュメントが充実していますが、散らばっている印象があるので、このようなまとめが役に立つのではないかと思っています。前提として知ってほしいことは、テンプレート言語はliquid、開発ツールはthemekitを使うということです。
開発
  • #Shopify
  • #liquid
に公開

WordPressのユーザー権限をカスタマイズするときに必要な権限の知識

WordPressは、どのユーザーアカウントにどの権限を与えるかを権限グループという概念で定めています。開発者はこの権限を細かにカスタマイズできます。この記事では権限のカスタマイズで必要な最低限の知識をまとめてお送りします。基礎知識については「ユーザーの種類と権限 / Roles and Capabilities」を参照してください。
開発
  • #WordPress
に公開

RSSリーダーのアイテムに記事サムネイルを表示する方法

僕が見たのはFeedlyとInoreaderだけで他のRSSリーダーのことはわかりませんが、enclosure にサムネイルとして表示したい画像を指定してあげたら表示されました。過去のアイテムには反映されないようなので、指定後のRSSリーダーによるフェッチから反映、と考えておくと良さそうです。
開発
  • #RSS
  • #JavaScript
  • #Gatsby
に公開

レスポンシブデザインで文章の改行位置をある程度狙ってデザインするための方法

レスポンシブデザインを採用したWebサイトでは、文章の改行位置をあらゆる画面幅で完璧にコントロールするのは至難の技です。とはいっても見出しやキャッチコピーなど印象的に見せたい箇所の文章は、その意味にあわせてなるべく綺麗に改行してあげたいもの。ある程度狙った位置での改行を実現する方法です。
開発
  • #CSS
  • #HTML
に公開

どのような内容の画像が入るかわからない場合でもきれいな見た目の枠線をつけたい時に使えるCSS

画像の内容によって枠線をつけたほうがきれいに見える場合と見えない場合があります。画像一枚一枚にたいしてつけるかつけないかを決められるなら困らないのですが、UGCサイトやブログテーマのようにどんな画像が表示されるのかわからないケースでは、そのような丁寧な判断をしたくてもできないのが現実でしょう。そんなときに重宝する枠線がPretty Borderです。
開発
  • #CSS
  • #画像
に公開