『Webデザイン』の関連記事

さりげなく横1024ピクセルの大きめ画像を配置してみるテストだよ。

【この記事の続きを読む →】

ブログのサイドバー領域に、ブログに関するツイートを表示するようにしてみたよ。

【この記事の続きを読む →】

当ブログのロゴデザインを変更しました。新しいデザインはこんな感じ。

黒いところは背景が透けて見えます。実際にブログ最上部にあるロゴを見てもらうと、イメージが良く分ると思います。

【この記事の続きを読む →】

当ブログのデザインを変更しました。

青を基調とした色使いにしたことと、サイト全体を2ペインにしたのが大きい変更かな。

あとはトップページで、各記事が個別のブロックに見えるよう配置を工夫してみました。

【この記事の続きを読む →】

iPhone/iPadで、「ホーム画面に追加」したときに参照されるアイコン「apple-touch-icon.png」を設置しました。

通常、iPhone/iPadから「ホーム画面に追加」すると、サイトのキャプチャ画像をベースにしたアイコンが表示されます。

しかし、サイトのルートディレクトリに「apple-touch-icon.png」が設置してあると、こちらが優先的に使用されるそうです。

当サイトでは、faviconやfacebookページアイコンに使用している「ひ」マークを、150x150pxのPNG画像に変更し、それを「apple-touch-icon.png」としました。

どんな感じか気になる人は、さっそく「ホーム画面に追加」してみると良いよ！

その他詳細は『iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう | Web担当者Forum』に良くまとまっていますので、興味のある方はご参照あれ。

東北地震太平洋沖地震への募金をお願いするバナーを設置しました。

個別記事の上部に、邪魔なぐらいデカデカと表示されているはずです。

「なんだなんだ？」と思いの方は遠慮なくクリックして、募金してくると良いよ。

バナーは「漫画　torrent　download: 東北地震太平洋沖地震　募金　バナーのソース」で配布されているソースを利用させて頂きました。

自分はデザインなど出来ませんので、こう言う形で配布してもらえるととても助かります。ありがとうございます。

ブログに掲載している画像に、フチあり写真のように見せる効果を掛けてみました。

【この記事の続きを読む →】

自分のブログ記事に、色々な関連情報を表示するブログパーツ「zenback」を使いはじめました。

既にお気づきの方もいらっしゃると思いますが、個別記事本文のちょっと下にあるブロックの「関連記事」「関連リンク」「Twitter」「はてなブックマーク」がzenbackによる表示です。

記事に関連したツイートを表示する「Twitter」ブロックのデザインが、とても「それっぽい」のが気に入っています。

2週間ほど前からテスト運用していたのですが、ようやくブログにマッチする感じに仕上がったので、この度の使用宣言と相成った次第。

現在パブリックベータと言うことで申し込めば誰でも使えるようですし、簡単に自分のブログの「まとめ」が欲しいと思っていらっしゃる方は試してみてはいかがでしょうか？

新しい「はてなブックマークボタン」がリリースされたようなので、さっそくウチのブログでも対応してみました。

遠慮なくお試してくださって結構ですので、光の速さで「はてブ」すると良いよ。

【この記事の続きを読む →】

WordPress3.0リリースに合わせて！と言うわけではないのですが、久々にブログの見栄えを調整したよ。

一番大きな変更は、「LinkWithin」の導入かな？このスクリプトを導入したことにより、記事の下部にサムネイル付きの関連記事が表示されるようになりました。

ついでにブログのロゴも変えました。いくつかのロゴ作成サイトをテストした結果、「Cool Text: ロゴ及び画像ジェネレーター」でGlowing-Steelタイプのロゴを採用することにしました。

それから、これまで以上に文字のサイズを大きくし、行間も広くしました。加えて折り返し文字列幅を縮めています。一般的なブログに比べると、二回りぐらい大きな文字を採用してると思うよ。

あとは上部日付周りにあった雑多な情報を削除したりとか、下部のソーシャルボタンに「コメント」を追加したりとか、コメント欄を少しでも入力しやすく改良したりとか、細々と手を入れています。

もし以前より使いにくいなどのクレームがありましたら、遠慮なさらずドシドシ指摘して頂けると有り難く思います。

ブログ本文中のリンクテキスト部分に、画像による下線を付けてみたよ。

これまではデザイン的な面を考慮して「下線無し」でやってたんだけど、やっぱりリンク表示が判別しにくいなーと思ってたんだよね。

そんな中、「しらさかブログ」を読んでたら、リンクテキストに「鉛筆っぽい下線」が引いてある。

オレが欲しいのはこれだ！と思って、やり方をパクって見ました。パクってスイマセン！

【この記事の続きを読む →】

「カラーユニバーサルデザイン推奨配色セット」では、被験者実験による調整を重ね、どのような色覚の人にも比較的見分けやすい色を絞り込んだ配色セットを「色のバリアフリーに配慮した色見本」として公開してくれてるんだけど、今のところJPMA色表かマンセル値しか出てないのよね。

そのうちRGBも出してくれるんじゃないかと思うんだけど、その前に勝手に近似値を洗い出してRGB値を算出して見たよ。RGBは色範囲がせまくて厳密な「同じ色」ではないんだけど、1つの目安にはなるんじゃないかな？

近似値は「カラーユニバーサルデザイン推奨配色セット」に掲載されている色を拾い出した値（ピッカー）と、色出し名人でマンセル値をRGB化した2種類を載せています。

自分で作っておいて何だけど、ちょっと色の組み合わせが微妙かも。本職推奨のRGBを待った方が得策かも知れません。

アクセントカラー

ベースカラー

無彩色