投稿者: OJA

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

ブログの配色

 
せっかくなので、このブログの配色を自分で変えてみよう・・・　そう思って色々調べて設定してみたのだが・・・　いつも身の周りの物を購入するときは「黒」ばかり選んでしまうせいか、最初にできあがった時は背景から何から真っ黒の怪しいサイトのようになってしまった。それからどういう配色が見やすいか？などを考えていると、あっという間に一日が経ってしまっていた。。。　またすぐに変えたくなるような気もするので、簡単にこの「FANBLOG」の配色の変更方法についてメモしておこうと思う。
 

Webセーフカラー

 
色の選定や設定のための色番号を調べるのには、こちらのサイト( 原色大辞典 )を参考にした。また、なるべく汎用性のある一般的な色を・・・ ということで、Webセーフカラーの中から選定することにした(最近では環境により表示が異なるということなどは余り気にしなくても良いとは思いながらも、何か理由をつけて少しでも範囲を限定しないと自分でも選びきれなかった・・・というのが正直なところ)。
そして、とりあえず選定した背景色、文字色は以下の通り。
 

【背景色】　#cccccc

【文字色】　#333300

【リンクのhover色】　#6699ff

【カレンダー色】　#ccccff

【カレンダー日付のhover色】　#ccffff

【検索】　#330099

なるべく色のパターンは少なくしようと思っていたので、リンクのhover時の色も最初は”検索”の色と同じ”#330099″としていた。しかしいざ反映してみると、色の明暗にあまり変化がなく、よく見ないと文字の色が変わったことが分からなかったのでhover時の色は少しだけ明るい色を選択するようにした。また、ページ全体で統一感を出そうと、コメント欄やトラックバックの箇所もカレンダーの箇所と同色に設定した。その結果・・・　デフォルト設定での明るいサイトの雰囲気から、一気に殺風景なサイトに変わってしまったが、今回はこれでヨシとすることにした。。。
 

cssの変更

 
とりあえず色は決まったので、あとはcssの該当箇所を変更。変更は、ブログ編集画面→デザイン→html→cssの編集から行う(下図参照)。
 


cssの編集画面を開いたら、以下の箇所の色番号を変更して保存すれば終わり。
【背景色】
(他にも、デフォルトのテンプレートでは全部で3つ変更箇所があったが、最初にcssを別のテキストファイルにコピーして、同じ色番号で置換した。)

* { margin:0; padding:0;}
body {
font-family:’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’ＭＳ Ｐゴシック’,sans-serif;
color:#333300;
font-size:14px;
line-height:1.4;
background:#cccccc;　/*　←ここの色番号を変更　*/
}

【リンク色】

/* リンク色 *
/* link */

a:link { color:#333300;text-decoration:none; }　/*←ここの色番号を変更*/
a:active { color:#333300;text-decoration:underline; }　/*←ここの色番号を変更*/
a:visited { color:#333300;text-decoration:none; }　/*←ここの色番号を変更*/
a:hover { color:#6699ff;text-decoration:none; }　/*←ここの色番号を変更*/

【カレンダー】

.calendarhead{
color:#333300;
text-align:center;
padding:5px 0px 5px 0px;
margin-bottom:10px;
font-weight:normal;
/* background:#eadfcb;　←念のため、元の色をコメントアウト　*/
background:#ccccff;　/*　←ここの色番号を変更　*/
}

【カレンダーのhover時の色】

.calendarhead a:hover{
/* color:#a3cdf1;　←念のため、元の色をコメントアウト　*/
color:#6699ff;　/*　←ここの色番号を変更　*/

【カレンダーの日付のhover時の色】

td.calendarday a:hover{
/* background:#e0cba2;　←念のため、元の色をコメントアウト　*/
background:#ccffff;　/*　←ここの色番号を変更　*/
}

【検索の色】

.side .input-submit{
/* background:#e0b975;　←念のため、元の色をコメントアウト　*/
background:#330099;　/*　←ここの色番号を変更　*/
border:0;
padding:4px 10px;
color:#fff;
display:inline-block;
cursor:pointer;
vertical-align:middle;
font-weight:bold;
border-radius:2px;
}

【コメント欄の色(1)】

#comments .input-submit{
/* background-color:#e0b975;　←念のため、元の色をコメントアウト　*/
background-color:#330099;　/*　←ここの色番号を変更　*/
padding:10px 20px;
color:#fff;
display:inline-block;
cursor:pointer;
vertical-align:middle;
font-size:16px;
font-weight:bold;
border:0;
border-radius:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-top:10px
}

【コメント欄の色(2)】

.comments-head{
color:#333300;
font-weight:bold;
margin:0px 0px 10px 0px;
padding: 5px 0px 5px 5px;
/* background:#eadfcb;　←念のため、元の色をコメントアウト　*/
background:#ccccff;　/*　←ここの色番号を変更　*/
}

【トラックバックの色】

#trackback {
/* background:#eadfcb;　←念のため、元の色をコメントアウト　*/
background:#ccccff;　/*　←ここの色番号を変更　*/
color:#333300;
background-position:top center;
padding:20px 20px 20px 20px;
margin:25px 0;
}

おわりに

 
原色大辞典 で見た時の色をいざ設定してみると、プレビューで配色を色々試したときには、文字色や背景色の違いで見え方が大分違った。また、その色が占める面積によっても見え方が変わる上に、hover時の色まで気にし始めると本当にキリがない・・・　というのが感想。
 
今まで自分が知らなかったことで1つ発見したことは、cssを編集する時には入力ウィンドウが小さくて何度もスクロールしていたのだが、ふと、テキストBOXの右下でsizingできることに気付いたことである。また、投稿画面でも同様にsizingできることが分かったので、今後、記事の作成や編集をするときに少し楽になったのは良かった。
 

 
スポンサーリンク

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

メモ帳の目次について

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

カテゴリの設定について

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

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

htmlの設定について

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

ここで、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ページへのリンクだらけになってしまった。もっと色々と勉強して、ちゃんと整理したいと思う。

 
スポンサーリンク

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とパスワードは「サーバーアカウント設定完了のお知らせ」メールに記載)。
 

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

FANBLOGからの記事の移行

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

 
スポンサーリンク

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での記事等のフォントは、「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;
}

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

 
スポンサーリンク