Web制作 アーカイブ - nyanblog ~にゃんぶろぐ~ https://nyanblog2222.com/category/webproduction/ ちょっとしたことを調べているよ Fri, 15 Nov 2024 06:32:33 +0000 ja hourly 1 https://wordpress.org/?v=6.7 https://nyanblog2222.com/wp-content/uploads/2021/09/cropped-favicon-32x32.png Web制作 アーカイブ - nyanblog ~にゃんぶろぐ~ https://nyanblog2222.com/category/webproduction/ 32 32 【初心者】JavaScriptでTODOリスト作り方【サンプル】 https://nyanblog2222.com/programming/5090/ https://nyanblog2222.com/programming/5090/#respond Thu, 09 Mar 2023 15:31:35 +0000 https://nyanblog2222.com/?p=5090 JavaScriptでTODOリストを作成しました。 シンプルでサンプル・解説ありなので、初心者のJavaScriptの勉強用に良かったら作成してみてください♪ 目次 はじめに実装内容（フロー）HTMLCSSJavaSc […]

投稿 【初心者】JavaScriptでTODOリスト作り方【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

JavaScriptでTODOリストを作成しました。

シンプルでサンプル・解説ありなので、初心者のJavaScriptの勉強用に良かったら作成してみてください♪

はじめに

まずはTODOリストの機能を考えます。
今回は以下の機能を持たせて実装しました。

簡単な機能しか実装していませんが、好みに応じてカスタマイズしてみてください。

  • タスクを追加、完了、削除
  • タスクをまとめて削除する

作成のイメージ図がこちらです。

実装内容（フロー）

次に箇条書きで処理フローを記述します。

  1. 変数を設定
  2. タスク追加ボタン押下時：
    1. タスク名の入力値チェック
    2. タスクに必要な要素を追加する
  3. チェックしたタスクを一括削除ボタン押下時：
    1. チェックしたタスクをを削除する
  4. 完了ボタン押下時：
    1. ボタンを押下したタスクを完了
  5. 削除ボタン押下時：
    1. ボタンを押下したタスクを削除
みみねこ
みみねこ

シンプルな機能だけ持たせています。
改善点は色々思い当たりますが、完了状態→タスク未完了状態に戻したりがありますね。

HTML

まずはHTMLを作成していきます。
作成しているのは、大きく以下の3つです。

  1. タイトル（TODOリスト）
  2. タスク名登録・タスク複数削除
  3. タスク一覧（完了・削除ボタン）
<body>
  <div class="wrapper">
    <h1 id="header">TODOリスト</h1>
    <div id="input-wrap">
      <input id="task-name" type="text" placeholder="タスク名を入力してください" />
      <button onclick="addTask()">タスクを追加</button>
      <button class="deleteTask-button" onclick="deleteTask()">チェックしたタスクを削除</button>
    </div>
    <div id="main-wrap">
      <form name="task_form">
        <ul id="todo-list"></ul>
      </form>
    </div>
  </div>
</body>

「タスクを追加」ボタンにクリックイベント”addTask()“
「チェックしたタスクを削除」ボタンにクリックイベント”deleteTask()“

を設定しています。

CSS

次にCSSでスタイルを決定します。
この辺りは好きなようにカスタマイズをしていただいて良いと思います！
※ 先にreset.cssを読み込んでからスタイルを設定していますので、注意してください。

特に記載するところはありませんが、
61行目「line-through」、87行目「disabled」はJavaScriptで「完了」ボタン押下時のイベントで使用するため、設定してください。

@charset "utf-8";

/*全体*/
.wrapper{
  max-width: 600px;
  margin: 0 auto;
  color: #666;
}
#header {
  text-align: center;
  font-size: 24px;
  width: 100%;
  margin: 1.5rem 0;
}
#main-wrap {
  margin-bottom: 1.5rem;
}

/* 入力 */
#input-wrap {
  margin: 0 auto;
  width: 80%;
}
#input-wrap input{
  width: 40%;
  height: 24px;
  margin-right: 1rem;
}

/* リスト */
#main-wrap {
  text-align: center;
  margin: 0 auto;
  width: 70%;
  min-height: 120px;
  border: 1px solid #aaa;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  padding: 0.8rem 2rem;
}

#main-wrap ul {
  padding-inline-start: 0
}

#main-wrap li {
  text-align: left;
  list-style-type: none;
  border-bottom: 1px dashed #aaa;
  padding: 0.8rem 0;
  display: flex;
  line-height: 32px;
}

#main-wrap p {
  width: 60%;
}
#main-wrap p.line-through {
  text-decoration: line-through;
}

/*ボタン*/
button{
  height: 32px;

  cursor: pointer;
  background: #B78D4A;
  color: #fff;
  border: 1px solid #B78D4A;
  border-radius: 4px;
  font-size: 1rem;
  padding: 0.2rem 1.5rem;
  margin-bottom: 0.5rem;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

button:hover{
  background-color: #D4BB92;
  border-color: #D4BB92;
}
button.disabled {
  background-color: #D4BB92;
  border-color: #D4BB92;
  cursor: not-allowed;
  pointer-events: none;
}

button.deleteTask-button {
  margin-bottom: 1.5rem;
}

.end-button, .delete-button {
  margin-bottom: 0;
  padding: 0.2rem 1rem;
}

.end-button {
  margin-right: 0.4rem;
}

JavaScript

JavaScriptのコードと解説をしていきます。

コード

次項で詳しく解説していますが、コメントでも多少記述しています。
コピペも可能です！

var todoList;
window.onload = function () {
  todoList = document.getElementById('todo-list');
}

// タスク追加
function addTask() {
  var taskName = document.getElementById('task-name');

  // タスク名の入力がなければ処理を終了
  if(taskName.value.Trim() == "") return;

  // liに要素を追加
  var li = document.createElement('li');

  // liにinputを追加
  var input = document.createElement('input');
  input.setAttribute('type', 'checkbox');
  input.setAttribute('name', 'task');
  li.appendChild(input);

  // liにpを追加
  var p = document.createElement('p');
  p.innerHTML = taskName.value;
  li.appendChild(p);

  // liにbuttonを追加
  var endButton = createTaskButton('end-button', '完了');
  li.appendChild(endButton);

  // liにbuttonを追加
  var deleteButton = createTaskButton('delete-button', '削除');
  li.appendChild(deleteButton);

  // ulにliを追加
  todoList.appendChild(li);

  taskName.value = "";

  // イベント処理
  // 完了ボタンクリック
  endButton.addEventListener('click', function(e){
    e.preventDefault();
    this.setAttribute('class', 'end-button disabled');
    this.previousElementSibling.setAttribute('class', 'line-through');
  });
  // 削除ボタンクリック
  deleteButton.addEventListener('click', function(e){
    e.preventDefault();
    todoList.removeChild(this.closest('li'));
  });
}

// チェックしたタスクを一括削除
function deleteTask() {
  var inputList = document.task_form.task;
  for(var i=inputList.length-1;i>=0;i--) {
    if(inputList[i].checked){
      todoList.removeChild(inputList[i].closest('li'));
    }
  }
}

// タスク内にあるボタンを作成
function createTaskButton(className, name) {
  var btn = document.createElement('button');
  btn.setAttribute('class', className);
  btn.innerHTML = name;
  return btn;
}

解説

先述したコードに対して細かく解説していきます！

・グローバル変数の定義・ページ読み込み後、変数にHTML要素を設定

var todoList;
window.onload = function () {
  todoList = document.getElementById('todo-list');
}

ページ読み込み後に<ul>のid’todo-list’を取得し、変数todoListに設定しています。

・タスク追加

function addTask() {
  var taskName = document.getElementById('task-name');

  // タスク名の入力がなければ処理を終了
  if(taskName.value.Trim() == "") return;

  // liに要素を追加
  var li = document.createElement('li');

  // liにinputを追加
  var input = document.createElement('input');
  input.setAttribute('type', 'checkbox');
  input.setAttribute('name', 'task');
  li.appendChild(input);

  // liにpを追加
  var p = document.createElement('p');
  p.innerHTML = taskName.value;
  li.appendChild(p);

  // liにbuttonを追加
  var endButton = createTaskButton('end-button', '完了');
  li.appendChild(endButton);

  // liにbuttonを追加
  var deleteButton = createTaskButton('delete-button', '削除');
  li.appendChild(deleteButton);

  // ulにliを追加
  todoList.appendChild(li);

  taskName.value = "";

  // イベント処理
  // のちほど説明のため省略
}

「タスクを追加」ボタン押下時のイベントを実装します。

var taskName = document.getElementById('task-name');

タスク名を入力する<input>のid’task-name’を取得し、変数taskNameに設定しています。

// タスク名の入力がなければ処理を終了
if(taskName.value.Trim() == "") return;

タスク名の入力値が空であれば処理を終了する。
Trim()は入力値の前後の空白を除きます。

// liに要素を追加
var li = document.createElement('li');

// liにinputを追加
var input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.setAttribute('name', 'task');
li.appendChild(input);

// liにpを追加
var p = document.createElement('p');
p.innerHTML = taskName.value;
li.appendChild(p);

// liにbuttonを追加
var endButton = createTaskButton('end-button', '完了');
li.appendChild(endButton);

// liにbuttonを追加
var deleteButton = createTaskButton('delete-button', '削除');
li.appendChild(deleteButton);

<li>の要素を作成します。<li>の中には以下の要素を作ります。

・チェックボックス
・タスク名
・完了ボタン
・削除ボタン

// ulにliを追加
todoList.appendChild(li);

作成した<li>を<ul>に追加します。

taskName.value = "";

入力欄をリセットするため、空文字（””）を設定します。

・完了ボタンクリック
endButton.addEventListener('click', function(e){
  e.preventDefault();
  this.setAttribute('class', 'end-button disabled');
  this.previousElementSibling.setAttribute('class', 'line-through');
});

各タスクの「完了」ボタンを実装します。

e.preventDefault();

こちらの関数はイベントのデフォルト動作をキャンセルします。

this.setAttribute('class', 'end-button disabled');

end_button[完了ボタン]にclass属性’end-button disabled‘を設定します。
disabledクラスはボタンを非活性するスタイルを設定します。

thisはendButtonを指します。

this.previousElementSibling.setAttribute('class', 'line-through');

タスク名<p>に取消線のクラス‘line-through’を設定します。

previousElementSibling：一つ前の要素。endButton[完了ボタン]の一つ前の要素<p>を指します。

・削除ボタンクリック
deleteButton.addEventListener('click', function(e){
  e.preventDefault();
  todoList.removeChild(this.closest('li'));
});

各タスクの「削除」ボタンを実装します。
※ e.preventDefault();は先ほど出てきたので省略

todo_list.removeChild(this.closest('li'));

タスクを削除します。

removeChild()：<ul>（todoList）の子要素を削除します。
this.closest(‘li’)：クリックしたボタンthis(deleteButton)の直近に存在する親要素、もしくは要素自身を返します。

・チェックしたタスクを一括削除：deleteTask()

function deleteTask() {
  var inputList = document.task_form.task;
  for(var i=inputList.length-1;i>=0;i--) {
    if(inputList[i].checked){
      todoList.removeChild(inputList[i].closest('li'));
    }
  }
}

「チェックしたタスクを削除」ボタン押下時に呼ばれる関数“deleteTask()”を作成します。
チェックしたタスクを一度に削除する処理を行います。

var inputList = document.task_form.task;

<form name=”task_form”>の中の<input name=”task”>を一覧で取得して変数inputListに設定しています。

“task_form”と”task”はname属性で指定した値です。

みみねこ
みみねこ

htmlファイルと見比べながら確認すると分かりやすいです。

// ①
for(var i=inputList.length-1;i>=0;i--) {
  // ②
  if(inputList[i].checked){
    // ③
    todo_list.removeChild(inputList[i].closest('li'));
  }
}

チェックしたタスク<li>を削除していきます。

①for文でinputListを後ろから一つずつ<input>を回し
②if文でチェックボックスでチェックしているか確認
※ チェックされているときはcheckedがtrue
③trueであればリスト（todoList）からliを削除
※ removeChildは「削除ボタンクリック」で開設済み

みみねこ
みみねこ

①で後ろからfor文を回している理由は、回しながらliを削除しているので
添字が変わってしまうことにより、チェックしているタスクが全て削除されなくなるというのを防いでいます。
※ ★このあたりは文章だと分かりずらいので、今後時間があれば図にするかもしれません…。

・タスク内にあるボタンを作成：createTaskButton(class_name, name)

function createTaskButton(className, name) {
  var btn = document.createElement('button');
  btn.setAttribute('class', className);
  btn.innerHTML = name;
  return btn;
}

タスクの「完了」「削除」ボタンを作成する関数です。

var btn = document.createElement('button');

<botton>の要素を作成します。

btn.setAttribute('class', className);
btn.innerHTML = name;

ボタンに属性classを設定、innerHTMLにボタンに表示する内容を設定します。

最後にボタン（要素）を返します。

デモ

こちらがデモページになります。

良かったら試してみてください♪

投稿 【初心者】JavaScriptでTODOリスト作り方【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/programming/5090/feed/ 0 【ファイル】UTF-8のBOM付き、BOM無しの違い・確認・作成について https://nyanblog2222.com/windows/4659/ https://nyanblog2222.com/windows/4659/#respond Fri, 15 Jul 2022 08:03:28 +0000 https://nyanblog2222.com/?p=4659 CSVファイルをExcelで確認すると文字化けすることはありませんか。それは文字コードがUTF-8のBOM無しで作成されているからかもしれません。 UTF-8とは文字コードの一種です。本記事ではUTF-8、UTF-16等 […]

投稿 【ファイル】UTF-8のBOM付き、BOM無しの違い・確認・作成について は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

CSVファイルをExcelで確認すると文字化けすることはありませんか。
それは文字コードがUTF-8のBOM無しで作成されているからかもしれません。

UTF-8とは文字コードの一種です。
本記事ではUTF-8、UTF-16等のファイルでBOM付き、BOM無しの違い、BOM有無の確認方法、作成方法についてご紹介させていただきます♪

BOM付き、無しの違いについて

まずBOMの話を進める前にUnicodeとUTF-8、UTF-16、UTF-32の話を少しします。

UnicodeとUTF-8、UTF-16、UTF-32とは

ここでは簡単に話をしますが、

Unicodeとは世界中の様々な文字を集めた定義（符号化文字集合）のことです。

UTF-8、UTF-16、UTF-32はUnicodeを符号化して文字コード（符号化方式）が設定された状態です。
要は番号が振られています。この番号の振り方が異なるのでUTF-8、UTF-16、UTF-32があります。

また、UTF-16とUTF-32にはコンピュータの構造によってエンディアン（バイトオーダー）方式が異なります。

BOMとは

BOMの説明に戻りますが、BOMというのはバイトオーダーマーク（byte order mark）といい、ファイルの先頭に付与されます。
※ メモ帳等のテキストエディタで開いて目視で確認することはできません。

このBOMの値を見てUTF-16、UTF-32エンディアンを判定します。

みみねこ
みみねこ

…ん？ということはもしかしてUTF-8にはBOMは必要ない？

UTF-8はエンディアン方式の違いはないので本来BOMは必要ありません。

しかし、アプリ（プログラム）によっては文字コードをUTF-8と判断できず、文字化け等の不具合を起こすことがあります。
※ Microsoftのアプリ（Excel、メモ帳）で多い

また逆にBOM付きを想定されていないアプリ（プログラム）では、不具合を起こす場合があります。
※ Webページの開発で使われるhtmlやPHPではBOM無しでないと動作しない場合がある

そのため、UTF-8ではBOM付き、BOM無しのファイルが存在します。

ファイルのBOM確認方法

ここではBOM有無の確認方法についてご紹介します。

Windowsに標準で入っているメモ帳で確認するのが一番簡単です。

メモ帳での確認方法

ファイルをメモ帳で開いたときに右下に文字コードが表示されます。

ただし、Windowsのバージョンによっては保存することで自動的にBOM付きのファイルで上書き保存してしまうことがあるので注意が必要です。

※ サクラエディタやTeraPadなど他のテキストエディタでも確認できるものもありますので、確認してみてください。

バイナリエディタでの確認方法

正直バイナリエディタで確認する必要はありませんが、どうしても文字コードを見て確認したい場合はバイナリエディタでBOMを確認することができます。

バイナリエディタでファイルを開き、先頭バイトが「EF BB BF」が付いているとBOM付きファイルであることを確認できます。

画像ではフリーソフトの「Stirling」を使っています。

BOM付き、BOM無しのファイルの作成方法

メモ帳での作成方法

メモ帳で「ファイル」→「名前を付けて保存」で画像の画面が表示されるので、画像下部の「エンコード」クリックで

・UTF-8
・UTF-8(BOM付き)

を選ぶことでBOM付き、BOM無しのファイルを作成することができます。

※ サクラエディタやTeraPadなど他のテキストエディタでも作成できるものもありますので、確認してみてください。

補足

先ほど少し出てきましたが、MicrosoftのExcelではBOM無しでは文字化けしてしまいます。

そのため、ファイルをExcelファイルで開いたとき、文字化けが起こっている場合はBOM無しであることを疑ってみてください。
※ ただし半角文字の場合、文字化けを起こさないこともあるので
　文字化けが起こらない ＝ BOM付き とは限らないので注意してください。

※ 別記事でExcelでBOM付きファイルを開く方法をご紹介する予定です。

まとめ

本記事ではUTF-8のファイルについての説明、BOM付き・BOM無しの確認や作成方法をご紹介しました。

アプリによってBOM付き、無しで動く、動かないが異なるので統一されるとファイルが扱いやすくなって良いですね！

投稿 【ファイル】UTF-8のBOM付き、BOM無しの違い・確認・作成について は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/windows/4659/feed/ 0 【被リンク獲得】なかじのみんブロ（みんなのブログランキング）に登録してみた！ https://nyanblog2222.com/webproduction/3800/ https://nyanblog2222.com/webproduction/3800/#respond Sat, 21 Aug 2021 08:32:12 +0000 https://nyanblog2222.com/?p=3800 今回は、ブロガー界隈の有名人なかじさんが運営を開始した、みんなのブログランキング（通称みんブロ）を紹介します。 目次 みんなのブログランキングとは（概要）登録方法被リンクについて良いところ・（人によっては）悪いところ参考 […]

投稿 【被リンク獲得】なかじのみんブロ（みんなのブログランキング）に登録してみた！ は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

今回は、ブロガー界隈の有名人なかじさんが運営を開始した、
みんなのブログランキング（通称みんブロ）を紹介します。

みんなのブログランキングとは（概要）

みんなのブログランキング（通称みんブロ） は、2021年8月12日から
ブロガー界隈で有名な、中島大介さん（通称なかじ）が運営しているランキングサイトです。

みんなのブログランキング | 初心者でも楽しめるブログランキング
初心者でも楽しめるブログランキング
blogrank.jp

なかじさんは株式会社メリル代表取締役で

  • Webサイトの運営
    ・子育て相談ドットコム
    ・SEOライティング実践講座
    ・アフィリノオト
  • コワーキングスペースの運営
  • YoutubeやVoicy等

をされている、その道10数年のWeb職のプロです。

みみねこ
みみねこ

なかじさんのyoutube「ウェブ職TV」は、ブロガーにとってとてもためになります！

今回ご紹介するみんブロは、

「初心者でも楽しめる」がテーマのブログランキングで、
従来の被リンクを中心としたドメインパワーに加えてドメイン取得日が新しいほど上位に表示される等、初心者に優しい独自アルゴリズムでランク付けされています。

登録すると、このようにランキングされてモチベーションアップなどに繋がり楽しいですよ♪

プログラミングブログランキングの表示

登録方法

・ユーザー登録・サイト登録

サイトにアクセスしたら右上のユーザー登録から登録

メールアドレス・もしくはtwitterでログイン

すると以下のメッセージが出てきますので、サイト登録をクリック

こちらにサイト登録をして、登録完了です♪

・登録情報の確認

登録できたら、マイページから確認できます。

こんな感じで表示されます♪

・追加登録

追加登録はマイページにカーソルを当てて、サイト登録からできます。

被リンクについて

被リンクはURLを他サイトにリンクしてもらうことで、
良質な被リンクはGoogleの上位表示に大きく影響を与えるといわれています。

なかじさんがyoutube上で公言されていますが、
みんブロはnofollow属性がついていないため、登録することで被リンク扱いされます。

ランキングサイト等、ブログ内容と直接関係のないサイトからの被リンクのSEO効果は
一般的にそれほど高くはないとは言われていますが、初心者のうちは非常にありがたい存在です。

みみねこ
みみねこ

ランキングに興味なくても、
被リンク対策として登録だけしておくのも有りですね♪

なお、過去に当ブログで被リンクを簡単に増やす方法をご紹介していますので、
良かったらそちらもみてください♪

【初心者ブロガー必見】誰でも簡単に被リンクを増やす方法【努力不要】
[ブログの被リンクの確実な増やし方] 被リンクを増やすには「良質な記事を書くこと」だけではありません！初心者ブロガーで人見知りの筆者が、実体験を元に、簡単な手続きで100%ブログの被リンクを作ることができる方法を紹介します。※超初心者でもOK♪
nyanblog2222.com
2020.12.20

良いところ・（人によっては）悪いところ

メリット

・簡単に被リンクが得られる
・モチベーションアップ
・同種のブログの研究

・簡単に被リンクが得られる
前述の通り非常に簡単に確実に被リンクが得られます。
これだけでも登録する価値があります♪

・モチベーションアップ
現在の立ち位置が分かるため、もっと上位に行きたい！という気持ちが出たり、
自分よりもブログを始めるのが早い人や遅い人と比べられるので
競争心によりモチベーションが上がりました！

・同種のブログの研究
カテゴリ毎にランキングがあるので、ブログ研究が捗ります。
例えば、他のTips系ブログがどのようなデザインやアフィリエイト商材を使っているかなど気になっていたため、非常に参考になりました。

みみねこ
みみねこ

楽しいし、お得です！

デメリット

・ランキングが下がることによるモチベーションダウン

・ランキングが下がることによるモチベーションダウン
現在、みんブロは登録者数が急上昇しています。
なので当初はランキング上位でも、
登録者の絶対数が増え続けているため、当分の間は徐々にランキングが下がっていきます。

なので、ランキング順位だけを見てしまうと
相対的にサイトの価値が下がっていっているように見えるため
人によってはモチベーションダウンに繋がってしまうかもしれません。

みみねこ
みみねこ

登録者数の増加が落ち着くまでの間は、
ランキングの上位○％という見方がおすすめです

参考：なかじさんのみんブロの説明

参考として、なかじさんのみんブロ説明リンクを付けておきますね。

・ブログ初心者でも楽しめる”みんなのブログランキング”に込めた想い

ブログ初心者でも楽しめる"みんなのブログランキング"に込めた想い｜中島大介 / なかじ
こんにちは、なかじ(@ds_nakajima)です。 さっきリリースした「みんなのブログランキング」というブロガー向けの新サービスについて話したいことがあります。 みんなのブログランキング | 初心者でも楽しめるブログランキング 初心者でも...
note.com

・【新サービス公開！】みんなのブログランキングに込めた想い

・ブログ初心者がみんブロ(みんなのブログランキング)を使うメリット

みみねこ
みみねこ

みんブロ、被リンクがつくだけでも登録する価値ありですね！

個人的にはドメイン取得日と絡めて他の人と比べれるのが面白いな～と思いました♪

投稿 【被リンク獲得】なかじのみんブロ（みんなのブログランキング）に登録してみた！ は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/3800/feed/ 0 【WordPress】サイトにデモページを貼りたい！【作り方】 https://nyanblog2222.com/webproduction/wordpress/1157/ https://nyanblog2222.com/webproduction/wordpress/1157/#respond Wed, 11 Aug 2021 23:32:33 +0000 https://nyanblog2222.com/?p=1157 プログラミング言語やWordPressやら、動きを確認するデモページを別ページで表示させているサイトありますよね！ 今回デモページを作成するにあたり、方法を調べたので大きく3つの手順でご紹介します♪ 目次 デモページの用 […]

投稿 【WordPress】サイトにデモページを貼りたい！【作り方】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

プログラミング言語やWordPressやら、動きを確認するデモページを
別ページで表示させているサイトありますよね！

今回デモページを作成するにあたり、方法を調べたので大きく3つの手順でご紹介します♪

デモページの作成手順

１．デモページを作成

２．作成したフォルダごと「ドメイン」直下、もしくは「ドメイン/wordpress」直下にあげる

３．記事にリンクを張り付ける

デモページの用意

まずはデモページを準備します。

フォルダを用意し、その中にデモページのファイルを準備します。

demo1フォルダに
　js/script.js
　css/style.css
　index.html
を準備してみてください。

試しなのでindex.htmlだけでも大丈夫です。

分かりやすく、画像にしてみました！

デモページのファイル構成

デモページのサンプル

試しにやってみたいという方は
こちらのコードをコピーして使用してください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>デモサンプル</title>
    <meta name="viewport" content="width=device-wisth,initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <!--[if lt IE 9]>
<script type="text/javascript" src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
    <link rel="stylesheet" href="css/style.css">
    <script src="js/script.js"></script>
</head>
<body>
    <div>
        <p>デモサンプルです。</p>
        <p>表示させてみましょう！</p>
    </div>
</body>
</html>

style.css

@charset "utf-8";
p {
    // テキストを中央配置
    text-align: center;
}

script.js

window.onload = function() {
    // コンソール画面に"hello world!!"を表示
    console.log("hello world!!")
}

サーバにファイルをアップする

今回サーバへのファイルアップロードにはffftpのソフトを使用しています。

アップロードができれば、どのソフトを使用してもOKですし、
サーバ会社の管理画面よりファイルをアップしても問題ありません！

デモを配置する親フォルダを作成

デモを配置する親フォルダをWordPressがインストールされているフォルダ直下に作成します。

画像で表示されているフォルダやファイルを参考に場所を見つけてください。

初期設定にもよりますが、ドメイン直下もしくはWordPressフォルダ直下にあることが多いです。

また、「wp-admin」「wp-content」「wp-includes」のフォルダや
「.htaccess」「index.php」のファイルがあるフォルダと考えると見つけやすいです。

demoフォルダ作成

今回は「demo」というフォルダを作成しています。

親フォルダにデモファイル一式をアップロードする

続いて、先ほど作成した「demo」フォルダに「demo1」フォルダ毎アップロードします。

demo1フォルダ作成

「demo」フォルダに複数のデモが格納されるイメージです。

デモの配置イメージ

デモページの表示

先ほどアップロードしたデモページをさっそく確認してみましょう。

デモページのリンクの貼り方

htmlに実際にリンクを貼ってみましょう。

「リンク」をクリックし、URLを設定します。

URLは
https://[ドメイン]/[デモの親フォルダ]/[デモのフォルダ]/
のように設定してください。
※ 例：https://nyanblog2222.com/demo/demo1/

デモページのリンクの設定

デモページの確認

こちらのページから先ほど設定したデモページを確認することができます。

デモページ

まとめ

いかがでしたでしょうか。

簡単に作ることができますが、
デモページのファイルをどこに置けばいいのか悩んだので今回は記事にしてみました。

一度親フォルダを作成しておけば
次からも同じように3つの手順でデモページを引き続き作成することができます。

デモページの作成手順

１．デモページを作成

２．作成したフォルダごと「ドメイン」直下、もしくは「ドメイン/wordpress」直下にあげる

３．記事にリンクを張り付ける

良かったら参考にしていただければ嬉しいです！

最後までご覧いただき、ありがとうございました♪

投稿 【WordPress】サイトにデモページを貼りたい！【作り方】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/wordpress/1157/feed/ 0 【体験談】２年半リトルサーバーを使ってみた【WordPress】 https://nyanblog2222.com/webproduction/3442/ https://nyanblog2222.com/webproduction/3442/#respond Tue, 13 Jul 2021 12:27:11 +0000 https://nyanblog2222.com/?p=3442 今回は、リトルサーバー「リトルプラン」を２年半使用した体験談（現在も利用中）や、他社との比較等を紹介します。 目次 リトルサーバーとは優れているポイント価格・性能面から他サーバーとの比較実際に使ってみた感想良いところ　格 […]

投稿 【体験談】２年半リトルサーバーを使ってみた【WordPress】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

今回は、リトルサーバー「リトルプラン」を２年半使用した体験談（現在も利用中）や、
他社との比較等を紹介します。

リトルサーバーとは

リトルサーバーは、驚異的な低価格と、平均以上の性能を備えた
コストパフォーマンスを徹底追及したレンタルサーバーです。

優れているポイント

公式のおすすめポイントより、
私がWordPressサイトを運営する上で良いと思うものを抜粋してみました！

  • 高速化設定＋SSD採用＋http/2の軽快サーバー
  • WordPressが使え、最短ワンクリック「超簡単インストール」に対応
  • 月額料金は150円～430円（公式おすすめプランは250円）
  • 20日間の無料お試し期間あり
  • シンプルなコンパネで簡単に設定が可能
  • 独自ドメインが無制限で設定可能
  • 独自SSLが完全無料で利用可能
  • 自動バックアップも標準搭載！
    毎日自動でデータのバックアップを7世代まで取得、復元は無料

価格・性能面から他サーバーとの比較

公式に書かれている性能表から、
他の低価格レンタルサーバーと比べると以下の通りとなりました。

・比較するレンタルサーバー、プラン

レンタルサーバプラン
さくらのレンタルサーバスタンダード
ColorfulBoxBOX1
ロリポップスタンダード
コアサーバーCORE-MINI
リトルサーバーリトルプラン

・比較結果
金額面では、コアサーバ・リトルサーバー、
性能面では、ColorfulBox・リトルサーバーが優秀！

このことから、
リトルサーバーが格安サーバの中ではコスト・性能面の両方で最も優れていることが分かりますね♪
比較内容の詳細は以下を参照ください。

コスパ最高！WordPress可の低価格帯レンタルサーバ比較
今回はWordPress可の低価格帯レンタルサーバをご紹介します。レンタルサーバとは、その名の通りサーバを貸し出すサービスです。Webサイトをお店に例えると、土地は「レンタルサーバ」、お店作成ツールが「WordPress」、お店にたどり着くための住所が「ドメイン」といったところでしょうか。今回はWordP...
nyanblog2222.com
2020.05.04

逆に他より劣っている点は、やはりマイナーで使用しているユーザーが少ないところでしょう。

本当に使って問題ないのかな……？

と気になる方も多いと思いますので、私が実際に２年半使ってみた感想を次から紹介します♪

実際に使ってみた感想

結論から言うと、安かろう悪かろうの部分はありますが、ほぼ問題なく使えています。
早くて安いので、ある程度リスクを許容できるのであれば、とてもコスパ良いです！

良いところ　格安なのに高性能！

金銭面

私は「リトルプラン」を年間契約していますが、
価格面はとても優秀で、3300円／年以上取られることはありません。
更新も自動更新にしていますが何不自由なく更新できました。
領収書もお願いしたらもらえます。
（連絡すると自動で受け取ることも可）

性能面

・WordPressインストールなど設定面
コントロールパネルから簡単にインストールや設定ができます。

・速度
閲覧していて全く違和感のない速度です。
本サイトは現在でもリトルサーバーを使用しているため、体感できるかと思います。

・容量等
全く気にしなくていい程度には大容量で、特に不自由はありません。

障害やメンテナンス、サポート体制について

２年間の間で障害は、すべてのサーバー（３つ）で合わせて６回起きており、
１時間程で収束しています。
対策していても障害は稀に起きることなので、支障がないレベルかと思います。

メンテナンスについては、
平日の深夜に実施されるため、あまり気になることはありません。

サポートについては、問い合わせフォーム起点でのメールサポートのみですが、
平日休日問わず、30分以内に返信が来ますのでストレスはありません。
回答は真摯で的確な印象です。

悪いところ　トラブルが稀にあり

とにかく格安で高性能なのですが、一部安かろう悪かろうの部分もあります。

発生したトラブル

格安なのである程度は仕方がないですが、この２年間で以下のような問題が生じました。

一応、問い合わせすることですべて解決できましたが、
気になる方は多いかもしれません。

・PHPのモジュール版を使うとサイトへのアクセスエラーが起きた
→問い合わせしたところ、速度に遜色のないFastCGIを勧められ、使用することになりました。

【Wordpress】「このサイトにアクセスできません　接続がリセットされました」
そのエラー、PHPの設定かもしれません！Wordpress管理画面やWebサイトにアクセスする際に「このサイトにアクセスできません　接続がリセットされました」というエラーが頻繁に発生する際の対処方法を紹介します♪
nyanblog2222.com
2020.06.17

・Bingウェブマスターツールに登録できなかった
→問い合わせしたところ、いろいろと試してもらい、登録できるようになりました。
　担当者が言うには、偶然直ったためなぜ直ったのかわからないようでした。

・突然の障害に巻き込まれて、ブログが見れなくなった
　→問い合わせしたところ、すぐ直してもらえました。

物足りないところ

・サーバーが冗長化されていない
障害やメンテナンスがある際はサイトが使えなくなります。

最後に

以上、メリットやデメリット等紹介しましたが、
結論、稀にあるトラブルを許容できれば、コスト・性能面の両方で優れたサーバーです！

ちなみに個人でWordPressサイトを運営するなら、
WordPress高速化が使える「ワードプラン」と「リトルプラン」がおすすめです♪

投稿 【体験談】２年半リトルサーバーを使ってみた【WordPress】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/3442/feed/ 0 【収益公開】IT系ブログ1日100PV/月間3000PV達成!【初心者ブロガー】 https://nyanblog2222.com/webproduction/3230/ https://nyanblog2222.com/webproduction/3230/#respond Sat, 13 Mar 2021 14:35:46 +0000 https://nyanblog2222.com/?p=3230 先日、当ブログで1日100PV/月間3000PVを達成しました！初心者ブロガーのリアルな実情（収益・PV・記事数）や、現在のPVに達するためにした工夫、IT系ブログ（Tipsメイン）のPV・収益事情等を紹介します♪ 目次 […]

投稿 【収益公開】IT系ブログ1日100PV/月間3000PV達成!【初心者ブロガー】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

先日、当ブログで1日100PV/月間3000PVを達成しました！
初心者ブロガーのリアルな実情（収益・PV・記事数）や、
現在のPVに達するためにした工夫、
IT系ブログ（Tipsメイン）のPV・収益事情等を紹介します♪

収益・PV・記事数

当ブログでは、
約10か月・97記事で、1日100PV/月間3000PVを達成しました！

※PV数や収益の実数は公開してはならないとされているため、おおよそです。

年月記事数PV数（おおよそ）収益（おおよそ）
2020年4月41000
2020年5月242000
2020年6月23300100
2020年7月101000
2020年8月12400100
2020年9月113000
2020年10月24000
2020年11月3800100
2020年12月32,000400
2021年1月53,500200
2021年2月45,5001500

2020年4月にドメイン取得・ブログを作成し、
2020年6月にGoogle AdSense合格で収益化、
2021年1月に1日100PV/月間3000PVを達成しました。
現在2021年3月ですが、2月では1月のPV数を大きく超えています。

2020年10月から私生活の変化から記事投稿数が激減していますが、
この時期から逆にPV数が徐々に上昇していっています。

PVが上昇した主な理由としては、以下が考えられます。
・ドメインパワー上昇
　ブログを運用し始めて半年以上たったため、Googleに評価され始めた
・上位表示を意識した記事の投稿
　2020年9~10月頃から、どういった内容の記事が上位表示されるのか初心者なりに分かり始めたため、上位表示を意識した記事タイトルや内容にした

現在のPVはブロガーの中ではどんな立ち位置か

「1日100PV/月間3000PV」は、
ブロガーの中でどのような立ち位置なのか調べてみました。

月間10万PV以上：[中級]トップアマ
月間3万PV以上：[中級]アマチュア
月間1万PV以上：[中級]ノービス
月間3000PV以上：[初級]脱ビギナー
月間3000PV未満：[初級]ビギナー

ブログ部：PV数でわかるブロガー番付｜あなたのブログはどのレベル？

すると、ブログ部様でブロガー番付というのをやっていまして、それによると、
[初級]脱ビギナーとのことでした！
まだまだこれからですね（笑）

これからは、月間1万PV以上：[中級]ノービスを目標に頑張っていきます♪

現在のPVに達するためにした工夫

PVを増やすために色々やってみましたが、効果があったものを紹介します。

・キーワード選定をしてタイトル、メタディレクションの決定
こちら２つのサイトでキーワードの検索数を見て、
1日10~100PV程度の検索数を持つキーワードをタイトル、メタディレクションに入れました。
現在、アクセス数の高いページはほとんどがこれを意識した記事で、
それなりに効果を実感しています。
Google 広告：キーワードプランナー
Ubersuggest

・Google Analyticsの活用
現在のドメインパワーでも、伸びている記事の傾向を掴むために、
日々確認して、どのような記事を書けば伸びるか知ることができました。
Google Analytics

・被リンク対策
どこまでドメインパワーの向上に意味があったかは分かりませんが、
被リンク取得に努め、着実に増やすことができました。

【初心者ブロガー必見】誰でも簡単に被リンクを増やす方法【努力不要】
[ブログの被リンクの確実な増やし方] 被リンクを増やすには「良質な記事を書くこと」だけではありません！初心者ブロガーで人見知りの筆者が、実体験を元に、簡単な手続きで100%ブログの被リンクを作ることができる方法を紹介します。※超初心者でもOK♪
nyanblog2222.com
2020.12.20

・Bing Webmaster Toolsへの登録
盲点でしたが、恐らくBingはドメインパワーを重要視していないので、
Bing Webmaster Toolsへ登録することで、初心者でもBingだと上位表示できることが分かりました。
現在では、全体のアクセスの1~2割がBingから来ています。
Bing Webmaster Tools

IT系ブログのPV・収益事情

当ブログのPV・収益事情は次のようになりました。

前提として、当ブログはIT系ブログ（Tipsメイン）なので、
基本的に、勤務中に分からないことを調べて来訪されるケースが多いです。

・平日と土日祝で偏りあり

基本的に、平日と比べ土日祝は半減します。

・安定的に集客できる

トレンドブログと異なり、
記事の消費期限が長く、更新頻度が低くても安定してPVが得られます。
当ブログでは、最近月3、4記事程度しか更新できていませんが、
記事を書かなくてもPVは減りません。
逆に書いてもそんなに急激に増えませんが、徐々には増えますので、
ストック型収入としては優秀かと思っています。

投稿 【収益公開】IT系ブログ1日100PV/月間3000PV達成!【初心者ブロガー】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/3230/feed/ 0 【初心者ブロガー必見】誰でも簡単に被リンクを増やす方法【努力不要】 https://nyanblog2222.com/webproduction/2716/ https://nyanblog2222.com/webproduction/2716/#respond Sat, 19 Dec 2020 23:57:47 +0000 https://nyanblog2222.com/?p=2716 今回は初心者ブロガーで人見知りの筆者が、 実体験を元に、簡単な手続きで100%被リンクを作ることができる方法を紹介します。 ※超初心者向けです！ 目次 被リンクとは？紹介する方法について誰でも簡単に被リンクを増やす方法は […]

投稿 【初心者ブロガー必見】誰でも簡単に被リンクを増やす方法【努力不要】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

今回は初心者ブロガーで人見知りの筆者が、
実体験を元に、簡単な手続きで100%被リンクを作ることができる方法を紹介します。
※超初心者向けです！

被リンクとは？紹介する方法について

被リンクはURLを他サイトにリンクしてもらうことです。
良質な被リンクはGoogleの上位表示に大きく影響を与えるといわれています。

被リンクを増やす最も効果的な方法は「良質な記事を書くこと」だといわれています。
ただし、ブログを始めたてだと、
そもそも読者がおらず検索サイトからの自然流入もないため、ほとんど見られることはありません。

かといって、SNSでブログ仲間を作って相互リンクしたり、他者のブログに寄稿することでリンクを載せてもらったりと、
被リンクを得るには他人と関わる必要があり、一定以上の積極性とコミュニケーション能力が求められます。
これはネット環境とはいえ、筆者のような人見知りにとって中々つらいところです。。

そこで今回紹介する方法は、
・記事の良し悪しが影響しない
・ブログ開設直後から実現でき、サイトのパワーランクに依存しない
・人と一切関わる必要がない
・一昔前の被リンクサイトのような、悪質な被リンクでない
・簡単な手続きを実践するだけで100%被リンク獲得
といった、本当に誰でも実現できる方法です。

もちろん、Google Search Consoleの被リンク認定もされる方法になります♪

誰でも簡単に被リンクを増やす方法

筆者が実際に被リンクを得られた方法として以下があります。

  1. はてなブックマーク
  2. サブサイトとの相互リンク
  3. SNS
  4. 人気ブログランキング

Google Search Consoleでも①～④の通り、被リンク認定されています。
（このブログの被リンクはほぼ上記方法で入手しています……。悲）

サチコ

はてなブックマーク

はてなブックマークは日本最大のブックマーク共有サイトです。

当サイトでも以下のようにボタンを設置していますが、
サイトの記事をブックマークすることで、記事に対する被リンクを得ることができます。

はてなブックマーク

サブサイトとの相互リンク

相互リンクはガイドライン違反（悪質なリンク）と思われがちですが、
読者にとってリンクする価値のあるものである場合は良質なリンクと判断されるようです。

なので複数サイトを運営しており、読者にとってリンクする価値のあるものである場合
（例えば、プログラミング言語が中心のサイトと、ＩＴを中心とした雑記ブログ等）
は、サブサイトと相互リンクをかけることができます。

もし、複数ブログを運営している場合はリンクしてみてください。
無料ブログからのリンクも、被リンク扱いされますよ。

ただ、無料ブログを大量に作って、いくつもリンクするのは作為的と判断され、
逆効果なのでご注意ください。
あくまで読者にとって意味のあるリンクであるかがポイントです。

SNS

皆さんご存知でしょうが、SNSとはWeb上のコミュニティサービスです。
当ブログでも更新情報発信のためにTwitterを利用しています。
みみねこ（@nyanpro2222）

そこでは、当ブログのリンクをつけたツイートを更新のたびにしていますが、
基本的にSNSはnofollow属性がついており、リンクを張っても被リンク扱いされません。

ただ、SNSでツイートした内容を拾ってくれるサイトがあります。
Twitterの場合、そのサイトがmeyou[ミーユー]というサイトです。

また、現状nofollow属性がついていないSNSもあります！
それが、ピンタレスト：Pinterestというサイトです。
Instagramのような画像を中心としたSNSで、
Webサイトの画像をブックマークとして保存することで被リンクを得ることができます。

目を引く画像であればブックマークされやすいため、
アイキャッチにこだわっているサイトであれば是非登録することをおすすめします。

人気ブログランキング

ブログランキングとは、その名の通りブログを人気投票するランキングサイトです。

ブログランキングでは、
人気ブログランキングというサイトでのみ、被リンクが可能です。

当ブログではほかに、FC2ブログランキングとブログ村ランキングに参加していますが、
Google Search Consoleを見ると、こちらは特に被リンク扱いではないようです。
（初めに貼ったGoogle Search Consoleの被リンク画像にある、
fc2.comはFC2ブログランキングからの被リンクではありません）

投稿 【初心者ブロガー必見】誰でも簡単に被リンクを増やす方法【努力不要】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/2716/feed/ 0 【最も安いサイトは？】ドメイン提供サイト比較！【.com/.net/.jp/.co.jp】 https://nyanblog2222.com/web-all/64/ https://nyanblog2222.com/web-all/64/#respond Fri, 11 Sep 2020 08:00:00 +0000 https://nyanblog2222.com/?p=64 ドメインが取得できる提供サイトを比較し、最も安いサイトを紹介します！（2020年9月11日時点） 今回はこちらのサイトを比較しました。お名前.com、ムームードメイン、バリュードメイン、スタードメイン、ゴンベエドメイン、 […]

投稿 【最も安いサイトは？】ドメイン提供サイト比較！【.com/.net/.jp/.co.jp】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

ドメインが取得できる提供サイトを比較し、最も安いサイトを紹介します！（2020年9月11日時点）

今回はこちらのサイトを比較しました。
お名前.com、ムームードメイン、バリュードメイン、スタードメイン、ゴンベエドメイン、FC2、エックスドメイン

合わせてドメインについての基本知識も紹介していますのでよかったらそちらもどうぞ♪

ドメインについての基本知識

独自ドメインとは？サブドメインやサブディレクトリとの違い

ドメインとはインターネット上の住所のようなもので、主に３つの種類に分かれます。

ドメインの種類

ドメインの種類が何であってもSEO評価は変わりませんので、レンタルサーバーを借用するときについてくる無料のサブドメインなどを使ってもいいような気がしてしまいますが、Webサイトを作るのであれば、基本的には独自ドメイン（もしくは購入した独自ドメインに紐づくサブドメインやサブディレクトリ）を使うのを推奨します。
その理由としては、レンタルサーバーの閉鎖やサーバ移行の際ドメインが使えなくなる可能性があるためです。長くサイト運営していればドメインにSEO評価がついてきますが（ドメインパワー）、こちらが失われてしまうと新しくドメインを付けた際、一気に集客率が落ちるのは間違いありません。

「.com」「.net」など、どんな独自ドメインがおすすめ？

おすすめは「.com」「.net」です！　その理由は次項より説明します。

独自ドメインによってSEO評価は変わる？

どの独自ドメインを使用してもSEO評価は変わりません。

ドメインの中でも代表的な「.com」や「.net」を選んでも、比較的マイナーな「.xyz」を選んでも独自ドメインであれば全て同じです。
そのため、あえて代表的な独自ドメインを選ばず、Webサイトの個性をドメインで表現するサイトもあります。
例）ランニングがメインのサイトであれば「.run」や、恋愛指南サイトであれば「.love」等

ただ、ドメインによって閲覧者に与えるイメージが変わりますので、こだわりがなければ代表的な独自ドメインを使うことが望ましいです。
例えば「.com」や「.net」でしたらよく目にするドメインなので、初めて開くサイトでも安心して利用することができますよね。
これらを踏まえて、今回は代表的な独自ドメインをいくつか紹介します！

代表的な独自ドメイン

.com　[人気No1]
商用サービスを対象としたドメイン。用途制限なし。
.net 　[人気No2]
ネットワークを意味するドメイン。用途制限なし。
.jp
日本を表すドメイン。日本限定。
.co.jp
日本の会社を表すドメイン。※日本企業限定

この中でも人気が高く値段が安いのが「.com」や「.net」になるため、当サイトではおすすめしています♪

ドメイン提供サイト比較

独自ドメインを取得するための提供サイトを比較します。
サイトを比較する際は、初年度の登録料と２年目以降の更新料に注目します。
比較した提供サイト：お名前.com、ムームードメイン、バリュードメイン、スタードメイン、ゴンベエドメイン、FC2、エックスドメイン

ドメイン提供サイト比較

続いて年を重ねる毎に合計いくらかかるかを比較します。
比較するドメインは「.com」「.net」で、比較サイトはそれぞれ初年度登録料、もしくは２年目以降の更新料が安い「お名前.com」「FC2」「エックスドメイン」の３社です。

年毎の比較

この表から以下のことが分かります。
・「.com」「.net」では、「.com」が安価であること
・１年目は「お名前.com」、２年目以降は「エックスドメイン」が最も安いです。
・１年目の「お名前.com」と「エックスドメイン」の価格を比較すると、20円しか変わらないためほぼ誤差

以上から、安さで選ぶのであれば「エックスドメイン」で「.com」のドメインを取得することがおすすめです♪

なお、スターサーバーを使用されている方のみ、スタードメインがおすすめです。なぜなら、サーバーのレンタル費用減額に使用できるポイント（ドメイン費用の1/4程度）が別途つくためです。

以上、こちらの記事で「レンタルサーバ会社の比較」についてもご紹介してますので、そちらも参考にしてくださいね！

コスパ最高！WordPress可の低価格帯レンタルサーバ比較
今回はWordPress可の低価格帯レンタルサーバをご紹介します。レンタルサーバとは、その名の通りサーバを貸し出すサービスです。Webサイトをお店に例えると、土地は「レンタルサーバ」、お店作成ツールが「WordPress」、お店にたどり着くための住所が「ドメイン」といったところでしょうか。今回はWordP...
nyanblog2222.com
2020.05.04

投稿 【最も安いサイトは？】ドメイン提供サイト比較！【.com/.net/.jp/.co.jp】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/web-all/64/feed/ 0 【Webサイト運営】Google AdSense合格まで【体験談】 https://nyanblog2222.com/web-all/1792/ https://nyanblog2222.com/web-all/1792/#respond Fri, 24 Jul 2020 00:30:00 +0000 https://nyanblog2222.com/?p=1792 コロナの影響で長引きましたが、先日なんとかGoogle AdSenseに合格しましたので、体験談を紹介します。これからGoogle AdSense審査を行う方や、不合格で行き詰っている方、良かったら参考にしてください。 […]

投稿 【Webサイト運営】Google AdSense合格まで【体験談】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

コロナの影響で長引きましたが、先日なんとかGoogle AdSenseに合格しましたので、体験談を紹介します。
これからGoogle AdSense審査を行う方や、不合格で行き詰っている方、良かったら参考にしてください。

ちなみに7回目での申請で合格することができました。
期間でサイト作成から1か月半程度ですね。

「1回目 4月27日」価値の低い広告枠

申込日 4月25日
審査日 4月27日
記事数 2
結果 不合格
「価値の低い広告枠」
特記事項 特になし。サイト作成直後に申請

「2回目 5月5日」コロナウイルスの影響で審査出来ません

申込日4月28日
審査日5月5日
記事数10
結果不合格
「コロナウイルスの影響で審査出来ません」
特記事項・1記事1000文字以上
・週5日以上更新
・adsenceコードの貼り付け位置を上部に移動
・お問い合わせページ設置
・プライバシーポリシーページ設置
・サイトマップを作成し、GoogleSearchConsoleへ登録

「3回目 5月9日」コロナウイルスの影響で審査出来ません

申込日5月5日
審査日5月9日
記事数13
結果不合格
「コロナウイルスの影響で審査出来ません」
特記事項・「YoastSEO」プラグインを導入
・ページ下部に「関連記事」を追加
・パーマリンク構成変更
→「5月\cmd001」から「cmd\001」
※Google検索結果に古いURLが残ってしまうため、リンクエラーが生じる要因となりました。。注意。

「4回目 5月21日」コロナウイルスの影響で審査出来ません

申込日5月20日
審査日5月21日
記事数23
結果不合格
「コロナウイルスの影響で審査出来ません」
特記事項・ページ右側に「プロフィール」を追加

「5回目 5月30日」コロナウイルスの影響で審査出来ません

申込日5月28日
審査日5月30日
記事数28
結果不合格
「コロナウイルスの影響で審査出来ません」
特記事項・ページ下部に「パンくずリスト」を追加（AdSense合格後、上部に移行）
・GoogleSearchConsoleのカバレッジでエラーが1件あったため、インデックス登録リクエストで解決
・SNS（Twitter）開始

「6回目 6月6日」価値の低い広告枠

申込日6月2日
審査日6月6日
記事数35
結果不合格
「価値の低い広告枠」
特記事項・GoogleSearchConsoleのカバレッジで除外が複数あったため、リンクに問題のないものについてはインデックス登録リクエストした

「7回目 6月14日」合格

合格！
申込日6月10日
審査日6月14日
記事数40
結果合格
特記事項・何回もGoogle AdSenseの申請しているため、URLが変わったらもしかしたら……と思い、Google AdSenseの申請時「https\\nyan~」だったものを「http\\nyan~」で申請した。
・アクセス不安定を解決
【Webサイト運営】「このサイトにアクセスできません」エラーの対処方法

Google AdSenseに合格する方法について（所感）

様々なことを試したので何が良かったのか分からず所感となりますが、
基本的に特記事項に書いた内容を全てすれば、合格できるようです。

他サイトのAdSense合格体験談も参考に、合格する方法を書くと、

  • 3記事以上
  • 1記事1000文字以上
  • 週1日以上更新
  • お問い合わせページ、プライバシーポリシーページ設置
  • ページに「関連記事」、「プロフィール」、「パンくずリスト」を設置
  • サイトマップを作成し、GoogleSearchConsoleへ登録
  • GoogleSearchConsoleのカバレッジでエラーがあれば、
    インデックス登録リクエストで解決する
  • 不合格が続いている場合はAdSense申請のURLを変えてみる。
    例：Google AdSenseの申請時「https\nyan~」だったものを「http\nyan~」で申請
  • サイトの致命的な箇所があればなくす
    例：アクセス不安定を解決

また、AdSense申請して不合格となったら２週間まってから申請した方がいい、
と書かれているサイトもありましたが

合格できましたので、待たなくてもよさそうです。

投稿 【Webサイト運営】Google AdSense合格まで【体験談】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/web-all/1792/feed/ 0 【WordPress】「このサイトにアクセスできません　接続がリセットされました」 https://nyanblog2222.com/web-all/1308/ https://nyanblog2222.com/web-all/1308/#respond Wed, 17 Jun 2020 09:00:00 +0000 https://nyanblog2222.com/?p=1308 こんにちは。レンタルサーバー仮登録時から先日まで、WordPress管理画面及びWebサイトにアクセスする際に「このサイトにアクセスできません」 というエラーが頻繁に発生しており困っていましたが、対処方法がやっと分かりま […]

投稿 【WordPress】「このサイトにアクセスできません　接続がリセットされました」 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

こんにちは。レンタルサーバー仮登録時から先日まで、WordPress管理画面及びWebサイトにアクセスする際に
「このサイトにアクセスできません」
というエラーが頻繁に発生しており困っていましたが、対処方法がやっと分かりましたので紹介します。

レンタルサーバーは「リトルサーバー」で、使用ブラウザは「Google Chrome」です。もし同じ事象で困っている方がいらっしゃったら、試してみてください！

エラー内容

仮登録時から現在に至るまで、Wordpress管理画面及びWebサイトにアクセスする際に以下の画像のように
「このサイトにアクセスできません　接続がリセットされました。」
というエラーが頻繁に発生していました。

このサイトにアクセスできません

常に上記のエラーが出るわけではありませんが、Webサイトにアクセスする際によく出て、
エラーが出てから時間を待つ・もしくは再読み込みすると正常に見れるような状態でした。

そこで色々と試してみたところ、
・パソコン・スマートフォンどちらからのアクセスでもエラーが出ている
・スマートフォンのWifiを切って、携帯回線でアクセスしてもエラーが出る
・Webサイトのドメイン宛に「ping nyanblog2222.com /t」で送信しても
　特にネットワークの途切れはなし
・他サイトを閲覧している際はエラーが発生しない
　→同じレンタルサーバーを使用しているWebサイトもエラーは発生しない

ということが分かり、パソコンやネットワークに依存するトラブルではないことが分かりました。

つまり問題の要因は、
サーバの設定、もしくはサイトが保存されているサーバ側の不具合？
ということで、レンタルサーバー側に上記旨の問い合わせをしました。

対処方法

レンタルサーバー側からの問い合わせ結果は以下です。

・PHPのモジュール版からPHPバージョンを7.3（CGI版）にする
モジュール動作は高速かつ多数同時アクセスには優れているが、現象『再読み込みすると正常に見れるようになる』際は、最新安定版のPHP7.3にすることでエラーを回避できる事がある。
リトルサーバー（使用しているレンタルサーバー）の場合、この設定でFastCGIが有効になるため現在より安定したWEBサイト表示が可能。
また、php7.2以上であればFastCGIもモジュール版と遜色ない高速性が保持される。

バージョンの設定

この返答があったため、PHPバージョンを7.3にしたところ、
なんと大幅に改善！　全くエラーは出なくなりました。

そこで、PHPのモジュール版とCGI版について調べてみたところ以下が分かりました。

・モジュール版
処理実行：データベース側
処理速度：高速
サーバのRootユーザーで実行するため、セキュリティ性・安定性に難あり

・CGI版
処理実行：クライアント側
処理速度：モジュール版に比べ遅いとされるが、
　　　　　高速処理可能なFastCGIを使えば、モジュール版と遜色なし
クライアント毎に別ユーザーで実行するため、セキュリティ性・安定性問題なし

以上から、あくまで想像ではありますが、
今回エラーが起きた要因は、１つのレンタルサーバーに対して使用するユーザが多かったためかもしれません。

ただこれが事実だとしても、以下の記事でも紹介していますが、
コストパフォーマンスが他社に比べ圧倒的に高いため、本サイトではレンタルサーバーはリトルサーバーが一番お勧めです。

今回のことにしてもFastCGIを使うことで、現状何の問題もなくサイトにサクセスが可能です。

コスパ最高！WordPress可の低価格帯レンタルサーバ比較
今回はWordPress可の低価格帯レンタルサーバをご紹介します。レンタルサーバとは、その名の通りサーバを貸し出すサービスです。Webサイトをお店に例えると、土地は「レンタルサーバ」、お店作成ツールが「WordPress」、お店にたどり着くための住所が「ドメイン」といったところでしょうか。今回はWordP...
nyanblog2222.com
2020.05.04

むしろ、問い合わせに対しても早急に的確な対応をしてくださいますので、非常に安心できる会社であることが分かりました。
（30分程で返信があり、とても迅速な対応でした。）
今後も使用していきたいレンタルサーバだと感じました。

投稿 【WordPress】「このサイトにアクセスできません　接続がリセットされました」 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/web-all/1308/feed/ 0 【Duplicate Post】記事複製プラグインの使い方【WordPress】 https://nyanblog2222.com/webproduction/wordpress/823/ https://nyanblog2222.com/webproduction/wordpress/823/#respond Fri, 22 May 2020 09:00:00 +0000 https://nyanblog2222.com/?p=823 こんにちは。ワンクリックで記事を新規複製ができる操作ができると便利だと思いませんか？今回はそんなことができるプラグイン、Duplicate Postを紹介します。 目次 プラグインのインストールプラグインの使って記事を複 […]

投稿 【Duplicate Post】記事複製プラグインの使い方【WordPress】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

こんにちは。ワンクリックで記事を新規複製ができる操作ができると便利だと思いませんか？
今回はそんなことができるプラグイン、Duplicate Postを紹介します。

プラグインのインストール

まずはプラグインをインストールしてみましょう。
ダッシュボードから、「プラグイン」→「新規追加」をクリックしましょう。

ダッシュボードから新規作成をクリック

右上の「プラグインの検索…」に「Duplicate Post」を入力しましょう。

Duplicate Postを入力

入力して少しすると、一覧が出力されるので、「Duplicate Post」の「今すぐインストール」をクリックします。

今すぐインストールをクリック

インストールが終わったら、「有効化」をクリックしましょう。

有効化をクリック

これで準備は終わりました。

プラグインの使って記事を複製

さっそくプラグインを使って記事を複製してみましょう。
ダッシュボードから「投稿」をクリックし、既存のページをマウスオーバーしてみましょう。
「複製」と「新規下書き」が新しく追加されていることが確認できます。

複製と新規下書きの表示確認
  • 複製
    投稿ページの記事を複製し、下書きの状態で保存されます。
  • 新規下書き
    同様に複製し下書きの状態で保存されますが、複製と異なるのは編集ページに移動することです。

「複製」をクリックしてみましょう。

複製をクリック

このように、投稿一覧に記事が複製されています。

複製完了後の画面

次に「新規下書き」をクリックしてみましょう。

新規下書きをクリック

編集ページに飛び、右上に「下書き保存」、「公開」が表示されており、下書き状態になっていることが分かります。
※ 公開状態の場合は「下書きに切り替え」、「更新」と表示されています。

新規下書き後の画面

プラグイン設定の変更

複製の内容について、設定で変更することができます。
ダッシュボードの画面から、「設定」→「Duplicate Post」をクリックします。

ダッシュボードから複製を設定

設定画面の中には3つのタブで設定することができます。
それぞれ箇条書きで説明していきますので、必要があれば設定を変更してください。

複製元タブ

複製元設定
  • 複製する投稿/ページの要素
    複製する時にコピーしたい内容にチェック
  • タイトルの接頭辞
    複製した記事のタイトルの先頭に文字を設定
  • タイトルの接尾辞
    複製した記事のタイトルの末尾に文字を設定
  • メニュー順を増加する数
  • 複製しないカスタムフィールド
    フィールドを複製しない場合、カンマで区切って設定
  • 複製しないタクソノミー
    タクソノミーを複製しない場合、チェック

権限タブ

権限の設定
  • 複製可能な権限
    複製作業ができるユーザの権限をチェック
  • これらの投稿タイプに対して有効化
    複製できるページの種類をチェック

表示タブ

表示設定
  • リンクを表示する場所
    「複製」「新規下書き」を表示させる場所にチェック
  • 複製元を表示
    複製元を表示させる場合、表示させたい場所にチェック
  • 更新通知を表示する
    更新通知を届ける場合チェック

まとめ

今回はWordPressのプラグインを使って、複製をワンクリックで楽に行えるようになりました。
とても使いやすいので、ぜひインストールして試してみてください。

また、インストールですが、ダウンロードからも行うことができます。
その場合はこちらのサイト「WordPress.ORG Duplicate Post」からインストールをしてみてください。

投稿 【Duplicate Post】記事複製プラグインの使い方【WordPress】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/wordpress/823/feed/ 0 【WordPress】プラグインでパンくずリスト【Yoast SEO】 https://nyanblog2222.com/webproduction/wordpress/662/ https://nyanblog2222.com/webproduction/wordpress/662/#respond Tue, 19 May 2020 09:00:00 +0000 https://nyanblog2222.com/?p=662 こんにちは。皆さん、パンくずリスト（Breadcrumbs list）は表示させていますか？今回は、パンくずリストの説明と実際の設置方法について、ご紹介します。 目次 パンくずリストとは？パンくずリストのメリットユーザが […]

投稿 【WordPress】プラグインでパンくずリスト【Yoast SEO】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

こんにちは。皆さん、パンくずリスト（Breadcrumbs list）は表示させていますか？
今回は、パンくずリストの説明と実際の設置方法について、ご紹介します。

パンくずリストとは？

パンくずリストはWebサイト内で自分が今閲覧しているページがどこにいるか、視覚的に分かりやすく表示させているもののことです。

パンくずリスト

具体的にはこのページの上部にも表示されていますね。
このように、ページを階層順にリストアップして設置させたリストのことで、コンテンツの上部に良く見られます。

パンくずリストのメリット

パンくずリストを設置することで、何が良くなるのでしょうか？
大きく2つほどメリットがあります。

  • ユーザが自分の位置を瞬時に判断できる
  • SEO上の効果として期待できる

ユーザが自分の位置を瞬時に判断できる

ナビゲーションやページ数が膨大なサイトでは、サイトを動き回っているうちに自分がどこのページを閲覧しているのか、分からなくなってしまうことがあります。
その場合にパンくずリストが設置してあるサイトでは、迷うことなく自分がどのカテゴリにいて、どのページから閲覧しているのか、見ただけで理解することができます。
もし居場所が分からない場合、見てほしいページを見る機会が減ってしまったり、滞在時間が減る可能性があります。

また、階層を複数戻したい場合など、ワンクリックで複数階層戻ることができるので、サイトを効率的に閲覧することができますね！

SEO上の効果として期待できる

検索エンジンに見つけてもらうには、サイトの情報をクローリング（巡回して情報を収集）してもらう必要があります。
そのためには、サイト構造を分かりやすい状態にしておく必要があります。
パンくずリストを設置することで、サイトの階層が整理されている状態であり、クローラー（巡回するロボット）がサイト構造を理解しやすくなることで、SEO上の効果として、期待することができます。

検索エンジン最適化（SEO）スターター ガイド でも説明がありますので、一度見ておくと、パンくずリストを設置するときの注意点も把握することができます。

パンくずリストの設置方法

続いて、パンくずリストの設置方法について、ご紹介します。
今回は【Yoast SEO】プラグインを使用しました。

Yoast SEOのインストール

Yoast SEOをインストールします。
ダッシュボードから、「プラグイン」→「新規作成」をクリックします。

プラグインインストール

「プラグインの検索…」に「Yoast SEO」を入力します。

YoastSEO検索

「今すぐインストール」をクリックします。

今すぐインストール

インストールが無事終わったら、「有効化」をクリックして、インストールは終わりです。

Yoast SEO　有効化

有効化すると、メニューに「SEO」が表示されます。

Yoast SEO　表示

パンくずリストの設定

パンくずリストを有効化して設定しましょう。
メニューから、「SEO」→「検索での見え方」をクリックします。

ダッシュボード　検索の見え方

検索の見え方ページから、「パンくずリスト」タブをクリックします。

パンくずリストタブクリック

パンくずリストの設定が表示されますので、「パンくずリストを有効にする」欄を「有効」に変更するため、クリックしてください。

パンくずリスト有効

すると、色々な設定値が表示されます。
お好みで設定しておけば問題ないのですが、今回はデフォルトから赤枠欄を変更しています。
その中でも、「コンテンツタイプのパンくずリストに表示するタクソノミー」はサイト構成が分かりやすくなるため、設定しておいた方が良いです。
設定値のおすすめは「カテゴリー」です。
設定が終わりましたら、「変更を保存」をクリックしましょう。

パンくずリスト設定

パンくずリストの設置

パンくずリストの準備が終わりましたので、実際に設置してみましょう。
自身のない方はあらかじめバックアップを取ることをおすすめします。
また、編集は自己責任でお願いします。
こちらのコードをパンくずリストを表示させたいところに設定します。

<!--パンくずリスト-->
<?php
if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

設定するファイルの編集方法についてご説明します。
ダッシュボードから、「外観」→「テーマエディター」をクリックします。

外観からテーマエディタを選択

変更するファイルを選択しますが、どのページに設置したいかで設定するファイルが異なります。
設置場所はテーマにより異なりますのが、初心者の方は「Theme Header（header.php）」のみに追加すると、分かりやすいと思います。

設定ができましたら保存し、パンくずリストが出力されていることを確認してください。

パンくずリスト出力

ここまでできましたら、あとは見た目の変更を行いましょう！

パンくずリストのスタイルを変更

パンくずリストのスタイルを変更しましょう。
リスト全体の指定は「p#breadcrumbs」、リスト内のリンクの指定は「p#breadcrumbs a」で行います。

/*パンくずリスト 全体*/
p#breadcrumbs {
    padding: 1rem 2rem 0;
    font-size: 0.8rem;
}

/*パンくずリスト リンク*/
p#breadcrumbs a{
    color: #b78d4a;
}

h1でページの題名を出力しているので現在出力しているページ名は不要だ。ということであれば、「span.breadcrumb_last」で「display: none」を設定することで出力を無くすことができます。

/*パンくずリスト 最後*/
span.breadcrumb_last{
    display: none;
}

設定後の表示はこちらです。それっぽい見た目になりましたね。
色や幅の指定はサイトのデザインに応じて変更してください。

パンくずリスト　スタイル変更後

他にも色々設定できますので、試してみてください。
ただ、画像も指定できますが、パンくずリストはSEO的にテキストを推奨しているため、画像は使わない方が良いでしょう。

まとめ

今回はパンくずリストについての説明と設置方法について、ご紹介しました。

ホームページを運営する上でSEOは意識しなくてはならないところだと思います。
今回はプラグインを使用したので、比較的簡単な方法で実装することができました。
ぜひ試してみてください！

投稿 【WordPress】プラグインでパンくずリスト【Yoast SEO】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/wordpress/662/feed/ 0 【WordPress】更新日を取得し、表示する方法【簡単コピペ】 https://nyanblog2222.com/webproduction/wordpress/505/ https://nyanblog2222.com/webproduction/wordpress/505/#respond Thu, 14 May 2020 09:00:00 +0000 https://nyanblog2222.com/?p=505 私たちがWebで検索するとき、何気なくスニペットの日付やページの更新日時を確認しませんか？特に情報関係の検索する時は、より新しい情報を得たいですよね！そこで、今回は更新日時を表示する方法をご紹介します。このような表示をし […]

投稿 【WordPress】更新日を取得し、表示する方法【簡単コピペ】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

私たちがWebで検索するとき、何気なくスニペットの日付やページの更新日時を確認しませんか？
特に情報関係の検索する時は、より新しい情報を得たいですよね！
そこで、今回は更新日時を表示する方法をご紹介します。
このような表示をします。

投稿日、更新日の出力確認

phpファイルを編集しますので、編集前にファイルのバックアップは取っておきましょう！
今回はこちらのファイルを編集しました。

１．関数を追加
・functions.php

２．投稿日、更新日を表示させる
・home.php
・loop-content.php
・search.php
・single.php

３．スタイルの変更
・header.php
・style.css

本記事は本ブログで利用している自作テーマを変更して対応しています。
コードを追加する場所さえ注意していれば、コピペで同じ内容を対応することができます。

関数を追加

まずはfunctions.phpに関数を追加します。
表示させるだけであれば関数の追加は不要なのですが、予約投稿した時や投稿後一度も更新されない時など、更新日が投稿日以前の場合、更新日を表示させないようにします。

更新日が投稿日より新しい日付かどうかをチェックする関数を追記しました。

function is_new_modified_date($format) {
    $ptime = get_the_time('Ymd');
    $mtime = get_the_modified_time('Ymd');
    return $mtime > $ptime;
}

投稿日・更新日を取得し、表示させる

投稿日と更新日を表示させるコードを追加します。
対象ファイル　single.php
※ 最終的に4ファイルとも同じ内容を記載していますが、想定通りの出力が確認できるまで、single.phpファイルのみ変更をしていきましょう。

<!--投稿日を表示-->
<span class="article-date">
    <i class="fa fa-calendar"></i>
    <time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
        <?php echo get_the_date(); ?>
    </time>
</span>

<!--更新日を表示-->
<span class="article-date">
    <?php if (is_new_modified_date('Y-m-d')) : ?>
    <i class="fa fa-redo"></i>
    <time datetime="<?php echo the_modified_date( 'Y-m-d' ); ?>">
        <?php echo the_modified_date(); ?>
    </time>
    <?php endif; ?>
</span>

投稿日、更新日の表示について、詳しく説明します。

・2、10行目　<span class=”article-date”></span>
日付を出力する枠組を設定します。classはcssでスタイルを設定します。

・3行目　<i class=”fa fa-calendar”>
　12行目　<i class=”fa fa-redo”>
日付の左側にある、アイコンを設定しています。
スタイルの変更で詳しく説明します。

・4～6行目
　<time datetime=”<?php echo get_the_date( ‘Y-m-d’ ); ?>“>
　　<?php echo get_the_date( ‘Y-m-d’ ); ?>
　</time>
get_the_date( ‘Y-m-d’ );で取得した投稿日付を出力し、timeタグのdatetime属性で日付の情報を設定しています。

・11行目、16行目
　<?php if (is_new_modified_date( ‘Y-m-d’ )) : ?>
　<?php endif; ?>
先ほどfunction.phpで設定した関数を使って更新日が投稿日より新しい日付かどうかをチェックしています。
新しい日付であれば、12～15行目のソースを実行します。

・13～15行目
　<time datetime=”<?php echo get_the_modified_date( ‘Y-m-d’ ); ?>“>
　　<?php echo get_the_modified_date( ‘Y-m-d’ ); ?>
　</time>
get_the_modified_date( ‘Y-m-d’ );で取得した更新日付を出力し、timeタグのdatetime属性で日付の情報を設定しています。

スタイルの変更

アイコンの設定

まずはアイコンを設定するため、リンクを設定します。
今回は「FontAwesome」を使用しています。
ファイル　header.phpのheadタグにアイコン設定用のリンクを設定します。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

出力させたい場所にiタグとクラスを設定するだけで、簡単にアイコンを設定することができます。
こちらの記事がクラスを設定したタグまで準備してくれるので、おすすめさせていただきます。
「Font Awesomeアイコンを素早く検索しコピー。Photoshopなどでの使い方」

今回は
　<i class=”fa fa-calendar”>
　<i class=”fa fa-redo”>
を使用しました。

iタグを使わず、cssで設定することも可能です。
その場合はiタグは除き、疑似要素 [before]でスタイルを設定します。
以下は投稿日の例です。

<span class="article-date">
    <time class="date" datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
        <?php echo get_the_date(); ?>
    </time>
</span>
.article-date .date::before{
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    content: "\f133";
    display: inline-block;
}

スタイルの設定

ファイル　style.cssに article-dateクラスのスタイルを設定していきます。
本ブログのスタイルで設定していますが、この辺りはお好みでカスタマイズしてみてください！

.article-content .article-info .article-date {
    font-size: .8rem;
    display: inline-block;
    margin-right: .5rem;
    color: #888;
}

.article-list .text .article-date{
    font-size: .75rem;
    display: inline-block;
    margin: 0 .5rem .5rem 0;
    color: #888;
}

ここまで設定できましたら、投稿ページに投稿日と更新日が出力されていることを確認してみましょう。

他のphpファイルへコードをコピー

投稿ページの確認ができましたら、
・home.php
・loop-content.php
・search.php
へコードを反映し、
「トップページ」、「検索ページ」、「カテゴリページ」等、投稿日と更新日が出力されていることを確認してください。

まとめ

今回は投稿日と更新日の出力できるように変更してみました。
アイコンも簡単に変更できるので、ぜひ試してみてください！

ちなみに、冒頭にスニペットの日付について触れましたが、Googleで自動で日付を設定しているため、指定することはできません。
詳しくは「ウェブページの最適な日付を Google 検索に知らせるには」を確認してみてください。

投稿 【WordPress】更新日を取得し、表示する方法【簡単コピペ】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/wordpress/505/feed/ 0 「wwwあり/wwwなし」を統一する方法【WordPress】 https://nyanblog2222.com/webproduction/wordpress/246/ https://nyanblog2222.com/webproduction/wordpress/246/#respond Tue, 05 May 2020 07:21:11 +0000 https://nyanblog2222.com/?p=246 wwwありなしを統一させていますか？URLにはwwwがあるものとないものがあります。そもそもwwwとは何でしょうか。 目次 wwwとは？URLの表示確認サブドメインの追加方法wwwありなしを統一する.htaccessとは […]

投稿 「wwwあり/wwwなし」を統一する方法【WordPress】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

wwwありなしを統一させていますか？URLにはwwwがあるものとないものがあります。そもそもwwwとは何でしょうか。

wwwとは？

wwwとは、「World Wide Web（ワールド ワイド ウェブ）」の略称で、インターネット上で提供されているハイパーテキストシステムです。
URLについているwwｗについては、もう少し意味があり、「インターネットのホームページの閲覧機能を提供しているサーバを識別するために一般的に使われる名称」を意味しています。

昔はスペックの関係でサーバを分けて運用することが多く、wwwはweb用のサーバとして利用されており、現在はwwwがあるのとないのと、どちらでもSEO的には影響がないといわれています。

ただ、wwwがついているURLとついていないURLが両方存在するのは重複ページとして認識されてしまうので、SEO的にマイナス評価となってしまいます。そのため、どちらかに統一させる必要があります。

こちらはhttpからhttpsへリダイレクトする方法をご説明いたしましたので、併せてこちらもご欄ください。

【WordPress】httpからhttpsへリダイレクトする方法【サンプル】
リダイレクトとは 移転や閉鎖、URLが変更されたWebページに訪れたユーザに対し自動的に別のWebページへ転送することです。別のURLで同じ内容のページが複数存在する場合、SEOとしては同じサイトとして扱われずSEO評価が分散されてしまいます。
nyanblog2222.com
2020.04.27

URLの表示確認

まずはwwwがあり・なしとで、どちらもサイトが表示されていることを確認してください。表示されていればこの項目は飛ばしてください。
表示されていない場合、wwwなしドメインと、wwwありのサブドメインの両方を追加されていることを確認してください。
・wwwなしドメインを追加する。
・www付きサブドメインを追加する。（サブドメインのパスをドメインと同じパスに設定すること。

サブドメインの追加方法

ここでは、Little Server（リトル サーバー）でのサブドメイン追加を説明いたします。

コントロールパネルから「ドメイン設定」をクリックします。

ドメイン・サブドメインにwwwありのドメイン追加し、パスにはwwwなしのパスと同じパスを設定します。
画像をクリックするとLittle Server（リトル サーバー）のマニュアルに飛びます。

忘れないよう、サブドメインに対してもSSL対応しておきましょう。
サブドメインのURLページを表示されることを確認して、完了です。

wwwありなしを統一する

リダイレクトを行ってwwwありなしを統一していきます。
wordpressフォルダの「.htaccess」ファイルを編集していきます。

.htaccessとは

.htaccessとは、Webサーバの動作を制御するための設定ファイルです。
このファイルの設定を変更するだけで、特定のファイルやディレクトリのアクセスを禁止したり、エラーページをカスタマイズすることもできます。
セキュリティ面の観点から設定する方がいいですね。

さっそく設定してみましょう。コピーされる場合は、ドメイン名の箇所のみ変更をお願いします。

■wwwありに統一

RewriteEngine on
RewriteCond %{ HTTP_HOST} ^sample\.com
RewriteRule ^(.*)$ https://www.sample.com/$1 [L,R=301]

■wwwなしに統一

RewriteEngine on
RewriteCond %{ HTTP_HOST} ^www.sample\.com
RewriteRule ^(.*)$ https://sample.com/$1 [L,R=301]

あらかじめファイルがある場合は、ファイル上部に追記してください。
ファイルの有無はwordpressフォルダの直下確認してみると、分かります。

これでwwwあり、なしの統一をすることができました。
SEO対策はまだまだ勉強中ですが、他にも設定があればまた記事をご紹介します。

投稿 「wwwあり/wwwなし」を統一する方法【WordPress】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/wordpress/246/feed/ 0 コスパ最高！WordPress可の低価格帯レンタルサーバ比較 https://nyanblog2222.com/web-all/213/ https://nyanblog2222.com/web-all/213/#respond Mon, 04 May 2020 07:42:14 +0000 https://nyanblog2222.com/?p=213 こんにちは。今回はWordPress可の低価格帯レンタルサーバをご紹介します。 目次 レンタルサーバとは？価格について。無料ではだめ？サーバ選びの条件金額面の比較性能面の比較その他 レンタルサーバとは？ レンタルサーバと […]

投稿 コスパ最高！WordPress可の低価格帯レンタルサーバ比較 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

こんにちは。今回はWordPress可の低価格帯レンタルサーバをご紹介します。

レンタルサーバとは？

レンタルサーバとは、その名の通りサーバを貸し出すサービスです。Webサイトをお店に例えると、土地は「レンタルサーバ」、お店作成ツールが「WordPress」、お店にたどり着くための住所が「ドメイン」といったところでしょうか。
今回はWordPressが使えるレンタルサーバを紹介します。

先日の記事で「ドメイン」についてはご紹介してますので、そちらも参考にしてくださいね！

【最も安いサイトは？】ドメイン提供サイト比較！【.com/.net/.jp/.co.jp】
ドメインが取得できる提供サイトを比較し、最も安いサイトを紹介します！今回はこちらのサイトを比較しました。お名前.com、ムームードメイン、バリュードメイン、スタードメイン、ゴンベエドメイン、FC2、エックスドメイン。ドメインの基本知識も紹介！
nyanblog2222.com
2020.09.11

価格について。無料ではだめ？

無料でもありです！

レンタルサーバには無料のサーバもあります。
無料サーバでも、アメーバブログやはてなブログ等のブログ特化型や、
XFREE等の幅広い目的に使用できる汎用型のレンタルサーバまであり、趣味であれば十分な性能があります。

ただ無料な分、機能が最小限だったり、広告が表示されたり、サービス内容が突然改悪されたりとマイナス要素が常につきまといます。
そのため、機能性・信頼性の観点から、より良い本格的なサイトを運営したいということであれば、有料のサーバであることが必須となります。

ですが高機能なサーバほど料金が高く、逆に格安すぎるサーバは機能が制限され使いづらいという面があります。よって今回は低価格かつ高性能をテーマにご紹介します！

サーバ選びの条件

低価格かつ高性能ということで、低価格ではあるものの複数のWordPressサイトが作れ、表示速度等が高性能な“使える”サイトを選ぶため、第一段階として以下の条件設定を行いました。

・月額500円台以下（税抜）
感覚的な話ではありますが、税抜600円を超えると低価格と言うには微妙な印象がありますので、今回は500円台以下としました。

・サーバ容量が容量20GB以上
個人サイトでは1サイト1GBも消費しないことも多いため、人によっては10GBあれば十分です。
ただ今回はバックアップを数世代残し、かつ、サイトを複数運営することを想定して20GBとしています。

・転送量が30GB/日以上
転送量の上限が低いと、上限に達した際にサーバダウン等につながります。
例えば有名サイトから外部リンクをしてもらえた際などに視聴ユーザの機会損失に耐えられるように、一定以上の転送量上限が必要です。
おおよそ10,000PV/日に許容できるように30GB/日以上しています。

・マルチドメインが2つ以上
ドメイン数＝サイト数になるため、複数サイトを開設するには必須です。

・MYSQLが2つ以上
WordPressを使用するには必ずＤＢが必要で、ＤＢには基本的にMYSQLを使用します。
1つのMYSQLで複数サイト開設することは可能ですが、サイト表示速度の遅延等デメリットがあるため、「1つのMYSQL＝1サイト」が望ましいです。そのため、複数サイトを開設するには必須事項となります。

・無料SSL
SSLは通信の暗号化プロトコルで、サイトのURLの冒頭のhttpをSSLによって暗号化したものがhttpsになります。
SSLを使用することで盗聴や情報改ざんを防ぎ、セキュリティの高いサイトを作ることができます。
現在httpsでないとWebブラウザに危険なサイトとして警告が出ますので、サイト運営する上でSSLは必須です。
そのため、もし無料SSLでないと独自SSLを有償取得する必要があるため、必須事項としました。

・PHP高速化モジュール
WordPressのサーバ側の言語として利用されるPHPですが、CGI版とモジュール版があります。
モジュール版の方が高負荷時の処理性能が高いとされ、表示速度に直結するため必須としました。

上記条件に当てはまるレンタルサーバ・プランは以下となりました。

レンタルサーバプラン
さくらのレンタルサーバスタンダード
ColorfulBoxBOX1
ロリポップスタンダード
コアサーバーCORE-MINI
リトルサーバーリトルプラン

金額面の比較

各サーバ、プランで金銭面の比較を表にまとめました。

税抜:円（税込表示のみの場合、端数切捨て）

レンタルサーバ
プラン		 さくらのレンタルサーバ
スタンダード		 ColorfulBox
BOX1		 ロリポップ
スタンダード		 コアサーバ
CORE-MINI		 リトルサーバ
リトルプラン
初期費用 952円 無料 1,500円 無料 920円
月額 476円 580円
※年間契約		 500円
※年間契約		 198円 250円
年間 4,761円 6,960円 6,000円 2,376円 3,000円
お試し期間 14日無料 30日無料 10日無料 30日無料 20日無料

金額面はコアサーバ・リトルサーバが優勢です。次にさくらのレンタルサーバ・ColorfulBox・ロリポップと続きます。

性能面の比較

各サーバ、プランで性能面の比較を表にまとめました。

レンタルサーバ
プラン		 さくらのレンタルサーバ
スタンダード		 ColorfulBox
BOX1		 ロリポップ
スタンダード		 コアサーバ
CORE-MINI		 リトルサーバ
リトルプラン
ストレージドライブ HDD
(データベースサーバはSSD)		 SSD HDD SSD SSD
容量 100GB 100GB 120GB 60GB 60GB
転送量 80GB/日 1T/月 ※1 150GB/日 無制限 ※2 90GB/日
PHP高速化モジュール ○ ○ ○ ○ ○

※1 1,024÷30≒34GB/日
※2 規定転送量以上で調整

基本的にどれも高性能ですが、ストレージドライブがSSDであることから、
ColorfulBox・コアサーバ・リトルサーバーが優勢です。

ただ、コアサーバは転送量上限が、
無制限　※規定転送量以上で、かつサーバー全体で負荷がかかっている場合は単位時間あたりの量を調整させていただくことがあります。規定転送量までは無制限で、それ以上はベストエフォートとなります。
という表記があり、規定転送量の上限は非公開です。
非公式の見解では100GB/月とのことで、注意が必要です。

このことから、性能面で確実に優秀なのは、ColorfulBox・リトルサーバーとなります。

その他

その他特筆すべき点は以下の表になります。

レンタルサーバ
プラン		 さくらのレンタルサーバ
スタンダード		 ColorfulBox
BOX1		 ロリポップ
スタンダード		 コアサーバ
CORE-MINI		 リトルサーバ
リトルプラン
マルチドメイン 100個 無制限 100個 50個 無制限
MYSQL 20 無制限 30 10 10
無料SSL ○ ○ ○ ○ ○
無料サポート 電話
メール		 電話
メール		 電話
メール		 メール
チャット		 メール
バックアップ ○ ○ × × ○
アダルトサイト × ○ × テキストのみ可 法令の範囲内であれば可
その他 モリサワフォント利用可能 ― ― ― ―

アダルトサイト可否等は必要な方は必須かもしれませんね。

バックアップについてはWordPressのプラグイン等で行えますので、
レンタルサーバに付属していなくても問題はありません。

以上、金額面では、コアサーバ・リトルサーバ、
性能面では、ColorfulBox・リトルサーバーとなりました。

このことから、両方で優秀でしたリトルサーバーのリトルプランを当サイトではおすすめいたします！

なお、当サイトもリトルサーバーのリトルプランを使用していますが、何不自由なく使え、なおかつ低価格のため満足しています。
サイトの表示速度等については、宜しければ当サイトで検証してみてくださいね。

投稿 コスパ最高！WordPress可の低価格帯レンタルサーバ比較 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/web-all/213/feed/ 0 【CSSで】スムーススクロールでふわっとページ移動してみよう https://nyanblog2222.com/programming/html-css/170/ https://nyanblog2222.com/programming/html-css/170/#respond Sat, 02 May 2020 04:00:00 +0000 https://nyanblog2222.com/?p=170 こんにちは。前回はJQueryを使用してスムーススクロールをご紹介いたしました。以下リンク先です。 今回はCSSのみでスムーススクロールを実装してみました。早速ご紹介いたします。HTMLとCSSは前回と同じコードを使用し […]

投稿 【CSSで】スムーススクロールでふわっとページ移動してみよう は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

こんにちは。前回はJQueryを使用してスムーススクロールをご紹介いたしました。以下リンク先です。

【JQuery】スムーススクロールでふわっとページ移動してみよう
スムーススクロールでふわっとページ移動してみませんか。こんにちは。JQueryを使用して簡単に出来るスムーススクロールをご紹介いたします。まずはHTMLでナビゲーションとセッションの形を作っていきます。...
nyanblog2222.com
2020.04.29


今回はCSSのみでスムーススクロールを実装してみました。
早速ご紹介いたします。
HTMLとCSSは前回と同じコードを使用しています。

余談：ふと疑問になってスムーススクロールとスムーズスクロールどっちが正しいのかと疑問に思い調べてみましたが、どちらでも良いみたいですね。
英語でsmooth scroll、スムーズにスクロールするの意、それぞれあるようです。

CSSでHTMLにスムーススクロールを設定

html要素に scroll-behavior: smooth; を指定することでページ内リンクにスムーススクロールの動きをつけることができます。

html{
  scroll-behavior: smooth;
}

この設定のみでスムーススクロールが表現できるなんてとても便利ですね！

対応ブラウザ

設定が簡単にできるので、多用してもいいかな。と思いますが、このようにIE・Safariには対応していないようです。
実際に業務で使用する場合は、対応ブラウザに注意して適用させる必要があります。
参考：MDN web docs ： CSS: カスケーディングスタイルシート

scroll-behaviorプロパティ

scroll-behaviorプロパティについて、指定した範囲内でスクロールが発生した際の振る舞いを指定できます。

＜キーワード＞
・auto（初期値） : リンク先に瞬時にスクロールします。
・smooth : 設定したセレクタの範囲内でページ内リンクによるスクロールが発生した場合、スムーススクロールでリンク先に移動します。

今回はCSSのみでスムーススクロールを実装してみました。
対応ブラウザは限定されますが、用途に応じて使ってみてください。

投稿 【CSSで】スムーススクロールでふわっとページ移動してみよう は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/programming/html-css/170/feed/ 0 【Contact Form 7】お問い合わせフォーム作成方法【WordPress】 https://nyanblog2222.com/webproduction/108/ https://nyanblog2222.com/webproduction/108/#respond Fri, 01 May 2020 05:54:24 +0000 https://nyanblog2222.com/?p=108 WordPressでお問い合わせフォームを作成したい。と考えたことはありませんか？今回は「Contact Form 7」プラグインを使用してお問い合わせフォームを作成してみようと思います。 お問い合わせフォームのメリット […]

投稿 【Contact Form 7】お問い合わせフォーム作成方法【WordPress】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

WordPressでお問い合わせフォームを作成したい。と考えたことはありませんか？今回は「Contact Form 7」プラグインを使用してお問い合わせフォームを作成してみようと思います。

お問い合わせフォームのメリットについて、1番はユーザが手軽に送信できることです。営業時間を気にせず、好きなタイミングで直接話すことなく問い合わせることができます。
他にも運営側にとっても、メールアドレスを非公開にできたり、必要な情報を入手できます。

プラグインをインストール

まずは「Contact Form 7」をインストールしてみましょう。
ダッシュボードから、「プラグイン」→「新規追加」をクリックしてください。

プラグインの検索で「Contact Form 7」を入力して、「今すぐインストール」をクリックしてください。

インストールが終わりましたら、「有効化」をクリックしてください。

これで事前準備となるインストール、有効化の完了です。

お問い合わせフォームを作成

今回はこんな感じのお問い合わせフォームを作成しようと思います。

コンタクトフォームの追加

有効化まで終わると、メニュー内に「お問い合わせ」の項目が出てきますので、クリックしてください。

今回は新しくフォームを作成するので、コンタクトフォームの右側か、メニューの「新規追加」をクリックしてください。

新規追加の画面は以下のようになってます。
まずは、「ここにタイトルを入力」のところにタイトルを入力します。
今回は「お問い合わせ」と入力しています。

フォームタグの変更

次に「フォーム」タグでお問い合わせの際に入力してもらう欄を作成します。
あらかじめ入力されているものを使用しても問題ありません。
今回はお問い合わせの内容について、選択形式の入力を追加したいので、追加したい場所にカーソルの位置を合わせ、「ドロップダウンメニュー」をクリックします。

クリックすると、下のような画面が出てくるので、それぞれ必要に応じて入力してください。
１．必須項目にしたい場合はチェックをつけてください。
２．ドロップダウンメニューの名前を一意で入力してください。デフォルトのままでも問題ありません。
（WordPressのクエリーが使用するパラメーターと同じ名前は使用できません。詳しくは「コチラ」から確認してください。）
３．選択リストを入力してください。
　　※ 複数項目を追加する場合、改行してください。
　　例）ご意見、ご提案について
　　　　記事の内容について
　　　　その他
４．idでCSSでスタイルを設定する際は入力してください。
５．classでCSSでスタイルを設定する際は入力してください。
　　※ 複数指定する場合、スペースで区切ってください。
　　例）class-test1 class-test2

それぞれ入力が終わりましたら、「タグを挿入」ボタンをクリックします。

フォームにタグが赤線のように追加されていることを確認します。

今回、メールの題名は固定で設定するため、題名の入力欄を消します。

お名前、メールアドレス、メッセージ本文欄に入力例を指す、「プレースホルダー」を設定します。

今回作成したフォーム内容を下記に入力していますので、ご自由にコピーしてください。

<label> お名前 (必須)
    [text* your-name placeholder"例）山田 太郎"] </label>

<label> メールアドレス (必須)
    [email* your-email placeholder"例）sample@e-mail.com"] </label>

[select* menu-870 "ご意見、ご提案について" "記事の内容について" "その他"]

<label> メッセージ本文
    [textarea your-message placeholder"例）メッセージ内容を入力してください。"] </label>

[submit "送信"]

メールタブを変更

続いて、「メール」タブをクリックして、問い合わせ先へ送る情報を設定します。
あらかじめ送信先のメールアドレスが入力されていますが、変更したい場合は適宜変更してください。
今回は、題名の「”[your-subject]”」を「お問い合わせ」に変更し、保存ボタンをクリックしています。

他にも必要に応じて、「メッセージ」タブや「その他の設定」タブの内容に変更してみてください。
これでフォームの作成は完了しました。

お問い合わせページを作成

作成したお問い合わせフォームを使って、固定ページを作成してみましょう。

メニューの固定ページをクリックします。

新規追加をクリックします。

お好みの内容でタイトルと文章を入力してください。

別タブでお問い合わせフォームをクリックし、ショートコードをコピーしてください。
ショートコードの文字をクリックするとショートコード全体が選択されます。

固定ページに貼り付けてプレビュー画面を見てみましょう。

このように簡単にお問合せフォームを作成することができました。
あとはお好みでCSSなどでスタイルを変更してください。

固定ページをナビゲーションに追加

最後に、お問い合わせページにアクセスできるように、ナビゲーションにお問い合わせページを追加しましょう。

メニューの「外観」から「メニュー」をクリックします。

初めての場合は「メニュー構造」に「メニュー名」を入れてメニューを作成します。

「メニュー項目追加」の「固定ページ」から作成したページ（今回はお問い合わせ）にチェックを入れて、「メニューに追加」をクリックします。

このように固定ページが追加されたことを確認し、「フッターナビゲーション」にチェックをいれて「メニューを保存」ボタンをクリックします。
※ 必要に応じてヘッダーナビゲーションにもチェックを入れてください。

フッターにお問い合わせへのリンクが貼り付けられ、お問い合わせにアクセスすることができるようになりました。

このようにContact Form 7を使用すれば、簡単にお問合せフォームを作成することができますので、ぜひ試してみてください。

投稿 【Contact Form 7】お問い合わせフォーム作成方法【WordPress】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/108/feed/ 0 【JQuery】スムーススクロールでふわっとページ移動してみよう https://nyanblog2222.com/programming/javascript/73/ https://nyanblog2222.com/programming/javascript/73/#respond Wed, 29 Apr 2020 09:02:38 +0000 https://nyanblog2222.com/?p=73 こんにちは。JQueryを使用して簡単に出来るスムーススクロールをご紹介いたします。 目次 HTMLで形を作るCSSでスタイルを設定JQueryをhtmlへ設定するJQueryでイベントを設定する HTMLで形を作る ま […]

投稿 【JQuery】スムーススクロールでふわっとページ移動してみよう は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

こんにちは。JQueryを使用して簡単に出来るスムーススクロールをご紹介いたします。

HTMLで形を作る

まずはHTMLでナビゲーションとセッションの形を作っていきます。

<div class="wrapper" id="top">
    <h1>スムーススクロール</h1>
    <nav>
        <ul>
            <li><a href="#index1">index1</a></li>
            <li><a href="#index2">index2</a></li>
            <li><a href="#index3">index3</a></li>
            <li><a href="#index4">index4</a></li>
        </ul>
    </nav>
</div>
<div class="wrapper" id="index1">
    <h2>Section1</h2>
    <p><a href="#top">トップへ戻る</a></p>
</div>
<div class="wrapper" id="index2">
    <h2>Section2</h2>
    <p><a href="#top">トップへ戻る</a></p>
</div>
<div class="wrapper" id="index3">
    <h2>Section3</h2>
    <p><a href="#top">トップへ戻る</a></p>
</div>
<div class="wrapper" id="index4">
    <h2>Section4</h2>
    <p><a href="#top">トップへ戻る</a></p>
</div>

CSSでスタイルを設定

次にCSSでスタイルを決定します。
ここではスクロールさせるため、ある程度セッションの高さを設けています。
また、スクロール後の位置がぴったりにならないようにwrapperクラスにpaddingを設定しています。

*{
    box-sizing: border-box;
}

.wrapper{
    padding: 4rem;
    height: 1000px;
}

h1,h2{
    color: #666;
    margin-bottom: 2rem;
}

li{
    float: left;
    margin-right: 1.5rem;
}

JQueryをhtmlへ設定する

JQueryの設定を行います。
</body>の直前にこのコードを入れます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/style.js"></script>

JQueryでイベントを設定する

JQueryでクリック時にスクロールさせる動作を追加します。
クリック時のイベントは　‘a[href^=#]:not([href=#])’　で条件を付けています。CSS3では条件を付けることができるので、簡単な条件であればこのように記載します。
ちなみに、 a[href^=#] は#から始まる構文を指し、 :not() 疑似クラスで href=# のみの設定を除外しています。

次に移動する位置を取得しています。
$(this).attr(“href”) は、クリックしたaタグのhref属性に設定されている値を取得し、$(href).offset().top で先ほど取ってきたhref属性先の位置を設定しています。
そして、設定したposへanimateメソッドを用いてスクロールさせています。
return falseで戻り値をfalse設定しているのは、リンク先へ移動する機能を動かさないよう無効にしているからです。

$(function () {
    // #から始まらない場合、処理しない
    $("a[href*=#]:not([href=#])").click(function () {
        // 移動する位置を取得
        var href = $(this).attr("href");
        var pos = $(href).offset().top;

        // スクロール処理
        $("html, body").animate({ scrollTop: pos }, 800);

        // リンク先へ移動する機能を無効化
        return false;
    });
});

これでリンクをクリックするとゆっくりスクロールするスムーススクロールを実装することができました。
今回はJQueryで実装してみましたが、調べる中でブラウザが限定されてしまうようですが、CSSのみでも実装できるようなので試してみたいと思います。

投稿 【JQuery】スムーススクロールでふわっとページ移動してみよう は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/programming/javascript/73/feed/ 0 【JQuery】コピペでできるドロップダウンメニュー【サンプル】 https://nyanblog2222.com/programming/javascript/32/ https://nyanblog2222.com/programming/javascript/32/#respond Tue, 28 Apr 2020 09:21:55 +0000 https://nyanblog2222.com/?p=32 こんにちは。 今回はJQueryを使って簡単にコピペで出来るドロップダウンメニューをご紹介いたします。 目次 ナビゲーションをHTMLで作成するCSSでスタイルを設定Jqueryをhtmlへ設定するJQueryでイベント […]

投稿 【JQuery】コピペでできるドロップダウンメニュー【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

こんにちは。

今回はJQueryを使って簡単にコピペで出来るドロップダウンメニューをご紹介いたします。

ナビゲーションをHTMLで作成する

メニューをul要素で作成しています。
各li要素内に子要素のナビゲーションを設定しています。

<nav>
    <ul id="global_nav">
        <li class="#"><a href="#">メニュー１</a>
            <ul>
                <li><a href="#">メニュー１ａ</a></li>
                <li><a href="#">メニュー１ｂ</a></li>
                <li><a href="#">メニュー１ｃ</a></li>
            </ul>
        </li>
        <li class="#"><a href="#">メニュー２</a>
            <ul>
                <li><a href="#">メニュー２ａ</a></li>
                <li><a href="#">メニュー２ｂ</a></li>
                <li><a href="#">メニュー２ｃ</a></li>
                <li><a href="#">メニュー２ｄ</a></li>
            </ul>
        </li>
        <li class="#"><a href="#">メニュー３</a>
            <ul>
                <li><a href="#">メニュー３ａ</a></li>
                <li><a href="#">メニュー３ｂ</a></li>
            </ul>
        </li>
        <li class="#"><a href="#">メニュー４</a>
            <ul>
                <li><a href="#">メニュー４ａ</a></li>
                <li><a href="#">メニュー４ｂ</a></li>
            </ul>
        </li>
        <li class="#"><a href="#">メニュー５</a>
            <ul>
                <li><a href="#">メニュー５ａ</a></li>
                <li><a href="#">メニュー５ｂ</a></li>
                <li><a href="#">メニュー５ｃ</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSSでスタイルを設定

子要素のメニューはマウスホバーで表示させるため、#global_nav ulのスタイルをdisplay:noneに設定しておきます。もしご自身でスタイルを色々変更される場合はdisplay:noneの設定は最後に行ってください。

/* ナビゲーションのスタイル */
a{
    text-decoration: none;
    color: #666;
}

#global_nav li{
    float: left;
    width: calc(98.5%/5);
    margin: 1% 0.15%;
}
#global_nav li a{
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #FFF1DA;
}

#global_nav li a:hover{
    color: #fff;
    background: #FCD69E;
}

/* 子要素のみのスタイル */
#global_nav ul{
    display: none;
}

#global_nav ul li{
    float: none;
    width: 100%;
    margin: 1% 0;
}

Jqueryをhtmlへ設定する

Jqueryの設定を行います。
</body>の直前にこのコードを入れます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/style.js"></script>

JQueryでイベントを設定する

JQueryでマウスホバー時に表示を切り替える動作を追加します。
まず、ul li liにはイベントを起こさないようにchildrenメソッドで#global_navの子要素のみにhoverメソッドを設定します。
次に、this(ホバーされている#global_nav li)の子要素 ulに対し、slideToggleメソッドで要素をスライドしながら開閉します。
※ stop()メソッドはイベントの重複を防ぐため、イベントを中止するために設定しています。

$(function () {
    // 1.#global_nav liにhoverメソッドを設定
    $("#global_nav").children("li").hover(function(){
        // 2.メニューの開閉
        $(this).children("ul").stop().slideToggle(180);
    });
});

実際にマウスホバーした時にこのように子要素のナビゲーションが表示されたら完成です。簡単にできますので、試してみてください。

デモページはこちらです。
簡単にできるので、最初はコピペでも動きを確認しながら勉強できるので試してみてください！

最後までご覧いただきありがとうございました。

投稿 【JQuery】コピペでできるドロップダウンメニュー【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/programming/javascript/32/feed/ 0 【WordPress】httpからhttpsへリダイレクトする方法【サンプル】 https://nyanblog2222.com/webproduction/wordpress/19/ https://nyanblog2222.com/webproduction/wordpress/19/#respond Mon, 27 Apr 2020 11:09:07 +0000 https://nyanblog2222.com/?p=19 目次 リダイレクトとは？リダイレクト設定 リダイレクトとは？ リダイレクトとは、 移転や閉鎖、URLが変更されたWebページに訪れたユーザに対し、自動的に新しいWebページへ転送することです。HTTPリダイレクト、URL […]

投稿 【WordPress】httpからhttpsへリダイレクトする方法【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

リダイレクトとは？

リダイレクトとは、 移転や閉鎖、URLが変更されたWebページに訪れたユーザに対し、自動的に新しいWebページへ転送することです。HTTPリダイレクト、URLリダイレクトとも言われています。

もし、別のURLで同じ内容のページが複数存在する場合、SEOとしては同じサイトとして扱われず、SEO評価が分散されてしまうため、不利となってしまいます。これは、httpとhttpsも同様のことが言えます。

リダイレクト設定

今回、常時SSL（https）化は設定されている想定で進めています。
まずは、wordpressフォルダ内の「.htaccess」ファイルを開きます。
※ 念のためバックアップしておくか、ローカルで編集することをおすすめします。

開くとこのような中身になっています。
#BEGIN WordPress とありますように、WordPress側で設定された内容になっています。

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

このファイルを編集してリダイレクトの設定を行います。
注意点として、リダイレクトを設定する場所はファイルの一番先頭ということです。（#はコメントアウトの意味なので、実際には読まれません。）

# リダイレクトの設定　ここから
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
# リダイレクトの設定　ここまで

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

これでhttpからhttpsへのリダイレクトされるようになりました。
確認してみてください。
※ 複数WordPressインストールしている場合はそれぞれファイルを更新してください。

投稿 【WordPress】httpからhttpsへリダイレクトする方法【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/wordpress/19/feed/ 0