CSSで画像を正方形にトリミングして縦横比を維持したまま可変してくれる方法 | RECOOORD
HOMEHTML&CSSCSSで画像を正方形にトリミングして縦横比を維持したまま可変してくれる方法 CSSで画像を正方形にトリミングして縦横比を維持したまま可変してくれる方法 HTML&CSS Photoshopでトリミングした画像をそのまま表示できればいいのですが、Webサイトだと画像サイズが均等じゃないものを表示する場面が出てきます。 例えばWordPressのようなCMSで、画像を出力する際など投稿者によってサイズがバラバラだったりします。 そこで今回はCSSで画像をトリミングし、縦横比を維持したまま可変してくれる方法を紹介していきます。 実装のサンプル まずはデモをご覧ください。 PCで見られている方はウィンドウサイズを縮めたりしてみてください。画像の縦横比は維持されていると思います。 基本的にはHTMLとCSSだけで実装することが出来ます。 HTMLの記述 <ul> <li><i
THE THOR「ザ・トール」│次世代WordPressテーマ
圧倒的にSEOに強く 抜群に上位表示されやすい ザ・トールは、圧倒的にSEOに強く・抜群に上位表示されやすい「究極のSEO最適化テーマ」です。 HTML5+CSS3による最新のコーディング・検索エンジンに優しい構造化マークアップに対応。検索エンジンから評価されやすい内部構造を徹底的に追求しました。 また、革新的な高速表示技術・最先端のSEO機能を装備。テーマ自体に十分なSEO対策が施されているため、SEO対策用プラグインも必要ありません。 美しく・おしゃれで・洗練された デザイナーズサイトがワンクリックで完成 ザ・トールは、美しく・おしゃれで・洗練されたデザインのサイトを誰でも簡単に作れる「国内トップクラスのデザイナーズテーマ」です。 一般的なWordPressテーマでは、デザインの初期設定だけで数時間～数日掛かってしまいますが、トールなら煩わしい設定は不要。「デザイン着せ替え機能」を使え
ライブドアブログからWordPressへの移行(引越し)全ステップを解説
正直、WordPressはいろいろ設定とか難しそうだし、ちゃんと移行できるか不安でしたが、色んなサイトを参考にしながら、何度かつまづきながら、なんとか無事に移行することが出来ました。 そこで今回は、ライブドアブログからWordPressに移行するために行った全ステップを、余すことなく解説したいと思います。 後に続く方のために、少しでも参考になれば。 まず、前提として、わたしはライブドアブログを使っている時から、独自ドメイン(hataraku-ikiru.com)を取得し、使用していました。 独自ドメインを使っているかどうかで、移行のステップがやや異なる部分があります。 このページでは、独自ドメインで運用していたライブドアブログを、WordPressに移行するステップの解説だという点、ご理解ください。 それでは初めに、ライブドアブログからWordPressに移行する全体の流れがこちらです。
3万円台で実現。写真やデザインが楽しめるAdobe RGBカバー率90%の広色域パネルを採用した23.8型ワイド液晶ディスプレイ「PhotoCrysta」（LCD-HC241XDB）
※仕様詳細はこちら 早速、カメラの色空間設定をAdobe RGBにして自宅近くの紫陽花を撮影してきました。 （写真）カメラの色空間設定をAdobe RGBにして撮影 撮影後、自宅に戻って、写真をチェック。「PhotoCrysta」（LCD-HC241XDB）は、Adobe RGBの特長の一つである、緑や青の色再現が十分できていると感じました。 （写真）カメラ専用HDMI端子（別売）で「PhotoCrysta」（LCD-HC241XDB）につなぎ写真をチェック その後、パソコンに写真データを取り込み、自分好みに調整してみました。 （写真）Adobe Photoshopで取り込んだ写真を調整中 さらに、調整した写真をプリントアウトしました。今までは、sRGB対応のディスプレイで、どうしても画面で見ている写真の色とプリントアウトした色の差があり、何度もやり直していました。それが、今回は「Phot
Bootstrap と BEM を組み合わせた CSS 設計パターンについて考える | PSYENCE:MEDIA
前置き - CSS 設計が難しい件について 誤解を恐れずに言うならば、CSS は変数も関数も条件分岐もない、ある種ゆるふわな言語（仕様）といえます。そのためプログラミング言語のように記述ミス一つで全ての挙動が止まるなんてことはありませんし、いくら冗長に記述しようがブラウザ上での挙動に差異が生まれることも殆どありません。ちょっと嗜めばそれっぽいものが作れてしまうので、マークアップエンジニアのいない小規模体制の組織であれば、サーバーサイドエンジニアやデザイナーが片手間で習得して実装してしまうというのも珍しいことではないでしょう。それでも良かったのかもしれません。これまでは…。 片手間で学習した知識というのはなかなか体系化されないものです。CSS も御多分に漏れずプログラミングのテクノロジーは日進月歩なため、その時は最新だった技術が僅か一年も経たないうちに廃れてしまい、バッドノウハウ化してしまう
AtomでSass + Compassのコンパイルをしてみよう | WebLifeTimes
Atomのsass-autocompileでSassのコンパイルをしてみようという記事でパッケージを使ったsassファイルのコンパイルについて書きましたが、sass-autocompileではCompassでのコンパイルに対応していませんでした。 Sass + Compassとういう組み合わせは多いので、Compassを利用しているsassファイルをコンパイルする方法を紹介します！今回はパッケージなどを利用するわけではなく、コマンドからコンパイルをするという流れになります。 Compassとは そもそもCompassってなに？と思われている方へ簡単に説明すると、CompassはSassのフレームワークでSassをより便利に利用することのできるものです。 それでは、ここから実際にCompassを使ったコンパイルをするまでをみていきたいと思います！ Rubyの確認 まず、Sassを利用するには
Social Photo Feed: インスタグラムの写真を表示できるWordPressプラグイン
Smash Balloon Social Photo Feed（旧名称：Instagram Feed）は、インスタグラムに投稿した写真・動画を表示できるWordPressプラグインです。 ショートコードを利用してブログの記事・サイドバーなどに表示することもできます。 インスタグラムに写真・動画を投稿しているインスタグラマー向けのプラグインです。 ブログにインスタグラムに投稿している写真・動画を掲載したい場合に利用します。 インスタグラマーの方は、WordPressで運用するブログにもその写真ギャラリーを表示しましょう。 そうすることでインスタグラムのアカウントの存在をブログ読者にアピールできます。 便利なプラグインなので活用しましょう。 はじめに このプラグインが優れていること インスタグラム（Instagram）の写真・動画をブログの記事・サイドバーに表示できる。 プラグインの設定で「カ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PC環境でリンク要素にhoverしてもカーソルがポインター（指マーク）にならない事象 | oku-log
まわるフリフリのフリ ＞ 検索結果: ＞ MAMP