カテゴリー: WordPress

  • WordPress【twenty seventeen】の「投稿」という文字を非表示にする方法

    WordPress【twenty seventeen】の「投稿」という文字を非表示にする方法

    【twenty seventeen】ですがトップページを表示した際に一番上にある記事の上に「投稿」という文字があるのですが、これ邪魔じゃないですか?

    しかもこの「投稿」「見出し2(h2)」である為、こんなものに「見出し2」を使用するのが勿体ないと思いました。勿論SEO(検索エンジン最適化)が目的です。そんな理由から削除してみました。

    どうやって変更すればよいのか?

    まずは、子テーマフォルダ「twentyseventeen-child」に「index.php」ファイルを親テーマよりコピーしておいてください。今後、PHPファイル等をカスタマイズする場合は子テーマフォルダに親テーマと同じフォルダ構成でファイルをコピーして子テーマ側をカスタマイズしていきますのでご注意ください。

    [外観]-[テーマの編集]よりメインインデックスのテンプレートである「index.php」を選択してください。そして下記の7行目~9行目を削除すれば解決です。

    <div class="wrap">
        <?php if ( is_home() && ! is_front_page() ) : ?>
            <header class="page-header">
                <h1 class="page-title"><?php single_post_title(); ?></h1>
            </header>
        <?php else : ?>
            <header class="page-header">
                <h2 class="page-title"><?php _e( 'Posts', 'twentyseventeen' ); ?></h2>
            </header>
        <?php endif; ?>
        <div id="primary" class="content-area">
            <main id="main" class="site-main" role="main">

    削除ではなくコメントアウトで対応したい場合

    もしもコメントアウトで対応したい場合は次のようにコメントアウトしてください。青字の部分がコメントアウトした部分となります。PHPとHTMLが混在している為、コメントアウトが難しいです。

    <div class="wrap">
        <?php if ( is_home() && ! is_front_page() ) : ?>
            <header class="page-header">
                <h1 class="page-title"><?php single_post_title(); ?></h1>
            </header>
        <?php else : ?>
    <!-- 投稿という文字を非表示とする -->
    <!-- <header class="page-header"> -->
    <!-- <h2 class="page-title"> --><?php /* _e( 'Posts', 'twentyseventeen' ); */ ?> <!--</h2>-->
    <!-- </header> 
        <?php endif; ?>-->
        <div id="primary" class="content-area">
            <main id="main" class="site-main" role="main">

    このやり方は面倒で分かりずらいですね。

    もっと良いコメントアウトの方法があれば良いのですがね。このようにコメントアウトした場合は動作には影響しませんが、HTMLソースを見るとコメントアウトが出力されている状態となりますので、どのようにしすればよいかは個人によって好みがわかれるところではないかと思います。

    これで無駄な見出し2が消えることとなりました

    「見出し2(h2)」は「<Tittle>~</tittle>」や「<h1>~</H1>」程ではありませんが、SEO(検索エンジン最適化)においては重要度の高いものとなりますので、どうでも良いものに使用することは避けたいですね。

    【A8.netに登録しよう!】
    ◇ 広告主数・アフィリエイトサービス数日本最大級☆
    ◇ 登録はもちろん無料、審査なしのアフィリエイトサービス☆
    ◇ 使いやすいサイトNO.1
    アフィリエイトならA8.net

  • WordPress【twenty seventeen】記事見出し(H2・H3)のデザインを変更する方法

    WordPress【twenty seventeen】記事見出し(H2・H3)のデザインを変更する方法

    【twenty seventeen】テーマは「見出し」のデザインが全くされていない。フォントサイズが変更されている程度で、記事を読む際に黒文字ばかりでアクセントがなく、ちょっと記事を見ると部分がわかりずらい。その為、読む側からすると読みずらい文章となってしまう。

    そこで筆者は「見出し2」「見出し3」を良く使用する為に、この部分に関して変更を加えた。ちなみにSEO(検索エンジン最適化)の事を考慮すると「見出し1」については記事の中に埋め込むことはしない。これは「記事タイトル」「見出し1」になるようになっている為、「見出し2」以降を記事に使用している。

    見出しのデザインを少し変えるだけでサイトの雰囲気が大きく変わります。そして閲覧者側になった時、読みやすいと思えるはずです。本当にちょっとしたカスタマイズをするだけで変更可能ですので、やってみる価値はあるハズです。

    どうやって「見出し」のデザインを変更するのか?

    これは勿論であるが、子テーマのスタイルシート(style.css)に追加を加える。このようにデザイン変更をしたいが為に子テーマを作ったようなものである。

    小テーマの作り方がわからない方は「【twenty seventeen】の子テーマを作成する方法」をご参照ください。

    それでは実際にどこを変更したかを説明します。

    記事中のh2およびh3の枠のボーダーラインにアクセントをつける

    編集方法は[外観]-[テーマの編集]よりスタイルシートを選択し編集してください。子テーマのスタイルシート(style.css)に次の内容を追記してください。「#」の部分は配色になりますので、お好みの配色コードに変更してください。

    「見出しh2」の例

    /* 見出しh2 */
    .entry-content h2 {
    border-left: 5px solid #1F5E73;
    border-bottom: 1px solid #1F5E73;
    padding: 0 0 0 15px ;
    line-height: 2;
    font-size: 18px;
    background-color: #fff;}

    「見出しh3」の例

    /* 見出しh3 */
    .entry-content h3 {
    border-left: 5px solid #1F5E73;
    padding: 0 0 0 15px ;
    line-height: 2;
    font-size: 18px;
    background-color: #fff;}

    たったこれだけです。

    これを追記したら[ファイルを更新]を押下して終了です。記事を見て反映されているかをご確認ください。更新されていればOKです。もし、更新されない場合は「【twenty seventeen】子テーマのスタイルシート(CSS)が反映されない」をご参照ください。

    まとめ

    なんか見出しのデザインを変更しただけで、何となくカッコよくなった感じがしませんか?でも、まだまだ細かい点が目立つのでもっと変更していきたいです。

    ポイントはサイトのイメージカラーを決めておくことです!

    ある程度、同一色でまとめていくとサイトの雰囲気がプロが作成したかのように変えることが可能となります。

    【A8.netに登録しよう!】
    ◇ 広告主数・アフィリエイトサービス数日本最大級☆
    ◇ 登録はもちろん無料、審査なしのアフィリエイトサービス☆
    ◇ 使いやすいサイトNO.1
    アフィリエイトならA8.net

  • WordPress【twenty seventeen】子テーマのスタイルシート(CSS)を変更しても反映されない場合に対処する方法

    WordPress【twenty seventeen】子テーマのスタイルシート(CSS)を変更しても反映されない場合に対処する方法

    【twenty seventeen】の子テーマを作成し、WordPress上の[外観]-[テーマ編集]より子テーマのスタイルシート(style.css)に追加デザインを加え、[ファイルの更新]ボタンを押してみた。

    ここまでは順調だったのだが、ここからハマってしまった

    実際にブラウザ(GoogleCrome)で記事を確認すると、変更したデザイン内容が反映されていないのだ。勿論、ブラウザ上で再読み込みもしてみた。

    それでも反映されない。これは【twenty seventeen】の不具合なのか?というような事も頭をよぎった。

    しかし、まずは間違いが無かったのか調べてみたが、記載にミスはない。記事のHTMLソースを見ても間違っているようには見えない。考えても仕方がないので、そのままにして次の日にページを参照すると、CSSが反映されているではありませんか

    「え、何で?」と疑問が・・・。

    実はブラウザの再読み込みではなくスーパーリロードという事をしないといけないことがわかったのだ

    スーパーリロードとは何か?

    ブラウザに残っているキャッシュを強制的に無視して、サイトの情報法を全て読み込みし直す機能なのだ。GoogleCromeの再読み込みや[F5]キーでの再読み込みでは、キャッシュの読み込みし直しをしない時があるようだ。

    実はこのスーパーリロードにつては、GoogleCrome以外のブラウザにおいてもある。きっと表示速度改善の為に少しでも読み込み直しするものを減らすために、このような仕様になっているのだろう。

    スーパーリロードはどうすればできるのか?

    この機能はブラウザによって異なるので、ブラウザ毎に説明する。今回はキーボードのみでの説明とする。

    • 【GoogleCromeの場合】
      ・[shift]+ [F5]
      ・[ctrl]+ [F5]
    • 【Internet Explorerの場合】
      ・[ctrl]+ [F5]
    • Firefox】
      ・[ctrl]+ [F5]
      ・[ctrl]+ [shift]+[F5]

    恐らく大半の人は上記のブラウザを利用していると思います。もしデザイン変更して通常の再読み込みでデザイン変更されていない場合は、上記の方法で試してみてください。

    それでもダメな場合はどうすれば良いか?

    これもブラウザ毎に操作は違いますが、キャッシュや過去の閲覧履歴等を消去する設定画面がありますので、その画面でキャッシュを削除してみましょう。

    【A8.netに登録しよう!】
    ◇ 広告主数・アフィリエイトサービス数日本最大級☆
    ◇ 登録はもちろん無料、審査なしのアフィリエイトサービス☆
    ◇ 使いやすいサイトNO.1
    アフィリエイトならA8.net

  • WordPress【twenty seventeen】の子テーマを作成する方法

    WordPress【twenty seventeen】の子テーマを作成する方法

    WordPressで標準で用意されている外観テンプレートは適時バージョンアップされる可能性があります。バージョンアップされると、せっかく変更したデザインが元に戻ってしまう可能性があります。そのようにならないように子テーマというものを作成しておき、その子テーマを有効化にしておきます。

    そして、その子テーマをカスタマイズしていくことが望ましいです。

    ある日知らないうちにデザインが変更されているなんてことにならないように、この設定も必ずやりましょう。今回は「twenty seventeen」で子テーマを作成する方法について記載したいと思います。

    子テーマの作成はとても簡単

    やることは次のことです。

    1. 「WordPressインストールディレクトリ / wp-content / themes」の中にどのような名前でも良いのですがフォルダを作成します。筆者の場合は「twentyseventeenーchild」という名称のフォルダを作成しました。
    2. 「functions.php」と「style.css」というファイルを上記で作成したフォルダに作成します。この二つのファイル中身については下記にて説明します。
    3. WordPressの「外観」メニューにて「twentyseventeenーchild」が出来ているはずですので、これを有効化します。

    1、2の手順についてはFTPソフトを利用するか、もしくはロリポップ!
    であればロリポップのユーザ専用画面であれば、[WEBツール]-[ロリポップ!FTP]というものがあるので、それを利用しても良いでしょう。

    「functions.php」には何を記載すれば良いのか?

    最低限、次の内容を記載します

    <?php
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_parent_theme_file_uri() . '/style.css' );
    }
    ?>

    たったこれだけです。

    勿論、このファイルには他にも色々なことをさせるときに関数を作成することはありますが、とりあえずは上記の内容だけで問題ありません。

    「style.css」は何を記載すれば良いのか?

    最低限、次の内容を記載します。

    /*
    Theme Name: twentyseventeen-child
    Template: twentyseventeen
    Theme URI: https://wordpress.org/themes/twentyseventeen/
    */

    たったこれだけです。一番下の行もなくても良いのですけどね。

    子テーマの有効化

    WordPressメニューの「外観」を選択すると次の画面が表示される。

    子テーマ有効化

    すると「twentyseventeen-child」というテーマが画像なしで表示されていると思うので、そこにカーソルを当て[有効化]ボタンを押して下さい。

    すると子テーマが動作するようになり、子テーマにあるファイルを優先して動作するようになります。子テーマに作成したファイルは今回は2つでしたが、今後カスタマイズしていくと他のファイルも親テーマより子テーマにコピーしてカスタマイズしていくことになります

    まとめ

    WordPress標準や他テンプレートでも突然バージョンアップが予想されるものに関しては子テーマを作成しカスタマイズを行うのが良い。「twenty seventeen」から変更点が多かったようで、「themes / twentyseventeen / template-parts /」の中にあるものも子テーマフォルダへ持ってきて、カスタマイズする必要がある場合もある。どちらにせよ子テーマである「themes / twentyseventeenーchild /」にファイルがあるものが優先動作され、無いものは「themes / twentyseventeen / 」の中にあるものが動作する。また、「themes / twentyseventeenーchild /」直下に存在しているファイルについては、[外観]-[テーマの編集]よりファイルの中身の修正を行ことができます。

    子テーマでデザイン変更をして反映されない場合はこちらの記事をご参照ください。

    【twenty seventeen】子テーマのスタイルシート(CSS)が反映されない

    【A8.netに登録しよう!】
    ◇ 広告主数・アフィリエイトサービス数日本最大級☆
    ◇ 登録はもちろん無料、審査なしのアフィリエイトサービス☆
    ◇ 使いやすいサイトNO.1
    アフィリエイトならA8.net

  • WordPress必要最低限の初期設定する方法!初心者・入門者向けの解説!

    WordPress必要最低限の初期設定する方法!初心者・入門者向けの解説!

    独自ドメインとレンタルサーバーの契約が完了し、レンタルサーバー上でWordPressをインストールをする。すると初めてWordPressにログインしテーマやタイトル、キャッチコピー等の設定が行えるようになる。

    ここまで行うのが大変なんだよ!」こんな方には。

    をお勧めします。この2つの組み合わせなら簡単にWordpressのインストールまで完了します。他のサーバーを勧めているサイトが多いですが、個人的には初めてWordpressを利用される方が簡単に導入することが出来るのはこの2つです。

    WordPressを利用にあたり必要最低限の操作と設定について

    WordPressはWeb上で動作させるツールです。ネット環境で基本的には使用します。ロリポップ!
    でWordPressインストール時にログイン名とパスワードを設定していますが、安易なものはやめましょう。サイトの乗っ取りがあるかもしれないので。

    WordPressログイン

    WordPressログイン画面

    ログイン画面が表示されるアドレスに直接アクセスします。これは、WordPressインストール時に設定してものとなります。

    【ログイン名】【パスワード】に関しても、インストール時に設定したものを入力しますとWordPressのダッシュボード画面が表示されます。

    テーマを選ぼう

    左側のメニューより「外観」を選択します。

    WordPressテーマ

    するといくつかデフォルトで入っているテーマが選べるようになっています。使いたいテーマを選び、「有効化」してください。また、無料・有料のネット上にあるテンプレートを使用したい場合にはここより追加して有効化いたします。ちなみに筆者は「twenty seventeen」を選択しました。

    一般設定の内容を設定しよう

    左側メニューより「設定」を選択すると「一般設定」画面が表示されます。

    WordPress一般設定

    ここで設定するのは次となります。

    • 「サイトのタイトル」とても重要です。設定は変更できますが、今後Google検索エンジンとの関連性でなかなか変更しずらいものとなりますので、慎重につけましょう。
    • 「キャッチフレーズ」これまた重要です。トップページにおいてはサイトのタイトルとセットになって<tittle>~</tittle>に含まれるものとなります。これも検索エンジンにとっては大切なものとなるので、重要なキーワードを含めましょう。
    • 「WordPressアドレス(URL)」「サイトアドレス(URL)」ロリポップ!
      でインストールすると設定されています。
    • 「メールアドレス」は何に使用されるか不明ですが、サイト用に用意した方が良いですね。独自ドメインを取得しているので、レンタルサーバー上で独自ドメインのメールアドレスを作成しておきましょう。勿論、そのメールアドレス宛に来たメールを閲覧できる環境も作成しましょう。
    • 他にも日時の表示形式等の選択もありますが、そこはお好みで大丈夫です。

    パーマリンクを設定しよう

    「設定」⇒「パーマリンク設定」を選択すると次の画面が表示されます。

    WordPress-パーマリンク設定


    これが何かと言いますと、記事を投稿した時にどのように記事ページにアドレスを割り振るかを設定いたします。

    「基本」「日付と投稿名」「月と投稿名」「数字ベース」「投稿名」「カスタム構造」と選択できるようになっています。この記事のページアドレスというのはとても大切な要素になります。例えばですが、今作成している記事から過去の記事にリンクを貼りたい場合ですが、数字とか日付ってわかりずらくありませんか?また、アドレスにGoogle等の検索キーワードに引っ掛かるようなアドレスにしたくありまんせんか?

    筆者は迷わずカスタム構造を選択し、「/%category%/%postname%」を入力欄に設定しています。これで設定しておくとカテゴリーのスラッグ名と記事投稿時に設定する記事名称がアドレスとなります。記事名称は日本語以外に変更可能です。

    筆者のサイトでカメラというカテゴリーの記事である「【レビュー】デジタルHDビデオカメラレコーダー「SONY HDR-CX680」」のアドレスは次となる。

    「https://digital-life.club/camera/sony-hdr-cx680」

    他の設定をされている方もいますが、筆者は「カスタム構造」をお勧め致します。

    「WP Multibyte Patch」の有効化

    WordPressは海外製のものです。日本語を扱うには1文字のバイト数が異なる為、「WP Multibyte Patch」を必ず有効化して下さい!

    有効化するには[プラグイン]-[インストール済みプラグイン]をクリックすると、デフォルトで「WP Multibyte Patch」がインストールされていますので、有効化」をクリックして下さい。「停止」になっていれば問題ありません。下図の様な状態になっていれば問題ありません。

    WP Multibyte Patch

    まとめ

    最低限ここまでやればホームページっぽくなります。ここから先は細かい事になっていくことと、日々投稿をしていけるかがポイントとなります。やはり、WordPressのインストールの方が一番の課題となりそうな気がするので、それを簡単に行えるレンタルサーバーをお勧めいたします。

    国内最大級の個人向けレンタルサーバー『ロリポップ!レンタルサーバー』は、
    月額100円(税抜)~で容量最大400GB!しかも安いだけじゃなく
    大人気WordPressの簡単インストール/ウェブメーラーなど
    機能も満載!共有/独自SSLもバッチリ対応でセキュリティ対策も万全!
    もちろん、オンラインマニュアルやライブチャットなど、
    充実したサポートで初心者の方でも安心です。
    無料のお試し期間が10日間ありますので、
    まずはお気軽にご利用してみてくださいね!

    ▼ロリポップ!レンタルサーバーはこちら

  • 情報は金なり!WordPressでの情報発信でアフィリエイトで稼いでみよう!

    情報は金なり!WordPressでの情報発信でアフィリエイトで稼いでみよう!

    情報をお金にしませんか?

    約15年前位でしょうか、「Amebaブログ」というものをやっていました。その当時、筆者のブログはあるカテゴリにおいてランキング上位に入る程、頑張ってブログに励んでいました。勿論ですが、そのカテゴリにおいての知識の勉強はしました。そのブログで少しばかりアフィリエイト的なものも実践すると、少しばかりのお小遣い稼ぎも出来ました。

    その時感じたことは「情報」=「お金に値する価値」という認識が芽生えました。

    これは、「ドメインを持ち、正式にサイト運営をするべきではないか?」と考え、「MovableType」というツールを使用して運営てみたが甘かったです。

    約1年で「Amebaブログ」も「独自サイト」も閉鎖しました。

    「Amebaブログ」みたいたSNSサイトは他会員との繋がりがされ易いため、少しの努力でブログにアクセスしてくれる人が増加する傾向にあるんですね。しかし、独自サイトはGoogle等の検索サイトのキーワード検索で上位表示されないとアクセス増加はされないです。その難しさに挫折し、それ以降ブログからは撤退いたしました。

    しかし久しぶりにサイト運営に興味を持出し、思い切って再度チャレンジすることを決心しました。今回は「WordPress」を使用しての運営となります。筆者がWordPressでポイントとなったことを「WordPress」カテゴリで記載していきたいと思います。

    情報発信で収入を得る

    この記事を読まれている方は他のサイトの情報も読んできた方ではないかと思います。ネット社会と言うのは誰でも情報発信が行え、誰でも必要な情報を得ることが出来るんですね。

    YouTuberが一番分かりやすいんですかね?

    YouTuberが発信した情報を閲覧者が見る。見る前に広告を見ることで無料で閲覧できます。勿論、有益な情報だったり面白い情報だったりすれば閲覧者も増え、YouTuberは広告料を徴収することができます。

    民法のテレビと同じですね。

    これと同じようにブログでもこの仕組みを利用できるんですね。有益な情報を発信すれば、その有益な情報を得るために人はネット検索して情報に辿り着くんですね。書籍なんかも情報です。

    ネットと言う媒体なだけで情報はお金になるんです

    もし情報を発信してお金を儲けるのであれば、思っている以上に簡単に始められます。しかもコストは低いです。ビジネスを始めようとすると費用が掛かるイメージがありますが、ブログによるアフィリエイトは費用をそれほど掛けずに始められます。

    ちょっとお試しでやるには最高の事業なんですね。

    そしてブログを始めるならWordpressと言うCMSツールを利用しましょう!

    WordPressを利用するにはどうすれば良いのか?

    WordPressは無料で利用できるツールです

    以前のようにHTMLを駆使しながらページを作成していくということから解放されます。勿論、HTML・CSSと言った言語を全く知らない訳にはいきませんが、一度デザインが完成してしまえば、誰でも簡単にサイト更新していける仕組みとなっている自由度の高いツールです。

    しかし、コンピューターアレルギーのある方には少しばかり敷居は高いですが、細かいことに拘らなければ簡単にサイト作成が可能です。自由度の高いツールだからこそ、今現在では「WordPress」を使用してサイト運営している方が非常に多いです。

    それではどうすれば良いか?ここから記載します。

    まずは独自ドメインとレンタルサーバーの契約をしよう

    WordPressでブログを運営するためには、次の2つの契約が必要となります。

    • 独自ドメイン
    • レンタルサーバー

    独自ドメイン(○○○○.com みたいの)取得とサーバーレンタルがセットで提供されているようなケースもございますが、レンタルサーバーを将来的に変更したりしたりするケースがある場合は、別々に契約しておいた方が良いです。

    契約の順番は決まっていませんが、筆者の場合は同一日に独自ドメインとレンタルサーバーの契約をいたしました。特にレンタルサーバーに関してはWordPressが使用できる環境であることが条件になります。今は殆どが対応しているかとはおもいますが、契約内容によっては制限事項があったりもしますので要注意です。

    筆者が今回利用しお勧めのものは次となります。

    • 独自ドメインについてはムームードメイン
      となります。ドメインにもよりますがとにかく安いです。
    • レンタルサーバーはロリポップ!
      を使用しています。こちらも安価で簡単にWordPressを利用できることを売りにしています。

    ムームードメイン
    ロリポップ!
    は同一の会社が運営している為、連携がスムーズです。初めてサイト運営される方には一番簡単に始められる組み合わせではないかと思います。

    契約が終わったら早速始めてみよう!

    1. レンタルサーバーへ独自ドメインの設定を行う。
    2. WordPressのインストールをする。ロリポップ!
      にはWordPressの簡単インストール機能があります。筆者もこんなに簡単で良いの?って位にあっけなくインストール完了です。
    3. WebよりWordPressログインサイトへログインし、既にインストールされているテーマ(筆者は「twentyseventeen」を選択)やサイトタイトル等を入力しテスト投稿をしてみてください。
    4. 実際にWebを閲覧してみると、テスト投稿したものが表示されているはずです。

    たったこれだけで完了です

    あとは細かいサイトデザインやカテゴリー分類、使用するプラグインなど、どのようにWordPressで情報発信する際に表現していくかを設定していくこととなります。とりあえず今回は導入編ということで、一番最初に何をしたら良いのか?を記載させていただきました。

    次回からのWordPressの記事はもう少し突っ込んだお話ができたらと思います。