5000兆円欲しい！.css
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
【CSS】width:autoとwidth:100%の違い| けんちゃん先生のWeb講座
パソコン時代のCSSは、横幅（width）はpxなどの固定値を使うことが多かったのですが、最近はスマホに対応したレスポンシブデザインが主流になり、横幅に%などの可変値を使うケースが増えてきました。 しかし、レスポンシブデザインのcssに慣れていないと、スマホで確認したときにレイアウトが崩れてしまうケースがあります。 テキストがはみだしたり、右側に謎の余白ができてしまったり… 原因はcssのwidth・padding・borerの設定にあることが多いので、確かめてみてください。 【width:auto】と【width:100%】の違い cssの【width:auto】と【width:100%】は親要素の横幅に合わせるという点でよく似ているのですが、同じ要素にpaddingやborderを指定した場合に表示にちがいがあります。 たとえば【width】と同じ要素に【padding:0 10px
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ
リンクを目立たせよう クリックして欲しいリンクがある時、ただ単にリンクを貼るのではなく枠で囲って目立たせてみましょう。 できる限りコードはシンプルに、コピペだけでできるようにしました。 枠がない場合はこんな感じですね。 必見！はてなブログのカスタマイズを一気に紹介する – SHIROMAG これを枠で囲って強調するようにカスタマイズします。 CSS まずはCSSにコードを追加していきます。以下の中から好きなコードを選んで、ダッシュボードの「デザイン」→「カスタマイズ」→「デザインCSS」に追加して下さい。 スマホで使う場合は、<style> ～ </style> で囲んでヘッダーのタイトル下にでもぶっこんでください。 シンプルなタイプ 必見！はてなブログのカスタマイズを一気に紹介する – SHIROMAG .entry-content .emphasize-link { position:
ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ - Yukihy Life
はてなブログだけでなく、アマゾンや楽天・ヤフーショッピングの商品を紹介する際にはブロガーのかん吉さんが作ってくださったサービス「ヨメレバ・カエレバ」を使うことで 簡単にリンクを作成することができます。 それらを綺麗に表示させるカスタマイズはもう出ているのですが、先日あるブロガーさんに会ったときにカスタマイズをしたら喜んでいただけたので、紹介したいと思います！ 参考リンク 実装図 カスタマイズの注意点 カスタマイズ PC スマホ レスポンシブ その他のカスタマイズ 最後に 参考リンク 今回のカスタマイズはほとんど今までやってこられていた方をちょっと変更したような形になっているため、あらかじめ参考リンクを貼っておきます。ありがとうございます！ shufulife.com 実装図 実際に導入した様子はこんな感じになります。 PC スマホ PCでバランスよく表示させたのと、スマホではなるべくコンパ
AdSense広告を好きな位置に移動させるjQueryコード備忘録 - DREAMARK
先日レクタングルを表示させる記事を書いて、その後追記をしていたのですが、あの方法だとスマホで見た時に縦に2つ並んでしまいAdSenseのポリシーに触れてしまう。と言うことで、レスポンシブデザインで、スマホ表示の時に広告を移動させるコードを追記しました。 今回の記事に関しては、その方法の応用と備忘録です。活用出来る方法として紹介するわけではないので、参考にする方や今回載せているコードをコピペする方は前回同様慎重かつ自己責任にてお願いします。 ※口調がいつもと違うのは備忘録なのでご了承ください（笑） ちなみにですが、AdSense以外でも使える方法なので、特定の要素を移動させたい人には参考になるかもです。他のコードでも出来ると思うのですが、この方法でもできるという程度のものですが。 前回の記事のおさらいと解消法 更に慎重な解消方法 今回のコードに合わせたHTMLとCSS 今回のコードを応用して
ブログの目次をウィキペデア風に連番で表示するCSS - DREAMARK
はてなブログでは目次を簡単に入れる事が出来ます。[:contents]と編集画面で打ち込めばその部分が目次に変換されてブログに表示されるようになります。 しかし、デフォルトのままでは、リストが表示されるだけなので味気ないもの。この部分にCSSを適用して装飾し見やすくしてみましょう。そして今回紹は、装飾はもちろんですが、各項目にCSSを使って連番を表示させています。 下のが今回の記事の目次です。こんな風に表示出来ます。 連番をカウントするCSS contentプロパティ counter-increment counter-reset: toc; オマケ 今回使用したCSS 最後に １，２，３と進むだけでなく入れ子になった目次にも連番が付きます。 下記の画像のように、１.１、１.２、１.３のような感じですね。子だけでなく、孫やひ孫にも対応しています。また、この表示はスマホにも対応をしております
誰でもコピペで簡単に吹き出しで会話形式のブログが書けるCSS - 急がば 急いでまわれ！
2017.5月更新 こんにちは！いつの間にか14回目のカスタム記事！今回はブログでよく見かける『会話形式』の記事を簡単に実現させるCSSを作りました！ぜひご覧あれ！ 知らなきゃ損！いつでもAmazonで90%オフの商品を探す方法！ はじめに 完成系 まずはCSSをコピペしよう！ ブログでの使い方 簡単解説（飛ばして良し！） まとめ 【追記】この記事のCSSをもとにさらに手を加えてくれた素敵な記事があるので紹介します！ありがたい。 こんな記事も書いてるよん。 はじめに 参考記事としてこちらの記事を参考にいたしました。 akiueo (id:akiueos)さんのCSSも素晴らしいデザインですが、レスポンシブに未対応というのと、会話のアイコン画像が正方形の画像を使用しないと丸く表示されないので、この2点を改良して今回制作しました。 上記の記事内に「どなたか改良版をお願いします。」と書かれている
はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2) - Yukihy Life
コピペコードをうつす前に、必ず以前のコードをメモ帳にバックアップしておくなどの対策をしておくようにしてください。 シェアボタンを設置する上で、何らかのトラブルや損失・損害等につきましては一切責任を問わないものとします(一応)。 2015/11/21追記：11/20より、ツイッターのシェア数の取得ができなくなりました。(参考：持続的なプラットフォームのための難しい決断)これにより、ツイッターのシェア数の部分を「Twitter」と表示するように変更しました。 2016/1/11追記２：当ブログのシェアボタンを使っているかたのみ、Twitterのシェア数を表示させるようにする記事を書きました。詳しくは「count.jsoonを使って当ブログのシェアボタンを使っている方のTwitterカウント数を取得する方法 - Yukihy Life」をごらんください。 2016/5/18追記３：Faceboo
はてなブログで複数のサイドバーモジュールをタブメニューにして回遊率アップを狙うカスタマイズ - Yukihy Life
9/3追記：その他のカスタマイズ(サイドバー固定など)を増やしました。同じモジュールを並列に使いたい方もわかるように文を若干変更しました。 jQueryを使ってみると本当にいろいろとできるなあと実感しています。今回はそれを使って、サイドバーをタブメニューにしてみようと思います。 難易度はちょい高めです。 実装図 特徴・カスタマイズの注意点 特徴 カスタマイズの注意点 カスタマイズのやり方 手順１ タブに加えるものを決める 手順２ サイドバーをつくる 手順３ タブメニューのjQuery 補足 カスタムHTMLを入れる場合 手順４ CSSでデザインする その他のカスタマイズ タブメニューの下に余白を開ける タブになるまでに一瞬崩れるのを防ぎたい サイドバーに固定したい ブラウザサイズを狭めると、挙動がおかしい タイトルとモジュール部分が近くなっちゃうor離れすぎちゃう 固定された瞬間横幅が広が
はてなブログに11種類から選べるSNSフォローボタンをコピペ＋αで実装するカスタマイズ - いつ俺〜いつから俺ができないと錯覚していた？〜
今回は、はてなブログのフォローボタンをオシャレにカスタマイズしていきます。 フォローボタンのデザインは記事上・記事下用5種類、サイドバー用4種類、スマホ用2種類の合計11種類を用意しました！ ぜひお試しください！ まずやること HTML共通コード コピペ場所 コピペコード PC版CSS 記事上・記事下用1（背景付き） 記事上・記事下用2（背景が上下に分かれる） 記事上・記事下用3（背景が上から降りてくる） 記事上・記事下用4（枠線が出てくる） 記事上・記事下用5（アイコンがボタンになっている） サイドバー用1（背景付き） サイドバー用2（背景が上下に分かれる） サイドバー用3（背景が降りてくる） サイドバー用4（枠線が出る） スマホ版CSS スマホ版1（背景） スマホ版2（枠） まとめ まずやること まず、アイコン画像の紐付けです！ これをしないと、Google+のアイコン画像が表示されま
はてなブログPC版のサブカテゴリ機能の実装について - 人力検索はてな
はてなブログPC版のサブカテゴリ機能の実装について http://www.masaemon.jp/ 上記ブログ（PC版）右サイドバー下段にカテゴリ一覧を表示しているのですが、カテゴリの量が多く縦長すぎるのが悩みです。そこで以下のようにできるか教えてください。 ーーーーーーーーーー 【現在】 【東京】上野・浅草・日暮里 (34) 【東京】両国・錦糸町・小岩 (2) 【東京】中野～西荻窪 (7) …続く 【希望】 ▶東京 おでん …続く ↓右三角をクリックすると↓ ▼東京 【東京】上野・浅草・日暮里 (34) 【東京】両国・錦糸町・小岩 (2) 【東京】中野～西荻窪 (7) …続く ーーーーーーーーーー 【補足説明】 ・月別アーカイブのように右三角（▶）をクリックするとサブカテゴリを表示します。 ・今後カテゴリが増えるにあたって、いちいち編集とかせず自動でサブカテゴリが反映できたりすると尚最高
はてなブログ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
目的の記事にたどり着きやすくなるよう、前後の記事へのリンクと記事一覧ページを修正しました - はてなブログ開発ブログ
はてなブログでは、ブログの閲覧者が目的の記事にたどり着きやすくなるよう、前後の記事へのリンク（ページャ）と、記事一覧ページの表示を修正しました。 前後の記事へのリンクを記事タイトルで表示するようにしました 記事ページ（記事個別ページ）の下部にある前後の記事へのリンク（ページャ）は、これまで「次の記事」あるいは「前の記事」とのみ表示していましたが、よりわかりやすくなるよう前後の記事タイトルを表示するようにしました。 前後の記事へのリンク（ページャ）を記事タイトルで表示見た目がわかりやすくなっただけでなく、記事タイトルでリンクすることはSEOの面でも効果があるとされています。はてなブログのSEOについては、こちらの寄稿記事をご一読ください。 はてなブログのSEO 無料ブログでここまで出来る注目機能 2022年版 - はてなブログ開発ブログ はてなブログは、より多くの人に読まれるような施策を今後
はてなブログ カスタマイズ：スマホ用ページでも見出しを表示させてみましょう。 - YESかNOか半分か
ご存じでない方も多いとのことなので… @luna_at_hatena 知らない人多そうだからブログに書くと誰か喜ぶよー*\(^o^)/*— ポナコ (@ponako10) 2014, 1月 30 とid:ponako10先生がおっしゃったので、ぱぱっとまとめちゃいます。 やり方知ってるわよ！という方は既読スルーでお願いいたします。 “見出し”ってなんですか？ ↑や↓のように装飾されている文字の事です。 こんなのです。 この見出しは、普通PC表示のみの場合に表示されてスマホ表示の際には↓の画像のように、ものすごくシンプルな表示となっています。 記事に見出しを入れてわかりやすく！ 編集画面から見出しを簡単に入力できるようにしました - はてなブログ開発ブログ スマホでブログを見る際も、出来るだけPC版に近付けたい！という思いから、色々と方法を模索してみました。 はてなブログは、とりあえず<st
はてなブログでスマホ表示の際に「トップへ戻るボタン」を表示させる方法。 - YESかNOか半分か
スルスルスクロールは気持ちがいい 最近、スマホでウェブサイトを見ていると、よく現れる「トップへ戻るボタン」。 押してみると、ぬるぬるというかスルスルとした動きで、見ていたページのトップまで戻るので便利ですよね。 あのヌルスル感が個人的にとても好きです。 はてなブログってPC表示だとスター欄が下の方にあって、読み終わった時にポチッとスターを押すことが出来るんですけど、スマホ表示だと一番真っ先にタイトルとスターボタンが出現するんですよね。 たとえば、長文のエントリーを読み終わってからスターを付ける時は、親指ないし人差指でスマホ画面を猛烈にタップしなければいけなかったりするので、「トップへ戻るボタン」がスマホでも表示されると読む側の人間も楽だと思ったのですよ。 ということで、早速実装してみました。 1.まずはダッシュボード＞デザイン＞記事＞記事下へ。 ここの「スマートフォン版にも表示する」と書い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Icons | Font Awesome
【回答募集中】はてなブログPC版のサイドバー空きスペースを有効活用したい - 己【おれ】
忍者おまとめボタンなどに頼らずはてなブログの記事上エリアに直接はてブボタンを設置するとscript要素がダブらず気持ち早く表示される気がする - 正衛門
【備忘録】はてなブログのデザインCSSとスマートフォン対策 - 正衛門