(O+P)ut

OutPut Log by SE in SIer



(O+P)ut

Output Log by SE

IT技術-CSS

【はてなブログ】表がはみ出す場合にスクロール機能をつけるCSS

はじめに はてなブログで「はてな記法」を使えば |* |*A|*B| |*1|売上|利益| |*2|2000|300|が A B 1 売上 利益 2 2000 300 といったテーブル表になります。パソコンの場合は画面幅が大きいのであまり表がはみ出すことはないですが、スマホから見た場合に表が…

【はてなブログ】サイドバーの横幅を狭めてパソコンから非表示にする方法

はじめに はてなブログのサイドバーをスマホでのみ非表示にする方法は以下の記事に記載しました。 今回はスマホ以外の例えばパソコンでも非表示にする際のTipsについて記載します。 はてなブログのサイドバー非表示問題 パソコンでも非表示にしたければ以下…

【はてなブログ】ゲストユーザ向けメッセージの非表示化

はてなユーザ以外がはてなブログを閲覧すると はてなブログではアカウントをProにすれば、詳細設定にて以下のように最上部と最下部の表示を制御できます。 ブログにヘッダを表示しない ブログにフッタを表示しない そんな非表示にできるフッターですが、その…

【はてなブログ】Gist貼り付けのハートマークを消す

Gistでのソース共有 はてなブログではGist貼り付け機能でソースコードを簡単に共有できます。 もちろん以下のように書けばソースコードを表示できます。 >|| print HelloWorld ||< print HelloWorld一方でGist貼り付けであれば行数が表示されたり履歴管理も…

【はてなブログ】サイドバーをスマホでは非表示にする方法

はてなブログのサイドバー はてなブログでは、サイドバーがPCとスマホで登場する場所が異なっています。 パソコンで閲覧時 スマホで閲覧時 本記事ではスマホのみサイドバーを消すためのコードを紹介しています。 サイドバーを表示させないコード 以下コード…

【はてなブログ】関連記事を2列にして表示する

はてなブログの関連記事BeforeAfter CSSコード 以下のコードで2列で4記事が関連記事として表示されます .related-entries{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; ju…


他の記事を読む