はてなブログに実施した、４つのデザインカスタマイズ - Banguardサイト
ブログのデザインを少し変更してみました。それほど大きな変更ではないのですが、変えたのは以下の4点です。 １．ブログのデザインテーマを変更した ２．記事の幅を広げた ３．「続きを読む」を加えた ４．ブログの見出しに画像を加えた はてなブログは、ある程度自分で自由にカスタマイズすることが可能です。Webデザインの知識がない私ですが、なんとか今回の4つは自分でできました。はてなブログのカスタマイズをしようとする際に、参考にしていただたら嬉しいです。 はてなブログのデザインをカスタマイズした場所 今回カスタマイズしたのは、主にブログ全体に関わる部分が２箇所、トップ画面で１箇所、記事画面で１箇所、計４箇所です。特にブログのデザインテーマの変更と記事の幅の変更は、ずっとやりたかったカスタマイズです。 ブログ全体に関わる変更点と、トップ画面での変更点 また、「ブログの見出しに画像を加える」ことも、地味で
透過がサポートされたnode-webkit（NW.js）でガジェットを作ろう
こんにちは、古見澤（コミザワ）です。 今回は、前回記事にした node-webkit が透過をサポートし始めたので、HTML5やJavascript、CSSなどのWeb系の言語でガジェットのようなモノを作ってみようという内容となります。 ↓ツイッターから情報を取得して表示するだけの単純なものですが、こんな感じのものを作れます。 動画 node-webkitって何？という方は、前回の記事も合わせてお読みください。 HTML5＋CSS3＋JSでネイティブGUIアプリが作れる、node-webkitを触ってみる ※本エントリーはWindows環境（Win7 Professional x64）での話になります。 （透過機能はMacやLinuxでも使えます、後述するマニュアルを参照ください。） また、Windows環境では、デスクトップウィンドウマネージャーが有効である必要があるため、 Aero機能
Janko Jovanovic – Design Management and Strategic Design
A seasoned design and product lead with nearly 30 years of experience across various fields. I bring together design management, product management, strategy, futures thinking, and systems thinking to help teams and organizations navigate an increasing uncertainty and design for the preferable future. More than 25 years of experience 8 years in building, managing, and scaling cross-functional team
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
[M] mbdb | FriendFeedがアツいらしい
2012.10.21 ここまで小さくなるの!? PNGをほとんど劣化なく圧縮する｢TinyPNG｣がスゲェ!!
![[M] mbdb | FriendFeedがアツいらしい](https://cdn-ak-scissors.b.st-hatena.com/image/square/160b46d370dc5cc086be743e390d548d8e84a200/height=288;version=1;width=512/https%3A%2F%2Fmbdb.jp%2Fwp-content%2Fthemes%2Fmbdb_v3%2Finc%2Fimg%2Fogp-default.png)
そろそろ本気でWordPress！Web制作初心者が劇的に成長できるオススメ国内有名ブログ18選 | BLOG ROOM9（ブログルームナイン）
そろそろ本気でWordPress！Web制作初心者が劇的に成長できるオススメ国内有名ブログ18選 2014 7/10 WordPressガッツリ使い倒すぞー！ PHP、HTML、CSS超勉強するぞー！ で、まず何したらいいの！？ なんて方はかなり多いかと思います。というか僕がそうでした。そんなワケで今回は Web制作ど素人だけどWordPressのサイト構築をバリバリできるようになりたい！ ブログ書くだけじゃなくテーマをゴリッとカスタマイズできるようになりたい！ こんな方々に超オススメの国内有名ブログを18個紹介させていただきます。Web制作のスキルというとデザインだったり、集客だったり色んな要素が考えられますが、今回は 構築、及びコーディング つまりサイトを”作る”という点で特に参考になるブログのまとめです。 構築・コーディングとは言ってもWeb制作の括りではかなり基礎的なレベルから勉強
ウェブページをより深く理解するようになりました
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
ブログの右上に貼り付けるリボンが作れる『Website Ribbon』 | 100SHIKI
昨日に引き続き便利なジェネレータのご紹介。 Website Ribbonではサイトの右上に貼り付けられるリボンをつくることができる。 もちろんリボンの色やテキストのフォント、色も選ぶことができる。またリンクも設定することが可能だ。 出来上がったリボンはJavascriptを貼り付けるだけで自分のサイトなりブログに設置できる。実にお手軽だ。 サイトも長く運営しているとちょこちょこ手をいれたくなるものだ。こうした「ちょこっとだけリニューアル」的ツールは需要があるかもしれないですな。
ダイアリーのデザイン変更 / Meteor.js でスタイル変更作業 - naoyaのはてなダイアリー
この頃このダイアリーを時折更新していますが、改めて見てみるとデザインが野暮ったかったので、変更しました。Readability を通して読んだときのスタイルが非常に読みやすいので、そのスタイルをパ･･･参考にしました。 ちょっとまだ一部スタイルが当たってないところもありますが、基本はこの路線で。Chrome、Firefox、Safari では確認済み。Windows と Opera では見ていないのでどうなるかわかりません。 どうやって変更したか ダイアリーの管理画面にスタイルを入力してプレビューで･･･とちまちま変更していくのは流石に大変なので、やり方を少し工夫しました。先日触った Meteor.js を使って先に簡単なアプリを作って、そのアプリ上で変更してできあがった CSS を管理画面に貼り付ける、というもの。 以下、そのソース。 https://github.com/naoya/m
初心者の私がブログカスタマイズする際に役立ったツール/サイト一覧 - YESかNOか半分か
前回の記事でお披露目した、私のブリブリなブログデザイン。 このデザインを作成するまでに利用した便利なツール、サイト様をざざざっと書いていこうと思います。 ちなみに、私の作業環境はWindows 7でございます。 CSSソースの素 初心者がカスタマイズをしようとしても、どこから手をつけたらいいのか分かりません。 とりあえず、ベースとなるCSSデザインがあればラクちんですよねー。 ってことで私は、id:hatenablogさんのサンプルテーマ「Boilerplate」をベースにデザインを改造しました。 デザインCSSをカスタマイズする土台に適したサンプルテーマを公開しました - はてなブログ開発ブログ はてなブログの構造を知る id:hatenablogさんの「Boilerplate」を開いても、 …何の事だかチンプンカンプン…。 そんな時は、id:kyabanaさんのブログを参考にしましょう
[CSS]背景に切り込みをいれて、パネルの四隅を留めるCSS3の美しいエフェクト -CSS3 tucked corners
デモページ 実装 Step 1: HTML パネルは4つのコーナーのエフェクトを疑似要素で作成するため、2つのdiv要素で実装します。 <div class="tucked-corners-top"> <div class="tucked-corners-bottom"> <!-- コンテンツ --> </div> </div> Step 2: CSS 「[class*='tucked-corners-']」以下が、4つのコーナーのスタイルです。 .tucked-corners-top { position: relative; width: 500px; min-height: 200px; margin: 100px auto; padding: 20px; background-color: #fff; /* Fallback */ background: linear-gradie
技術系サイトに必需品！ ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK！「Syntax Highlighter」の使い方
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ
さくらのレンタルサーバ
レンタルサーバなら「さくらのレンタルサーバ」！ 月額換算でわずか131円、缶ジュース1本分のお値段で使える格安プランから、ビジネスにも使える多機能＆大容量プランまで、 用途と予算に合わせてプランを選べます。 さらにマルチドメイン対応でメールアドレスも無制限。無料ウイルススキャンや無料電話サポートもあるので安心して ご利用いただける共用レンタルサーバサービスです。
『今年中に読んでおきたい！2012年人気の記事10本！』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 今年も残すところあとわずかですね。いかがお過ごしですか？ スマートフォン版Amebaのディベロッパーを担当している宇納(@TasukuUno)です。 このブログの編集委員なんかもやったりしています。 本日は、今年2012年に公開された記事の中から、特に反響の大きかった記事をピックアップしてご紹介致します！ 【デザイン】ピグアイテムのイラストレーションについて 長年アメーバピグのデザインを支えてきたデザイナー、青山の記事。 ピグの世界感はただ「かわいい」だけではなく、2Dながら空間を感じることができるような、きちんと計算された構図やデザインポリシーの上
バシャログ。 | 横浜・馬車道で働くWEBサイト制作スタッフのブログ。
【お知らせ】バシャログ。メンバーが所属する株式会社シーブレインのWebサイト制作サービスのサイトがリ... お知らせ
CSS3を使った演出テクニックがすごいと話題に
コロプラさんと一緒に行っているコーディングコンテスト「SPEC vol.4」。 応募締切まであと1週間を残していますが、もうすでに変態的な作品が続々と投稿されているようです。 今回もとんがった作品がたくさん集まっているので、途中経過としてその一部をご紹介したいと思います。（ぼく個人の主観でピックアップして紹介していきます。審査とはまったく関係ないですよ！） スピード感がある演出 CSSだけでモーションタイポグラフィ 立体的な動き トーナメントの演出 くまー！ 3連休は SPEC vol.4 で決まり！ SPEC vol.4の締切は7/18（水）です。 賞品はMacBook Proなどなど超豪華！ この3連休にでもぜひぜひチャレンジしてみてください！ SPEC vol.4
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Welcome to Dezinerfolio | Dezinerfolio
Speckyboy Design Magazine
CSS Nite公式サイト - 「CSS」だけでなく、Web制作全般に関するトピックを取り上げるセミナーイベント
ダウンロードしてすぐに使えるBootstrapのテーマ集『StartBootstrap』 | 100SHIKI
