「WordPress」タグアーカイブ

【WordPress】ブログのテーマを『Twenty Fourteen』に変更して追加CSSでカスタマイズ

追加CSSという機能でカスタマイズしてみました。

WordPressにて構築したブログのデザインをリニューアル。これまでのデザインも気に入ってましたが、10年以上おなじテーマを使うとさすがに古くさくなってきた。従来はPC用サイトがメインで、モバイル用には別デザインが適用されていたけれど、スマートフォンなどモバイルデバイスでのアクセスが増加してきたのでPC用と親和性をもたせたい。WordPress用にオフィシャルのテーマが公開されているいっぽう、個人で凝ったテーマも公開されている。ただ、個人公開のテーマはセキュリティ的な問題があるし、メンテナンスが継続する保障もない。あるていど信用できてアップデートも期待できるとなると、オフィシャルのテーマにせざるをえません。WordPressオフィシャルテーマとしてTwentyというシリーズがあるうち、『Twenty Fourteen』というテーマをカスタマイズすることにしました。

このままのデザインでも悪くはないですが、エントリーのタイトルフォントがでかすぎたり、サイドバーやエントリーの幅がせますぎたりと気になるところがある。テーマそのものを改造することもできるけど、それだとテーマがアップデートされると元にもどってしまうので、追加CSSという機能でカスタマイズしてみました。

追加CSSとは、テーマの標準設定を特定の部分だけ上書きできるもの。旧デザインの色遣いやレイアウトに近い感じで変更。『Twenty Fourteen』のスタイルシート(style.css)を調べて、変更したい箇所の設定を洗い出し、追加CSSに追記しました。新しいテーマはブラウザのウインドウサイズごとにレイアウトが最適化されるので、PCでもスマホでもいい感じで表示されるように。

ご参考までに、現時点での当サイトに適用されている『Twenty Fourteen』用追加CSSを公開。必要と思われる箇所のみなので、気になる場所があったら随時追加、変更するかもしれません。てか、こういう情報があまりなくて、トライ&エラーでの解析が面倒でしたよ。

Amazon

楽天市場

/**
 * Twenty Fourteen for Astronaut Custom ver1.2
 * -----------------------------------------------------------------------------
 */

/**
 * 1.0 Reset
 * -----------------------------------------------------------------------------
 * リンク色、選択色を変更
 */

a {
	color: #006699;
}

a:active,
a:hover {
	color: #FF5E06;
}

::selection {
	background: #099999;
}

/**
 * 2.0 Repeatable Patterns
 * -----------------------------------------------------------------------------
 * ボタンの色を変更
 */

/* Buttons */

button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: #006699;
}

button:hover,
button:focus,
.button:hover,
.button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background-color: #FF5E06;
}

button:active,
.button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	background-color: #099999;
}

/**
 * 3.0 Basic Structure
 * -----------------------------------------------------------------------------
 * メインコンテンツを中央寄せ
 */

.site {
	margin-left: auto;
	margin-right: auto;
}

/**
 * 4.0 Header
 * -----------------------------------------------------------------------------
 * ヘッダーの背景色変更、検索ボタンの色変更
 */

.site-header {
	background-color: #099999;
}

.site-title {
	font-size: 20px;
}


/* Search in the header */

.search-toggle {
	background-color: #006699;
}

.search-toggle:hover,
.search-toggle.active {
	background-color: #FF5E06;
}

.search-box {
	background-color: #006699;
}

/**
 * 5.0 Navigation
 * -----------------------------------------------------------------------------
 * メニュートグルの色変更
 */

.menu-toggle {
	background-color: #099999;
}

/**
 * 6.0 Content
 * -----------------------------------------------------------------------------
 */

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	max-width: 750px;
}

/**
 * 6.1 Post Thumbnail
 * -----------------------------------------------------------------------------
 * サムネイル画像の背景を無地に
 */

.post-thumbnail {
	background: #FFFFFF;
}

a.post-thumbnail:hover {
	background-color: #FFFFFF;
}

/**
 * 6.2 Entry Header
 * -----------------------------------------------------------------------------
 * エントリーの文字サイズ、色、幅を調整
 */

.entry-title {
	font-size: 22px;
	font-weight: 600;
	color: #006699;
	text-transform: none;
}

.entry-title a {
	color: #006699;
}

.entry-title a:hover {
	color: #FF5E06;
}

/**
 * 6.3 Entry Meta
 * -----------------------------------------------------------------------------
 * エントリーリンクの色変更
 */

.entry-meta a:hover {
	color: #FF5E06;
}

.entry-meta .tag-links a:hover {
	background-color: #FF5E06;
}

.entry-meta .tag-links a:hover:before {
	border-right-color: #FF5E06;
}

/**
 * 7.1 Widgets
 * -----------------------------------------------------------------------------
 * ウィジェットの色を変更
 */

.widget a:hover {
	color: #FF5E06;
}

.widget_calendar tbody a {
	background-color: #006699;
	color: #fff;
	display: block;
}

.widget_calendar tbody a:hover {
	background-color: #FF5E06;
}

/**
 * 8.0 Footer
 * -----------------------------------------------------------------------------
 * フッターの背景色変更
 */

.site-footer {
	background-color: #099999;
}

.slider-direction-nav a:hover {
	background-color: #FF5E06;
}

/**
 * 11.0 Media Queries
 * -----------------------------------------------------------------------------
 * 背景色を変更し、サイドバーの幅を260px、ウィジェットの幅を200pxに変更
 */

#secondary {
background-color: #099999;
}

.primary-navigation li:hover > a,
.primary-navigation li.focus > a {
	background-color: #FF5E06;
}

@media screen and (min-width: 1008px) {
	.search-box-wrapper {
		padding-left: 260px;
	}
	.site-content {
		margin-left: 260px;
	}
	.site:before {
		background-color: #099999;
		width: 260px;
	}
	#secondary {
	width: 200px;
	}
}

@media screen and (min-width: 1080px) {
	#secondary {
	width: 200px;
	}
}

かっこいいAmazonリンク改

オフラインでブログの編集ができる、『Windows Live Writer』にて、Amazon用アフィリエイトリンクを生成できる『Amazon アソシエイト プグイン ver 1.4.1 for Windows Live Writer』を導入。1.3をつかわせてもらってたけど、仕様変更で旧版が使用不能になったため、最新版を導入しました。

クリック先で契約が成立すると、紹介者にマージンがはいるという、アフィリエイトのシステムを嫌うかたもおられるようですが、僕は気にしません。他サイトで、気になる商品が紹介されている場合は、アフィリエイトと承知でリンクをクリックすることもある。当サイトにもアフィリエイトリンクを貼らせてもらってるけど、ウチの方針はクリックする方が「アフィリエイトだとわかる形で貼る」というもの。それとわからずクリックさせるのは、さすがに気がひけますから。見栄えの意味でも、内容をカスタマイズできる意味でも、このプラグインには大変お世話になっております。

当サイトにて使用している、アフィリエイトリンクのフォーマットは以下のとおり。

■プレビュー/出力

<TABLE><TR><TD WIDTH=”10″ BGCOLOR=”#009999″><BR></TD><TD><a href=”http://www.amazon.co.jp/exec/obidos/ASIN/{3}/{0}/ref=nosim” target=”_blank”><img alt=”{4}” src=”{2}”></a></TD><TD WIDTH=”10″></TD><TD VALIGN=”center”><a href=”http://www.amazon.co.jp/exec/obidos/ASIN/{3}/{0}/ref=nosim” target=”_blank”><SMALL>ASIN:{3}</SMALL><BR>{4} {5}{6}{7}<BR><SMALL>(Amazonアフィリエイト)</SMALL></a></TD></TR></TABLE>

このフォーマットを『Amazon アソシエイト プグイン ver 1.4.1 for Windows Live Writer』に適用すると、当サイト用のアフィリエイトリンクが作成されるわけです。

かっこいいAmazonリンク

Amazonリンクを貼りまくるのは、かっこわるいよね!

──という真理はさておき、サイト運営のモチベーションを高めるためにも、アフィリエイト収入(通販サイトへ誘導し、手数料を得ること)で、ささやかな小遣いかせぎぐらいはしたいモノ。せめてサイト運営費(レンタルサーバ代+ドメイン維持費)ぐらいはかせげたら……などと思ったりもする。本気でそこまでの広告収入をえるには、膨大な努力が必要でしょうけどね。

Amazonへのアフィリエイトリンクでよくあるのが、こういう表示。

メジャーなフォーマットだけに、アフィリエイトであることは一目瞭然だし、購入の判断に必要な情報としてはじゅうぶんでしょう。でも、こういう「アフィリエイトでござい」というリンクがデンと貼られているのは、個人的にはあんましカッチョよろしくない。ぎゃくに、じぶん好みのこったレイアウトを作成することも可能ではあるけど、そうするとこんどは管理が面倒になる。このジレンマを解決する方法として、『WordPress』のAmazon用プラグインというのがいくつか公開されていた。商品を検索し、ブログ本文に整形されたアフィリエイトリンクを表示してくれるのだが、どうもウチの環境だとうまく動かなかい。Amazonさんと通信できませんでしたと、おこられてばかりです。

しかたないので、ブログ編集ソフト『Windows Live Writer』に『Amazon Associate Japan』というプラグインを導入して、みばえのいいアフィリエイトリンクを作成できるようにしてみた。
こんな感じ。

これなら、さほどめざわりじゃないし、アフィリエイトリンクであることも一目瞭然。

『Amazon Associate Japan』プラグインにてアフィリエイトリンクを表示させるフォーマットは、ウチのサイト用に以下のとおり改造しています。コピー&ペーストでつかえますが、改行は削除してください。流用、改変はご自由にどうぞ。

  • Windows Live Gallery – Amazon Associate Japan
  • Cagylogic: Amazon Associate Japan Plugin for Windows Live Writer
  • <TABLE><TR><TD WIDTH="10" BGCOLOR="#009999"><BR></TD><TD><a href=
    "http://www.amazon.co.jp/exec/obidos/ASIN/{3}/{0}/ref=nosim" target=
    "_blank"><img alt="{4}" src="{2}"></a></TD><TD WIDTH="10"></TD><TD VALIGN=
    "center"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/{3}/{0}/ref=nosim"
    target="_blank"><SMALL>ASIN:{3}</SMALL><BR>{4} {5}{6}{7}<BR>
    <SMALL>(Amazonアフィリエイト)</SMALL></a></TD></TR></TABLE>

    ケータイ対応完了

    『★Astronaut Blog』がケータイ表示に対応。

    以下のQRコードを読み取ってもらうか、「http://www.astronaut.jp/」へアクセスしてもらえば、自動的にケータイ用の表示になります。『WordPress』に『Ktai Style』というプラグインを導入しただけですが、そのためにはレンタルサーバのシステムがアップデートされる必要があり、本日からやっと使えるようになったというワケ。カレンダー壁紙のページは、ケータイ版でみたほうが便利だと思うよ。

    『WordPress』でブログ化計画進行中

     和銅布令州

     サイトのブログ化を計画中です。

     現在、本家のページ『★Astronaut 日記のようなモノ』と同様の内容を、@niftyのブログサービス、ココログの『★Astronaut Blog』にも掲載しているのですけど、やっぱりブログのほうが一見さんにアクセスしてもらいやすいですね。ここしばらくの『ポメラ』記事に関しては、たいした宣伝もしていないのに『★Astronaut Blog』の該当ページにも、それなりにアクセスがあるようです。いっぽう、『★Astronaut 日記のようなモノ』については、たまに大手サイトにご紹介いたいだいてアクセス数がアップすることはあっても、基本的には固定読者の方がメインだと思います。それはそれで悪くないのだけれど、自分の書いた記事が目にとまりやすいにこしたことはないです。

     ということで、「www.astronaut.jp」のレンタルサーバ内に、ブログを設置。ブログといってもいくつか種類があり、設置型(自分で用意したサーバにインストールするタイプ)では『Movable Type(ムーバブル・タイプ)』というのが、日本では1番メジャーです。『Movable Type』は個人利用が無償で、商業利用は有償なのだけど、どこからが商用なのかイマイチ区別がつけづらいのが難点。個人で運営しているかぎり、おおっぴらに商売しなければ個人利用ということで大丈夫だとおもうけど、有料の自著を宣伝するばあいもあるし、グレーゾーンで個人利用するのはあまり気分がよろしくない。

    続きを読む 『WordPress』でブログ化計画進行中