Site is undergoing maintenanceSite will be available soon. Thank you for your patience!
【B】10分ではてなブログに「他にこんな記事も読まれています」を表示する簡単な方法！の巻 - HSKぐうたらジャーナル
たとえば、ずらーっと並んだレストランの中から、一店だけ選んで ご飯を食べるとき。どうやって選ぶでしょうか？ 数多くのウェブサイトがあるなかで、自分のブログを選んで、読んでもらうことって 似たようなことだと思うのです。 食べログにある他の人の評価で選ぶのと同じように はてブのブックマークされた数で選ぶ、とか お店の雰囲気で選ぶのと同じように ブログのデザインで選ぶ、とか 店頭にある見本で料理の内容を確認するように 記事の内容が面白そうか確認してから選ぶ、とか 過去にご紹介させていただいた記事は、これらの中でも デザインに関することだったり、記事の内容をチラ見せすることだったり いかに「選んでいただくか」という点を良くしていくための内容でした。 今回は、「選んでいただいた」あとで、 いっぱい注文してもらう(＝他の記事もあわせて読んでもらう)ための カンタンな方法をご紹介できればと思います。 店
はてなブログPC版のサイドバー空きスペースを有効活用したい - 人力検索はてな
【はてなブログPC版のサイドバー空きスペースを有効活用したい】 現在左メインカラム（記事本文）と右サイドバーの2カラムデザインを採用、記事本文が長いとある程度下までスクロールすると右サイドバーはただの空きスペースとして表示される形となります。 [参考] http://www.masaemon.jp/entry/2014/04/22/tokyo-mita-ramen-jiro-manual ↑中見出し2-3あたりから右サイドバーが空きスペースとなります。 そこで、右サイドバーが空きスペースとなるタイミングで表示を現在の2カラムから記事本文だけの1カラムにする見せ方をしたいと思うのですが、CSSやJavascriptの知識が乏しいレベルの者でも簡単・確実・安全に、何よりはてなブログ上でもきちんと実装できる術をご教示下さい。 【条件等】 ・IEの古いバージョンとかは除き、主流ブラウザ（IE、Ch
【B】 はてなブログをとことんカスタマイズ！新着記事をちょこっとだけ派手に見せる方法、の巻 - HSKぐうたらジャーナル
以前の記事で、ブログ記事を写真の一覧で見せるwebサービス 複眼RSSの使い方をご紹介させていただきました。 【B】 はてなブログに過去記事を写真で表示する、お手軽カンタンカスタマイズの巻 - HSKぐうたらジャーナル すごく手軽にブログの見た目を変えられるし、重宝していたのです…が。 ちょっと物足りないところがぽろぽろと出てくるように。 むー。困った。 だったら自分でコードを書いちゃおう！ というわけで、拙いながらもJavascriptとCSSを書いてみました。 今回ご紹介する方法は、ちょっと手間は掛かるのですが 次のようなメリットがあります。 記事タイトルが画像と一緒に表示されるので、どんな記事か想像しやすい 最新の記事を見つけやすい、”NEW”アイコンが付く 広告表示一切なし！ 所要時間は、本記事の設定をそのままコピペ！で約20分。 ガッツリとカスタマイズしたい！ という方にも、CS
hail2u.net - Weblog - pre要素へのスタイル指定
idea * ideaでエントリになっていたので、言及されていることだしうちのサイトのことだけちょっと書こうかなとか考えてみたら結構色々あって、エントリのネタになりそうだったのでまとめてみた。どっかにもちょろっと書いたけど。 実際にスタイル指定を書く前に抑えておくべき知識として以下のようなものが挙げられると思う。 ほとんどのブラウザでpreは等幅フォントで表示される ほとんどのブラウザでpreのwhite-spaceはpreになっている フォント・ファミリを指定する場合は最後にGeneric font familiesが必要になる overflow: scroll;では縦横どちらにあふれた場合でも縦スクロール・バーと横スクロール・バーが両方とも出る overflow: auto;ではあふれた方向にのみスクロール・バーが出る Internet Explorerではoverflow: auto
hxxk.jp - Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻
記事データ 投稿者 望月真琴 投稿日時 2006-09-06T22:10+09:00 タグ CSS HTML ユーザビリティ 仕様 概要 i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻を読んで、ソースコードのマークアップについて何度か記事を書いたことを思い出したので、改めて触れてみることにしました。 リプライ 1 件のリプライがあります。 ソースコードのマークアップについて以前書いたなあ i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻を読んで、ソースコードのマークアップについて何度か記事を書いたことを思い出しました。 hxxk.jp は自分のための備忘録サイトです ! ( 何度も書いてアピール ) それら過去の記事を交えて、 i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻の内容について触れ
小粋空間: ナビゲーションバー・リストタイプ（その1：基本スタイル）
最近すっかりオーソドックスになった、順序なしリスト（ul/li）を用いたグローバルナビゲーションを紹介します。 2年ほど前に書いた「ナビゲーションバー・シンプルタイプ」というエントリーは、アンカーテキストを並べた形式でしたが、グローバルナビゲーションの作り方についてコメントを頂きましたので、新たに作成してみました。 巷では、画像を用いたものやプルダウンメニューつきのグローバルナビゲーションをよく見かけるのですが、ここではテキストのみによるシンプルなグローバルナビゲーションを紹介します。 １項のサンプルコードは Movable Type のMTタグを埋め込んでいますが、MTタグを書き換えれば汎用的に使うことが出来ます。 動作は Windows XP + IE6/IE7/Firefox2/Opera9/Safari3 で確認しています。 １．テンプレートの設定 ヘッダの下にグローバルナビゲーシ
ブログのレイアウト あなたの好みは？ - 3ping.org
WEBサイトを製作する際には、サイトの情報量からレイアウトをまず先に考えることは多いと思いますが、大きなくくりとして2カラムか3カラムか、また、固定幅か可変幅かを決めなければなりません。企業系サイトでは不思議と2カラム固定幅が多い気がするのですが、固定ならば何ピクセルの固定にするか考えることになります。800px以下か、それ以上か。あー大変。 このまえ作ったテンプレートのスキンでも、レイアウトに関する要望にできるだけ答えるべく、固定・可変の変更や実用的なカラムパターンを一通り組めるように作ったのですが、どれが一番人気なんでしょうね。わかりませんですはい！ 一度MixiのCSSコミュにでもアンケートを放り投げようかと考えていたのですが、caramel*vanillaさんとこでレイアウトに関するアンケートが出てきたので、あーそれじゃあ出来るだけ多くの人に答えてもらいたいなと3ping.orgか
CSSでオシャレな吹き出し形式のブロックを作成する「CSS Speech Bubbles」:phpspot開発日誌
willmayo.com CSS Speech Bubbles Easy to customize speech bubbles coded in CSS and valid XHTML 1.0 strict. CSSでオシャレな吹き出し形式のブロックを作成する「CSS Speech Bubbles」。 次のような吹き出し形式のblockquote要素を作成するサンプルが配布されています。 HTMLコードは次のようにクリーンにできます。 <div class="bubble"> <blockquote> <p>Works great for blog comments!</p> </blockquote> <cite><strong>John Smith</strong> on 1st January 2007 at 3:55pm</cite> </div> 角丸部分にはCSSだけでなく、
ブログのコメント部分やコメントフォームのデザインを色々集めたサイト:phpspot開発日誌
Blog Comment Form Design Showcase | Smiley Cat Web Design ブログのコメント部分やコメントフォームのデザインを色々集めたサイト。 いろんなブログのコメント部分やコメントフォーム部分の画像をコレクションしているようです。 コメント部分 コメントフォーム部分 これだけのデザインサンプルがあると、自分がデザインする時に大いに参考に出来そうですね。 形が決まったら後はオリジナリティを加えてデザインを完成させるという方法でデザインすれば効率よくカッコいいコメント部分が作れそうですね。 関連エントリ 2006年を彩った50の超美麗CSSデザインサイト集 ウェブデザインに便利なツールをまとめた「Web Design Tools」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.hanako-no-blog.com/entry/2014/04/30/211057
http://youmos.com/news/code2css
１００の無料で使えるWebデザイン テンプレートとツールのまとめ - Chocolate（チョコレート）