カテゴリー: ブログ

フォントの設定

 
WordPressでの記事等のフォントは、「style.css」でfont-familyを変更して設定する。ここでは、その設定方法について以下にメモ。
 

Font-Familyについて

 
フォントを変更するにあたり、どのfont-familyをどのように設定しようかと考えたのだが、こちらのサイトに、著名サイトのfont-familyが紹介されていた。その中に、自分もよく利用する「クックパッド」で採用しているfont-familyが紹介されていたので、こちらを利用することにした。
 

「クックパッド」のfont-family
 
font-family: ‘Hiragino Kaku Gothic Pro’, ‘ヒラギノ角ゴ Pro W3’, Meiryo, メイリオ, Osaka, ‘MS PGothic’, arial, helvetica, sans-serif;

 

Twenty Sixteenでのフォントの設定

 
「style.css」での主な部分のフォントの設定箇所は以下のとおり。

記事のフォント

/**
* 3.0 – Typography
*/
body,
button,
input,
select,
textarea {
color: #1a1a1a;
/* font-family: Merriweather, Georgia, serif;　記事のフォント変更　*/
font-family: ‘Hiragino Kaku Gothic Pro’, ‘ヒラギノ角ゴ Pro W3’, Meiryo, メイリオ, Osaka, ‘MS PGothic’, arial, helvetica, sans-serif;

 

引用(blockquote)のフォント

/**
* 3.0 – Typography
*/
・・・
blockquote {
border: 0 solid #1a1a1a;
border-left-width: 4px;
color: #686868;
/* font-size: 19px;　引用のフォント　*/
/* font-size: 1.1875rem;　*/
font-size: 12px;
font-size: 0.75rem

 

タイトルのフォント

 
サイトのタイトルのフォントは、14.0 – Media Queries の中で設定。

/**
* 14.1 – >= 710px
*/
・・・
.site-title {
/* font-size: 28px;　サイトのタイトル*/
/* font-size: 1.25rem;　*/
font-size: 32px;
font-size: 2rem
line-height: 1.25;
}

 

「前/次」(post-navigation)の記事タイトルのフォント

 
「前/次」の記事タイトルのフォントも、前項と同じく14.0 – Media Queries の中で設定。

.post-navigation .post-title {
/* font-size: 28px;　「前/次」の記事タイトルのフォント */
/* font-size: 1.75rem;　*/
font-size: 25px;
font-size: 1.5625rem
line-height: 1.25;
}

 

記事のタイトル

 
記事のタイトルは、「.entry-title」で設定。

/**
* 14.4 – >= 985px
*/
・・・
.entry-title {
/* font-size: 40px;　記事のタイトル*/
/* font-size: 2.5rem;　*/
font-size: 25px;
font-size: 1.5625rem;
line-height: 1.225;
margin-bottom: 1.05em;
}

 
 
以上で、主な部分のフォントやフォントサイズについて変更することができた。

 
スポンサーリンク

投稿一覧のでの記事の並び

 
WordPressでの「投稿一覧」を表示すると、Defaultでは記事の投稿順に上から表示されている。これを、特定のページを上部に表示させたり、非公開の記事がいくつかある中で先に公開したページを下部にもっていったりなど、表示順を変更したい場合について調べたので簡単にメモ。
 

プラグイン「Intuitive Custom Post Order」の導入

 
投稿一覧での表示順は、「Intuitive Custom Post Order」というプラグインを使うと簡単に変更することができた。
プラグインは、WordPressのメニューにある「プラグイン」→「新規追加」にある「プラグインの検索」で「Intuitive Custom Post Order」で検索して追加することができる。
 

 
このプラグイン適用後の投稿一覧では、一覧表示されている記事の並び順をマウスの『Drag & Drop』で変更できるようになった。

 
スポンサーリンク

Twenty Sixteen でのページ下部にでる記事のナビゲーション(「次の投稿」「前の投稿」)について、自分には表示が少し見づらかったことと、この「メモ帳」ではTOPページでcontents(目次)を表示しているので、この部分を非表示にする方法について色々と調べてみた。こちらのサイトの「Twenty Fourteenでの非表示の方法」を参考にさせて頂き、style.cssの最下部に以下の4行を追加。

/*** 「次の投稿」「前の投稿」を非表示 ***/
.nav-links {
display: none;
}

 
設定反映後、記事ページを見てみると、Twenty Sixteenでもちゃんとページ下部にあった前後の記事への誘導部分が非表示にすることができた。

 
スポンサーリンク

Googleアドセンス

 
この「メモ帳」には、Googleの広告配信サービス(Google AdSense)を設置している。以下に、その申請～設定までについてメモ。
 

Google アドセンスの申請(1次審査)

 
この「メモ帳」は当初FANBLOGを利用していたのだが、Google AdSenseを申請しようとしたところ、「URL にはパス（example.com/path）やサブドメイン（subdomain.example.com）を使用できません。」というメッセージが表示され申請できなかった。その後、独自ドメインを取得したので、Google AdSenseの申請を行うことにした。
 
申請にあたってインターネットで情報を集めてみると、色々な制約があるので、当たり障りのない日記などの「申請用のブログを作成」する方がよいという紹介が多数見つかった。制約について、Google AdSense のヘルプからコンテンツポリシーを見てみると、”アダルトコンテンツ”、”個人、集団、組織を誹謗中傷するコンテンツ”・・・と記載されているのだが、この「メモ帳」には特にそうした内容のものはない(と思っている)ので、そのまま申請してみることにした。
 
申請は、Google AdSenseのページにある、「お申し込みはこちら」より、アカウントや広告を掲載するサイトのURL(この「メモ帳」)を入力して送信。翌日メールを見ると、「Google AdSense によるお申し込み内容の審査が完了しました」という連絡が届いていた。メールには、「Google AdSense にログインして最初の広告ユニットを作成し、承認プロセスを完了しましょう。」とあり、実際に広告を掲載して2次審査があるようだ。
 

Google アドセンスの申請(2次審査)

 
適当なサイズの広告を作成して、記事の下部に掲載することにした。広告掲載時にも何か制約がないかと確認してみると、広告の配置に関するポリシーに以下の記載があった。

広告ラベルには、「広告」または「スポンサーリンク」のみを使用するようお願いいたします。それ以外のラベルは使用できません。

 
このメモ帳では、「スポンサーリンク」と記載してコンテンツと区別することにした。このようにして広告を掲載した後は、「メモ帳」を更新する以外には特に何もせずに結果を待つことにした。
 

アカウントの有効化

 
審査にはある程度時間がかかると思っていたのだが、1次審査終了の連絡メールを受けた2日後に、「AdSense アカウントの有効化が完了しました。」というメールが届いた。自分のサイトを見てみると、それまで空白だったスペースに、無事、広告が掲載されていることを確認することができた。
 

 
スポンサーリンク

広告の周りに表示される枠線について

 
さほど気にならなかったのだが、Google AdSenseの広告枠の周りに、青色の線のようなものが表示されていた。最初は一時的なものなのかと思ったのだが、どの記事ページでも、スマートフォンで見ていてもこの「青色」の枠線のようなものが表示されていたので、これを消す方法について以下にメモ。
 

広告枠の背景色

 
こちらのページに『Google Adsense表示前にあらわれる黄色の背景色を非表示にする方法』について記載されていた。自分の場合は黄色ではなかったが、確かに、広告枠の背景色が広告とずれている感じだった。
 
(設定変更前の状態)

 

そこで、試しにINSタグの背景色の設定を変更してみることにした。
 

INSタグの設定変更

 
INSタグの背景色の変更は、「WordPress」の「外観→テーマの編集」から「style.css」を以下のように修正した。

/**
* 3.0 – Typography
*/

(中略)

ins {
/*background: #007acc;　*/
background: none;
color: #fff;
padding: 0.125em 0.25em;
text-decoration: none;

 
上記のように背景色の設定をコメントアウト、”none”の設定を追加して「設定を保存」し、記事ページを更新してみたところ、ちゃんと広告周りの枠線のようなものが消えていることが確認できた。

 
スポンサーリンク