WordPress ブログに ソースコード を埋め込む【プラグイン エディタ 表示 】
今回はブログ記事などのWebページに、 ソースコード を綺麗に表示するプラグイン「Crayon Syntax Highlighter」を紹介します。 本プラグインを利用することで、Sublime Textなどのようにエディタで表示しているかのようにWebページでソースコードを表示できます。 もくじ 以下は本記事のもくじです。 1.Crayon Syntax Highli […]
今回はブログ記事などのWebページに、 ソースコード を綺麗に表示するプラグイン「Crayon Syntax Highlighter」を紹介します。 本プラグインを利用することで、Sublime Textなどのようにエディタで表示しているかのようにWebページでソースコードを表示できます。 もくじ 以下は本記事のもくじです。 1.Crayon Syntax Highli […]
Webページでソースコードを表示するプラグイン「Crayon Syntax Highlighter」で、HTMLのタグがエスケープ処理される問題について対応方法を紹介します。 ■現象 「Crayon Syntax Highlighter」はWebページでエディタ表示しているように表示するWordPressプラグインです。 もくじ 以下は本記事のもくじです。 1. Cra […]
今回は、HTMLで目次を作る方法を紹介します。 ホームページやブログなどで目次やページ内リンクをつけていると、訪問者に優しい記事になります。 また製作者側としても、目次と見出し・本文の構成を確認することで全体の整合性を確認しやすくなります。 もくじ 以下は本記事のもくじです。 1. 目次を作る 1-1. 簡単な目次を作る 1-2. ページ内リンクを設定する […]
ホームページやブログなどでボタンや背景に「 グラデーション 」を使いたいことは多いと思います。 今回はCSSだけでグラデーションを生成する便利なツール「Ultimate CSS Gradient Generator」を紹介します。 このツールを利用すると複雑なグラデーションを記述したCSSも簡単に自動生成してくれます。CSSなので重い画像のように表示速度が遅くなる恐れもありません。 […]
アメブロ(ameblo)でオリジナルのデザインを自作してみましょう。 今回は、アメブロのPC用トップページに下記のように半透明でスクロールしても位置が固定して付いてくるオリジナルのメニューバーを出す作り方をご紹介します。 なお、下記のような標準タイプのメニューバーを作りたい場合は、アメブロ メニューバーの作り方 2 標準タイプ【 […]
ここでは、アメブロ ヘッダー の作り方を紹介します。 アメブロ(ameblo)でオリジナルのデザインを自作してみましょう。今回は、カスタマイズ用CSSの適用とヘッダー作成(ヘッダー画像の追加、ブログタイトル・説明文の調整、タイトル位置の調整)をご紹介します。 ※2016年8月1日のアメブロ仕様での設定手順になります。 (参考)アメブロ カスタ […]
今回は、WordPressで構築された複数のサイトを一つの画面から一元管理できるプラグインJetPackを紹介します。 一元管理機能を有効化するとWordPress.com のサイトも含むシンプルなダッシュボードで、複数のWordPress サイトも更新できるようになります。 もくじ 以下は本記事のもくじです。 1.一元管理機能概要 1-1.イメージ図 1-2.概要説明 […]
SEO対策のひとつに Webサイトの パフォーマンス(表示速度)向上施策があります。 Webサイトにアクセスして画面がなかなか表示されなくてストレスを感じた経験は誰もがあるのではないでしょうか。 今回は、検索エンジン最適化の一つ、パフォーマンス及び評価ツールについて紹介します。 もくじ 以下は本記事のもくじです。 1.SEO対策 […]
twitterのタイムラインをアメブロに表示することで、アメブロユーザーからのtwitterフォローや集客アップを図れる可能性があります。 アメブロとtwitterアカウントがあれば簡単に設置できますので、今回はアメブロにTwitter のタイムラインを表示する手順を記載します。 ※2016年7月4日時点の手順になります。 もくじ 以下は本記事のもくじです […]
twitterのタイムラインをWordPressに表示することで、twitterフォローや集客アップを図れる可能性があります。 WordPressとtwitterアカウントがあれば簡単に設置できますので、今回はアメブロにTwitter のタイムラインを表示する手順を記載します。 ※2016年7月4日時点の手順になります。 もくじ 以下は本記事のもくじです。 1. twitterタイム […]
今回は、初めてXドメインとXサーバーを利用される方向けに、Xドメインで取得した独自ドメインをXサーバーに設定する手順を記載します。 (※)Xドメイン側での設定(ドメイン取得とネームサーバー設定)は「Xドメインで独自ドメイン取得とネームサーバー設定」をご参照ください。 ※2016年6月18日時点での手順になります。 もくじ 以下は本記事のもくじです。 1. […]
今回は、初めてXドメインでドメインを取得してネームサーバーを設定する方向けに、Xドメインで独自ドメインを取得する手順とネームサーバーへの設定手順を記載します。 ※2016年6月18日時点での手順になります。 もくじ 以下は本記事のもくじです。 1. はじめに 1-1. Xドメインとは 2. 設定手順と動作確認 2-1. 独自ドメインを取得する 2-2. ネームサーバーを […]
今回は、SEO対策に役立つさまざまなデータを確認できる無料ツール「 SEOチェキ 」を紹介します。 SEOチェキでは、タイトル、説明文、h1タグなどのサイト情報をはじめ、Googleでのインデックス登録状況やキーワードによる検索順位、キーワード出現頻度、発リンク数、whois情報などを確認することができます。 もくじ 以下は本記事のもくじです。 1. SEOチェキとは […]
今回は、無料で SPAMチェック ができるおすすめのツール「aguse」を紹介します。 たとえば、SPAMと思われるような怪しいWebサイトに対してそのサイトが悪意あるサイトかを診断したり、SPAMと思われる怪しい受信メールの送信情報を診断したりすることができます。 とくに会員登録なども必要なく、調査したいサイトのURLやメールヘッダーを入力するだけで、その関連情報を表 […]
WordPressで訪問者向けにサイトマップ(HTML サイトマップ )を作成できる「PS Auto Sitemap」というプラグインがあります。 上記のようにユーザー向けのサイトマップを作成することで訪問者が目的のページを探し易くなります。 今回は、PS Auto Sitemapの簡単な設置手順を記載します。 ※プラグインインストール前には、バックアップしておくことを推奨します。 […]
SEO対策の基本のひとつ、 サイトマップ 作成方法 を紹介します。今回は、特にWordPressでサイトマップを作成するプラグインを紹介します。 1. SEO対策 基本 サイトマップの作成方法 1-1. サイトマップとは 1-2. HTMLサイトマップ作成用プラグイン「PS Auto Sitemap」 1-3. XMLサイトマップ用プラグイン「Google XML Si […]
今回は、SEO対策で内部対策の一つとなる「画像」に関する効果的な設定方法を紹介します。ここで紹介するのは、 alt 属性、ファイル名の考え方やGoogleが示すベストプラクティスなどです。 もくじ 以下は本記事のもくじです。 1. 画像に対するSEO対策 1-1. alt属性で画像の内容を説明する 1-2. ファイル名で画像の概要を示す 1- […]
SEO対策の基本である「 meta description 」(descriptionメタタグ)の意味と最適化のためのポイントについて説明します。 もくじ 以下は本記事のもくじです。 1. SEO対策 基本 meta description 適切なつけ方とおすすめツール 1-1. meta descriptionタグとは 1-2. 最適化のた […]
SEO対策の基本の一つ、 適切なURLのつけ方 について説明します。 特に今回は、Google推奨のURL構造とWordPressパーマリンク設定について考えてみます。 Googleガイドラインでは、 「内容が連想しにくい数字や記号の羅列からなるURLは不親切」「内容が連想しやすいURLが親切で検索エンジンもクロールしやすい」と説明しています。   […]
今回は、SEO対策 基本 タイトル の適切な付け方とおすすめツールについて紹介します。 Webページにおけるタイトルとは、サイトの訪問者と検索エンジンの双方にそのページのトピックが何であるかを伝えるもので、SEO対策の基本になります。 もくじ 以下は本記事のもくじです。 1. SEO対策基本 タイトルの適切なつけ方について 1-1. タイトル […]