WordPress テーマの適用方法【ワードプレス 無料 テンプレートキング】
WordPress テーマ の適用方法を説明していきます。ここでは、テンプレートキングというWordPressのテンプレートを無償配布しているサイトのテーマで説明していきます。 既成テーマ(テンプレート)を利用することで、自分で1からデザインしなくても綺麗なデザインのホームページを作ることができます。 (※)WordPressとは、個人ブログから企業のWebサイトまで、 […]
CATEGORY
Webサイト作成
無料 レンタルサーバー Xドメインで WordPressをインストールする手順
今回は、 無料 レンタルサーバー を提供しているXドメインでWordPressをインストールする設定する手順を記載します。 (※)そもそもWebサイト(ホームページ)の仕組みがイマイチわからないというかたは合わせて「初めての ホームページ 作成 手順 と 知っておきたい基礎知識」をご参照いただければと思います。 ※2016年10月24日時点での手順になります。 &nbs […]
初めての ホームページ 作成 手順 と 知っておきたい基礎知識【ドメイン サーバー】
初めての ホームページ 作成 手順 と 知っておきたい基礎知識をここでは説明します。 もくじ 以下は本記事のもくじです。 1. 初めての ホームページ 作成手順と概要 1-1. 概要 Webサイトの基本の仕組み 1-2. ドメインを取得する 1-3. レンタルサーバーを借りる 1-4. (補)FTPソフトのインストールする 1-5. HTMLファイルなどをアップロードする 2. まと […]
HTML CSS 擬似要素 と 擬似クラス を併用する【::before ::after :hover 】
HTMLやCSSでよく見かける 擬似要素(例. ::before ::after) と 擬似クラス(例. :hover ) が併用可能か調べてみました。 結論 :擬似クラス::擬似要素は動作する 例. :hover::afterは動作する ::擬似要素:擬似クラスは動作しない 例. ::after:hoverは動作しない もくじ 以下は本記事のもくじです。 […]
CSSによる 角丸 の枠や背景 の作り方【HTML CSS3 border-radius 円 】
今回は、CSSのプロパティ「border-radius」を使った、角丸の枠や背景(四角形の4角を丸くする)の作り方について紹介します。 border-radiusは、CSS3という規格で登場し、pxや%を使って四角形の４つの角を丸くする事ができ、円も作る事もできます。 もくじ 以下は本記事のもくじです。 1. border-radius 1-1. 概要 1-2. 基本的 […]
WordPress ログインやコメント時に 画像認証 を作成する【セキュリティ・スパム対策 プラグイン】
今回紹介するのは、「SI CAPTCHA Anti-Spam」というWordPressのプラグインで、ログイン画面やコメント投稿画面で「 画像認証 」を設置することができます。 画像認証という技術により、業者の悪意あるプログラムによるスパム攻撃を防ぐことができ、セキュリティを向上に貢献できます。 もくじ 以下は本記事のもくじです。 1. 画像認証とは 2. […]
WordPress ブログに ソースコード を埋め込む【プラグイン エディタ 表示 】
今回はブログ記事などのWebページに、 ソースコード を綺麗に表示するプラグイン「Crayon Syntax Highlighter」を紹介します。 本プラグインを利用することで、Sublime Textなどのようにエディタで表示しているかのようにWebページでソースコードを表示できます。 もくじ 以下は本記事のもくじです。 1.Crayon Syntax Highli […]
WordPress HTMLのエスケープ問題【CrayonSyntaxHighlighter preタグ】
Webページでソースコードを表示するプラグイン「Crayon Syntax Highlighter」で、HTMLのタグがエスケープ処理される問題について対応方法を紹介します。 ■現象 「Crayon Syntax Highlighter」はWebページでエディタ表示しているように表示するWordPressプラグインです。 もくじ 以下は本記事のもくじです。 1. Cra […]
HTML CSS 目次の作り方【ページ内リンク 階層構造】
今回は、HTMLで目次を作る方法を紹介します。 ホームページやブログなどで目次やページ内リンクをつけていると、訪問者に優しい記事になります。 また製作者側としても、目次と見出し・本文の構成を確認することで全体の整合性を確認しやすくなります。 もくじ 以下は本記事のもくじです。 1. 目次を作る 1-1. 簡単な目次を作る 1-2. ページ内リンクを設定する […]
CSSによる グラデーション の作成方法【CSS3 ジェネレーター ツール HTML】
ホームページやブログなどでボタンや背景に「 グラデーション 」を使いたいことは多いと思います。 今回はCSSだけでグラデーションを生成する便利なツール「Ultimate CSS Gradient Generator」を紹介します。 このツールを利用すると複雑なグラデーションを記述したCSSも簡単に自動生成してくれます。CSSなので重い画像のように表示速度が遅くなる恐れもありません。 […]
アメブロ メニューバーの作り方 【ameblo デザイン カスタマイズ】
アメブロ(ameblo)でオリジナルのデザインを自作してみましょう。 今回は、アメブロのPC用トップページに下記のように半透明でスクロールしても位置が固定して付いてくるオリジナルのメニューバーを出す作り方をご紹介します。 なお、下記のような標準タイプのメニューバーを作りたい場合は、アメブロ メニューバーの作り方 ２ 標準タイプ【 […]
アメブロ ヘッダー の作り方 【ameblo デザイン カスタマイズ 】
ここでは、アメブロ ヘッダー の作り方を紹介します。 アメブロ(ameblo)でオリジナルのデザインを自作してみましょう。今回は、カスタマイズ用CSSの適用とヘッダー作成(ヘッダー画像の追加、ブログタイトル・説明文の調整、タイトル位置の調整)をご紹介します。 ※2016年8月1日のアメブロ仕様での設定手順になります。 (参考)アメブロ カスタ […]
WordPress 複数サイトを管理するプラグイン【 JetPack 複数ドメイン管理】
今回は、WordPressで構築された複数のサイトを一つの画面から一元管理できるプラグインJetPackを紹介します。 一元管理機能を有効化するとWordPress.coｍ のサイトも含むシンプルなダッシュボードで、複数のWordPress サイトも更新できるようになります。 もくじ 以下は本記事のもくじです。 1.一元管理機能概要 1-1.イメージ図 1-2.概要説明 […]
SEO対策 パフォーマンス 向上【 評価・測定ツール PageSpeed Insights】
SEO対策のひとつに Webサイトの パフォーマンス(表示速度)向上施策があります。 Webサイトにアクセスして画面がなかなか表示されなくてストレスを感じた経験は誰もがあるのではないでしょうか。 今回は、検索エンジン最適化の一つ、パフォーマンス及び評価ツールについて紹介します。 もくじ 以下は本記事のもくじです。 1.SEO対策 […]
アメブロに twitterタイムライン を表示する【ameblo ツイッター 埋め込み】
twitterのタイムラインをアメブロに表示することで、アメブロユーザーからのtwitterフォローや集客アップを図れる可能性があります。 アメブロとtwitterアカウントがあれば簡単に設置できますので、今回はアメブロにTwitter のタイムラインを表示する手順を記載します。 ※2016年7月4日時点の手順になります。 もくじ 以下は本記事のもくじです […]
WordPressにtwitterタイムラインを表示する【ツイッター ウィジェット 埋め込み】
twitterのタイムラインをWordPressに表示することで、twitterフォローや集客アップを図れる可能性があります。 WordPressとtwitterアカウントがあれば簡単に設置できますので、今回はアメブロにTwitter のタイムラインを表示する手順を記載します。 ※2016年7月4日時点の手順になります。 もくじ 以下は本記事のもくじです。 1. twitterタイム […]
Xドメインで取得したドメインを Xサーバー に設定【xdomain xserver WordPress】
今回は、初めてXドメインとXサーバーを利用される方向けに、Xドメインで取得した独自ドメインをXサーバーに設定する手順を記載します。 (※)Xドメイン側での設定(ドメイン取得とネームサーバー設定)は「Xドメインで独自ドメイン取得とネームサーバー設定」をご参照ください。 ※2016年6月18日時点での手順になります。 もくじ 以下は本記事のもくじです。 1. […]
Xドメイン で独自ドメインを取得してネームサーバーに設定【xdomain 無料サーバー】
今回は、初めてXドメインでドメインを取得してネームサーバーを設定する方向けに、Xドメインで独自ドメインを取得する手順とネームサーバーへの設定手順を記載します。 ※2016年6月18日時点での手順になります。 もくじ 以下は本記事のもくじです。 1. はじめに 1-1. Xドメインとは 2. 設定手順と動作確認 2-1. 独自ドメインを取得する 2-2. ネームサーバーを […]
WordPress HTML サイトマップ を作成するプラグイン【PS Auto Sitemap】
WordPressで訪問者向けにサイトマップ(HTML サイトマップ )を作成できる「PS Auto Sitemap」というプラグインがあります。 上記のようにユーザー向けのサイトマップを作成することで訪問者が目的のページを探し易くなります。 今回は、PS Auto Sitemapの簡単な設置手順を記載します。 ※プラグインインストール前には、バックアップしておくことを推奨します。 […]
SEO対策 基本 サイトマップの作成方法【 XML HTMLサイトマップ 】
SEO対策の基本のひとつ、 サイトマップ 作成方法 を紹介します。今回は、特にWordPressでサイトマップを作成するプラグインを紹介します。 1. SEO対策 基本 サイトマップの作成方法 1-1. サイトマップとは 1-2. HTMLサイトマップ作成用プラグイン「PS Auto Sitemap」 1-3. XMLサイトマップ用プラグイン「Google XML Si […]