Xeory Baseカスタマイズ

Xeory Base の「続きを読む」の色をカスタマイズする方法

Xeory Base の「続きを読む」の色をカスタマイズする方法

今回は、Xeory Base の「続きを読む」の色をカスタマイズする方法だ。とても簡単なので是非、チャレンジしてほしい。

まず、Xeory Base の「続きを読む」について解説していこう。

Xeory Base の「続きを読む」は、記事作成時に以下の画像の『続きを読むダグを挿入する』を追加したときのみに一覧表に表示されるものだ。

Xeory Base の「続きを読む」の色をカスタマイズする方法

このタグを追加したら、一覧表には以下のように表示されている。

Xeory Base の「続きを読む」の色をカスタマイズする方法2

このようにデフォルトでは青色のボーダーで、カーソルを合わせると枠内の背景が青色に変化、そして文字色も白に変わる。これが Xeory Base の基本的な設定だ。

しかし、このような色合いでは目立たない気がする。なので、もう少し目立つように「続きを読む」の背景を青色にしようと思う。

「続きを読む」の色を3ステップでカスタマイズ

まず、テーマ編集からスタイルシートに移行し、「.more-link」を探す。

テーマ編集 > スタイルシート (style.css) > .more-link

探しだしたら以下の3ステップでカスタマイズしていく。

  1. 『続きを読む』の背景タグを追加
  2. 文字を白色に変更
  3. ホバー色を設定

以上だ。以下、画像付きで解説していこう。

1,『続きを読む』の背景タグを追加

まず、以下の部分に背景タグ「 background: 」を追加する。今回は色をデフォルトと同じ「#2581c4」にしてみた。追加するタグは以下の通りだ。

background: #2581c4;

Xeory Base の「続きを読む」の色をカスタマイズする方法6

このままだと「続きを読む」という文字が見えないので文字色のカスタマイズを行う。

2,文字を白色に変更

次に文字色のカスタマイズだ。今回は背景が青色(#2581c4)なので文字の色は白にしたいと思う。カスタマイズする箇所は「.more-link」部分の「color: #2581c4; 」を「color: #fff;」に変更する

Xeory Base の「続きを読む」の色をカスタマイズする方法7

3,ホバー色を設定

次にホバー色の背景を変更する。ホバー色は何でもいいと思うが、個人的には同系の色が好みなので、ここでも青色系で設定していく。ホバー色の変更は以下の箇所で行う。

background: #3770ad;

Xeory Base の「続きを読む」の色をカスタマイズする方法8

以上のカスタマイズを行ったら「ファイルを更新」をクリックし、更新する。そうすると一覧表では青色に変更されている(好みによって背景色を変えても良い)。

Xeory Base の「続きを読む」の色をカスタマイズする方法10

因みに、このカスタマイズは僕のサイトでの話しだ。つまり、ワードプレスのテンプレートがXeory Baseであることが前提だし、色も僕自身が決めたもの。であるから、テンプレートが違っていればまた違うだろうし、色の場合も今回は青だったけど、もしも赤色とか緑色にしたい場合はそれに適応したタグを使用すべきだ。まぁ、色のタグを変更するだけなので簡単なのだが。

なお、Xeory Base をインストールしたい方はこちら「Xeory Baseのインストール方法」の記事を参考にしてほしい。

Xeory Base の記事下にアドセンス広告を貼る方法

Xeory Baseにアドセンス広告を貼る3

ワードプレスでブログを書く人には、アドセンス広告やアフィリエイトをする人が多い。中でもアドセンス広告は人気で、ブログ運営者のほとんどは広告を貼っているようだ。

ワードプレスにアドセンス広告を貼るにはプラグインが必要であるが、スタイルシートをカスタマイズしても広告を貼ることはできる。個人的には、広告タグを直接スタイルシートに貼った方がいい。なぜなら、アドセンス広告を貼るための使い勝手のいいプラグインが今のところないからだ。

僕自身もいくつかプラグインを使ってみたが、たまにアクセスできなかったり、いろんな機能がありすぎて複雑だったりと、本当に使いにくいと思う。なので、ここではプラグインを使わずに、アドセンス広告を貼る方法を紹介する。

Xeory テーマの記事下にアドセンス広告タグを追加

プラグインを使わないでアドセンス広告を表示するには、スタイルシートをカスタマイズすればいい。今回は、ワードプレスのテンプレート『Xeory Base』の記事下に表示する方法を中心に解説していく。

Xeory Baseの記事下にアドセンス広告を貼る手順は以下の通りだ。

まず、ワードプレス管理画面から

外観 > テーマ編集 > 単一記事投稿 (single.php)

に移行する。

Xeory Baseにアドセンス広告を貼る

アクセスしたら、『 <?php the_content(); ?> 』を探し、その下にアドセンス広告タグを貼る(アドセンス広告タグは事前に取得しておくこと)。

Xeory Baseにアドセンス広告を貼る2

その後「ファイルを更新」をクリックすれば記事下にアドセンス広告が表示される

なお、同じ手順で『個別ページ』もカスタマイズが可能だ。個別ページの場合は、固定ページテンプレート (page.php)の中に『 <?php the_content(); ?> 』があるので、この下に広告タグを貼ればいい。

記事下に最適な広告サイズ

アドセンス広告のサイズは、結構な種類がある。が、記事下に最適な広告サイズは「336×280 レクタングル(大)」がオススメだ

このサイズだとパソコンにも良い大きさだし、スマホ表示でも画面からはみ出さずに表示ができる。以前は幅が300あたりが妥当だったが、最近のスマホは画面も大きくなったので、アドセンス広告も少し大きいのを選ぶと良いだろう。

[cc id=6738]

故障かなって思ったMacを復活させた方法

MACの調子を取り戻す方法

今日はワードプレスを使うにもブログを書くにも欠かせないツール、Macの話しだ。

僕はMacを愛用しているんだが、最近、ちょっと調子が悪い。再起動しようとしたらできないし、起動して少し放置したらスリープ後、そのまま戻らないし・・・(涙)

いったいどうなってしまったのかって思ってた。

僕はMacを2台持っていて、そのうちの1つはMacBook、でもう1つがMacbBook Airだ。家ではMac Bookを使っており、外ではMac bBook Airを使うようにしている。

2台とも使い分けているんだが、ちゃんとシステムの更新はしているし、セキュリティーソフトも入っている。また変なコンテンツをダウンロードもしないし、ビジネスとして健全に使っていた。メモリもまだまだ容量はあるし、Macを地面に落としたこともない。にも関わらず、突然調子が悪くなった。

一旦、調子が悪くなると使わなくなるものだ。しかし、1台のパソコンでは何かと不自由を感じていたので、どうにか復活できないか解決策をさがしていた。そしたら・・・、あったんだよ、解決方法が。

以下、僕がやった『Macを復活させた方法』を紹介する。

MACの調子を取り戻す方法

Macを復活させた方法

Macを復活させる方法はとても簡単だ。方法は2つあって以下の手順ですすめればOKだ。詳しく解説する。

1,SMCのリセット

  • MagSafeアダプタの取り外し
  • 電源ボタンを 10 秒間押し続けてMacを強制終了
  • MagSafeアダプタの接続
  • 「shift」「control」「option」キーを押しながら起動

2,PRAMのリセット

  1. 電源ボタンを 10 秒間押し続けてMacを強制終了
  2. 「command」「option」「P」「R」キーを押しながら起動し起動音が2回鳴るまで押しっぱなしにする

(引用:http://matome.naver.jp/odai/2133472658282700501)

いかがだろうか。とても簡単だと思う。ほんの数秒でおわる作業だ。こんな簡単なステップで僕のMacは復活できたし、今はすこぶる調子が良いんで嬉しい限りである。

Macを復活させた方法 パート2

Macを復活させるとても簡単な方法がもう1つある。その名も「セーフブート」。これはとても簡単な復活方法なので、追記として書き記しておく。

手順は簡単。以下のステップを踏むだけ。

  1. Macの電源をオフにする
  2. 電源を入れる
  3. 「ジャジャーン」という音が鳴ったら「Shift」ボタンを押す(指は押したまま)
  4. アップルロゴがでてきたら指を放す
  5. しばらくすると下記のような表示になる。

この表示がでれば完了だ。セーフブートの手順はこれで以上だ。

パソコンを購入しようかどうか迷っていたんだが。購入するのはもう少し先でもいいかもしれないな。というわけで、今回は以上だ。

今回はMacに因んだ記事だったので、ラーメンズのMacのCM動画を貼っておく、個人的にとても好きなCMだ。

Xeory Baseの『見出しサイズ』『見出しボーダー』『行間』などのカスタマイズ

Xeory Baseのタイトルをカスタマイズ4

Xeory Base はとても良いワードプレスのテーマだと思う。無料だし、使い勝手もいいからだ。ただ、バズ部のサイトと比較してみると、無料のものと少し違う事がわかる。例えば、見出しの大きさや行間の違いなどがそうだ。今回はその部分をバズ部のサイトに近づけてみたいと思う。

まず、今回行ったことは以下の3つだ。

  1. 「記事タイトル(h1タグ)」と「見出しh2タグ」を大きくした
  2. 文字の行間のカスタマイズ
  3. 見出しh2のボーダーの色と大きさを変更

それぞれ解説していく。

[cc id=3506]

記事タイトル(h1タグ)と 見出しh2タグ を大きくした

まず、テーマ編集 > base.css へと移行する。

記事タイトルのタグは「post-title」の部分だ。この箇所を探しだし、数字を変更すればカスタマイズできる。なお、数字が大きいほど文字は大きくなる。

Xeory Baseのタイトルをカスタマイズ

次は見出しのh2のカスタマイズだ。

こちらはタグ「h2」の数値を変更すれば、カスタマイズできる。まず「post」タグを探し、その中の「h2」を探す。そして、数値を変更すればカスタマイズできる。以下の画像を参照するといい。なお、ここも数字が大きいほど文字は大きくなる。

Xeory Baseのタイトルをカスタマイズ2

文字の行間のカスタマイズ

次に、行間と文字サイズのカスタマイズを行う。

ここのカスタマイズも数字の変更だけだ。カスタマイズする箇所は「.post-content p,」の付近にある「line-height」で行う。この部分を探し、数字を調整すればいい。以下の画像を参照するといいだろう。

Xeory Baseのタイトルをカスタマイズ3

こちらの記事にも詳しく書いているのでご確認を「「Xeory Base」の文字サイズと行間をカスタマイズ」。

見出しh2のボーダーの色と大きさを変更

Xeoryでは、見出しh2にボーダー(下線)がひかれている。無料テーマの場合はグレーのような色で目立たないようになっているが、バズ部のサイトでは青色でしかも線が太い。この部分も近づけたいと思う。

カスタマイズするならまず、テーマ編集 > スタイルシート(style.css)へと移行する。そして「h2」の「border-bottom」を探しだす。線を太くしたければ数字を大きくするし、線の色を変えたければ「#」の部分を変更する。

Xeory Baseのタイトルをカスタマイズ4

以上で完成だ。

今回はちょっと細かいカスタマイズだったが、「美は細部に宿る」というし、ちょっとした拘りは大事だと思う。派手なカスタマイズよりもこうした少しの違いで、全体の雰囲気がガラリとかわるのは個人的に好きな方だ。

まぁ、今回の記事は備忘録として記録しているので誰かにむけて書いたものでもない。しかし、誰かの役に立ってくれれば嬉しく思う。

Xeory テーマのインストール方法

Xeoryテーマのインストール方法

最近、何かと目にするようになったバズ部のワードプレステーマ『Xeory Base』。SEOに強いワードプレスのテンプレートとして情報発信する人やアフィリエイターなどが多く使っている。

そのデザインはシンプルだが、とても使い勝手が良い。例えば、CTA(コール・トゥ・アクション)というメルマガ登録する機能やランディングページ(LP)も簡単に設定できる。

通常、このような仕組みをワードプレスに導入するなら、スタイルシートを結構いじらないといけないのだけど、Xeoryテーマは最初から付属しているからとても良いテンプレートだ。

しかも、このテンプレート、完全無料だからさらに良い。そんなXeoryテーマのインストール方法を今回は紹介したいと思う。

Xeory Base テーマをインストールする

まず『Xeory Base』にアクセスする。そうすると以下のような画面になる。

Xeoryテーマのインストール方法

下にスクロールしていくと以下のようになる。今回は『Xeory Base』なので右側の「無料ダウンロード」をクリックする。

Xeoryテーマのインストール方法2

さらに「無料ダウンロード」をクリックする。

Xeoryテーマのインストール方法3

そうすると「新規登録」という画面にうつる。ここでは、名前、メールアドレス、パスワード、利用規約に記入する欄がある。必須の部分を全て記入する必要がある。

Xeoryテーマのインストール方法4

Xeoryテーマをインストールするにはメールアドレスを登録しなければいけないけれど、安心して欲しい。これは、バージョンアップがあった場合にお知らせするためのものだ。変なセールスメールがくるとかではないので、気兼ねなく登録するといいだろう。

無事、登録が済んだらメールに返信がくる。同時にダウンロード画面に移行するのでココからダウンロードするといい。

Xeoryテーマのインストール方法5

Xeory Baseの利用規約

Xeory Baseの利用規約は必ず読むこと。まぁ、そんな厳しい縛りはないようだけど、でも使うなら一度は目を通すことをお薦めする。

Xeoryテーマのインストール方法6

[cc id=6738]

「Xeory Base」の文字サイズと行間をカスタマイズ

Xeory Baseの文字を大きくする

Xeory Base の文字は少し小さいと思う。また行間も狭い。文字が小さかったり、行間が狭いと読みにくい文章になる。なので、サイト訪問者がストレスなく文字が読めるように、文字と行間のカスタマイズを行ってみた。

以下から、その方法を解説していこう。

文字を大きくする方法

文字のサイズを大きく方法はまず、

「外観」→「テーマ編集」→「base.css」

へと移行する。

この中で「all」という部分を探し、bodyタグ部分の「font-size:」の部分を見つける。「font-size:」の数値を大きくし『ファイルを更新』をクリックすれば、投稿記事の文字、また個別ページの文字が大きくなる(以下、画像を参照)。

Xeory Baseの文字を大きくする

なお、テンプレートをXeory Baseとして、推奨する文字の大きさは17px〜18pxだ。

行間を広げる方法

次に文字の行間を広げる方法だ。

やり方は同じく、

「外観」→「テーマ編集」→「base.css」

へと移行する。

「.post-content p,」の部分を探す。この中の「line-height:」が行間を調整するタグなので、この数値を大きくすれば行間が広がる(以下、画像を参照)。

Xeory Baseの行間を広げる

なお、推奨する行間の数値は「1,9」だ。

以上でXeory Baseの文字と行間のカスタマイズは終了だ。

[cc id=6738]

「Xeory Base」の横幅を調整する方法

Xeory Baseの横幅を調整する

今回は「Xeory Base」の横幅(2カラム)を調整する方法を紹介する。

まず、

「外観」→「テーマ編集」→「スタイルシート (style.css)」

へと移行する。

このスタイルシートの中で「all display」を探し、この中の「width:」の数値を変更し、更新すれば横幅の調整が可能だ。以下、カスタマイズ箇所は以下の画像を参照してほしい。

Xeory Baseの横幅を調整する

ご覧のように、デフォルトでの横幅の数値は「1200px」だが、この数値を低くしていけば横幅は狭くななる

少しコンパクトにサイトのサイズを構成したい場合は、数値を低く設定してもいいだろう。個人的には、お980くらいが見やすいように思う。

1カラムの横幅を変更する方法

Xeory Base の1カラムの横幅は広すぎる。そう感じている人も多いだろう。そこで1カラムの横幅も調整方法も紹介する。

1カラムの横幅の変更は2カラム同様、

「外観」→「テーマ編集」→「スタイルシート (style.css)」

へと移行する。

Xeory Base の1カラムは「1000px」になっているので、ここの数値を変更すればいい。変更箇所は以下の画像を参照してほしい。

Xeory Baseの1カラム横幅を調整する

1カラムは最近のブログに多い構成だ。サイドバーがない分、記事に集中できるというメリットがあるので、人気が集まっているようだ。Xeory Baseの1カラムを使用するなら、横幅の調整もしてみるといいだろう。推奨する数値が800前後が良いように思う。

[cc id=6738]

「Xeory Base」のトップとフッターにボーダーを追加

Xeory Baseカスタマイズ3

今回は「Xeory Base」のトップとフッターに色つきのボーダーを追加するカスタマイズ方法を紹介する。まぁ、このボーダーはなくてもいいものだけど、少しサイトの色を出すなら必要だと思う。

無料で配布されている「Xeory Base」のテンプレートには通常、トップとフッターには何もない。配布されているバズ部のワードプレステーマは以下の様にシンプルだ。

Xeory Base

このシンプルなデザインのトップとフッターに、青色のボーダーば追加する。とても簡単なので是非、チャレンジしてみてほしい。

「Xeory Base」のトップに青色のボーダーを追加

まず、ヘッダーの部分からボーダーを追加するカスタマイズを紹介しよう。

ワードプレス管理画面の外観からテーマ編集にいき、スタイルシート (style.css)に移行する。

「外観」→「テーマ編集」→「スタイルシート (style.css)」

このスタイルシートの中から『header』のタグを探し、そして以下のタグを追加する(画像参照)。

 border-top: 10px solid #1450aa;

タグを追加したらこんな感じだ。

Xeory Baseカスタマイズ2

タグを追加し更新すればOK。すると以下の様になる。

Xeory Baseカスタマイズ3

見事にヘッダーの上にボーダーが追加されているはずだ。

なお、数字はボーダーの太さで、「#1450aa;」は色のタグだ。ボーダーを太くしたければ数値を大きくすればいいし、色を変更したければ他の色タグに変更してもいいだろう。

「Xeory Base」のフッターにボーダーを追加

つづいて、フッターにボーダーを追加するカスタマイズだ。

Xeory Baseのフッターのカスタマイズも基本、ヘッダーと変わらない。ヘッダー同様にスタイルシートの中から「footer-02」を探し、以下のタグを追加するだけ。

 border-bottom: 10px solid #1450aa;

ただ、ここでひとつ注意して欲しいのは、ボーダーを追加する箇所がフッターなのでタグの一部が「bottom」になっていることだ。ここをヘッダー同様に「top」にしてしまうと変になってしまうので注意していきたい(画像参照)。

Xeory Baseカスタマイズ4

タグを追加し、更新すればフッターにもボーダーが追加されている。

Xeory Baseカスタマイズ5

なお、ここでも色のタグや数値を変更する事も可能なので、お好みに合わせてカスタマイズするといいだろう。

個人的にはボーダーがあった方がサイトが締まって見えるし、色を出しているのでオリジナル性も感じる。シンプルなカスタマイズだけど、その効果は大きいと思う。

[cc id=6738]