サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
monochrome-design.jp
「サムネイル」「中サイズ」「大サイズ」はWordPress管理画面より変更が可能です。 「設定 > メディア設定」より、この値を任意に変更することが出来ます。 「medium_large」に関しては特殊なので、別記事にて紹介します。 デフォルトの状態で画像をアップロード 記事投稿画面より「メディアを追加」を押して、画像をアップロードしました。 元の画像ファイルは「幅5000px × 高さ3333px」というかなり大きなサイズでしたが、自動生成されたものは中サイズなら「幅300px × 高さ200px」といった風にそれぞれの上限値にそって縦横比を維持したままリサイズされています。 設定を変更し、同じファイルをアップロードし直してみる それでは、試しに「設定 > メディア設定」より数値を変更して、同じファイルをアップロードし直してみます。 中サイズの幅・高さの上限を600pxに変更しました。
WordPress標準のウィジェットでは出来ない、サムネイル付きの新着記事一覧を出す方法をいくつかご紹介します。 WordPress標準のウィジェットはカスタマイズ性が低い ブログのサイドバーなんかでよく見かける「新着記事一覧」ですが、WordPressで出す方法としては、ウィジェットで対応するのが一番楽です。WordPress標準でも「最近の投稿」というウィジェットが用意されています。 ただ、この標準で用意された「最近の投稿」では、表示件数と投稿日の有無くらいしかカスタマイズできる項目がなく、記事に設定しているアイキャッチ画像など、サムネイルを表示することが出来ません。 記事一覧を出すんだったら、目に止まりやすいのでサムネイル付きで出したい所。そこでいくつかの方法を紹介します。 プラグインだったら「Newpost Catch」がオススメ プラグインを使えば簡単にサムネイル付き新着記事一覧
iOSでCSSでborder-radius と overflow:hiddenを指定した、角丸マスクが効かなくてハマった話 作っていたサイトで、ちょっと写真をカッコよく表示したいなと思いborder-radiusとoverflow:hiddenを利用した角丸マスクで表示するようなものを作りました。その時iOSで少しハマったので、その対処法などをご紹介します。 実際に作ったのが以下のようなものです。 See the Pen border radius & overflow hidden by monochrome (@monochrome-design) on CodePen. それなりに上手く出来たと思っていたのですが、スマホで見てみると丸くマスクされていない事が判明。。。 あれ?と思いmacのsafariで見てみると同じくマスクされていませんでした。しかし、chromeやfirefoxで
CSSで2重線を付ける時、どう実現するでしょうか? 一番簡単に実装する方法としては、borderのスタイル指定で「double」を指定する事だと思います。しかし、border:doubleはちょっと癖があり、指定によってはブラウザ間で表示が異なる事があるので注意しなければいけません。ここでは注意するべき点などを実際のブラウザで表示したサンプルと共にご紹介します。 border:doubleは太さの指定によってブラウザ間での表示が異なる 検証のためサンプルhtmlを作り、いくつか指定を変えたものをキャプチャに収めました。htmlは以下の通りです。 html<div class="border">border double テスト</div> それでは、線の太さを指定するとブラウザでどう表示が違うのかを見ていきます。 線の太さを指定しない場合のサンプル .border { width: 400
WordPressのカテゴリやタグ自体に画像を登録したいという要望があったので、その方法などをご紹介します。 カテゴリやタグ自体に画像を登録したい事があった 最近携わっている案件で必要になったのですが、カテゴリ一覧やタグ一覧などのページで、そのカテゴリやタグを表す画像を登録したいという要望がありました。 WordPressでは、カテゴリやタグに設定できるのは、「名前」「スラッグ」「説明」(カテゴリは「親」も)のみで、カテゴリやタグ自体に画像を登録することは基本的に出来ません。しかし、調べてみるとプラグインを使えばそれが可能になるという事がわかりました。プラグインとその方法をご紹介します。 使うプラグインは「Advanced Custom Fields(ACF)」です まず使うプラグインは「Advanced Custom Fields(ACF)」です。このプラグインは、元々WordPress
PHPでは様々なフレームワークが存在しますが、その中でも特に軽量なマイクロフレームワーク「Slim3」を使ってみましたので、使った様子などをまとめました。 PHPで軽量フレームワークを探していました PHPでwebサービスを作りたい場合、フレームワークを使って作る事があると思いますが、PHPのフレームワークって色んな種類があって、どれを使うべきなのか迷います。 有名なのは、CakePHP、Laravel、FuelPHP、Symfony、CodeIgniter、Zend Framework辺りでしょうか。日本においてはCakePHPが一番使われていて、今後Laravelが伸びてくるというのが共通認識のようです。 以前より小規模なサイトをPHPでいくつか作りましたが、その際も上記の様なフレームワークを使おうと思って色々と調べていました。ただ、そこまでの機能を必要としていなく、とりあえずルーティ
最近はそれもちょっと面倒なので、自分のサイトではFont Awesomeを使う事が多くなってきました。CDN版だったらHTMLに1行追加するだけですぐ使えますし、デザインの好みはあるけれど主要なアイコンは大体揃っているので、サクッと作りたい時に非常に便利です。 Font Awesomeを使っていて思ったのですが、アイコンのソースコードの所にあまり見慣れない「area-hidden=”true”」という指定がありました。 特にこれを使用しなくても表示に問題は無いのですが、何のためにあるのか知らなかったので、少し調べてみました。 area-hidden=”true”とは、スクリーンリーダーの読み上げをスキップするための指定 area-hiddenプロパティについて調べてみると「WAI-AREA」で定められている仕様の1つであり、trueが指定してある場合、ブラウザにその要素が非表示であるという
「サブセットフォントメーカー」「woffコンバーター」は武蔵システムという会社が作っているフリーソフトで、windows、macそれぞれソフトが用意されています。 サブセットフォントメーカーでサブセット化 まずは「サブセットフォントメーカー」を使って、Noto Sans Japaneseをサブセット化してみます。※画面はmacですが、windowsでも同じです。 「作成元フォントファイル」に、Noto Sans Japaneseを指定します。 「作成後フォントファイル」は任意の名前を付けてください。 「フォントに格納する文字」に、欲しい文字を入力します。 出来たファイルをwebフォントとして使える形式に変換 上記工程でサブセット化されたフォントファイルは用意できましたが、このままではwebフォントとしては使えないので、webフォント用の形式に変換します。ここで使うのが「woffコンバータ」
数少ない日本語webフォント「Noto Sans Japanese」を実際に使ってみたので、使い方などをご紹介します。 GoogleとAdobeが共同開発したフォントに「Noto Sans」というものがあります。これは世界中のあらゆる言語をサポートすることを目標に作られたフォントです。 世界中の言語をサポートすることを目標に、Apache License 2.0 のライセンスで配布が開始された。2015年9月29日に、SIL Open Font License 1.1 にライセンス変更。 コンピューターで表示できない文字がある場合、文字の代わりに小さい四角(□)が表示されることが多いが、Googleではそれを”豆腐”と呼んでおり、Webから取り除くためにNoto(no more tofu)フォントを作った 名前が日本語の「豆腐」から来ているというのは意外でしたが、GoogleとAdobeが
最近レイアウトにFlexboxをベースにしたモダンなCSSフレームワークが出始めてきています。ここではFlexboxを採用したCSSフレームワークをご紹介します。 Flexboxとは まずFlexboxとはなんなのか、正式名称は「CSS Flexible Box Layout Module」と言うもので、ざっくり言うと「今までより簡単にレイアウトが組めますよ!」って事です。 ざっくりしすぎなので補足すると、今までレイアウトを組むときは、テーブルを使ったり、CSSのfloatを使ったりして組んでいましたが、横並びにするとレイアウトが崩れる、縦の高さを揃えるのが難しい、上下中央揃えをしようとすると面倒・・・と手間がかかりました。javascriptを使わないと出来ない場合もありWEBのレイアウトは結構不自由だったのですが、Flexboxによってそれが改善されます。 Flexbox自体の使い方は
去年末にPHP7が正式リリースされました。ネットの情報を見る限りでは後方互換性がしっかりしており、WordPressやその他フレームワークもPHP7対応が完了しているみたいですので、アップデートしてみることにしました。 まずは既に入っているPHP5.6をアンインストール アップデートでも良かったのですが、一回消したほうがスッキリするのかと思い、yum remove を使ってPHPをアンインストールしました。 yum remove php * php -v でバージョン情報が出てこなければアンインストール完了です。 remiリポジトリを追加 wget //rpms.famillecollet.com/enterprise/remi-release-7.rpm rpm -Uvh remi-release-7.rpm 最新のremiリポジトリを追加し、インストールします。 yumコマンドでPHP
wordpressで画像挿入時にimgタグに付くwidthやheightと不要なclassを無くす方法 2015.01.23 wordpressで画像挿入をすると、imgタグに「width」や「height」、そして「alignnone」「size-large」などのclassが付与されます。widthやheightはレスポンシブで作るときに邪魔な事があるのと、alignnoneなどのclassは、個人的にあまり使うことはありません。 以前までは手で消してたりしたのですが、毎回手動で消すのも面倒なので、function.phpを編集して、あらかじめこれらの属性やclassを付かないようにしましたので、その方法をご紹介します。 width、heightを付かなくする為に、function.phpに以下を追加します
MONOCHROME DESIGNはWEBサイトの設計・デザイン・コーディングなどを請け負っています。 シンプルな中に、ちょっとしたアクセントを加える。そんなデザインを提供しています。 お客様の要望をヒアリングし、課題の解決に向けて最適な案を提案。 ウェブサイトに関するお悩みならお気軽にご相談下さい。 VILLA BIANCA THAMES GARAGE ARAI PIANO SCHOOL HIDEKI NAKAI AKAKA CORGY'S GRUNBERGER JEWELS daVinci Rental SPREAD REAL DESIGN daVinci
このページを最初にブックマークしてみませんか?
『MONOCHROME DESIGN|東京のフリーランス|WEBデザイナー/デベロッパー』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く