Free Notebook
WordPressでの「投稿一覧」を表示すると、Defaultでは記事の投稿順に上から表示されている。これを、特定のページを上部に表示させたり、非公開の記事がいくつかある中で先に公開したページを下部にもっていったりなど、表示順を変更したい場合について調べたので簡単にメモ。
投稿一覧での表示順は、「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 AdSense)を設置している。以下に、その申請～設定までについてメモ。
この「メモ帳」は当初FANBLOGを利用していたのだが、Google AdSenseを申請しようとしたところ、「URL にはパス（example.com/path）やサブドメイン（subdomain.example.com）を使用できません。」というメッセージが表示され申請できなかった。その後、独自ドメインを取得したので、Google AdSenseの申請を行うことにした。
申請にあたってインターネットで情報を集めてみると、色々な制約があるので、当たり障りのない日記などの「申請用のブログを作成」する方がよいという紹介が多数見つかった。制約について、Google AdSense のヘルプからコンテンツポリシーを見てみると、”アダルトコンテンツ”、”個人、集団、組織を誹謗中傷するコンテンツ”・・・と記載されているのだが、この「メモ帳」には特にそうした内容のものはない(と思っている)ので、そのまま申請してみることにした。
申請は、Google AdSenseのページにある、「お申し込みはこちら」より、アカウントや広告を掲載するサイトのURL(この「メモ帳」)を入力して送信。翌日メールを見ると、「Google AdSense によるお申し込み内容の審査が完了しました」という連絡が届いていた。メールには、「Google AdSense にログインして最初の広告ユニットを作成し、承認プロセスを完了しましょう。」とあり、実際に広告を掲載して2次審査があるようだ。
適当なサイズの広告を作成して、記事の下部に掲載することにした。広告掲載時にも何か制約がないかと確認してみると、広告の配置に関するポリシーに以下の記載があった。
広告ラベルには、「広告」または「スポンサーリンク」のみを使用するようお願いいたします。それ以外のラベルは使用できません。
このメモ帳では、「スポンサーリンク」と記載してコンテンツと区別することにした。このようにして広告を掲載した後は、「メモ帳」を更新する以外には特に何もせずに結果を待つことにした。
審査にはある程度時間がかかると思っていたのだが、1次審査終了の連絡メールを受けた2日後に、「AdSense アカウントの有効化が完了しました。」というメールが届いた。自分のサイトを見てみると、それまで空白だったスペースに、無事、広告が掲載されていることを確認することができた。
スポンサーリンク
さほど気にならなかったのだが、Google AdSenseの広告枠の周りに、青色の線のようなものが表示されていた。最初は一時的なものなのかと思ったのだが、どの記事ページでも、スマートフォンで見ていてもこの「青色」の枠線のようなものが表示されていたので、これを消す方法について以下にメモ。
こちらのページに『Google Adsense表示前にあらわれる黄色の背景色を非表示にする方法』について記載されていた。自分の場合は黄色ではなかったが、確かに、広告枠の背景色が広告とずれている感じだった。
(設定変更前の状態)
そこで、試しにINSタグの背景色の設定を変更してみることにした。
INSタグの背景色の変更は、「WordPress」の「外観→テーマの編集」から「style.css」を以下のように修正した。
/**
* 3.0 – Typography
*/(中略)
ins {
/*background: #007acc; */
background: none;
color: #fff;
padding: 0.125em 0.25em;
text-decoration: none;
上記のように背景色の設定をコメントアウト、”none”の設定を追加して「設定を保存」し、記事ページを更新してみたところ、ちゃんと広告周りの枠線のようなものが消えていることが確認できた。
スポンサーリンク
WordPressで”Twenty Sixteen”のテーマで箇条書き(ul,li)をすると、本文の開始位置より前にビュレットがくる。このビュレットを本文枠に入れる方法などについてメモ。
例えば、”Twenty Sixteen”のテーマで、普通にul, liタグで箇条書きをすると図のように表示される。
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
そこで、<ul style=”margin-left:○em;”>～</ul>として、○文字分のマージンを設けてやれば本文枠に収まる。
マーカーの種類は、”list-style-type”で指定する。以下は、その表示例。
<ul style=”list-style-type: none”>～：マーカーなし
<ul style=”list-style-type: disc”>～：黒丸
<ul style=”list-style-type: circle”>～：白丸
<ul style=”list-style-type: square”>～：黒四角
<ol style=”list-style-type: lower-roman”>～</ol>：小文字のローマ数字
<ol style=”list-style-type: upper-roman”>～</ol>：大文字のローマ数字
<ol style=”list-style-type: lower-greek”>～</ol>：小文字のギリシャ文字
<ol style=”list-style-type: decimal”>～</ol>：算用数字
<ol style=”list-style-type: decimal-leading-zero”>～<ol>：算用数字(先頭に0)
<ol style=”list-style-type: lower-latin”>～</ol>：アルファベット(1)
<ol style=”list-style-type: lower-alpha”>～</ol>：アルファベット(2)
<ol style=”list-style-type: upper-latin”>～</ol>：アルファベット(3)
<ol style=”list-style-type: upper-alpha”>～</ol>：アルファベット(4)
<ol style=”list-style-type: cjk-ideographic”>～</ol>/strong>：漢数字
<ol style=”list-style-type: hiragana”>～</ol>：あいうえお順
<ol style=”list-style-type: katakana”>～</ol>：アイウエオ順
<ol style=”list-style-type: hiragana-iroha”>～</ol>：いろは順
<ol style=”list-style-type: katakana-iroha”>～</ol>：イロハ順
<ol style=”list-style-type: hebrew”>～</ol>：ヘブライ数字
<ol style=”list-style-type: armenian”>～</ol>：アルメニア数字
<ol style=”list-style-type: georgian”>～</ol>：グルジア数字
スポンサーリンク