サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
掃除・片付け
pecopla.net
WEBサイトのSEO対策としてポピュラー手段であるパンくずリスト。 WordPressでパンくずリストを表示する為によく使われるプラグイン、Breadcrumb NavXT。 自動でWordPressのWEBサイトの構造にあったパンくずリストを生成し表示してくれる便利なプラグインです。 しかし、自動で生成する為、思った通りのパンくずリストが表示されない場合もあります。 今回は、そんな時に自由自在に表示をカスタマイズする方法をご紹介いたします。 Breadcrumb NavXTとは Breadcrumb NavXTは、WordPressで作成されたサイトにパンくずリストを設置する為のプラグインです。 WordPressのWEBサイトの構造をそのままパンくずリストとして出力してくれるので、一度設定をしてしまえば 現在のWEBサイトの状態に応じてパンくずリストを自動で生成し表示してくれます。 ▼
SCSSを使えばCSSよりも作業効率がUPすると分かっていても、コンパイルが必須と聞いて二の足を踏んでいる方も多いようです。そこで本記事では、SCSSで記述したファイルを自動的にCSSへコンパイルしてくれる「WP-SCSS」の便利さを解説したうえで、インストール方法やオプション設定、エラーが出た時の対処法などを解説します。 SCSS(Sass)とは?使用するメリット3つ 「WordPressのテーマを制作してみたい!」「自分好みにカスタマイズしたい!」という方なら、一度はSCSSに興味を持ったことがあるのではないでしょうか。 SCSS(Sass)とはCSSの拡張言語、いわゆるメタ言語の一種です。CSSの発展形といった方がイメージしやすいかもしれません。なお、SCSSには下記のようなメリットがあります。 ▼SCSS(Sass)のメリット 独自の書き方で関数が使える 変数が使えるだけでなく、値
多量の情報を扱うシステムを作成する際に一番の問題になるのがDataBaseの負荷です。 DataBaseはデータの保存、検索、管理等が容易に行える点が利点ですが 考えなしに、1箇所にデータを集めてしまうと一定のラインを超えた瞬間から顕著にレスポンスの低下が見られます。 その対策としてよく用いられるのがシャーディングです。 今回はこのシャーディングについて、活用方法とその効果に関して紹介していきます。 シャーディングとはDataBaseの負荷分散方法の1種です。 水平分割とも呼ばれます。 同じテーブルを複数のDataBaseに用意し、1つのテーブルに保存していたレコードを分散する事で 各DataBase内に保持されるレコードの量をへらす負荷分散の方法です。 1つのテーブル内のレコード数が大きくなる事で、低下していく処理速度を複数のDataBaseに分ける事で 1テーブル内のデータ量を減らし、
フォントを軽量化 使うweightを3つに絞ったとはいえ、1ファイル16~17MB。フォントファイルを軽量化(サブセット化)していきましょう サブセットフォントメーカーをダウンロードします。 https://opentype.jp/subsetfontmk.htm Windows用とMac用が別ですので選んでください。 ダウンロード後、インストールし起動するとこのようなソフトが開きます。 ①作成元フォントファイル 参照から選択できます。今回はNotoSansCJKjp-Regular.otfを例にします。 ②作成後フォントファイル 基本的には元のファイルと同じ名前で良いです。場所は混乱しないように別の場所を指定すると良いでしょう。 ③フォントに格納する文字 第1水準漢字、非漢字文字、アスキー文字をコピペします! 唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍
定番アプリとして世代を問わず高い人気を誇っている「Yahoo!ニュース」もダークモードに対応しました。 「Yahoo!ニュース」がダークモードの導入に踏み切った理由として、ユーザーからのリクエストが多かったという理由があるようです。 メジャーなSNSが続々とダークモードへの対応を開始している中、Twitter上で「Yahooニュースもダークモードにして欲しい」というツイートが増え、従来からユーザーの声を重視していたYahooとしては、ダークモードの導入がユーザビリティの向上になると判断したのでしょう。 ここまで見てきたように、スマホアプリでは続々とダークモードが採用されているのですが、WEBサイトはまだほとんどが非対応です。 では、WEBサイトはどのようにダークモードに対応させれば良いのでしょうか。 cssのメディアクエリprefers-color-schemeで簡単実装 実はダークモード
弊社でよくいただくご要望の中に、お客様の既存サイトを「よく見えるようにしてください」「作り込んでください」「高級感を出してください」といったものがあります。サイトリニューアルまでしないけれど、ちょっとどうにかして欲しいといったご要望です。 そこで、昨今のWEBサイトの流行から検証し、「作り込むとは?高級感とは?」についてポイントをまとめてみました。 「作り込み」と「高級感」は全く別。しかし背景は… まず、「作り込み」と「高級感」は全く別です。 「高級感」は時には「リッチ」であったり「上品」と言った言葉にも置き換えられます。 全く別なのですが、ご要望をいただく背景は同じではないかと考えています。 “雰囲気いい感じ”サイトの量産 その要因の1つは、昨今の、フラットデザインや、ミニマルデザインといったWEBデザインの傾向があると思います。 今やwordpressでも莫大な数の”雰囲気いい感じ”な
日常的に何か調べたいことがあると検索することが当たり前になった昨今ですが、ほとんどの方がGoogleもしくはYahooにて検索をしているかと思います。 少数派の方でも、Bingを使っている人はいるかと思いますが、「ダックダックゴー(DuckDuckGo)」という検索エンジンを使っているという方は少ないのではないでしょうか。 今回、ご紹介させていただく検索エンジン「ダックダックゴー」ですが、最大の特徴は、プライバシー保護に特化しているという点です。 ダックダックゴーのトップページにも書かれていますが、「あなたを追跡しない検索エンジン」とあり、検索した内容や閲覧履歴などが残らない検索エンジンとなっています。 どのような検索結果を返してくれるのか、Googleの検索結果との違いなどから解説していきたいと思います。 ダックダックゴー(DuckDuckGo)とは? 冒頭でも書かせていただきましたが、
表中のテキストの揃えの基本 まずデザインを見ていく前に、表中のテキストの一般的なルールをおさらいしたいと思います。 何気なく作成してた人はここを見直すだけでグンと見やすい表に変わりますよ 内容によっては変える必要もありますが、基本はこの3点です。 また、タイトルや、強調する値などは、太文字にしたり背景に色を入れたりと、他と差別化する事で見やすい表になります。 綺麗で見やすい表のデザインいろいろ それでは早速表のデザインを見ていきましょう! なお、今回はプラン表をイメージし、見出しが縦と横に入っているパターンの表をベースで作成しています。 それに合わせ、レスポンシブ時ではdata-labelの値をcontent:attr()で取得し、表示させる方法で実装しています。 また基本的に比較表以外のパターンは全てhtml共通(行を増やしているものはありますが)にし、CSSのみ変えています。 <tab
こんにちわ!4月もあっという間に終わりますね。 この春社会人になったばかりの新人デザイナーや新人ディレクター、社内のWEB担当の方は研修も一通り終わり、いよいよ実務に入っている頃でしょうか。 今回はそんな新社会人の方に向け”トンマナ”についてまとめていきたいと思います。 トンマナとは? ホルモンの名前のような呪文のような…そんな響きのトンマナですが、 正式名称は「トーン&マナー」です。 デザインに一貫性、統一感を持たせましょうという意味になります。 広告やブランド戦略において使われる言葉ですが、今回はWEBデザインというフィールドで、このトーン&マナーがどうして必要なのか、その重要性も含め説明していきます。 トンマナ設定の重要性とは? トンマナの重要性は主には2つあります。 1つ目は、エンドユーザーに対して、こちらが意図したメッセージをより明確で印象的なビジュアルで伝える事が出来る点です。
wordpressでwebサイトを制作する時に固定ページ毎にデザインを変える場合が多々出てきます。 デザインを変えると言っても他ページとは全く別レイアウトなのか、CSSでデザインを調整するレベルなのか。 今回は状況に応じた固定ページのデザインを変える方法について、4つの方法を紹介していきます。 その1.テンプレート階層を利用する テンプレート階層はこんなケースにおすすめ レイアウトから見出しデザインまで、完全に独自のデザインにする必要があるページはwordpressのテンプレート階層を利用する方法が適しています。 テンプレート階層とは、テンプレートファイルを出力する時の優先順位の事で、階層のルールに従って表示されるテンプレートが決まります。 テンプレート階層の概観図はWordPress Codexのページで確認できます。 テンプレート階層を利用する方法 固定ページは通常page.phpで作
webサイトのレイアウトは、揃っている事が良しとされている時代が長かったように思います。それはコーディングをする上でも揃っている方が効率が良いですし、かつてのtableコーディングだった時代においてもそうであったからではないでしょうか。 しかし最近は”あえて揃っていない”自由なレイアウトのWEBサイトをよく目にするようになりました!どうやらノングリッドレイアウトやブロークングリッドデザインと呼ばれているようです。今回はそんな2019年大注目のノングリッドレイアウトについてご紹介していきます! ノングリッドレイアウトとは? 画面を規則的に分割し画像やテキストを配置していくレイアウト方法がグリッドデザインと言われますが、そうではない、ノングリッドレイアウトを一言で言えば「グリッドにとらわれない自由なレイアウト」になります。 それではノングリッドレイアウトを採用する為に、その魅力や効果、デザイン
フォントサイズと行間は、ユーザーにコンテンツをストレスなく読んでもらう為の重要な要素のひとつです。 PCサイトでは、読みやすさはもとより、デザイ… 条件 文字サイズについては検証結果に基づき、下記のサイズで実装していきます。 PC時 本文・・・font-size:16px / 行間2em 大見出し<h1>・・・font-size:36px / 行間1.2em 中見出し<h2>・・・font-size:24px / 行間1.2em スマホ時 本文・・・font-size:16px / 行間1.5em 大見出し<h1>・・・font-size:24px / 行間1.2em 中見出し<h2>・・・font-size:20px / 行間1.2em また、下記の3点を考慮していきます! 1.レスポンシブであること 2.メンテナンスしやすいようにすること 3.どのデバイスで見てもきれいで読み易いサイズ
WEBサイトの読み込み時間に表示されるローディング画面。 ユーザーにストレスを与えず待ってもらう為にも気持ちの良いローディング画面を作りたいものです。 今回は本当にコピペするのみ!たった10秒で実装出来てしまうJqueryプラグインのPACE.jsの使い方と、 ローディングアニメーションを作成するのに便利なライブラリをいくつかまとめたのでご紹介します! jsとcssを読み込むだけ!PACE.jsの使い方 早速ですがPACE.jsの使い方です。 1.CDNでpace.jsと使いたいテーマのcssをheadに記述CDNはこちら <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%
みなさんは横並びのレイアウトのスタイルはどう書かれていますか? float、display:inline-block、display:table-cell、そしてdisplay:flexと、シーンに合わせて使い分けていますか? 今回はfloatに代わる横並びスタイルの記述方法として注目され、その利便性が定着しつつあるFlexboxについて実用的なレイアウトサンプルを交えて使い方を解説したいと思います。 Flexboxとは? Flexboxは、CSS3から導入された比較的新しいレイアウトモジュールです。 項目を行方向または列方向に配置する1次元レイアウトを実現します。 正式名称は「CSS Flexible Box Layout」と言い、その名の通りフレキシブルなレイアウトが可能です。 横並びのレイアウトはもちろん、アイテムの整列や中央揃え、均等配置、アイテムの高さ調整や折り返し表示などが簡単
スマートフォンが普及した今、パソコンでしか正常に表示されないサイトというのは スマートフォンユーザーからしたら非常に見にくくストレスフルなもの。 全てのユーザーに快適にサイトを見てもらうためにも、 あらゆるデバイスに対応したサイト制作は必須といっても過言ではありません!
フォントサイズと行間は、ユーザーにコンテンツをストレスなく読んでもらう為の重要な要素のひとつです。 PCサイトでは、読みやすさはもとより、デザインも考慮した文字の使い方が多いと感じる一方、スマホ化されているサイトでは比較的どれも同じぐらいのフォントサイズが使われている為、ここは改めてどれぐらいのフォントサイズが読みやすく、よく使われているのかを検証しました。 読みやすいフォントサイズとは?読み物系30サイトを検証 検証するにあたり、まず「読みやすい」とは? 読みやすい=多くの人が読んでいる=有名・人気サイト! と言うことで、今回は記事を読ませる事を目的とした、ポータルサイト、バイラルメディア、キュレーションサイト、WEB系のブログなどから30サイトをピックアップしました。 検証方法は、本文と見出しのフォントサイズと行間をWhatFontというgoogleの拡張機能を使い調べます。 1番多か
先日のgoogleのウェブマスター向け公式ブログの記事です。 モバイル専用サイトからレスポンシブ サイトに移行する方法 レスポンシブ ウェブ デザインを導入するサイトが増えるにつれて、ウェブマスターの方々の間で、モバイル用に別途設定する URL(英語)からレスポンシブ ウェブ デザインの利用に移行することへの関心が高まっています。… 引用元:ウェブマスター向け公式ブログ 弊社でも既存のPCサイトをレスポンシブ化するというご依頼を昨今たくさんいただいております。 そこで今回はナビゲーションのレスポンシブ化に焦点を当てて、とっても簡単に実装出来るjqueryプラグインSlickNavの使い方をご紹介します。 オプション解説や、slicknavのオプションにはない閉じるボタンの実装方法も紹介しているので、是非チェックしてみてください。
YMYLのSEO対策は難易度が高いことで知られています。 その一方で、成功すれば大きなリターンが期待できるため、「挑戦してみたい!」と思われている方も多いのではないでしょうか。 そこで今回は、YMYL関連のコンテンツを扱う際の注意点、ジャンル別のSEO難易度、有効な対処法についてまとめてみました。 YMYLとは? YMYLとは、Googleの「検索品質評価ガイドライン」の項目の1つで、「Your Money Your Life」の略です。 日本語に直訳すると「あなたのお金、あなたの人生」となりますが、平たく言えば「現在および将来にわたって人々の幸福や安全に大きな影響を与える情報、つまり金融・健康・法律などをテーマにしたWebコンテンツ」を指しています。 なお、本記事では、2022年12月に改定された最新版のガイドラインを元に解説していきます。 「YMYL領域」と「非YMYL領域」の違い G
SEO対策とは? SEOとは、Search Engine Optimizationの略。 ユーザがGoogle、Yahooなどで検索するキーワードで上位化させ、 目立たせることで集客、プランディングにつなげる事になります。 その効果、影響力は絶大で、上位化に成功すれば一般的にはリスティングよりも数倍大きいとされております。 競合、難易度が高ければ高い程、上位化が難しくなり、成功率も下がるにも関わらず、 未だSEOに力を入れる企業様がいらっしゃるのも影響力の大きさからになります。 課題解決ならペコプラのSEO対策 厳しいテストに合格した 優秀なライター 約150名体制 コンテンツ制作は その業種、サービスなどに 精通した専任ライターで 体制を構築 あらゆるキーワードに対した メディア実績、コンテンツ管理、 SEOに強い コンテンツノウハウ
このページを最初にブックマークしてみませんか?
『SEO対策なら株式会社ペコプラ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く