FONTBEAR.NET | 商用可能なフリーフォントを検索！検索ワードカテゴリ（欧文・和文） カテゴリー一覧 和文フォント 角ゴシック体 明朝体 丸ゴシック体 手書き風 装飾フォント 毛筆書体 欧文フォント サンセリフ セリフ 手書き風 ディスプレイタグ（特徴） 商用可 漢字あり アイコン レトロ きれい おしゃれ かっこいい かわいい ポップ コンデンスド 毛筆 極太
hr要素のデザインサンプル 12 - NxWorld
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
知らない所で損してる！？あなたのブログデザインを最適化する方法 - オモロク
2017 - 07 - 07 知らない所で損してる！？あなたのブログデザインを最適化する方法 ブログのデザインは、あなたが意識しない内にたくさんの人を集めてくれている場合もあれば、逆にたくさんの離脱を生んでいる場合もあります。 極端な話ですが、デザインカスタマイズの設定ボタンを１つ押すだけで、あなたブログを有名にすることだって可能です。しかし一方で、 設定ボタン１つによって、せっかくの良いコンテンツを台無しにしてしまう可能性もあります。 はてなブログでもWordPressでもどのブログでも一緒なのですが、デザインの設定を最適化することで「読者さんにとっての価値」を高めれる上、場合によってはグーグルの評価をも高めることもできます。 ブログデザインは、あなたが認識している以上に大事です。なぜなら、一回設定するだけなのに、絶大な効果をもたらせてくれますから。デザイン設定は、レバレッジを効かせる一
CSSの引き出しを増やしておこう！最近見かけたスタイルシートのアイデア・テクニックのまとめ
最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。 イラスト: Girls Design Materials CSSのみで実装されているのものもたくさんありますが、JavaScriptやSVGなどを必要に応じて使用されているものもあります。
特定のタグ（カテゴリ）のときだけ何かを表示したり隠したりするカスタマイズ - つばさのーと
こんにちは、つばさ（@tsubasa123）です。 どうやってご本人にお伝えしたらいいかわからなかったので記事化しました。ヒトデさん、お時間がありましたら試してみてください。 CSSだけでOK JavaScriptでももちろんできる さいごに CSSだけでOK そんな意識してないつもりだったけど、やっぱ無意識化でブレーキはかかってたんだなーって思いました とはいえこれはブクマ含めて拡散してほしいなーって記事も出て来たから難しいところ 誰か「ブクマ不要」のタグでブクマボタン隠せるようなの作ってお願い— ☆←ヒトデ@はてなブログ (@hitodeblog) 2016年12月29日 元ネタはこれ。「タグ」って書かれてるけどきっと「カテゴリ」のことだよね。 body.category-ブクマ不要 #shareButton .hatena-bookmark-button { display: non
【はてなブログ】記事のカテゴリーによってオススメ記事を切り替える方法 Ver.2
先日作ったカテゴリごとにおすすめ記事を切り替える方法がめちゃめちゃ好評だったので、もっと簡単に導入できるようにコードを改良しました。 カテゴリごとにおすすめしたい記事を選んで、それを表示させる方法です。 【はてなブログ】記事のカテゴリーによってオススメ記事を切り替える方法 | SHIROMAG jQueryを使っているので上記記事より少し重くなりますが、それでも導入しておく価値はあると思います。 例えば、以下の記事に飛ぶとサイドバーでおすすめされている記事が変わります。（スマホだと記事上） ダウンロードしておきたい最新おすすめ洋楽【2016年版】 貧困女子高生のヤラセと貧困は別問題 このように、記事のカテゴリによってオススメの記事を切り替えることができます。 ニーズに合わせて前回とちょっとデザインを変えてみました。 ちなみにこんな感じに表示されます。 「カスタマイズ」というカテゴリには、カ
HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン
Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？ | Cherry Pie Web
（2016年7月26日：フォロー記事を書きました。「Windowsで游ゴシックが汚いのは、結局誰が悪いのか？」） （2016年7月11日追記：Windows8.1においても細字ではなく標準が使用されているのではないかというご指摘を受けて、若干表記を修正しました） （2016年6月29日追記：Twitterでご指摘を受けて、Windows8.1と10での違いを追記しました） （2017年3月27日追記：当サイトでの使用CSSについて追記しました） （2020年9月13日追記：当サイトでの使用フォントについて追記しました） タイトルが旬を外していて、しかもちょっと釣り気味で申し訳ありません・・・ OS X MavericksとWindows 8.1に共通のフォント「游ゴシック」・「游明朝」が搭載され、CSSのfont-familyに「游ゴシック」を指定すれば、Webデザイナーの長年の悲願であっ
【保存版】2ヵ月必死にはてなブログのデザインをカスタマイズしてきたのでまとめて紹介するぞぉぉぉ！！！【初心者向け】 - TureTiru Times
長かった！ここまで長かった…！ まとめてみたら1万字の大ボリュームになってしまった！ それなりに満足する出来になってきたので当ブログで行ったカスタマイズをまとめて大公開するぞっ！！（といっても初心者向け） カスタマイズする際は前のコードを取っておきましょう！カスタマイズ用のサブブログもあると便利！紹介だけなので各自で頑張ってみてね。僕も素人だったのでやればいろいろできますぞ。 導入テーマ タイトル周辺 タイトル画像 グローバルメニュー 記事本文 記事本文のCSS 記事内の一部を背景色と蛍光ペンみたいな下線で装飾する方法 リンクの色 変な行間の消し方 見出しのカスタマイズ 枠線 目次 記事タイトル等 日付 記事タイトルの見出し 記事上のタグと記事間のスペース調整 続きを読むボタン 挿入する画像に枠を付ける サイドバー プロフィール フォロー、シェアボタン サイドバーのモジュール まとめ 導入
はてなブログのデザインカスタマイズ方法（簡易版） - TASK NOTES
はてなブログのデザインカスタマイズ方法です。といっても今回は手の込んだものではなくて少し表示を変えるくらいの方法になります。 初めに はてなブログのデザインには様々なテーマがあります。全体的なデザインはこれがいいけど他のフォントとか見出しはこっちがいいなとか、何かちょっとずつ違ってて悩みますよね。カスタマイズといってもHTMLをいじる訳ではなくCSSを修正(上書き)する作業になるのですが、HTMLとCSSの知識がまったく無いと難しいかもしれません。 デザインテーマを選ぶ まず管理画面のデザインに移動して公式テーマを選びます。 私はReachというテーマにしました。大きく変更する訳ではないので全体的に好きなデザインを選ぶといいでしょう。 CSSを編集する デザイン画面のカスタマイズにある「デザインCSS」を編集していきます。 サイドバーの位置を変える 今回選んだテーマはサイドバーが左にあり、
はてなブログのidとかclassとか - kyabana's blog
はてなブログで「デザインテーマコンテスト」が開催されています！ オリジナルデザインを投稿してAmazonギフト券を当てよう！ 「はてなブログ デザインテーマコンテスト」開催 - はてなブログ開発ブログ 使われている"id"や"class"がわかっていると デザインしやすいのでザックリさらってみました。 おおよそこんな感じ。 body（トップページで.page-index、記事ページで.page-entryが追加）div#globalheader-containeriframe#globalheader（ヘッダ[メニューやHatena Blogロゴ、Hatenaロゴなど]）div#containerdiv#container-innerheader#blog-titlediv#blog-title-inner（タイトル画像）h1#title（ブログ名）h2#blog-description（
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
<fieldset>タグについて