はてなブログに実施した、４つのデザインカスタマイズ - Banguardサイト
ブログのデザインを少し変更してみました。それほど大きな変更ではないのですが、変えたのは以下の4点です。 １．ブログのデザインテーマを変更した ２．記事の幅を広げた ３．「続きを読む」を加えた ４．ブログの見出しに画像を加えた はてなブログは、ある程度自分で自由にカスタマイズすることが可能です。Webデザインの知識がない私ですが、なんとか今回の4つは自分でできました。はてなブログのカスタマイズをしようとする際に、参考にしていただたら嬉しいです。 はてなブログのデザインをカスタマイズした場所 今回カスタマイズしたのは、主にブログ全体に関わる部分が２箇所、トップ画面で１箇所、記事画面で１箇所、計４箇所です。特にブログのデザインテーマの変更と記事の幅の変更は、ずっとやりたかったカスタマイズです。 ブログ全体に関わる変更点と、トップ画面での変更点 また、「ブログの見出しに画像を加える」ことも、地味で
世界初のWebサイトが誕生した年は？ インターネットの歴史年表が公開 - はてなニュース
一般社団法人日本ネットワークインフォメーションセンター（JPNIC）は6月19日（水）、海外と日本におけるネットの歴史をまとめた「インターネット歴史年表 ベータ版」を公開しました。世界初のWebサイトが誕生した日や、日本で首相官邸のサイトがオープンした年など、1958年から現在に至るまでのネットの歩みを紹介しています。 ▽ インターネット歴史年表 - JPNIC ▽ 「インターネット歴史年表 ベータ版」の公開のお知らせ～Request for Comments：歴史年表への情報提供のお願い～ - JPNIC インターネット歴史年表のベータ版は、ネットの歴史に関する資料を広く収集する目的で公開されました。年表では大きく「海外での出来事」「JPNIC/日本での資源管理」「日本での出来事」の3つに区切り、その年に起こったネットに関する出来事を時系列で表示しています。さらに「IPアドレス」「ドメイ
レスポンシブ対応サイトで使用されているナビゲーションのパターンのまとめ
デスクトップ、タブレット、スマフォなどのレスポンシブ対応サイトで使用されているナビゲーションのトレンドを紹介します。 特に小さいサイズになった際に、どのようにアイテムを見せるかさまざまな工夫がこらされています。 Popular Design Trends for Responsive Navigation 下記は各ポイントを意訳したものです。 ブロックレベルのメニュー 凝縮するナビゲーション フォームのセレクトメニュー 非表示のドロップダウン スライドするナビゲーションボックス 終わりに -次のプロジェクトの開始に ブロックレベルのメニュー まずは、ボックスをベースとしたデザインのブロックレベルのナビゲーションです。表示サイズに合わせて、ボックスのサイズが変わったり、配置が変わったりします。
UIのアニメーションを目的別に分けたまとめ -Meaningful Transitions
デスクトップやスマフォやタブレット向けのページやアプリのユーザインターフェイスには、多種多様なアニメーションが使用されています。 ユーザーの助けになるよう目的にあった有意義なアニメーションを実装できるよう、ユーザーのインタラクションにフォーカスを合わせカテゴリに分けたMeaningful Transitionsを紹介します。 Meaningful Transitions アニメーションは、目的ごとに6つのカテゴリに分けられています。 下記に、6種類のアニメーションのカテゴリと事例をいくつか紹介します。 Orientation Spatial Extension Awaking Controls Highlight Feedback Feedforward Orientation オリエンテーションは表示されているオブジェクトから別のオブジェクトを表示するもので、スクロール、ポップアップ、ス
[JS]お気に入りのカラースウォッチをアウトプットするためのスクリプト -Swatches
たった一つのdiv要素を使うだけで、お気に入りのカラースウォッチのコレクションページを作成できるjQueryのプラグインを紹介します。 ホバーでコード表示 Swatchesの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル スタイルシートはhead内に、スクリプトを</body>の上に配置します。 <head> <link href="css/swatches.css" rel="stylesheet"> </head> <body> ... ... <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript" src="jquery.swatches.js"></
[JS]レスポンシブ対応の非常に美しい画像ギャラリーを実装する設置が簡単なスクリプト -least.js
least.js -デモ：画像の拡大時 least.jsの使い方 実装は非常にシンプルで、簡単です。 Step 1: 外部ファイル head内に「jquery.js」と当スクリプト・スタイルシートを記述します。画像の遅延読み込みには「lazyload.js」を使用します。 <!-- least.js CSS-file --> <link href="css/least.min.css" rel="stylesheet" /> <!-- jQuery libary --> <script src="http://code.jquery.com/jquery-latest.js" defer="defer"></script> <!-- least.js JS-file --> <script src="js/least.min.js" defer="defer"></script> <!--
ゆず屋: [フォント] 『たまこまーけっと』とか『ささみさん＠がんばらない』とか『俺の彼女と幼なじみが修羅場すぎる』とか『僕は友達が少ないNEXT』とか
こんばんは。榊です。 今日はフォントワークスのライラというフォントのお話しです。 （もう、これだけで何を書こうとしているのかピンと来た方もいるのではないでしょうか） この1月から始まった今季のアニメを観ていると、この「ライラ」というフォントがあちこちで使われています。 画像を挙げつつ順番にみて行くことにしましょう。 ■ ささみさん＠がんばらない まずは『ささみさん＠がんばらない』です。 （『ささみさん＠がんばらない』 ©日日日・小学館／製作委員会＠がんばらない） 上の画像はオープニングのものですが、ここで使われているのがライラです。 拡大するとこんな感じです。 こんな感じでエンディングのテロップにも使われています。 ぱっと見ると金文体に見えるかもしれませんが、実は結構違います。 （クリックで拡大） こうやって並べるとはっきりすると思います。 「国」などの四角の部分の底辺が丸くなっているとこ
新しくWebサイトを作る際に疑いたい制作側の常識
ここ最近クライアントの受託制作や自社のWebサービスでユーザー様の声を見ていて気がついたことがあるので書いてみます。 iPadやスマートフォンの普及でWebサイトがより身近になってきて、今までPCを起動するのが面倒だった方まで気軽にインターネットを使うようになってきています。 その分、Webサイトを作るにもいろいろなことを配慮しないといけなくなってきています。 デザイン、インターフェイス的に各媒体に最適化されていることも大事ですが、Webサイトを見慣れている人の常識というのを少しづつ疑って、見直していく必要があると思うのです。 制作側の常識が通じないとネットリテラシーが低い、などとまとめてしまうような風潮もありますが、そのリテラシー自体見直すべきなんじゃないかな？なんて思ったりもします。 実際にWeb制作業界ではない色々な方のご意見をうかがったうえで、Web制作をする際に、自分たちが割と「
コーディングする時のスライス方法とか - CSS HappyLife
珍しく、Photoshopネタでも。 コーディング関係だからこのブログの主題っぽい！ 今回は、PhotoshopCS6を利用したスライスに関するアレコレです。 コーディング時にはスライスは必須ですし、一番面倒な部分なので少しでも効率良くスライス出来ると良い感じですよね。 内容としては、スライスの基本からって訳じゃないので、最低限スライスツールが使えてる方を対象にしたような感じになってると思います。たぶん。 ちなみに、面倒な説明しなくていいから分かりやすい様に動画ベースでやっていきます！ Photoshopを起動します 何はともあれ、Photoshopを起動します。 これはすごく重要な作業です。 Photoshopは重いので起動するのがダルいですね。ウチのVAIO Zが頑張ってます。 CS3の頃はサクサクで良かったんですが。 起動したら、psdファイルを開きましょう。 普通のスライス まずは
ユーザーを混乱させない、ウェブのUIデザインの一貫性を保つために気をつけたいポイント
ユーザーが利用しやすいよう、ウェブやスマートフォンのサイト・アプリのUIデザインの一貫性を維持する際に気をつけたいポイントを紹介します。 Maintaining Consistency in Your UI Design 下記は各ポイントを意訳したものです。 UIデザインの一貫性を保つ3つのポイント 一貫したストラクチャとインタラクション 一貫したスタイル UIデザインの一貫性を保つ3つのポイント ウェブやスマートフォンのサイト・アプリを設計する際、UIデザインの一貫性を保つためにおさておくべきポイントは3つあります。 デバイスの標準の振舞いやUIガイドラインと矛盾しないようにする。 他の類似のサイトまたはアプリケーションと一貫した状態にする。 あなた自身のデザイン上、矛盾しないようにする。 特に大切なのは3番目で、あなた自身のデザインの中でユーザーを混乱させたり、破綻しないようすることは
あなたが作ったサイトのフッターの役割は？12のフッター活用方法！
昔はさっぱり注目されていなかったフッターエリアですが、今では多くのクリエイターがフッターに関心を持つようになりました。フッターデザインだけを集めたサイトなんて過去にほとんどありませんでしたが、ここ2、3年でいくつもそういったサイト・ページを見るようになりました。また特に海外サイトで言えることですが、最近では「これがフッターなのか！」と思う、すごいクオリティーのフッターも見る機会が多くなりました。 皆さんは大きく関心を集めるようになったこのフッターエリアを上手に活用できていますか？ ユーザーの起こすアクションを絞る(誘導する) 皆さんはブログの記事を読み終わった後、次にどんなアクションを起こしますか？ スクロールしてトップに戻る 元々いたサイトに戻る(はてブとか) タブを閉じる ツイートしてみる なんとなくコーヒーを飲む 上記のようにユーザーは、記事を読み終わると必ず何らかのアクションを起こ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]チェックしておきたいjQueryのプラグインのまとめ -2013年3・4月
Tumblrで作られたスゴいWebサイト