https://designer-draft.jp/articles/20
たった5行ではてなブログにTwitterのエゴサボタンを設置！ - らいちのヒミツ基地
はてなブログのカスタマイズでお馴染みの、横に細長い「この記事に関するツイート」ボタンの元記事はこちらになります。 エントリを紹介してくれているツイートを一覧表示するボタンの設置方法です。 20190723更新 Twitterの仕様変更のため、コードを修正しました。 とうじょうじんぶつ 阿豆らいち： フリーランスのデザイナー。ときどきコーダー。 ATA-b（アタビイ）： 都合よく会話してくれるヒミツロボ。 たった5行ではてなブログにTwitterのエゴサボタン設置 前回の記事がコチラ azulitchi.hatenablog.jp ありがたくブコメを頂戴しました。 (c) id:kinako222 ちょうシンプルに 前回、あんな長い記事書きましたが、ブログ記事の上に「この記事に関するツイート」ボタンを設置するだけなら以下の4行を 「デザイン→カスタマイズ→記事」の「記事上」 に追加するだけで
ウェブデザイナーが試したい、Webアニメーション無料プラグイン＆ライブラリ75個まとめ【保存版】
アニメーション（英: Animation）は、ウェブデザイン制作で必要とされる人気トレンドのひとつです。かろうじて気付くような控えめなローディングから、映画のような体験を提供するページ遷移まで、あらゆるデザインに採用されています。 ウェブサイトへのアニメーション実装を検討しているデザイナーには、無料プラグインが豊富に用意されています。デザイン的要素の強いものから、ユーザーエクスペリンスを向上させるものまで、さまざまなアニメーションを作成できます。 今回は、ウェブデザイナーが確認しておきたい、アニメーション用プラグインとライブラリ75個をまとめてご紹介します。利用するケースやアイデアに応じて、これらの素材を活用してみましょう。 ウェブデザイナーが試したい、ウェブアニメーション無料プラグイン、ライブラリまとめ 01. Animate.CSS Animate.CSS は、クロスブラウザ対応の基本
現役デザイナーも注目！最近話題のウェブデザイン50個まとめ 2017年7月度
ウェブサイトの制作に追われるうちに、アイデアが枯れてしまったという経験はないでしょうか。目まぐるしく変化を続けるウェブデザインの世界では、新しいアイデアやトレンドをうまくサイトに盛り込むことも重要です。 ユーザーに新しいウェブ体験を提供することで、コンテンツをより魅力的に仕上げるだけでなく、伝えたいメッセージやコンセプトをうまく表現できるようになります。 今回は、最近話題になった新作ウェブデザイン50個をまとめて紹介します。配色えら�びやデザインが苦手な人でも参考にできる、最先端で実践的なテクニックを得意としたサイトを集めているので、今後のデザイン制作にも活躍してくれるでしょう。 クオリティーが凄い！最近話題になったウェブデザイン40個まとめ 2017年5月度 これでもう悩まない！2017年のデザイントレンド完全ガイド 現役デザイナーも注目！最近話題になったウェブデザイン50個まとめ Sp
実務経験3年すぎた現役Webデザイナーのリアル【勉強方法編】 - IT系女子ログ
（7月25日、コーディング編更新しました。） 私がWebのスキルアップのために行っている勉強方法をすべてご紹介します。 たくさんありますが、「今日は模写をしてみよう」とか、「今日は案出ししてみよう」とか、楽しんで勉強するのが一番だと思います。 今まで自分に合っているものを優先して取り入れてきましたが、「もっと効率いい方法があるよ！」というアイデアがあれば、ぜひ教えていただきたいです！ デザイン編 忙しくてもできること 毎日5分でもデザインを観察する ニュースを見る、読む いいと感じたデザインを自分なりに消化してから制作に取り入れる 部分的でもいいので2案以上作る 周りの人に自分から意見をいただきにいく 意見をいただいたら要点を控えておく 提出する時には自分の言葉での説明も添える 広告を見て、伝えたい内容や狙いを考察する 時間あるときにしたいこと 思い浮かんだ案をできるだけ作ってみる 素敵だ
シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選
コーディング Kota Naito / 2017.07.11 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選 画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。これから紹介する様々なデザインサンプルを組み合わせれば、また新たな面白い見出しを作ることも可能かと思いますので、カスタマイズも楽しんでみてください。 一部ブラウザで表示できないデザインもあるかと思いますが、その場合はベンダープレフィックスを、各自で追加してください。 このページでは「見出しデザイン」のプレビューに画像を使用していますが、実際の表示は以下デモページで確認することができます。 DEMOページ 手書き風の見出しデザイン[01] このデザインのポイントは「border-radi
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
レビューブログに使ってほしい はてなブログカスタマイズ その1：良い点・悪い点のリスト - FOXISM
私のこのブログはレビュー系ではありませんが、メインサイトの方ではスマホや周辺機器のレビューをやっています。そこで使っていたり、ほかのレビューブログでもこういうのがあるといいな、というカスタマイズを残しておきます。 まず今回の「あるといいな」は「その製品の良い点・悪い点を端的にまとめたリスト」です。 はじめに まず、レビューとか言いつつ自分では実物を手にせずにネット上のスペックだけをコピペしているだけでそれを見て「コスパ抜群です」とか言ってるようなブログ、スペックレビューとか言って本当にスペックしか書かれていない公式サイトでわかる情報以外が無いようなブログは滅んでください。よろしくお願いします。 レビューとか言って、開封の様子を順番に写真を載せただけで記事の9割が埋まっているブログもありますが、それもかなり残念な気持ちになります。開封レビューとかで、それぞれの写真にちゃんと有用なコメントつけ
スマホ・モバイルユーザーを意識したブログデザインのカスタマイズ実例 - Life is colourful.
当ブログは1ヶ月前のGWにデザインを一新した。 スマホユーザーをターゲットにしたデザインカスタマイズで、下の画像のように、ヘッダーのカテゴリメニューや記事下の関連記事一覧をリデザインした。 今回のカスタマイズのこだわったポイント、設計意図を以下にまとめた。 カスタマイズのターゲット スマホユーザー 検索からのユーザー 今回はこの2点をカスタイズターゲットに絞った。 当ブログのアクセスは約97％が自然検索によるもので、全体の7割はモバイルユーザーという状況なので、スマホ表示のカスタマイズを優先した。 もちろんPC表示もカスタイズしたいが、まだ途中で投げ出したままになっている。本文下の関連記事一覧はスマホ表示と共通のデザインを採用しているけれど。 スマホユーザーの特性（PCユーザーとの比較） まずスマホユーザーの特性を整理しておこう。以下の3点を頭に入れつつカスタマイズに臨んだ。 ページの滞在
CSS書きたくなさすぎ問題2017 - DRYな備忘録
css書きたくない。できればjsも書きたくない。js必要なの嫌。軽くやりたい。という個人の日記です。 参考 Best CSS Frameworks of 2017 | Three29 10 Free Lightweight CSS Frameworks for a Fast Start 2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス ググれ。 lightweight css framework - Google 検索 Gridだけやりたいやつは除外した。 Bootstrap Materialize mui （追記）UIkit （追記）Semantic UI Pure Bulma Skelton Spectre.css Kube Vuetify Fictoan avalanche Beuter Vanilla Milligram InvisCSS Look
[JS]スマホやタブレットにも完全対応！垂直・水平方向にパララックス スクロールさせる軽量スクリプト -paroller.js
ページいっぱいの背景、コンテナいっぱいの背景、要素の背景などを垂直水平方向にパララックスさせるスクリプトを紹介します。 モバイルにも完全対応しており、全体をパララックスさせたり、カード型コンポーネントをずらしながら表示させたりできます。
![[JS]スマホやタブレットにも完全対応！垂直・水平方向にパララックス スクロールさせる軽量スクリプト -paroller.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/73c5f616116e59d40f567ed5c484ab9ef70b0605/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017052401-01.png)
2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ - PhotoshopVIP
Google が2014年に発表したマテリアルデザインは、ウェブだけでなくグラフィックデザインでもますます人気となっており、さまざまな方法で採用しているケースをよく見かけるようになりました。 今回は HTML と CSS、わずかな JavaScript で実装できる、今後の参考にしたいカード型レイアウト用コードスニペットをまとめてご紹介します。コードニペットは各レイアウト別にカテゴリ分けしているので、ウェブサイト制作に活用したものを見つけてはいかがでしょう。 【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選 イメージスライダーを魅力的に！コピペ実装できるHTMLスニペット24個まとめ ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ 2016年12月度 コンテンツ目次 1. ブログコンテンツ用レイアウト 2. 名刺型レイアウト 3. グリ
Webデザインのトレンドを採用するときの９つの注意点
Stephen Moyersはオンラインのマーケティング担当およびデザイナー、テクノロジーに詳しい熱心なブロガーです。彼はロサンゼルスに基点を置くSPINX Digital Agencyと契約しています。 音楽やアートなどのカルチャーと同じく、Webデザインにもその時代ごとの思潮があり、毎年新たなデザイン要素や機能、トレンドなどが発生します。また、デザインに対する考え方も、新しい技術の急速な発展に伴い急激に変化します。 Webデザインのトレンドの中には、時の試練に耐えられないものもあります。ユーザビリティを損なうトレンドやユーザーのサイト訪問を妨げるようなトレンドは避けるべきです。以下に挙げるトレンドは、ユーザーはサイトから離れてしまう可能性もあるので、これらを採用する場合は慎重にならなければなりません。 ネガティブスペース ネガティブスペースはホワイトスペースとも呼ばれ、画像やデザイン要
これでフォントの組み合わせは完璧！確認しておきたい基本ルール、手順まとめ
デザイナーとして学ぶことができる重要なスキルのひとつは、書体を選択する力です。デザインの主要ポイントのひとつとして扱われることが多いフォント、書体は、デザインの仕上がりを良くも悪くもしてしまいます。 この記事では、これから学びたいひとに向けた書体をうまく選択する基本ルールをまとめてご紹介します。普段からよく利用しているフォント以外に、新しい組み合わせ方を詳しくみていきましょう。 デザインの目的をはっきりさせよう。 デザインをはじまる前に、目的はなにかきちんと確認しましょう。どのような情報を伝えたいですか。ウェブや印刷などどんな媒体を対象にしていますか。 優れているとされるデザインは、その目的に合わせてタイポグラフィーを合わせています。これは、タイポグラフィーが雰囲気や色調、スタイルを決める鍵となるからです。 たとえば、イラストを多用したグリーティングカードをデザインするとき、イラストのスタ
iPhoneの変化に合わせて生まれたUIトレンド【デザイナーの方々、見逃していませんか？】
最近のモバイルUIにはとあるトレンドが見られます。重要な要素が画面の下側に配置されるようになってきているのです。iOS 10で変更されたアップルの地図アプリを見れば一目瞭然です。 この変更には明確な理由があります。それはスマートフォンがどんどん大きくなる一方で、私たちの手の大きさが変わらないためです。 初期のiPhoneでは親指で画面左上の戻るボタンをタップすることができました。しかしPlusモデルでは画面が大型になり、同じ操作をすることがほぼ不可能となっています。 この問題に対処するため、画面の端からスワイプすることで前の画面に戻る機能が搭載されました。ただしこの操作は画面を見ただけでは発見できず、新機能に敏感なユーザーにしか届きません。 そのため、重要な要素を画面下部に配置するという親指にやさしいトレンドが生まれたのです。Windows Phoneのブラウザもアドレスバーは画面下部にあ
【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
使い方 HTMLとCSSの編集方法をご存知の方は読み飛ばしてくださいませ。 スキップ 手順1：CSSをコピペ のちほど紹介するボックスデザインのうち、気に入ったものがあればCSSをコピーします。これをブログやWebサイトのCSSファイルに貼り付けます。貼付け先はブログサービス別に以下のようになります。 link rel〜を貼る場所 WordPress[ダッシュボード][外観][テーマエディター]右側のバーの[style.css]※もちろんFTPソフトを使ってもOK はてなブログ[デザイン][][デザインCSS]スマホ用はの[フッタ]に<style></style>と入力、この中に貼付け アメブロ[マイページ][デザインの変更][CSSの編集] Livedoorブログ[ブログ設定][PC][カスタマイズ][CSS] FC2ブログ[設定][テンプレートの設定][スタイルシートの編集] Blog
クオリティーが凄い！最近話題になったウェブデザイン40個まとめ 2017年5月度
さまざまな想いやメッセージを伝えるウェブサイトは、クリエイティブなアイデアの宝庫です。まるで思いつかないようなユニークなアイデアが使われていたり、最先端のウェブ技術を駆使したこれまでにない体験をお届けするサイトなど、参考したいポイントがたくさんあります。 この記事では、最近国内外で話題となった最新ウェブデザインをまとめてご紹介します。ますます加速するウェブの世界をのぞいてみてはいかがでしょう。 ブックマークしておきたい海外/国内Webデザインギャラリーまとめ30選【2017年改訂版】 これでもう悩まない！2017年のデザイントレンド完全ガイド クオリティーが凄い！最近話題になったウェブデザインまとめ Freelance TV 世界各地で活躍するフリーランスたちに、普段のライフスタイルや仕事術などをインタビューしながら紹介する新しいメディアの取り組み。コンテンツも定期的にアップされており、今
縦書きでレスポンシブなブログを作った - yuhei blog
趣味で会社の人のサイトを作った。縦書きでレスポンシブなブログ。prismic.ioとNext.jsで作った。 ウェブデザインに縦書きを活かすことは難しい。部分的に取り入れることはできても、縦書きの文章を主要な要素として扱うのはかなり難がある。というのも、ウェブサイトは縦にスクロールするのが当たり前だけど、普通に縦書きで実装すると横スクロールになるからだ。 横書きでは文章は上から下に流れ、ページは縦スクロールになる。対して縦書きの場合、文章は右から左に流れるため、横スクロールになる。スクロール操作が不自然だと目に見えてユーザービリティが低下するので、どうしても当たり前のスクロールができるようにしたい。 幸い、縦書きにしながら縦スクロールにする方法はひとつある。新聞や雑誌のように段組にすることだ。 それはcolumnsを利用すれば、一見簡単にできそうな感じはする。けど、僕が望む仕様を実現しよう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コーダーの仕事が楽になる！レスポンシブ対応のさまざまなHTMLテンプレートが驚くほど簡単に作成できる -Aperitif
http://www.life-is-bitter.com/entry/2017/06/09/140542
