サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
AboutHTML PreprocessorsHTML preprocessors can make writingHTML more powerful or convenient. For instance,Markdown is designed to be easier to write and read fortext documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in theHTML editor is whatgoes within the <body> tags in a basicHTML5template. So you don't have access to higher-
パソコン時代の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」プロパティー画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 画像を中央の位置でトリミングするまずはこの縦長の画像、横長の画像を並べ、縦横 250px の正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; }CSS でこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで
はてなブログだけでなく、アマゾンや楽天・ヤフーショッピングの商品を紹介する際にはブロガーのかん吉さんが作ってくださったサービス「ヨメレバ・カエレバ」を使うことで 簡単にリンクを作成することができます。 それらを綺麗に表示させるカスタマイズはもう出ているのですが、先日あるブロガーさんに会ったときにカスタマイズをしたら喜んでいただけたので、紹介したいと思います！ 参考リンク 実装図 カスタマイズの注意点 カスタマイズPC スマホ レスポンシブ その他のカスタマイズ 最後に 参考リンク 今回のカスタマイズはほとんど今までやってこられていた方をちょっと変更したような形になっているため、あらかじめ参考リンクを貼っておきます。ありがとうございます！ shufulife.com 実装図 実際に導入した様子はこんな感じになります。PC スマホPCでバランスよく表示させたのと、スマホではなるべくコンパ
先日レクタングルを表示させる記事を書いて、その後追記をしていたのですが、あの方法だとスマホで見た時に縦に2つ並んでしまいAdSenseのポリシーに触れてしまう。と言うことで、レスポンシブデザインで、スマホ表示の時に広告を移動させるコードを追記しました。 今回の記事に関しては、その方法の応用と備忘録です。活用出来る方法として紹介するわけではないので、参考にする方や今回載せているコードをコピペする方は前回同様慎重かつ自己責任にてお願いします。 ※口調がいつもと違うのは備忘録なのでご了承ください（笑） ちなみにですが、AdSense以外でも使える方法なので、特定の要素を移動させたい人には参考になるかもです。他のコードでも出来ると思うのですが、この方法でもできるという程度のものですが。 前回の記事のおさらいと解消法 更に慎重な解消方法 今回のコードに合わせたHTMLとCSS 今回のコードを応用して
2017.5月更新 こんにちは！いつの間にか14回目のカスタム記事！今回はブログでよく見かける『会話形式』の記事を簡単に実現させるCSSを作りました！ぜひご覧あれ！ 知らなきゃ損！いつでもAmazonで90%オフの商品を探す方法！ はじめに 完成系 まずはCSSをコピペしよう！ ブログでの使い方 簡単解説（飛ばして良し！） まとめ 【追記】この記事のCSSをもとにさらに手を加えてくれた素敵な記事があるので紹介します！ありがたい。 こんな記事も書いてるよん。 はじめに 参考記事としてこちらの記事を参考にいたしました。 akiueo (id:akiueos)さんのCSSも素晴らしいデザインですが、レスポンシブに未対応というのと、会話のアイコン画像が正方形の画像を使用しないと丸く表示されないので、この2点を改良して今回制作しました。 上記の記事内に「どなたか改良版をお願いします。」と書かれている
コピペコードをうつす前に、必ず以前のコードをメモ帳にバックアップしておくなどの対策をしておくようにしてください。 シェアボタンを設置する上で、何らかのトラブルや損失・損害等につきましては一切責任を問わないものとします(一応)。 2015/11/21追記：11/20より、ツイッターのシェア数の取得ができなくなりました。(参考：持続的なプラットフォームのための難しい決断)これにより、ツイッターのシェア数の部分を「Twitter」と表示するように変更しました。 2016/1/11追記２：当ブログのシェアボタンを使っているかたのみ、Twitterのシェア数を表示させるようにする記事を書きました。詳しくは「count.jsoonを使って当ブログのシェアボタンを使っている方のTwitterカウント数を取得する方法 - Yukihy Life」をごらんください。 2016/5/18追記３：Faceboo
9/3追記：その他のカスタマイズ(サイドバー固定など)を増やしました。同じモジュールを並列に使いたい方もわかるように文を若干変更しました。 jQueryを使ってみると本当にいろいろとできるなあと実感しています。今回はそれを使って、サイドバーをタブメニューにしてみようと思います。 難易度はちょい高めです。 実装図 特徴・カスタマイズの注意点 特徴 カスタマイズの注意点 カスタマイズのやり方 手順１ タブに加えるものを決める 手順２ サイドバーをつくる 手順３ タブメニューのjQuery 補足 カスタムHTMLを入れる場合 手順４ CSSでデザインする その他のカスタマイズ タブメニューの下に余白を開ける タブになるまでに一瞬崩れるのを防ぎたい サイドバーに固定したい ブラウザサイズを狭めると、挙動がおかしい タイトルとモジュール部分が近くなっちゃうor離れすぎちゃう 固定された瞬間横幅が広が
はてなブログPC版のサブカテゴリ機能の実装について http://www.masaemon.jp/ 上記ブログ（PC版）右サイドバー下段にカテゴリ一覧を表示しているのですが、カテゴリの量が多く縦長すぎるのが悩みです。そこで以下のようにできるか教えてください。 ーーーーーーーーーー 【現在】 【東京】上野・浅草・日暮里 (34) 【東京】両国・錦糸町・小岩 (2) 【東京】中野～西荻窪 (7) …続く 【希望】 ▶東京 おでん …続く ↓右三角をクリックすると↓ ▼東京 【東京】上野・浅草・日暮里 (34) 【東京】両国・錦糸町・小岩 (2) 【東京】中野～西荻窪 (7) …続く ーーーーーーーーーー 【補足説明】 ・月別アーカイブのように右三角（▶）をクリックするとサブカテゴリを表示します。 ・今後カテゴリが増えるにあたって、いちいち編集とかせず自動でサブカテゴリが反映できたりすると尚最高
【はてなブログ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年版 -はてなブログ開発ブログはてなブログは、より多くの人に読まれるような施策を今後
ご存じでない方も多いとのことなので… @luna_at_hatena 知らない人多そうだからブログに書くと誰か喜ぶよー*\(^o^)/*— ポナコ (@ponako10) 2014, 1月 30 とid:ponako10先生がおっしゃったので、ぱぱっとまとめちゃいます。 やり方知ってるわよ！という方は既読スルーでお願いいたします。 “見出し”ってなんですか？ ↑や↓のように装飾されている文字の事です。 こんなのです。 この見出しは、普通PC表示のみの場合に表示されてスマホ表示の際には↓の画像のように、ものすごくシンプルな表示となっています。 記事に見出しを入れてわかりやすく！ 編集画面から見出しを簡単に入力できるようにしました -はてなブログ開発ブログ スマホでブログを見る際も、出来るだけPC版に近付けたい！という思いから、色々と方法を模索してみました。はてなブログは、とりあえず<st
スルスルスクロールは気持ちがいい 最近、スマホでウェブサイトを見ていると、よく現れる「トップへ戻るボタン」。 押してみると、ぬるぬるというかスルスルとした動きで、見ていたページのトップまで戻るので便利ですよね。 あのヌルスル感が個人的にとても好きです。はてなブログってPC表示だとスター欄が下の方にあって、読み終わった時にポチッとスターを押すことが出来るんですけど、スマホ表示だと一番真っ先にタイトルとスターボタンが出現するんですよね。 たとえば、長文のエントリーを読み終わってからスターを付ける時は、親指ないし人差指でスマホ画面を猛烈にタップしなければいけなかったりするので、「トップへ戻るボタン」がスマホでも表示されると読む側の人間も楽だと思ったのですよ。 ということで、早速実装してみました。 1.まずはダッシュボード＞デザイン＞記事＞記事下へ。 ここの「スマートフォン版にも表示する」と書い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
