ストークテーマでtableタグを横スクロールできるようにするカスタマイズ - OPENCAGE
リンクをコピー ストークテーマでtableタグを設置した場合、tableの大きさ（中の文字量やカラム数）によってはスマートフォンで見た際にうまくレイアウトされず、はみ出してしまう場合があります。 tableタグは昔からあるタグですが、スマートフォンサイトにはあまり適していない場合がある（見た目の部分で）タグなのですが、スマートフォンで確認した際には、table（表）を横スクロールさせるようにする方法をご紹介します。 ちなみに、STORK19であれば表ブロックにテーブルの横スクロール機能が標準装備されていますので、こちらのカスタマイズは不要です。 CSSを追加する まずは下記CSSを子テーマのstyle.cssなどに追記していただくことで横スクロール型のtableを利用する準備が完了します。 @media only screen and (max-width: 480px) { .tscro
WordPressプラグインで記事の目次を自動生成する-Table of Contents Plus
WordPressを使ったサイトでは記事の内容や全体構成を一目で把握するために、目次が設定されていることが多いと思います。 しかし、目次を手作業で作成すると「本文のみ更新し、目次の最新化を忘れる」や「リンクを貼り忘れる」等、手作業であるがゆえのミスも発生してしまいます。 WordPressのプラグイン「Table of Contents Plus」は記事の見出しから目次を自動生成することができます。また、「Table of Contents Plus」は初心者の方でも簡単に設定できるプラグインです。 今回は「Table of Contents Plus」の仕組み、設定方法、カスタマイズ方法についてご紹介いたします。 Table of Contents Plusとは Table of Contents Plusとは、見出しタグから目次を自動生成するプラグインです。 目次の表示例見出しタグの内
Table of Contents Plus カスタマイズ方法（CSS デザイン） - Naifix
WordPress で目次を自動的に表示してくれる Table of Contents Plus（ TOC+ ） は、初期設定のままだとちょっと味気ないデザインですよね。 設定画面から横幅や背景色を変更しても、ちょっと物足りないと思います。そこで、CSS でおしゃれなデザインにするカスタマイズしてみましょう。 サンプル付きで具体的な手順を解説していきます。 カスタマイズ前の設定 Table of Contents Plus の基本的な使い方は以下の記事をご覧ください。 「Table of Contents Plus」の設定方法・使い方 設定画面で、横幅・フォントサイズ・背景色などを指定できます。 初期設定のままだと、以下のようなデザインです（テーマ：Twenty Twenty-One）。 シンプルすぎるので、サイトのテイストに合わせてカスタマイズしたいところですね。 プラグインが出力してい
CSS で蛍光ペン風マーカーを指定したら iPhone 上で transparent の部分が黒くなってしまった話
文章の一部を強調表示をするために、Webllica では蛍光ペン風マーカーの CSS を設定しています。実際にそのスタイルを反映させると次のような表示になります。 蛍光ペン風マーカーの黄色を指定した場合。 蛍光ペン風マーカーのピンクを指定した場合。 しかしブラウザによって解釈が違うようで、iPhone で見てみると transparent で設定して透明になるはずだった部分が黒くなってしまいます。 この時指定していた CSS は次の通り。上が黄色で下がピンクです。 strong { background: linear-gradient(transparent 30%, #FEFE98 90%); } strong.pink{ background: linear-gradient(transparent 30%, #FFCCFF 90%); }さて、この黒くなる原因はどこにあるのか。 結
Account Suspended
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
強調文字 strong をちょっとおしゃれにする CSS デザインサンプル - Naifix
ブログの本文で強調したい部分には <strong> や <b> を使いますが、デフォルトのスタイルではただの太字になるだけです。 これだとちょっと味気ないときは、CSS でデザインしてみましょう。 文字や背景の色を変えたり、蛍光ペンでマーカーをひいたような感じにすると、重要なポイントをより一層伝えやすくなりますよ。 強調文字の CSS デザインサンプル 強調の意味を持たせる HTML タグには <strong> <b> <em> があります。 これらは主に検索エンジンに対して重要性を伝えるタグで、見た目だけ強調したいなら <span> で指定することもできます。 それぞれの使い分け方などは後述します。まずはデザインサンプルをご覧ください。 デフォルトのスタイルは太字 現在使用しているテーマ・テンプレートで特に指定がない場合、<b> や <strong> で囲ったテキストはただの太字になりま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「STORK（ストーク）」と「PS Auto Sitemap」の相性が微妙だったのでCSSカスタムしたった | 束縛されるの大嫌いなんでサラリーマン辞めました。