< pocket

Flexboxでスマートニュース(SmartNews)風のレイアウトを実装する方法

Flexboxでスマートニュース(SmartNews)風のレイアウトを実装する方法

かなり前に、スマホ版の関連ニュース一覧の表示をスマートニュース(SmartNews)風にしたいな〜と思い、Flexboxを使って実装してみました。その当時はちょうどFlexboxを覚えたばかりで、個数や画面幅が変わっても柔軟に対応できるのを知って大変感動したのを覚えています。

というわけで、今回はそのとき感じた「知ってよかった!」の気持ちを振り返りながら実装方法をメモしておこうと思います。

続きを読む
トップに戻る

クリックひとつでサイト公開!「Wix」を使ってブログサイトを作った時の流れ

クリックひとつでサイト公開!「Wix」を使ってブログサイトを作った時の流れ

今まで「ホームページ作成ツール」の存在を知ってはいても触れたことがありませんでしたが、先日「Wix(ウィックス)」を使ってみたところ、普段の倍以上のスピードでサイト公開までできてしまいました。

今回は、実際に Wixを使ってWebサイトを制作した流れや使用感などをWebデザイナーの目線から紹介します。

続きを読む
トップに戻る

さくらのサーバーでWordPressをSSL(https://)対応した時の手順10

さくらのサーバーでWordPressをSSL(https://)対応した時の手順10

先日、重い腰を上げてついにサイトをSSL(https:// )に対応しました。やってみれば一つ一つの作業は難しくないのですが手順がなかなか複雑だったので、今回は備忘録として一連の流れや注意点を書き残しておこうと思います。

※ちなみに、今回はさくらインターネットのサーバー(スタンダードプラン)で「ラピッドSSL」を設定した時の流れです。他のサーバーではこの手順は当てはまりません。

続きを読む
トップに戻る

Photoshopいらず!CSSで画像を中央トリミングする方法(レスポンシブ対応)

Photoshopいらず!CSSで画像を中央トリミングする方法(レスポンシブ対応)

最近、会社のサイトをリニューアルする機会があったんですが、サムネイルのサイズがみんなバラバラ!ってことがあったんですよね。今まではそれを横幅だけ揃えて高さはバラバラなまま表示してたりして、なんだか統一感のないデザインだったんですが、そんな悩みを解決してくれるcssを覚えたので、メモとして書き残しておきます!

画像の可変幅にも対応できているので、レスポンシブWebデザインにも使えますよ!

続きを読む
トップに戻る

CSSで背景画像だけにブラー(ぼかし)エフェクトを加える方法

CSSで背景画像だけにブラー(ぼかし)エフェクトを加える方法

ぼかした画像を背面全体に敷くデザインを、Photoshopを使わずCSSで実装するための備忘録です。

CSSフィルターでブラー(blur)エフェクト使うと、背景画像を敷いた要素だけでなく中身の要素にまでエフェクトがかかってしまうので、背面要素のみにブラーエフェクトを加えて画像をぼかす方法をご紹介します!

続きを読む
トップに戻る

CSS(Sass)でレーティング評価の星(★)を表現する方法

CSS(Sass)でレーティング評価の星(★)を表現する方法

先日、会社で口コミやレビューなどのレーティング評価の星(★)を実装する機会があったのでメモします。画像を使わずCSSのみで表現できるのでカスタマイズしやすく、便利だと思います!

続きを読む
トップに戻る

デザインをレスポンシブに対応させる時に役立つjQuery・プラグイン6(サンプルあり)

デザインをレスポンシブに対応させる時に役立つjQuery・プラグイン6(サンプルあり)

レスポンシブWebデザインは、ひとつのソースでPCやスマホなど様々なデバイスでの見え方を最適化できるのでとても便利ですが、ワンソースなだけにデザインを反映させるのが難しい時ってありますよね。例えばデザイン上、PC版とスマホ版でそれぞれ表示する画像を変えたいとか…。

最近レスポンシブのサイトを作る機会が多かったので、レスポンシブWebデザイン対応案件の時に私がよく使うjQueryをまとめてみました。今回はサンプルも作ってみましたので、照らし合わせながら読んで下さいね。

続きを読む
トップに戻る

WordPressのスマホサイトにページネーションを設置する方法(プラグインなし)

WordPressのスマホサイトにページネーションを設置する方法(プラグインなし)

当サイトのスマホ版では最近まで「オートページャー」を使っていましたが、なんだかうまく動かなくなってしまったようなので、いい代替案が見つかるまでは普通のページネーションに戻すことにしました。

なるべくシンプルな形にしたかったので、「前へ」「次へ」リンクだけのページネーションにしてみました。色々調べたので、今回は備忘録として書き残しておきます。

【2015年7月29日 追記】
ソースコード変更

続きを読む
トップに戻る

サイト分析やWeb制作・執筆をスピードアップ!おすすめブックマークレット13

サイト分析やWeb制作・執筆をスピードアップ!おすすめブックマークレット13

以前に日々の業務やWeb制作に役立つ!おすすめChromeプラグイン12 | Design Colorという記事を書きましたが、ブラウザに依存しないブックマークレットも日々のお仕事には欠かせませんよね。

今回は、サイト分析やWeb制作、ブログの執筆など様々なシーンで活躍してくれるブックマークレットをご紹介します!お仕事のスピードがアップするかもしれませんよ!

続きを読む
トップに戻る

WordPressにシェア数つきオリジナルSNSボタンを実装しよう!取得から表示までの流れを紹介

WordPressにシェア数つきオリジナルSNSボタンを実装しよう!取得から表示までの流れを紹介

以前に「SNSボタンをオリジナルデザインに!設置方法&シェア数の取得方法まとめ」という記事を書いたのですが、それは普通のPHPファイルで設置する方法でしたので、今回はWordpressにオリジナルSNSボタンを設置する方法をご紹介します。

WordpressでURLを取得するところなどが少々独特でしたので、シェア数の取得から表示までの流れを備忘録として書き残しておこうと思います。プラグインなしで実装することができます!

【2016年8月28日 追記】
Facebookの仕様変更のためソースを一部変更

【2015年10月2日 追記】
ツイート数を取得する「count.json」が提供終了

【2015年6月11日 追記】
file_get_contents()の注意点を追記&ソースコード変更

続きを読む
トップに戻る