箇条書きについて

WordPressでの箇条書きについて

 
WordPressで”Twenty Sixteen”のテーマで箇条書き(ul,li)をすると、本文の開始位置より前にビュレットがくる。このビュレットを本文枠に入れる方法などについてメモ。
 

箇条書き

 
例えば、”Twenty Sixteen”のテーマで、普通にul, liタグで箇条書きをすると図のように表示される。

<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>

bullet_01
 
そこで、<ul style=”margin-left:○em;”>~</ul>として、○文字分のマージンを設けてやれば本文枠に収まる。
bullet_02
 

マーカーの種類

 
マーカーの種類は、”list-style-type”で指定する。以下は、その表示例。
 
<ul style=”list-style-type: none”>~:マーカーなし

  • test1
  • test2
  • test3

<ul style=”list-style-type: disc”>~:黒丸

  • test1
  • test2
  • test3

<ul style=”list-style-type: circle”>~:白丸

  • test1
  • test2
  • test3

<ul style=”list-style-type: square”>~:黒四角

  • test1
  • test2
  • test3

<ol style=”list-style-type: lower-roman”>~</ol>:小文字のローマ数字

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: upper-roman”>~</ol>:大文字のローマ数字

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: lower-greek”>~</ol>:小文字のギリシャ文字

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: decimal”>~</ol>:算用数字

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: decimal-leading-zero”>~<ol>:算用数字(先頭に0)

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: lower-latin”>~</ol>:アルファベット(1)

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: lower-alpha”>~</ol>:アルファベット(2)

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: upper-latin”>~</ol>:アルファベット(3)

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: upper-alpha”>~</ol>:アルファベット(4)

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: cjk-ideographic”>~</ol>/strong>:漢数字

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: hiragana”>~</ol>:あいうえお順

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: katakana”>~</ol>:アイウエオ順

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: hiragana-iroha”>~</ol>:いろは順

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: katakana-iroha”>~</ol>:イロハ順

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: hebrew”>~</ol>:ヘブライ数字

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: armenian”>~</ol>:アルメニア数字

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: georgian”>~</ol>:グルジア数字

  1. test1
  2. test2
  3. test3

 
スポンサーリンク





記事の並び順について

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

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

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

 
投稿一覧での表示順は、「Intuitive Custom Post Order」というプラグインを使うと簡単に変更することができた。
プラグインは、WordPressのメニューにある「プラグイン」→「新規追加」にある「プラグインの検索」で「Intuitive Custom Post Order」で検索して追加することができる。
 
ICPO_01
 
このプラグイン適用後の投稿一覧では、一覧表示されている記事の並び順をマウスの『Drag & Drop』で変更できるようになった。

 
スポンサーリンク





アドセンス周りの青枠について

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

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

広告枠の背景色

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

そこで、試しに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”の設定を追加して「設定を保存」し、記事ページを更新してみたところ、ちゃんと広告周りの枠線のようなものが消えていることが確認できた。

 
スポンサーリンク





Googleアドセンスの申請について

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 アカウントの有効化が完了しました。」というメールが届いた。自分のサイトを見てみると、それまで空白だったスペースに、無事、広告が掲載されていることを確認することができた。
 

 
スポンサーリンク





「次の/前の投稿」の非表示について

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

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

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

 
スポンサーリンク





WordPressでのフォントの変更について

フォントの設定

 
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の子テーマについて

WordPressの設定変更

 
WordPressを使い始めて、まずはテーマに「Twenty Sixteen」を選定した。特にこだわりはなかったのだが、使い易くてシンプルなものが良かったので、公式のデフォルトになっていたTwentyシリーズからテーマを選定した。
 
テーマは度々更新されるようなのだが、この更新時にはcssなどの自分の設定が消えてしまうことから、「子テーマ」を作成して設定すると良いということが分かったので、以下にその作成方法についてメモ。
 

子テーマの作成

 
FTP(自分は、フリーソフトの「FFFTP」を使用している)で自分のサーバーを見ると、”(ojamemo:自分のサイト名)/public_html/wp-content/themes”の中に、インストールしたテーマが入っていて、「twentysixteen」のフォルダもあった。このディレクトリに、ローカルで作成しておいた子テーマの設定ファイルをいれたフォルダをアップロードすれば、WordPressで選択できるようになる。
 

1. 「style.css」と「function.php」の準備

 
自分の場合、まずは「style.css」と「function.php」の2つを準備した。「style.css」は、元の「twentysixteen」フォルダからコピー(ローカルにダウンロード)した。コピーした「style.css」を開くと、1~26行目(/* ~*/)に”Theme Name”などが記載されているので、このコメントアウト部分を削除して、以下を追加。

/*
Theme Name: Twenty Sixteen Child
Template: twentysixteen
*/

 
子テーマの名前(Theme Name)は、(元テーマ名)_childとするのが一般的なようなので、自分もそれにならって「Twenty Sixteen Child」とした。親テーマのディレクトリ名(Template)は、読み込む元となるテーマなので、「twentysixteen」とした。style.cssは、修正したり親テーマと同じことが書いてあっても、子テーマ側の設定が上書きされるので、まずはこれで最初の準備は完了。
次に、「function.php」については、style.cssと異なり、子テーマの設定が上書きされるわけではなく、親テーマと同じことが書いてあるとエラーが発生してしまうので、新たに「function.php」を作成し、エディタで以下を記載。

<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}

 

2. 子テーマフォルダのアップロード

 
新規に作成した「twentysixteen_child」の子テーマフォルダに、前項で作成した2つのファイル「style.css」と「function.php」を入れて、”(ojamemo:自分のサイト名)/public_html/wp-content/themes”にFTPでアップロードする。
 
Wordpressの「外観>テーマ」を見ると「Twenty Sixteen Child」があるので、これを適用すると、まずは子テーマの作成は終わり。

 
スポンサーリンク





WordPressの導入について

BLOGの移行について

 
この「メモ帳」は、当初A8.netが提供する無料ブログサービス”FANBLOG”で書きはじめたのだが、先日、Google Adsenseを導入しようと申請画面でURLを入力したところ、「URL にはパス(example.com/path)やサブドメイン(subdomain.example.com)を使用できません。」というメッセージが表示され申請できなかった。
最初は、情報整理のツールとしてなんとなくこのBLOGを始めたのだが、自分なりにサイトを作っていくことが面白くなったこともあり、思い切って独自ドメインを取得し、比較的自由度の高い”WordPress”にBLOGを移行することにした。
 

WordPressの導入について

 

レンタルサーバーの申し込み

 
最初にレンタルサーバーの申請を行った。レンタルサーバーには、「XSERVER」を利用することにした。サーバー新規お申込みから、新規サーバーを申請。プランにはディスクスペースが200GBの「X10」にした。サーバー申請後、インフォパネル(会員管理システム)の「追加のお申し込み」で新規ドメイン(ojamemo.com)を取得。キャンペーンの有無で初期費用などは変化するようだが、自分のときの総費用は以下のとおり。

初期費用:3240円
X10:1080円/月×12か月
CoreSSL:1080円/年
ドメイン:1620円/年
合計:18,900円/年

WordPressのインストール

 
XSERVERのログインから「サーバーパネル」に進む(IDとパスワードは「サーバーアカウント設定完了のお知らせ」メールに記載)。
 
xserver_01
サーバーパネルの「自動インストール」をクリックし、ドメインを選択して任意のプログラムのインストール画面に進む。ここで「WordPress 日本語版」の「インストール設定」から必要事項(「インストールURL」はデフォルト(~/pathは空欄)のままに、ブログ名、ユーザー名、パスワード、メールアドレス)を入力してインストールすると設定完了。
 

FANBLOGからの記事の移行

 
“FANBLOG”の管理画面の設定画面から「エクスポート(UTF-8)」して、「mtarchive~.log」を出力する。
次に”WordPress”のプラグインから「Movable Type and TypePad Importer」をインストールして、先ほどエクスポートしたファイルを「アップロードしてインポート」すると移行完了。
WordPressの導入直後は、手探りでテーマを試しながら外観やフォントを変更しつつ、1記事ずつ画像のリンクなどを修正していった。WordPressでのプレビューを見ると、FANBLOGでの見た目とかなり違っていたので色々と手を加えたのだが、これについては別記事にてメモすることにする。

 
スポンサーリンク





ブログの保存について

※ このページは、「FANBLOG」に投稿していた時のメモ。

ブログのバックアップについて

 
2016年から色々なことをこの「ブログ」にメモしていこうと決めて、今日で1月も終わり。
ふと、この「ブログ」も自分のローカルPCにバックアップを取っておきたいと思い、色々と調べてみると、ホームページをまるごと保存できるようなフリーソフトがいくつか見つかった。

どのソフトを利用しようか迷ったのだが、最終的に「ホームページクローン作成」というフリーソフトを使用することにした。

「ホームページクローン作成」を使ってみて

 
「ホームページクローン作成」は、Vector のホームページからダウンロードした(Vectorのダウンロードページへのリンク先)。
ダウンロードが終わると早速インストールして、スタートメニューに登録された「ホームページクローン作成」を起動。
「保存先フォルダー」にはとりあえずデスクトップを指定して、「保存したいサイトのURL」にこのブログのアドレス「http://fanblogs.jp/oja/」を入力して『開始する』をクリック。

blogpreserve01

blogpreserve02

コマンドプロンプトが立ち上がりバックアップが開始され、しばらくすると「ダウンロードを完了しました」のウィンドウが表示されて終了。

blogpreserve03

保存されたフォルダ「HomepageClone」を開けて「StartPage1」をダブルクリックすると、写真を含めてブログの内容がまるごと保存されている。操作も非常に分かりやすく、簡単にブログのバックアップを取ることができた。

実は、ブログの内容は登録時に毎回ソースをテキスト形式で保存し、アップした写真なども個別に保存していたのだが、今後は、この「ホームページクローン作成」を使って定期的にバックアップしていこうと思う。

 
スポンサーリンク





FANBLOGのTOPページの設定について

※ このページは、「FANBLOG」に投稿していた時のメモ。

メモ帳の目次について

このメモ帳、「覚え書きを兼ねた自由帳」としているのに、「BLOG」の形式のせいか自分で当該メモを探し出すのにとても不便なことに気付いた。とりあえず、目次的なTOPページを作って各記事へのリンクを張ることにした。
TOPページは、それぞれの記事タイトルに”~http://fanblogs.jp/oja/archive/~”のアドレスをリンクにして手動で作った。これで、TOPページにさえ飛べれば目次代わりに使用できる。各記事ページからのアクセスについては、まずは、ブログのカテゴリを利用してTOPページに飛ばせるようにする。

カテゴリの設定について

 
カテゴリの設定で、「TOP」というカテゴリを作ってTOPページを置くことにした。あとは、その他のカテゴリを自分の好きな順番に並べ、サイドの上部に「カテゴリーアーカイブ」を表示させることで、なんとなくツリー構造っぽいものを表示させることにした。
「TOP」カテゴリ以外はカテゴリ名の最初にスペースを入れることで、表示したときにインデント (と言って良いかのかは甚だ疑問である) が入るようにした。
カテゴリの順番は、「設定」→「カテゴリ設定」から、「表示順」の番号を付け替えることで簡単に並び変えることができた。

fanblog-top_01

blogpreserve02

サイドバーの修正が終わった(?)ので、次に、各記事ページのヘッダも少し修正して、TOPページへの誘導をかけることにした。

htmlの設定について

 
「FANBLOG」にアクセスすると、最新(または最終更新)の記事ページが表示される。本当は、ここに、自分で作成したTOPページを常に表示させたかったのだが、どうもうまくいかなかった。色々調べると、公開日時を未来の日付にすると、常に最新記事として任意のページが固定できるようなのだが、未来の日付が表示されないように日付を消すことに少し抵抗があった(各記事の公開日時はなんとなく表示させておきたかった)ので、別の手段をとることにした。そこで、最新記事が表示されることは許容する代わりに、ヘッダに表示されているページが最新記事であることを表示させて、TOPページへの誘導リンクを張り付けることにした。
htmlの編集画面は、以下から開くことができた。

fanblog-top_03

fanblog-top_04

ここで、htmlに以下の修正を加えた。

<!– Content –>
<% if:page_name eq ‘index’ -%>

<!–ここから追加–>

<div class=”navi”>
[このメモ帳の最新記事] | <a href=”http://fanblogs.jp/oja/archive/22/0″>TOP</a>へ</div>
 

<!–ここまで追加–>
 
<!– ここから削除

 
<% if:free_space -%>
<div class=”entry”>
<table width=”100%”>
<tr>
<td class=”entry_text”>
<div class=”entry_layer”><% free_space | nl2br -%></div>
</td>
</tr>
</table>
</div>
<% /if:free_space -%>
<% if:pager.need_pager -%>
<div class=”navi”>
<% if:pager.previous_page %>
<a href=”<% blog.page_url(pager.previous_page) | html %>”><<前の<% blog.index_page_cnt %>件</a><% else %>-<% /if %> 
<% loop:list_pager %><% if:pager.show_previous_group(pager_number,5) %>..<% /if %><% if:pager.show_page(pager_number,5) %> <% if:current_page ne pager_number %><a href=”<% blog.page_url(pager_number)%>”><% /if %><% pager_number %><% if:current_page ne pager_number %></a><% /if %><% /if %><% if:pager.show_next_group(pager_number,5) %>..<% /if %><% /loop %>
 <% if:pager.next_page %><a href=”<% blog.page_url(pager.next_page) %>”>次の<% blog.index_page_cnt %>件>></a><% else %>-<% /if %>
</div>
<% /if -%>

ここまで削除–>

 
TOPページから各記事ページに飛ぶと、デフォルトでは、ページ上部に、<< 1 2 3 ・・・などのpagerが表示されるが、上記のように全てコメントアウトした。その代わりに、"TOP"ページへのリンクもつけて、当該記事のカテゴリが表示される (たとえば 「TOP /  ブログ」の) ように、各ページのヘッダも以下のように修正した。

<% if:page_name eq ‘article’ -%>

<!–以下を追加–>

<div class=”navi”>
<a href=”http://fanblogs.jp/oja/archive/22/0″>TOP</a>
<% if:style.disp_category %> / <a href=”<% article.category.page_url %>”><% article.category.name %></a>
<% /if %>
</div>

<!– ここから削除

<div class=”navi”>
<% if:previous_article -%><a href=”<% previous_article.page_url %>”><<</a> <a href=”<% previous_article.page_url %>”><% previous_article.subject | tag_break %></a> | <% /if -%>
<a href=”<% blog.page_url %>”>TOP</a>
<% if:next_article -%> | <a href=”<% next_article.page_url %>”><% next_article.subject | tag_break %></a> <a href=”<% next_article.page_url %>”>>></a><% /if -%>
</div>

ここまで削除–>


 

その他

 
ヘッダの表示をカテゴリ表示だけにしたので、スペースがかなり空いてしまった。ヘッダのスペースなどの調整は、「FANBLOGの配色の変更について」でもメモした css を以下のように編集して行った。
 

/*  ヘッダー  */

div#header {
display:block;
width:950px;

/* height:212px; ←ここをコメントアウト*/
height:150px; /*←ここを修正*/

margin:0 auto;
}

 
何回かプレビューを見ながら、適当にヘッダスペースを修正して、一通りの修正を終えた。
ヘッダの表示の中で、カレンダーの日付などにリンクされているdailyやmonthlyのarchiveページについては、その記事のカテゴリを表示させる方法が分からなかった。仕方がないので、”TOP”ページのリンクのみを表示させることにしたのだが、また調べてみようと思う。
あまりこのブログをスマートフォンで見ることはあまりないのだが、たまたま通勤時にこのブログを見てみたところ・・・ スマートフォン用のページはPC用のページとは異なる上に、サイドも表示されないので、せっかく作ったTOPページへの誘導が何もないことに気付いた。。。 スマートフォン用のhtmlの変更の仕方を調べたのだがよく分からず、結局、記事の最初と最後に「OJAのメモ帳 -TOP-」なるリンクを作ることにした。おかげで、TOPページへのリンクだらけになってしまった。もっと色々と勉強して、ちゃんと整理したいと思う。

 
スポンサーリンク