CSS だけで作れるおしゃれなボックス(枠線・囲み枠)のデザインサンプルを紹介します。 ブログ記事は文章がメインですが、ボックスを使うと重要なポイントがわかりやすくなり、記事の読みやすさにもつながります。
![CSS で作るおしゃれなボックス(枠線・囲み枠)のデザインサンプル 13 選 - Naifix](https://cdn-ak-scissors.b.st-hatena.com/image/square/25a9309b878246dd3be52979737586292b28ede5/height=288;version=1;width=512/https%3A%2F%2Fnaifix.com%2Fwp-content%2Fuploads%2F2023%2F08%2Fframe-design.jpg)
CSS だけで作れるおしゃれなボックス(枠線・囲み枠)のデザインサンプルを紹介します。 ブログ記事は文章がメインですが、ボックスを使うと重要なポイントがわかりやすくなり、記事の読みやすさにもつながります。
ブログの記事タイトルはとても奥が深く、たった数文字の変更で SEO(検索順位やクリック率)に大きく影響します。 ユーザーの目的を達成する質の高い記事を書くことは大前提ですが、どんなに素晴らしい記事を書いても、記事タイトルの付け方によっては読まれる確率がガクンと落ちてしまうのです。 では、どのようなタイトルを付ければユーザーの目を引き、検索上位に入れるのか。本記事では 4 つのコツを解説しています。具体的なサンプルも掲載しているのでぜひご覧ください。 読まれるブログ記事タイトルを付ける 4 つのコツ 効果的なブログ記事タイトルを付けるために、次の 4 つをおさえておきましょう。 40 文字を目安に「見せる」ことを意識する 記事タイトルはキャッチコピーと考える ユーザーを具体的にイメージする どこに焦点を当てるのか考える 01. 40 文字を目安に「見せる」ことを意識する 記事タイトルは 32
検索サイトからのアクセス数を伸ばすための施策「SEO(検索エンジン最適化)」を調べると、様々なノウハウが出てきます。 残念ながらそのノウハウがすべて正しいとはかぎりません。なかには、まるで効果のない施策を真実かのように伝えている人もいますからね。いろいろ試してみるのはよいことですが、明らかに効果がないものに時間を使うのはもったいないと思いませんか? ブログ運営においてはまったく必要のない / 気にしなくてよいノウハウがたくさんあります。本記事では、もはや都市伝説にもなっている SEO のあれこれを紹介していきます。 SEO 都市伝説 10 選 本記事で取り上げる「SEO 都市伝説」は、次のようなものがあります。 検証なしに憶測で語られているもの ごくわずかな量・時間で検証されたもの 伝言ゲームで本来の意味から大きく外れて解釈されているもの 過去に効果はあったが現在は意味のないもの 検索順位
検索サイトからのアクセス数を増やすために、キーワードはとても重要な要素です。 しかし、「キーワードは記事のお題」と勘違いしてしまうと、なかなか検索上位には入れないでしょう。 単純に記事タイルや見出しにキーワードを散りばめておけば OK というものではなく、「検索ユーザーはなにを知りたくてそれを調べているのか(検索意図)」を探らなければ意味がありません。 では検索意図を探るにはどうしたらよいのか、見ていきましょう。 キーワードとは キーワードとは、検索ユーザーがなにかを調べるときに検索窓に入力する語句を指します。 一部のキーワードツールでは、月にどれくらい検索されているのか、上位に入っているのはどんなサイトなのか、というのも調査できます。 大勢が検索するキーワードで検索 1 位になれれば、莫大なアクセス数が見込めるでしょう。もし月に 1 万回検索されているキーワードなら、CTR 30 %とし
Twitter のシェア数を表示しておくことで「人気度」をアピールすることができましたが、残念ながら現在はシェア数を取得することができなくなってしまいました。 Facebook や Google+ などほかの SNS カウントを表示しておいても、Twitter が抜けているとなんだかちょっと寂しい気がします。 そこで、Twitter 以外の各 SNS シェア数をすべて足し、合計シェア数を表示する方法をご紹介します。 過去のTwitterカウントもすべてゼロに 公式ボタンのデザインが変わること、それに伴いシェア数は非表示になることが 2015 年 9 月に発表されました。 We are simplifying the Tweet button by removing the share counter displayed alongside the button. A new design
WordPress で目次を自動的に表示してくれる Table of Contents Plus( TOC+ ) は、初期設定のままだとちょっと味気ないデザインですよね。 設定画面から横幅や背景色を変更しても、ちょっと物足りないと思います。そこで、CSS でおしゃれなデザインにするカスタマイズしてみましょう。 サンプル付きで具体的な手順を解説していきます。 カスタマイズ前の設定 Table of Contents Plus の基本的な使い方は以下の記事をご覧ください。 「Table of Contents Plus」の設定方法・使い方 設定画面で、横幅・フォントサイズ・背景色などを指定できます。 初期設定のままだと、以下のようなデザインです(テーマ:Twenty Twenty-One)。 シンプルすぎるので、サイトのテイストに合わせてカスタマイズしたいところですね。 プラグインが出力してい
Naifix で公開していた以下のページは削除されています。 WordPress プラグイン関連 以下の記事で紹介・解説していたプラグインは何年も更新されておらず、最新版の WordPress で検証したところ正常に動作しないことが確認されたため削除しました。 WordPress のちょっとしたカスタマイズに便利な WP Theme Test https://naifix.com/wp-theme-test/ WordPress テーマカスタマイズに便利な「Theme Test Drive」の使い方 https://naifix.com/theme-test-drive/ ツイート数やはてブ数を取得して高速表示できる SNS Count Cache の使い方 https://naifix.com/sns-count-cache/ Facebook の「いいね!」が激増する WordPres
「いずれ近いうちにリリースします!」と言っておきながら、しばらく放置してしまった WordPress 無料テーマ Gush シリーズ最新作。 ようやく ver.0.8 ぐらいになったので Gush2 からの変更点などを覚書として残しておきたいと思います。カスタマイズ前提というのが本テーマのコンセプトですが、そのわりに汚いコードを書いていたのでスッキリ整頓しました。 見た目も前作よりスッキリしましたね。現在 Betz というブログでテスト&微調整していますのでご覧ください。配色などはいじっておらずデフォルトのままです。前テーマで使っていたショートコードもそのまま見えちゃってます ^^; Gush4の新機能 ん、そういえば “ Gush3 ” はドコいったんだよという感じですが、これは Betz でもともと使っていたテーマを Gush3 としていまして、配布はしていません。 Gush2 をちょ
先日、お客様の AdSense アカウントで無効なトラフィックが検出されました。Google ではこの事態を受け、お客様のアカウントでの広告配信を制限いたしました。今後もお客様のサイトのトラフィックは継続的にモニタリングされ、配信制限は Google 側で自動的に見直しおよび更新されます。 Google AdSense から届くメールの例 「無効なトラフィック = AdSense 狩り」というわけではなく、いくつかの原因が考えられます。 AdSense 狩りかどうかに関わらず、上記のようなメールが届いた場合、残念ながらすぐに広告配信を再開させる手段はありません。無効なトラフィックが継続しないよう改善し、Google AdSense 側の再開許可を待ちましょう。 無効なトラフィックとは 無効なトラフィックに関して、Google AdSense では以下のとおり説明されています。 無効なトラフ
マイクロソフトのAIとLINEで会話ができる ・・・なんて真面目っぽく書いてみましたが、マイクロソフトに「どうすればアクセスアップできるんですか!?」なんて聞いたところで門前払いされるのがオチ。 自動的にフィルタリングされて、メールすら届かないかもしれません。 しかし、先日から話題になっている “ある方法” を使えば、その答えが返ってくるかもしれない。 その方法がこちら。 日本マイクロソフトの LINE 公式アカウントとして登場した、女子高生 AI です。名前は「りんな」。 LINE で友達に追加すると自由にトークが楽しめるということで、多くの男性がハマっているとか。どんな内容で会話しているのかは想像にお任せしますが、だいたい合ってると思いますw 「りんなAPI for Business」のリリースも正式発表され、今後導入する企業も出てくるでしょうね。 参考【LINE】日本マイクロソフトと
「ブログを始めるなら X (Twitter) も必須」「検索流入は不安定だから SNS もやるべき」というノウハウを見かけて、ブログ専用のアカウントを作成したかもしれません。 うまく活用すればブログ運営にプラスとなりますが、残念ながら良いことづくめではないんですよね。ブログの URL や運営状況を公開するのはメリットもデメリットもあります。 実際に相談を受けた SNS でのトラブル例を交え、解説していきます。 X でブログを公開するメリット X でブログを公開するメリットは、次の 3 つ。いずれもすぐに実感できるものだと思います。 早い段階から集客できる 運営上の疑問や悩みを解決できる モチベーション維持につながる それぞれ具体的に見ていきましょう。 01. 早い段階から集客できる 始めたばかりのブログはだれにも存在を知られておらず、すぐに検索流入が見込めるわけでもありません。アクセス解析
WordPress おすすめプラグインに「All in One SEO」などの SEO プラグインが含まれているのをよく見ますが、本当に必要なのでしょうか。 実のところ、ほとんどのサイト・ブログでは導入する意味がなく、むしろ悪影響となっています。少なくとも、SEO プラグインを入れるだけで検索上位に入りやすくなる、ということはありません。 プラグインの役割や注意点を解説すると共に、導入が必要なサイトに向けて 2024 年時点でのおすすめ SEO プラグインをご紹介していきます。 SEO プラグインの役割 SEO プラグインの役割には、以下のようなものがあります。 ページタイトルとして使われる <h1> と <title> を別々にできる 各ページの meta description を設定できる OGP を出力・制御できる 各ページの noindex / nofollow を制御できる ペ
Facebook カバー写真を簡単に作りたいなら、無料オンラインツール「FotoJet 」がおすすめです。 テンプレートからベースを選んでテキストを編集するだけ。さらに、このツールはアカウントを作成しなくても使えます(有料版にする場合はアカウントが必要)。 コラージュ画像なども簡単に作れるので、ぜひ試してみてください。使い方を解説していきます。 Facebook カバー写真のサイズ・画像形式 Facebook カバー写真の最適なサイズ・形式について、ヘルプページに記載されています。 幅851ピクセルx高さ315ピクセルで、100キロバイト未満のsRGB JPGファイルだと読み込み時間が短くなります。 ロゴやテキストを含むプロフィール写真やカバー写真には、PNGファイルを使用すると、より良い結果を得ることができます。 ページのプロフィール写真とカバー写真のサイズ | Facebookヘルプ
「カスタマイズで CSS を書いたのに反映されない」とお悩みですか? CSS が効かない原因は、おもに以下の 4 つです。 キャッシュが効いている 書き方を間違えている CSS を書く場所が違う 優先順位が間違っている それぞれ詳しく解説していきますので、デザインが反映されないときは順番にチェックしてみてください。 キャッシュをクリア(削除)する CSS が反映されないとき、わりと見落としがちなのがキャッシュです。 キャッシュはサーバーまたはブラウザで一時的に記憶されているデータのことで、カスタマイズ前の古い CSS データが残っている可能性があります。 「CSS を調整したあとはキャッシュをクリアする」のを忘れないようにしておきましょう。 サーバーのキャッシュ サーバーのキャッシュ機能は、そのサーバーによって効き具合が異なります。 CSS を更新するとキャッシュがすぐにクリアされる場合も
ブログ記事は「検索上位に入れば安泰」というわけではありません。放っておけばライバルブログに抜かされるかもしれませんし、Google のアップデートで順位が大きく変わることもあります。 全体的にアクセス数が減少しているなら、新記事の公開だけではなく過去記事のメンテナンスも必要です。定期的に過去記事をリライトし、競合サイトに負けない品質を保ちましょう。 本記事では、ブログ初心者向けに過去記事リライト・修正のコツを解説していきます。 過去記事をリライト・修正すべき理由 ここで言うリライトとは、「自分が書いた記事を書き直して改善する」という意味です。「ほかのブログの記事を書き直して自分の記事として公開する」という意味ではありません。 ほかのブログを書き直すのは著作権侵害であり、れっきとした違法行為なので絶対にやめましょう。そんなことをしてもアクセス数は増えませんし、訴訟に発展して失うもののほうが大
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く