【2019.2.11更新】賢威8.0のデフォルトから色々と変更してみた
賢威8.0以下の設定を行います
  • Googleアナリティクスタグを設定したい人
  • 目次の位置や名前を変えたい人
  • 自己紹介の時,Twitter誘導をしたい人
  • タイトル下にリンク広告を貼る方法
  • 記事内にアドセンスタグを挿入する方法
  • リンクカードを貼る
  • 投稿一覧のレイアウトをカード形式にする
  • 記事下に出てくる関連記事の紹介もカード形式に
  • ヨメレバ・カエレバ系のCSS変更
  • この記事を書いている人を追加する
  • キャラ設定方法
  • 外枠で囲む方法!
  • 表(テーブル)を使う方法!

ペンのすけ

随時更新してるっす!!


こんにちは.けんゆーです(@kenyu0501_)
ブログのテーマ「賢威8.0」を使っているのですが,デフォルトのままだとちょっと使いにくいところもあるので変更していきます.
このブログで変更している箇所の内容をつらつらと書いていきます!
ペンのすけ

賢威8は,もちろんキャラの吹き出しも出来るぞ!

賢威8.0β版 (Ver 8.0.0.0b5) アップデート済

2019年1月15日現在,賢威8.0βのバージョンは,8.0.0.0b5です.
このブログは最新版のアップデートをしてます.

なお,賢威購入者は以下のサポートページから無料でバージョンアップできます.
(参考:「賢威サポートページ」)
ログインする必要あり!

賢威のテンプレートが良いと思った方はこちらから!
(少々高いですが使いやすいので満足してます!)

知らなかったGoogleアナリティクスの簡単設定

ペンのすけ

Googleアナリティクスとは,Googleが無料で提供しているアクセス解析ツールだよ!サイトの訪問人数の数とかページビューとか,調べることができるよ


今まで,ダッシュボートから簡単にトラッキングIDを設定できることも知らずに,プラグインの「all in one seo pack」を入れてました.泣
しかし,ダッシュボードから1秒で設定できました.
all in one seo packはいらない!!

「賢威の設定」クリック

「Googleアナリティクスタグ」こちらにグローバルサイトタグを貼るだけ!

ちなみにグローバルサイトタグは以下の画像の赤く囲まれている部分です.

以上です!!

さすが賢威.
「all in one seo pack」速攻で消しました.

ペンのすけ

サイトの表示速度も落ちますのでなるべく必要ではないプラグインは使いたくですよね!

目次の位置を変えたい!

賢威8はデフォルトだと一番上にあるんですよね.
これが気に入らない.

もうちょっと下げたい.
目次の前に簡単なイントロダクションを入れて,メインテーマの目次を見せたい.

ペンのすけ

いきなり目次が出てきても,えっ!!なるよね


これも超簡単にできます.
以下のコードを目次を挿入したい部分に,テキストに貼るだけ

<div id=“keni_toc”></div>をテキストに挿入して,ブログをアップロードするときに,目次の表示をするという所にチェックを入れてください!

そんな簡単なことだったなんて,今まで適当にブログ更新していたおいらはアホだ!

目次の名前を変えたい!!

賢威8で目次の名前を変えたい時には,CSSを編集するしかないです!

ペンのすけ

CSSといっても簡単だから大丈夫!!安心してね!


単なる「目次」では,ちょっとしょぼかったので,おいらは「読みたいところにジャンプ!!」にしました笑

これはワードプレスの編集より「外観」→「テーマの編集」→「js」→「keni-toc.js

keni-toc.js」を開くと一番下の方に「目次」という日本語が見えるので,そこを自分がしたい名前に変更してください!

ここを好きな名前に変えると変わります!

記事の初めに自己紹介&ツイッターへのリンクを貼ってみた

これもかなり簡単にできました.

以下を埋め込むだけです.

けんゆーです(<a href=”https://twitter.com/kenyu0501_?lang=ja“>@kenyu0501_</a>)

自分の名前と,リンクにツイッターURL,それにアカウント名を記載してます.

これでツイッターへの誘導ができました!
簡単でした...とほほ

ペンのすけ

メモ帳とかにテンプレートとして残しておいて,使い時にコピーアンドペーストですぐ呼び出せるようにしておくと便利だよ!

タイトル下にリンク広告を貼る方法

これです.

賢威8でタイトル下にリンク広告を貼る方法を色々と検索しましたが出てきませんでした.
なので,おいらは直接広告コードを貼りました.
手順はすごく簡単で,外観テーマの編集テーマファイルTemplate-partscontent-post.php

以下の画像は「content-post.php」です.

<h1 class=”entry_title” itemprop=”headline”><?php the_title();></h1>
の下にリンク広告を貼り付けます.

以上で終わりです.
反映されるのを30分とか1時間とか待てば勝手にタイトル下にリンク広告が出てきます.

ペンのすけ

タイトル下やアイキャッチ画像の下にリンク広告を貼るとクリックされる可能性が増えるんだって〜!

タイトル下ではなく,アイキャッチ下にリンク広告を貼る方法

タイトルではなく,アイキャッチ画像下に貼りたい場合は,
「content-post.php」の以下の画像の位置にGoogle Adsense広告を貼ってください.

<img src=”<?php echo $url_thumbnail; ?>” alt=”<?php echo strip_tags( get_the_title() )  ?>” />
の真下です!

記事内にアドセンスを貼る方法

複数のアドセンス広告を,奇数番目のH2タグの上におきたい場合の変更をします.
プラグインは極力使いたくないので,どこぞかに参考になるサイトがないかなと思っていたらこちらにありました.
(参考:「WordPressで記事中にアドセンスを自動挿入する方法」

「外観」→「テーマの編集」→「functions.php」
に,リンク先に示されてあるphpコードを貼り付けて,自身のアドセンスコードを挿入したらOKです!
(コードはリンク先様のをご覧くださいませ!)

記事の最後にアドセンス(レスポンシブ)広告を貼る方法.

H2タグなど関係なしに,ブログ記事の一番最後に,レスポンシブ広告を貼りたい場合は以下です.
「content-post.php」の画像の位置にGoogle Adsense広告を貼ってください.

<?php the_content( );   ?>
のすぐ下にレスポンシブ広告リンクを貼ると,各記事の一番下に広告が出てきます.

リンクカードを貼る

記事中において,他記事にリンクを貼りたいときは,テキストリンクよりもリンクカードを使った方が見た目が綺麗です.

ペンのすけ

賢威のリンクカードはシンプルの横長で凄く見やすいよね!


リンクカードを貼るコードはかなりシンプルで,

urlの〇〇〇〇の中に,リンク先にURLを入れたら良いのですが,なぜか僕の賢威8.0だと文字化けします.

このような感じです.
調べると,現在出ている賢威8のアップデートをすると文字化けが解消されているらしいです.

ペンのすけ

文字化けの原因はバージョンが古いのです!!


おいらは賢威8.0.0.0b5にアップデートを施しました.
そうすると,文字化けが綺麗に消えました.

このような感じです.
賢威のアップデートは,賢威のサポートページに行きましょう!!
(参考:「賢威サポートページ」)
随時アップデートがあるそうなので,今後とも期待です!

投稿一覧のレイアウトをカード形式にする

ブログホームページの投稿一覧がデフォルトのままだと,ちょっと見にくいのでカード形式にする方法です.
全体的にどのようなコンテンツがあるか見たい時に,俯瞰してみれるので良いです.

方法は
「カスタマイズ」→「投稿一覧のレイアウト」→「カード」

にするだけで,トップページが変更されます.


ペンのすけ

スマホでは分からないけど,パソコン画面で見るとカード形式は見やすいぞ!

記事下に出てくる関連記事の紹介もカード形式に!

記事を読み終わったら最後にオススメしてくれる関連記事の表示方法の変更です!
おいらのブログでは,デフォルトの「リスト表示」ではなく「カード表示」にしてます.

設定方法はとても簡単で,
「賢威の設定」「投稿設定」「サイト全体の関連記事設定」
関連記事のスタイルの選択をカード型にするだけです.

あとは,一番下の「変更の保存」を押して完了です.

ヨメレバ・カエレバ系のCSS変更

ヨメレバやカエレバ系の外部リンクを貼りたいときには,アマゾンや楽天などの大手ECサイトに選択的に飛べるようにするためにCSSの変更が必要です.
おいらのブログでは,こちらのページからCSSをコピペさせていただきました.
(コピペ元:「CSSコピペでOK!カエレバ ・ヨメレバ・トマレバをまとめてカスタマイズ[ver2]」

CSSを貼る位置は,
「カスタマイズ」「追加CSS」
の空白の欄に貼り付けるだけでOK!

このような感じで貼り付けます.

これが終わったらあとは,カエレバ ・ヨメレバ系でURLを取得して,ブログに貼り付けるだけです!
以下のようにやります.


ペンのすけ

Amazonアソシエイトや楽天のアフィリは事前に登録しておいてね!IDが必要なんだよ!

この記事を書いている人を記事下に追加する

記事の下に,以下のようなプロフィール情報+各種SNSへリンクを飛ばす方法です.
(賢威8.0.0.0b5へアップデートした後にやってます)

まずはじめに,
「ユーザー」「あなたのプロフィール」に行きます.


そこで,TwitterやFacebook, Instagramの自分のアカウント情報を入れます.
また,記事下に出てくるプロフ情報も埋めます.

プロフィールのサムネイル(画像)も登録してください

以上が全て終わると,投稿者情報を表示する設定をします.
「賢威の設定」「投稿設定」「投稿者情報を表示する」
で全て完了です!

キャラクターの設定

賢威8.0からは,キャラ設定のプラグインを公式のサポートページからダウンロードする必要があります.
以下はサポートページから抜粋しましたが,「賢威プラグイン」なるものを取り入れる必要があるそうですので早速ダウンロードしました.

keno-character-plugin.zipを用意します.
(ZIP形式じゃないとファイルのアップロードができないので,ダウンロードしたファイルを圧縮して下さい!)

メニューの「プラグイン」「新規追加」から,zipファイルをインストールして,プラグインの有効化をします.
すると,編集メニューにこれまでなかった「賢威キャラクター」が突如現れるので,登録したいキャラクターを自分で作って下さい.
登録が完了すると,テキストエディタにクイックタグが増えてると思います.

ペンのすけ

キャラが使えるって良いね!有効に活用してね!

外枠で囲む方法

何かを強調したいとき,太字とかマーカーとかいろんないろんな方法があると思いますが,段落ごとに外枠をつけて強調したい時もあると思います.

こんな風に,この文章自体に外枠を設けて記事内で差別化ができたりします.
もちろん,組み合わせてキャラクターを内部におくこともできます.
ペンのすけ

わーいわーいわーい!

いろんなパターンで活用できるので,オススメですよ!

    • 枠の太さ(boder:  ◯px)も変えれます
    • 外枠の色(border-color)も変えれます
    • 余白(padding)なども可能です.
    • 外枠の角に丸みを与えることもできます
      (border-radius: ◯px)

書き方は,ワードプレスのテキスト部に以下のコードを入れるだけです.

ペンのすけ

うまく活用してね!

表(テーブル)を使う方法

表は,普通にHTMLで表を埋め込むときに使うコードがそのまま使えます.
以下のような表が普通に作れます.

表の名前(ご自由に!)
特徴1 特徴2 特徴3
〇〇1 〇〇2 〇〇3
△△1 △△2 △△3

コードについてはこちらです.

表もうまく活用してブログの見易さを追求してください!

まだまだ改良していきます!

これからも気になるところがあればいろいろとこの記事に追加していきます.
賢威のテンプレート良いなーと思った方はこちらから!


ペンのすけ

見やすいサイト作り頑張っていこうね!!