TL;DR どうすれば初心者でも「分かりやすく見栄えのするレイアウト」を作ることが出来るのか。余白の使い方や知識、さまざまなレイアウトの例をご紹介させていただきます。闇雲な配置にならないように、レイアウトを組む前に読んでおきたいこと。今回は Web デザインのセンスを上げるために、イラストや構図から学べる知識をまとめました。 レイアウトの基本知識 １．分割、対称、軸 何もない空間に要素を配置・構成していくのがレイアウト。こちらは四等分割や軸を使ったレイアウトのパターンをまとめてあるサイトです。美しく配置するために見ておきたいレイアウトパターン。 レイアウトのパターン | イディア：情報デザインと情報アーキテクチャ Photoshop の機能拡張はこちら。 黄金比・黄金螺旋・黄金三角形などをページのレイアウトや写真の構図にあてがう Photoshop の機能拡張 | コリス ２．イラストから

春はブログカスタマイズの季節！ みなさんこんにちは。id:kyokucho1989です。ついに春が来ましたね。春と言えばブログカスタマイズの春！ 現時点で挙げられる限りのカスタマイズを紹介します。 おすすめしたいテーマ Epic - テーマ ストア - はてなブログ Nishikino - テーマ ストア - はてなブログ Mistilteinn - テーマ ストア - はてなブログ まずはブログテーマ。数ある中から三つを選びました。Epicは多くの人が使っていますね。 記事下 関連記事 ソーシャルパーツを強化！ Zenbackを簡単に設置できるようにしました - はてなブログ開発ブログ 【B】10分ではてなブログに「他にこんな記事も読まれています」を表示する簡単な方法！の巻 - HSKぐうたらジャーナル はてなブログ魔改造まとめ～トラックバック・あわせて読みたい・はてブ→ツイート数変換.

※2014/03/17追記：巻末にオマケを追加 先日、Twitterで漫画のイマジナリーラインについて話題になった。 【イマジナリーライン】を超えたマンガは最悪なのか http://togetter.com/li/641095 その中で、自分もドラゴンボールのワンシーンを画像としてTwitterに投稿し、その画像を起点に色々な議論が交わされていくのを非常に興味深く読んだ。そこで思い出したんだけど、自分もドラゴンボールの左と右に関する記事を書いてる途中だった。 というわけで、話題がホットなうちに公開しようと思い急遽書き上げたのでお読みください。（書くこと多すぎて旬を過ぎた感は否めないけど、イマジナリーラインとは直接関係ない話だし、ね！） キャラ位置が頻繁に入れ替わるのに読みやすい まずはこの画像を見ていただきたい。自分がTwitterに投稿して議論になったドラゴンボールのワンシーン。 2コマ

はてなブログの「最新記事」を画像付きにするコードを作るやつ。 - #ChiroruNote 「はてなブログの「最新記事」を画像付きにする」で必要なコードを簡単に作れます。続きの作業等は元記事を参考にしてください。 面倒な手順もいくつかあったので、そういうのを全部やってくれるページを作りました。 コードを取得するのに必要な操作はこれだけになったので、前よりは簡単に設置出来るようになると思います。 「ブログURL」「デフォルト画像」を入力 「Get Code」を押す よかったらどうぞです。 以上、@chiroru_27 でした！ 詳しい設置の手順はこちらをどうぞ。【修正済】はてなブログの「最新記事」を画像付きにする方法。 - #ChiroruLab

2014-02-03 「トラックバック機能」と「カテゴリ別あわせて読みたい」を同時に表示するウィジェット 電算 トラックバック文化 「トラックバック機能」と「カテゴリ別あわせて読みたい」が同時に使えない 『【追記あり】はてなブログで表示エントリのカテゴリに関係するエントリを「あわせて読みたい」として表示するウィジェット - 情報学の情緒的な私試論β』についてid:kyokucho1989 さんから「トラックバックと併用すると記事が重複してしまうのだけれどなんとかなりませんか？（人任せ」というブコメを頂きました。　確かに『はてなブログにトラックバック機能を拡張するウィジット（スマホ対応） - 情報学の情緒的な私試論β』のスクリプトと組み合わせて使用すると正しく動作しなくなる場合があります。簡単に言うとグローバル変数が上書きされる事があるという残念な話ですね。この辺りの検証が甘かったです。 合

最新版 古いバージョンのスクリプトを利用している方はご対応をお願いします ※現在掲載しているものは修正済みです。 カテゴリに関係するエントリを「あわせて読みたい」として表示 id:FFCCEoT_NESS さんに依頼されて、カテゴリごとのリンクを作る件について、調べていて、id:splicomさんの『【スマホ表示に対応】はてなブログで同じカテゴリーの記事へのリンクを表示する - Sprint Life』を知りました。こちらの仕組みを元にさせて頂いて以下のウィジェットを作成しました。 最初のカテゴリに関連するエントリを記事下に表示 スクレイピングをYahoo Pipesに委譲してクライアントごとの切り替え処理やリスクを減らす 上記に伴いクライアント回線側での通信量を最低限にする 表示スタイルは『僕の考えた最強の「あわせて読みたい」はてなブログパーツ - 太陽がまぶしかったから』に準拠 サムネ

ご存じでない方も多いとのことなので… @luna_at_hatena 知らない人多そうだからブログに書くと誰か喜ぶよー*\(^o^)/*— ポナコ (@ponako10) 2014, 1月 30 とid:ponako10先生がおっしゃったので、ぱぱっとまとめちゃいます。 やり方知ってるわよ！という方は既読スルーでお願いいたします。 “見出し”ってなんですか？ ↑や↓のように装飾されている文字の事です。 こんなのです。 この見出しは、普通PC表示のみの場合に表示されてスマホ表示の際には↓の画像のように、ものすごくシンプルな表示となっています。 記事に見出しを入れてわかりやすく！ 編集画面から見出しを簡単に入力できるようにしました - はてなブログ開発ブログ スマホでブログを見る際も、出来るだけPC版に近付けたい！という思いから、色々と方法を模索してみました。 はてなブログは、とりあえず<st

寒すぎて温かい飲み物なしでは生きていけないがちゃまにあです。どーもこんにちは。 今は貰い物のコーン茶飲んでます。うまい。 願いごとは何ですか？ - がちゃまにあ日報 願い事手帖、実はまだ３０個書けていません(笑) 物欲を刺激するべく、amazonを色々見回って欲しいものリストなんかも作ってみたんだけど、ないならないでいいかとか思ってしまう自分がいます。 欲がないと発展も志向しなくなっちゃって良くないけど、逆に欲の塊ってのは論外だしな。中庸って大事ね。 今日はそんな話題とは全く関係のない、はてなブログカスタマイズの話。 きっかけと知識を提供してくれた方々に感謝 ブログのデザインを変更した。 「日報」というブログタイトルを意識して、なんとなく新聞っぽい感じで。 まだやりたいこともあるが、あせらず徐々に完成させようと思う。 きっかけはミィア猫さんのこの記事。 http://meerkat00.h

2014-01-17 WEBデザイナーになるためのCSS最短習得カリキュラム WEBデザイン HTML CSS 就職活動 はじめに 皆様もご存知の通り、CSS(Cascading Style Sheet)は、HTML(Hyper Text Markup Language)で構造化した文章の体裁を整える仕様の一つです。 WEBデザインの勉強を始めたばかりの頃は、CSSのプロパティやメソッドを覚えるのが大変で本を見ながらサイトを作った思い出があります。 さて、そんなCSSですが、初心者の中には「HTMLはだいたいいつも同じタグしか使わないからすぐ覚えられたけど、CSSは覚えるプロパティとかがたくさんあって大変だ><」と言う方が多いです。 いくらCSSを知っていて使えても、いつまでも覚えずに本を見ながら作業していると効率が悪いですよね！ ここは、実現したいデザインを頭に浮かべながらどのように書い

ブログのデザインを少し変更してみました。それほど大きな変更ではないのですが、変えたのは以下の4点です。 １．ブログのデザインテーマを変更した ２．記事の幅を広げた ３．「続きを読む」を加えた ４．ブログの見出しに画像を加えた はてなブログは、ある程度自分で自由にカスタマイズすることが可能です。Webデザインの知識がない私ですが、なんとか今回の4つは自分でできました。はてなブログのカスタマイズをしようとする際に、参考にしていただたら嬉しいです。 はてなブログのデザインをカスタマイズした場所 今回カスタマイズしたのは、主にブログ全体に関わる部分が２箇所、トップ画面で１箇所、記事画面で１箇所、計４箇所です。特にブログのデザインテーマの変更と記事の幅の変更は、ずっとやりたかったカスタマイズです。 ブログ全体に関わる変更点と、トップ画面での変更点 また、「ブログの見出しに画像を加える」ことも、地味で

2014-01-13 はてなブログの読者アイコンが小さいので大きくしてみた はてなブログ 夜の庭からコンバンワ。あいかわらずカスタマイズにハマっているミィア猫(ΦωΦ)です。 エントリーを書きながらcssをいじりに没頭してしまい、言及しようと思っていた話題が下火になってしまいました(；´Д｀)　整形している最中に「あ、ここにリストボックスがあれば！」という具合に脱線してしまいます。 で、今日もまたカスタマイズ系のエントリです。 読者一覧のアイコンが小さいよ問題 (´-ω-｀)ﾑﾑｯ プロフィール（私の場合はid:meerkat00）をクリックすると、ブログ情報が見れますよね。そして一番下に、読者一覧があります。でも、このアイコンすごく小さいと思いませんか？　最近はWordPress系のヘッダーの大きなサイトをよく目にするせいか、私にはものすごく小さく見えて仕方がありません。 と言うわけで、

前回のカスタマイズでは、「人気記事」に画像を付けました。 やっぱりこのほうが、文字だけよりも内容が分かりやすくなりますよね。 その記事に「最新記事」のやり方も書いてほしいとのリクエストがあったので、今回はその方法をまとめていきます。 基本的にやっていることは同じなので、画像は使い回しもあるのでそこだけご注意を。 追記（2014年1月10日） こんなの作ってみました。 不正な指定があれば教えてくれるので、最初はこちらでコードの生成を行ってもらえると助かります。 なお、このページの記事はソースの説明という意味合いで残すものとします。 はてなブログの「最新記事」を画像付きにするコードを作るやつ。 - #ChiroruNote 「はてなブログの「最新記事」を画像付きにする」で必要なコードを簡単に作れます。続きの作業等は元記事を参考にしてください。 面倒な手順もいくつか合ったので、そういうのを全部や

スルスルスクロールは気持ちがいい 最近、スマホでウェブサイトを見ていると、よく現れる「トップへ戻るボタン」。 押してみると、ぬるぬるというかスルスルとした動きで、見ていたページのトップまで戻るので便利ですよね。 あのヌルスル感が個人的にとても好きです。 はてなブログってPC表示だとスター欄が下の方にあって、読み終わった時にポチッとスターを押すことが出来るんですけど、スマホ表示だと一番真っ先にタイトルとスターボタンが出現するんですよね。 たとえば、長文のエントリーを読み終わってからスターを付ける時は、親指ないし人差指でスマホ画面を猛烈にタップしなければいけなかったりするので、「トップへ戻るボタン」がスマホでも表示されると読む側の人間も楽だと思ったのですよ。 ということで、早速実装してみました。 1.まずはダッシュボード＞デザイン＞記事＞記事下へ。 ここの「スマートフォン版にも表示する」と書い