テーブルをレスポンシブデザインに対応するためのCSSを使ったレイアウトパターン - YCOMのホームページの制作・運営に役立つブログ
ホームページのことを中心にためになるかもしれないことをいろいろと書いています。 ホームページ制作のことからSEOや広告、マーケティングの話まで思いついたことを語っています。 大阪のホームページ制作YCOMトップ ホームページ運営ブログ レスポンシブデザインをしていると悩まされるんがテーブルのデザインです。 PCの画面と違って表示領域が狭いので、工夫しないとうまくテーブルを表示できません。 CSSを使ってテーブルをレスポンシブデザインするためのパターンを３つ紹介します。 見出しとコンテンツを交互に縦表示 テーブルの縦横を切り替える テーブルそのものをスクロール レスポンシブでレイアウトを変更する 一般的にテーブルはTableタグを使っているでしょう。 その構成要素は、Tableはdisplay:tableが初期値で、tdやthタグはtable-cellが初期値になっています。 これらを操作す
AMPに適用するCSSを設定できるようにしました - はてなブログ開発ブログ
はてなブログでは、AMP（Accelerated Mobile Pages）用のCSSを設定できるようにしました。AMPで記事が配信される際のデザインをカスタマイズできます。 ※はてなブログのAMP配信は、有料プラン「はてなブログPro」に加入しているユーザー向けのベータ版機能です。詳細は関連ヘルプなどをご参照ください。 記事をAMPで配信しているブログの「デザイン設定」画面では、「スマートフォン」タブの「詳細設定」に「AMP用CSS」欄が表示されます。ここにCSSを直接記述してください。 AMPでの表示は、記事編集画面（PC版）の「プレビュー」タブで、「スマートフォン（AMP）」を選択して確認できます。詳細は下記の関連ヘルプやプレビュー機能のリリース告知をご確認ください。 ※AMPのCSSにはいくつかの制限があります。本機能はAMPおよびCSSの知識を持っている方を対象しており、デザイン
アフィンガー４でWordPressプラグイン「Autoptimize」を有効化すると読み込まれるCSSがなくなる。 - 攻めは飛車角銀桂守りは金銀三枚
先日購入して絶賛使用中の「アフィンガー４」。 使いやすくて本当によい。 金曜日に運用中のサーバーが遅くて表示に時間がかかっていたのでWordPressを高速化しようということでWordPressプラグイン「Autoptimize」を導入しました。 WordPressプラグイン「Autoptimize」は「HTML」「CSS」「Javascript」のファイルなどを圧縮してくれるプラグイン。 実際は速くなったのか実感はなかったのですが、そのままにしてましたが今日ちょっとしたトラブルに気が付きました。 （※アフィンガー４が悪いわけではないです。） アフィンガー４でプラグイン「Autoptimize」を有効化すると H3タグのチェックマークが出ない。 原因は読み込まれるCSSから「Font Awesome」が外れるから！！ アフィンガー４でAutoptimizeを有効化するとチェックマークが出な
Luxeritas（ルクセリタス）の見た目をオシャレに！ 16のカスタマイズしたことまとめ【WordPressテーマ】 | 第0版
アイキャッチ画像は公式サイトよりお借りました。 高機能なのに 軽くて 無料 メリットいっぱいのWordPressテーマ、Luxeritas（ルクセリタス） 。 デザインはいかにもブログ！ という感じなので（シンプルなのも利点ではあるのですが）、自分好みにするために色々とカスタマイズした備忘録です。 カスタマイザーで設定可能なことは省いてます。カスタマイザーで変更できるのに気づかずCSSで変更してるのもあると思います。笑 CSSの編集は、ダッシュボード画面のLuxeritas → 子テーマの編集 → style.css から編集が可能です。 子テーマの編集が表示されてない方は、子テーマを導入することを強くお勧めします！（Luxeritas公式のダウンロードページからダウンロード可能です） 公式Luxeritas ダウンロード
コピペで簡単！ ブログのフォントを可愛くオシャレなRounded M+ 1cに変更！【Google Fonts + 日本語】 | 第0版
こんにちは、とみーです。 いつも当ブログをご覧いただき、ありがとうございます。 そうでない方も訪問していただき、ありがとうございます。 さて、このブログですが、昨日までとは少し雰囲気が違います。 フォントを変えました！ 「Rounded M+ 1c」という名前のものです。 可愛い丸みをおびたフォントです。 可愛すぎてズボラ独女には不似合いです。 自分のブログを覗いていると、ウキウキすると同時に何だかむず痒いです。笑 フォント変更ビフォーアフター フォントのビフォーアフターをサブタイトルで比較してみましょう。 ビフォーがこちら。たぶんメイリオです。 そしてアフター。 字も少しだけ太くなり、はっきりくっきり読みやすくなってるのが分かります。 こんな良質なフォントが、簡単に、しかも無料で利用できるんです！ フォント変更方法 Google Fonts + 日本語 というサービスがあります。 現時点
はてなブログで特定カテゴリーでのみブックマークボタンを非表示にする方法 - ヘソで茶をわかす
昨日の投稿で書きましたが、特定のカテゴリーでのみブックマークボタンが表示されないようにカスタマイズしました。このブログでは「歴史」と「観光」の二つのカテゴリーでブックマークボタンは表示されないようになっています。 備忘録も兼ねてカスタマイズの手順を書いておきます。 本当は昨日書いておきたかったのですが、一部に問題が生じたために書く事が出来ませんでした。 雑記ブログを書いていると、ブックマークにはなじまない内容の記事もあったりしますので、あまり拡散させたくない身内だけで楽しみたいような記事や、炎上されると困るような記事用に利用してもらえればと思っています。 念のための言い訳 前もって書いておきますが、私はCSSやHTMLなどは書けはしますが学校で勉強したとかいうのではなく、完全に独学で趣味として覚えたものですので、最善の方法では無いかもしれませんし、もっと言ってしまえば間違っている可能性すら
Photoshopはもう使わない!? 場所を問わず画像編集できるCSSデザインフィルターの画像編集エフェクト9選
CSS3では、Photoshopのようなフィルター効果を再現するイメージフィルターという機能があります。 Photoshopを使用すれば画像加工を行うことができますが、外出先などで画像の編集が行えない……そのような経験、Photoshopを使用するデザイン関連の仕事をされている方なら一度や二度ありますよね。そんな時に、少しのコードをCSSに足すだけで画像編集できてしまう機能がイメージフィルターです。 今回は、画像の明度や彩度などを簡単に調整することができる、CSSイメージフィルターについてご紹介します。 とてもシンプルなコードばかりですので、使えそうなものがあれば、早速試してみてください。 CSSフィルターができること ～基本機能「９」～ 1. レンズで覗き込むようにぼかしを加える「blur」 filter: blur( ぼかしの長さ ); blurを指定すると、ガウシアンぼかしタイプのブ
はてなブログ非公式テーマ『百科事典的な何か』を公開しました（Githubに） - NO TITLE
2016 - 11 - 11 はてなブログ非公式テーマ『百科事典的な何か』を公開しました（Githubに） ブログ運営 ブログ運営-カスタマイズ コピペで簡単！はてなブログのシェアボタンをカスタマイズ コピペで簡単！CSSではてなブログの見出しをカスタマイズ！ はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった はてなブログの超便利なデザインテーマ「Brooklyn」を作りました ダウンロードしておきたい最新おすすめ洋楽【2016年版】 オススメの人気洋楽記事一覧 【洋楽】UKロック入門！おすすめバンド20選 人気洋楽のYouTube再生回数ランキングTOP30 90年代洋楽HIPHOPの名曲をあげていく 人気の洋楽を紹介します - 女性アーティスト編 - 90年代洋楽お
【CSS】ブログカードの下につくURLがウザすぎたので削除しますた - にーとのかがみ。
【最終更新：11月10日 追記しました】 ※URLを消すことについてはてな運営に問い合わせた所、特に禁止しているということでもないので大丈夫という回答をいただきました。 どうも、沖縄在住ニートブロガーのケンヂ（@neetblogman）です。 はてなブログって既存で色々機能が用意されているし、慣れればかなり使いやすくなるけど、Wordpressに比べるとカスタマイズ性が欠けるのがたまにキズですよね。 その機能の中でも個人的に凄く許しがたい機能があるんですよ。 それが ブログカードの下に元サイトのURLが付くこと！ 正直さー、これいらないよねｗ付くかどうかの設定が出来るならまだしも、毎回ついてくるのは流石にキツい。 一応、リンクを貼り付けた時に挿入されるコードに記載されている【:cite】という記述を削除すればURLが挿入されなくなりますが、毎回手直しするのも面倒くさいですよね。 というわけ
【コピペOK！】めっちゃ秘密にしたかったけどCSSで文字を震えさせる方法を大公開するよ！ - にーとのかがみ。
どうも、沖縄在住ニートブロガーのケンヂ（@neetblogman）です。 実は最近、僕のブログで使用しているとある機能について問い合わせを受けることがちょくちょく出てきました。 まぁ既にタイトルにも記載しているんですが、文字が震える機能のことです。 これとか！ これね！！！ この機能が僕のブログに独自性を持たせていたともいえるため、この方法を周りのブロガーに紹介してしまうと僕の存在が消えてしまうのではないかという恐れがありますが、今回はそこについて気にしない方向で行きたいと思います。 何故なら、一度はIT業界に携わった身ですからアウトプットの大切さを僕は知っているのです。アウトプットがあるから新たなインプットが生まれる、これの繰り返して人間という生き物は成長していくのですよ。 というわけで！！誰でもサクッと簡単に使うための方法を教えちゃうよ―(‘ω‘ ) CSSなどの導入方法はこちらのペー
CSSはやっぱり便利！最近のWebページでよく使うさまざまなコンポーネントを実装するスタイルシートのまとめ
ここ数年でCSSは加速度的に進化し、ひと昔前まではJavaScriptを使用しないと実装できなかったのが、CSSのみで実装できるようになりました。また、サポートすべきブラウザもIE8が除かれるようになり、今まで躊躇していたテクニックも数多く利用できます。 アコーディオンやカルーセル、モーダルボックス、ポップオーバー、フリップ コンテンツなど、JavaScript無しのCSSで実装するテクニックを紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site is undergoing maintenance