ワードプレスやブログ運営に役立つ情報をまとめています。WordPressプラグイン、WordPressテーマ(テンプレート)の情報をわかりやすく紹介します。

WordPressテーマ BlogPress(TCD010)をカスタマイズする際のヒント

このエントリーをはてなブックマークに追加

記事公開 2013.07.07

最終更新 2017.02.05

ネタワンで利用しているWordPressテーマ BlogPress(TCD010)をカスタマイズする際のヒントを紹介します。合わせて、プラグインとブログパーツも紹介します。

もし、BlogPress(TCD010)をカスタマイズしたい場合に参考にして下さい。

前書き

念の為に説明しておきますが、BlogPress(TCD010)は、カスタマイズしなくても利用できます。カスタマイズを推奨している訳ではありません。このテーマの初期状態では黒を基調としたデザインなのでやや地味です。配色などを少しだけカスタマイズすると、個性が出るので良いかもしれません。

ここで紹介しているCSSの変更は、ブログを運営している過程で、サイトの内容に合わせてCSSを微調整した内容です。最初から一気に変更した訳ではありません。また、必ずしもあなたのブログにピッタリ合うとは限りません。参考情報程度にお考え下さい。

追記 2015.03.03

修正が必要なCSSのファイル名の説明を追加しました。合わせて説明を若干調整しました。

はじめに

WordPressテーマの作り方の知識が必要

この記事はHTML・CSS・WordPressテーマの作り方の基礎を理解していることを前提にしています。WordPressテーマの作り方を理解していないと、テーマを破壊してしまう恐れがあります。テーマの編集は自己責任で行い下さい。

もし、WordPressテーマの作り方をまだ理解していない場合は、WordPressの入門書を購入して勉強することをお勧めします。

バックアップを必ずお取り下さい!

テーマを変更する場合や、新しいプラグインをインストールする場合は、必ず事前にデータベースやサイト全体のバックアップをとって下さい。テーマを変更し、PHPの構文エラーになり、元に戻せなくなる可能性があります。また、利用しているサーバー環境によっては、新しいプラグインがエラーになる場合がありますのでご注意下さい。

デザインのカスタマイズのヒント

はじめに説明しておきますが、BlogPress(TCD010)は、シンプルで洗練されたデザインなので、デザインの大幅な変更はするべきではありません。カスタマイズすると言っても、BlogPress(TCD010)の良い点にあなたのオリジナル性を少し加える感覚です。

デザインを調整するとすれば、「記事の大見出し・小見出し」「サイドバーの配色」などです。個人的には、それ以外の部分は変更しない方が良い気がします。

注意事項

  1. 現在のBlogPress(TCD010)には、スマートフォンに表示内容を最適化できるレスポンシブWebデザイン機能が搭載されています。この記事ではPC向けカスタマイズの内容を説明しています。PC向けは「style.css、style_pc.css」の2つのファイルを修正する必要があります。
  2. デザインや配色をカスタマイズすることを推奨している訳ではありません。カスタマイズしたい方のみ変更して下さい。
  3. 固定ページも利用する場合は、固定ページのCSSやテーマも変更して下さい。
  4. 下記のCSSでは、配色を水色(#42BFED)にしています。使用する際は、色を変更して利用して下さい。
  5. 文字サイズ、行間、マージン、パディングなどは、別途調整して下さい。

デザイン変更前と変更後の比較

デザイン変更前

BlogPress(TCD010)は、初期状態では、黒を基調としたシンプルなデザインです。もちろん、このまま利用しても問題ありません。

BlogPress(TCD010)


デザイン変更後(※ネタワンの色違い)

メインカラーを水色(#42BFED)に変更し、大見出し・小見出し・サイドバーの配色を変更した例です。

メインカラー:#42BFED
サブカラー:#E41858

TCD010 カスタマイズ例

記事の大見出し

記事の大見出しは、標準では非常にシンプルになっています。必要に応じて少し装飾すると良いかもしれません。

「#single_post .title」と「.post_list .title」は、CSSの中身が同じですので、同様に変更して下さい。

修正が必要なファイル

style_pc.css

変更が必要なCSSクラス

#single_post .title
.post_list .title

#single_post .title {
 line-height:150%;
 margin:0;
 padding:15px 0;
 font-size:24px;
}
#single_post .title {
 line-height: 150%;
 margin: 10px 0px 0px 0px;
 padding: 15px;
 font-size: 24px;
 color: #42BFED;
 border-bottom: 1px solid #ccc;
 border-top: 4px solid #42BFED;
}

備考

「.post_list .title」もCSSの中身が同じですので、同様に変更して下さい。

メタデータ

あくまでも個人の感想ですが、記事の大見出しの下にあるメタデータの表示エリアは、それ程重要ではないのに目立ち過ぎる気がしたので、ネタワンでは、色を反転し、表示位置を記事の下に移動させました。タグやカテゴリを沢山設定しない場合は、そのままの表示位置でも良いと思います。

標準のデザインでは、記事の大見出しよりメタデータが目立ってしまうので、デザイン的にバランスが悪い気がします。(個人の感想)

ちなみに、記事の画面のデザインを調整すると、トップページ・アーカイブ・固定ページのテンプレートも合わせて調整する必要があります。

「#single_post .meta」と「.post_list .meta」は、CSSの中身が同じですので、同様に変更して下さい。

修正が必要なファイル

style_pc.css

変更が必要なCSSクラス

#single_post .meta
.post_list .meta

#single_post .meta {
 font-size:11px;
 background:#333;
 color:#eee;
 padding:10px 15px;
 margin:0 0 25px 0;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 box-shadow:0px 0px 3px 0px #aaa;
}
#single_post .meta a { color:#eee; }
#single_post .meta {
 font-size:11px;
 color:#000;
 padding:10px 0px;
 margin:0px;
}
#single_post .meta a {}

備考

「.post_list .meta」もCSSの中身が同じですので、同様に変更して下さい。

関連記事とコメントの見出し

関連記事とコメントの小見出しは、標準では黒の配色になっていますが、必要に応じて色を変更すると良いかも。

修正が必要なファイル

style_pc.css

変更が必要なCSSクラス

.headline_base2

.headline_base2 {
 font-size:16px;
 background:#333;
 color:#eee;
 padding:0 15px;
 height:40px;
 line-height:40px;
 margin:0 0 25px 0;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 box-shadow:0px 0px 3px 0px #aaa;
}
.headline_base2 {
 font-size:16px;
 background:#42BFED;
 color:#eee;
 padding:0 15px;
 height:40px;
 line-height:40px;
 margin:0 0 25px 0;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 box-shadow:0px 0px 3px 0px #aaa;
}

記事内の小見出し

BlogPress(TCD010)には、標準で2種類の小見出しが用意されています。そのまま利用しても良いですが、少し調整すると見た目が更に良くなります。必要に応じてカスタマイズすると良いかも。

修正が必要なファイル

style_pc.css

変更が必要なCSSクラス

.headline1
.headline2

.headline1 {
 font-size:16px;
 border-left:7px solid #E41858;
 border-bottom:1px dotted #444;
 line-height:32px;
 padding-left:12px;
 margin:60px 0 10px;
}
.headline2 {
 font-size:15px;
 border-left:5px solid #F2195D;
 line-height:28px;
 padding-left:10px;
 margin:40px 0 20px;
}
.headline1 {
 font-size:16px;
 border-left:1px solid #ccc;
 border-top:1px solid #ccc;
 border-right:1px solid #ccc;
 border-bottom:4px solid #42BFED;
 line-height:2.5em;
 font-weight:bold;
 padding-left:12px;
 margin:60px 0 10px;
 background: -webkit-gradient(linear, left top, left bottom,color-stop(0, #ffffff), color-stop(1, #faf8ee));
}
.headline2 {
 font-size:16px;
 border-left:7px solid #42BFED;
 line-height:28px;
 padding-left:10px;
 margin:40px 0 20px;
}

サイドバー

サイドバーの色を変更すると、サイトの印象が大きく変わります。必要に応じてカスタマイズすると良いかも。

修正が必要なファイル

style_pc.css

変更が必要なCSSクラス

.side_headline
.side_headline span

CSSの役割

「.side_headline」黒の背景色を表示する。
「.side_headline span」テーマオプションで指定した「サイトのメインカラー」を表示する。

.side_headline {
 font-size:12px;
 background:#333;
 color:#eee;
 padding:0 15px 0 0;
 margin:0 0 15px 0;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 box-shadow:0px 0px 3px 0px #aaa;
 line-height:38px;
 height:38px;
}
.side_headline span { padding:2px 2px 3px 17px; }
.side_headline { 
 font-size:14px;
 background:#42BFED;
 color:#fff;
 padding:0 15px 0 0;
 margin:0 0 15px 0;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 box-shadow:0px 0px 3px 0px #aaa;
 line-height:38px;
 height:38px;
}
.side_headline span { 
 padding:2px 2px 3px 17px;
 border-bottom:2px solid #fff;
}

上記CSSの変更に加え、もう一箇所変更を加える部分があります。サイドバーの文字の下の色が付く部分は、ヘッダー(header.php)で動的にCSSを上書きしています。下記の部分を削除すれば、管理画面で指定した色の連動を外すことができます。そして、CSSで任意の色を指定します。

.side_headline span { border-bottom:2px solid #<?php echo $options['pickedcolor']; ?>; }

サイトのメインカラーの決め方

サイトのメインカラーは、Webサイトの訪問者にサイトを印象づける際に非常に重要です。デザインをカスタマイズする際は、まずはサイトのメインカラーを決めましょう。

BlogPress(TCD010)の場合は、既に黒色が使用されていますので、黒色と合うもう一色を選びましょう。

サイトのメインカラーを決める際は、下記のサイトを参考にして決めると良いです。色が人間に与える効果について詳しくまとめられています。

参考

色カラー

ソーシャルメディアの共有ボタン

BlogPress(TCD010)のソーシャルメディアの共有ボタンは、標準では「Facebook、Twitter、はてなブックマーク」の3つしかありません。もっと沢山のソーシャルメディアの共有ボタンを利用したい場合は、プラグインの「WP Social Bookmarking Light」を利用すると便利です。プラグインの使い方は、下記の解説ページをご覧下さい。

変更するテンプレートのファイル名

single.php
page.php

<?php include('bookmark.php'); ?>

※上記のPHPをコメントアウト又は削除して非表示にします。

プラグインの解説

WP Social Bookmarking Light – ソーシャルメディアの共有ボタンを一元管理できるWordPressプラグイン

ブログのコメント欄の変更

「Eメール、URL」の非表示

WordPressの初期設定では、記事のコメント欄に「名前、Eメール、URL、コメント」の入力欄がありますが、「名前、コメント」以外はあまり入力されないので、非表示にしておくと良いかも。変更する際は、管理画面でメールアドレスの入力チェックをOFFにしておきます。

WordPress管理画面 > 設定 > ディスカッション
「名前とメールアドレスの入力を必須にする」のチェックを外す。

上記の設定をした上で、CSSに下記内容を追加すると「Eメール、URL」の入力欄がCSSで非表示になります。

#guest_info #guest_email{ display:none; }
#guest_info #guest_url{ display:none; }

「名前」の初期入力値

さらに、コメント欄の「名前」を初期状態から表示させ、クリックしたら自由に名前が書けるようにしたい場合は、名前の入力フォームを下記のように変えましょう。

変更するテンプレートのファイル名
comments.php

value="<?php echo $comment_author; ?>"
value="<?php if (esc_attr($comment_author) == ''){echo '名無しさん';}else{echo esc_attr($comment_author);} ?>" onfocus="if (this.value == '名無しさん') this.value = '';" onblur="if (this.value == '') this.value = '名無しさん';"

記事内の見え方の調整

記事の画像のマウスオーバー効果

リンクがある画像の上をマウスオーバーすると、少し色が薄くなる処理は、下記のCSSでやっています。ちなみにこれは利用しなくても全然問題ありません。

a img{background:none!important}
a:hover img{
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	background:none!important;
}

行間の調整

TCDシリーズのテーマは、CSSの行間(line-height)の初期設定が240%に設定されています。行間が少し縦に長いので、必要に応じて微調整しましょう。

ちなみに、ネタワンでの行間は「180%」に設定しています。

p { margin:0 0 1em 0; padding:0; line-height:240%; }
p { margin:0 0 1em 0; padding:0; line-height:180%; }

グローバールメニューの調整

BlogPressのグローバルメニューは、ページを読み込み終えた後に、メニューの横幅をJavaScriptで自動的に調整する仕様になっています。

問題点としては、グローバルメニューにメニュー項目を沢山登録すると、ページを読み込んだ瞬間、2階層メニューも表示されるので、一瞬だけ表示が崩れたように見えます。一瞬だけ表示されるので、気にする程でもないのですが、メニューを沢山登録すると、どうしても目立ってしまいます。

ページを読み込んだ初期状態は、グローバルメニューの2階層メニューは、表示される必要性はありません。非表示の方が好ましいと思われます。その問題の詳細と修正方法を下記の記事にまとめました。

参考記事

BlogPress(TCD010)のグローバルメニューの2階層が一瞬表示が崩れる問題の解決方法

CSSの使い方

記事内に見出しを追加する方法

TCDのテーマに標準搭載されている小見出し用のCSSを使用するには、記事をテキストモード(HTMLモード)で記述し、CSSをclassで指定します。下記はCSSの使用例です。

.headline1
.headline2
<h3 class="headline1">見出し1</h3>
<p>記事の本文</p>

<h3 class="headline2">見出し2</h3>
<p>記事の本文</p>

ちなみに、ネタワンでは小見出しは色を変更したり、破線を消したりしてカスタマイズして使用しています。

リンクボタン表示

記事内のリンクをボタン形状で表示する方法を紹介します。TCDのテーマに標準搭載されているCSSを利用します。classで用意されているCSSを指定します。

.button
.button2
<a href="http://netaone.com" target="_blank" class="button">青ボタン</a>
<a href="http://netaone.com" target="_blank" class="button2">緑ボタン</a>

ネタワンで利用しているプラグインの紹介

設定ネタワンで利用しているプラグインの中で、特に役に立つプラグインを紹介します。

プラグインは、他にも色々インストールして利用していますが、特に下記のプラグインが便利なのでお勧めです。

All in One SEO Pack

※ 追記:以前利用していましたが、現在は別のプラグインを利用しています。

All in One SEO Packは、SEO対策の設定を総合的に管理できるプラグインです。

プラグインの解説

All in One SEO Pack – SEO対策の設定を総合的に管理できるWordPressプラグイン

Head Cleaner

※ 追記:以前利用していましたが、現在は別のプラグインを利用しています。

Head Cleanerは、HTMLのHEAD要素のタグを自動的に整理・除去し、ソースを整えてくれるプラグインです。

プラグインの解説

Head Cleaner – HTMLのHEAD要素のタグを自動的に整えてくれるWordPressプラグイン

Google Sitemap Generator

※ 追記:以前利用していましたが、現在は別のプラグインを利用しています。

Google Sitemap Generatorは、GoogleとBingの検索エンジンに対し、XMLサイトマップを自動送信するプラグインです。

プラグインの解説

Google Sitemap Generator – 検索エンジンにXMLサイトマップを自動送信するWordPressプラグイン

PS Auto Sitemap

※ 追記:以前利用していましたが、現在は別のプラグインを利用しています。

PS Auto Sitemapは、Webサイトのサイトマップ(記事の一覧)を自動生成するプラグインです。

プラグインの解説

PS Auto Sitemap – サイトマップを自動生成するWordPressプラグイン

Breadcrumb NavXT

※ 追記:以前利用していましたが、現在は別のプラグインを利用しています。

Breadcrumb NavXTは、WordPressの投稿と固定ページに「パンくずリスト」を表示できるプラグインです。BlogPress(TCD010)は、パンくずリストの機能が搭載されていますが、投稿でしか利用できません。固定ページをよく利用する場合は、このプラグインを利用すると非常に役立ちます。

プラグインの解説

Breadcrumb NavXT – WordPressにパンくずリストを表示するプラグイン

SyntaxHighlighter Evolved

SyntaxHighlighter Evolvedは、記事にソースコードを表示したい場合に役立つプラグインです。この記事のCSSやPHPのソースコードの説明でも使用しています。

プラグインの解説

SyntaxHighlighter Evolved – 記事にソースコードを表示するWordPressプラグイン

AddQuicktag

AddQuicktagは、エディタに頻繁に使用するHTMLタグの雛形を登録しておき、必要に応じて呼び出して使うプラグインです。このプラグインを利用すると、何度も同じHTMLタグを入力するのが簡略化でき、記事を書くのが捗ります。

プラグインの解説

AddQuicktag – エディタにHTML雛形を登録し、記事を書く作業を効率化するWordPressプラグイン

WP Social Bookmarking Light

WP Social Bookmarking Lightは、ソーシャルメディアの共有ボタンを一元管理できるプラグインです。投稿や固定ページに共有ボタンを追加できます。

プラグインの解説

WP Social Bookmarking Light – ソーシャルメディアの共有ボタンを一元管理できるWordPressプラグイン

BackWPup

BackWPupは、Webサイトを丸ごとバックアップできるプラグインです。データベースの最適化機能もあります。バックアップ先は、FTPサーバーやDropBoxなどの様々なオンラインストレージサービスに対応しています。Webサイトを運営していると、予期しない問題が発生し、Webサイトを復元しなければならない事態が発生することがあります。このプラグインを利用し、もしもの事態に備えて、Webサイトをバックアップしておきましょう。

プラグインの解説

BackWPup – WordPressのブログをまるごとバックアップ出来るプラグインの設定方法

Newpost Catch

※ 追記:以前利用していましたが、現在は別のプラグインを利用しています。

Newpost Catchは、サムネイル画像付きの最近の投稿(新着記事)を表示するプラグインです。BlogPress(TCD010)には、サムネイル画像付きの最近の投稿(新着記事)を表示する機能が無いので、このプラグインでその機能を補完すると便利です。

尚、BlogPress(TCD010)は、最近の投稿に矢印と余白が入るので、下記のCSSコードを利用してCSSを調整しましょう。

ul#npcatch li { 
	padding: 0px;
	backgroud: none;
}

プラグインの解説

Newpost Catch – サムネイル画像付きの「最近の投稿」を表示するWordPressプラグイン

ネタワンで使用しているブログパーツ

ネタワンで使用しているブログパーツを紹介します。ソーシャルメディアのブログパーツは、ソーシャルメディアからのアクセスを集めるのに役立ちます。

Twitter

ツイッターサイドバーに表示しているツイッターのタイムラインを表示するブログパーツは、ただ単にタイムラインを表示してもイマイチなので、ネタワンでは、検索クエリを「netaone.com」で指定しています。自分のサイトのドメインを指定することで、自分のサイトの記事をツイートした人のツイートを表示することができます。そうすることで、賑わっている感をサイト訪問者に印象付けることができます。

ブログパーツの設定

Twitterの設定画面

はてなブックマーク

サイドバーに表示している「はてなブックマーク」のブログパーツは、人気エントリーを10件表示しています。

hatena

ブログパーツの設定

はてなブックマークの設定画面

zenback

zenback

記事の下に設置して利用しているzenbackは、TwitterやFacebook等のソーシャルメディアでの投稿を表示でき、ソーシャルメディアでの記事の拡散状況を把握できます。非常に便利なブログパーツなので活用しましょう。

ブログパーツの紹介記事

zenback – あなたが書いた記事のソーシャルメディアでの反応が見れるブログパーツ

まとめ

BlogPress(TCD010)は、カスタマイズをしなくても利用できます。カスタマイズを推奨している訳ではありませが、初期状態では、黒を基調としたデザインなので、やや地味です。ほんの少しだけカスタマイズすると、個性が出るので良いと思われます。必要に応じてデザインや配色などを変更し、少しだけあなたの個性を出してみましょう。

念の為説明しておきますが、大幅なデザイン変更は行わない方が良いです。BlogPress(TCD010)は、シンプルで洗練されたデザインになっていますが、そのデザインのバランスが崩れる可能性があります。

この記事は、とある方からリクエストを頂いたので、ネタワンで実践しているカスタマイズ方法をまとめてみました。BlogPress(TCD010)を利用している方は、参考にして下さい。

スポンサーリンク

最後までお読み頂きありがとうございます

ネタワンは皆様の善意に支えられています。
この記事の内容が役に立ったと思ったら、記事をソーシャルメディアで共有してね。

このエントリーをはてなブックマークに追加

RSSフィードを購読する

follow us in feedly

関連記事

コメント

    • 初心者です
    • 2013年 8月 30日

    画像のマウスオーバー効果

    とても線香になりました。さっそくやってみました!!

    ド初心者なので質問ですが、
    マウスオーバー(ロールオーバー)をふわっと(ゆっくり)変わるようにできるプラグインはありませんか?
    また、使い方等、分かりやすいものがあれば非常に助かります。

    wordpressフォーラムにも質問しましたが、【良いプラグインを見つけて下さい】とあったのですが、シンプルにマウスをあわせた時にフワッと白くなれば良いだけなんです。
    どこをどのように・・・という風なことが分かれば嬉しいです。
    いつも拝見させて頂いてます!!宜しくお願い致します。

    • ネタワン管理人
    • 2013年 8月 31日

    コメントありがとうございます。
    恐れ入りますが、結論から先に申し上げると、簡単にプラグインで利用できるものは、管理人は分かりません。(現状では把握していません。)
    もし、今後、便利なプラグインを発見したら、記事に書いて紹介します。

    参考にならない回答になってしまいますが、一般的にマウスオーバーで変化させる処理は、CSSやjQuery等を利用してやる場合が多いです。Web制作の専門的な知識が必要になるので、あまり初心者向けではありません。個人的には、jQueryなどを活用してやるべきと考えます。

    参考
    http://www.nxworld.net/tips/button-mouseover-event.html

    • ハノイ
    • 2013年 10月 22日

    こんばんは。

    blog poressを購入し早速使ったのですが、分からないことがあり検索したらこのページに来てました。

    blog pressには記事中に使える小見出しが標準で2つあると書いてありましたが、
    その小見出しの使い方が分かりません。

    見出し1~6すべて試しましたが、文字が太くなったり大きくなったりするだけです。
    どうやったら装飾された小見出しを使うことができますか?

    よかったら教えてもらえると嬉しいです。

      • ネタワン管理人
      • 2013年 10月 23日

      コメントありがとうございます。
      TCD010の記事用の小見出しに関してですが、
      HTMLモードでCSSを記述する必要があります。

      下記のCSSのことです。

      ■ CSS
      .headline1
      .headline2

      .headline_base1
      .headline_base2

      ※ 参考までに、この記事の下の方にHTMLの記述例を追記しておきます。

    • ハノイ
    • 2013年 10月 23日

    無事上手くできました!
    ありがとうございました!!

    • ミノル
    • 2013年 12月 25日

    丁寧なカスタマイズ方法有難うございました。
    図解で分かりやすかったです。

    一つ要望なんですが、
    記事の改行幅の調整方法も教えてもらえると助かります。

      • ネタワン管理人
      • 2013年 12月 25日

      記事本文の行間の設定のことですよね?
      Pタグのline-heightの数字を小さく調整すれば、文章の縦の間隔が狭まり、PタグとPタグの間の間隔が調度良い感じになります。

      当サイトではCSSを下記のように設定しています。
      p { margin:0 0 1em 0; padding:0; line-height:180%; }

      もっと文章と文章の間の間隔を開けたい場合は、marginの1emの部分の数字を大きくして下さい。(例 margin:0 0 1.5em 0;)

    • 秋庭
    • 2013年 12月 31日

    こんにちは、いつも為になる情報を読ませて頂いております。

    少し、教えて頂きたい事があるのですが、
    blogpress が最近アップデートされてレスポンシブデザインに対応となりました。
    しかし、私としては PC用とスマホ用とテーマを別々で表示したいと思っています。

    その場合、どこを削除または改変すれば良いのでしょうか?
    簡単な方針で良いのでご教授戴けたら幸いです。

      • ネタワン管理人
      • 2013年 12月 31日

      すいません。私もよく分かりません。
      恐れ入りますが、開発元に問い合わせて下さい。
      該当箇所をコメントアウトするだけでは駄目みたいですね。
      レスポンシブ機能をOFFにできるように要望を出してみてはいかがでしょうか。

    • シバ
    • 2014年 1月 02日

    こんにちは。
    以前メールで質問させて頂いたシバです。お世話になっています。

    お忙しいところ申し訳ありません。
    お力を貸して頂きたく、ご連絡させて頂きました。

    Blog Pressを購入したのですが
    トプページの記事一覧のサムネイルの横の本文が右に寄ってしまっていて
    見栄えが悪いのですがどのようにしたら改善されるでしょうか?

    さらに<more>の所で記事が切れないのですが…。

    改善方法がありましたらお教えください(__)

      • ネタワン管理人
      • 2014年 1月 02日

      思いつく点をまとめてみました。
      推測なので、合っているか分かりませんがご確認下さい。

      トプページの記事一覧のサムネイルの横の本文が右に寄ってしまっていて
      見栄えが悪いのですがどのようにしたら改善されるでしょうか?

      恐らく、横幅が小さい画像を利用しているので、画像の右側に余白が生じるのだと思います。
      アイキャッチに登録する画像は、横幅220ピクセル以上必要です。
      横幅220ピクセル以上の大きい画像を利用してみてください。

      さらに<more>の所で記事が切れないのですが…。

      使用しているタグは合っていますか?
      下記のタグを全角にしたタグを記事に貼り付けます。
      <!-- more --> ←これを半角で入力します。

      また、抜粋の表示範囲の指定は、トップページやカテゴリなどのアーカイブページのみで利用できます。記事詳細ページでは全文が表示されます。

      上記内容を再度ご確認下さい。
      以上、参考になれば幸いです。

    • sato
    • 2014年 3月 13日

    メタデータ

    あくまでも個人の感想ですが、記事の大見出しの下にあるメタデータの表示エリアは、それ程重要ではないのに目立ち過ぎる気がしたので、ネタワンでは、色を反転し、表示位置を記事の下に移動させました。

    とありますが、具体的にはどのコードを何処に移動させれば良いのでしょうか?
    簡単に教えて頂ければ幸いです。

      • ネタワン管理人
      • 2014年 3月 13日

      具体的に説明すると、記事見出しのH2のタグを出力している部分の直ぐ下のPHPコードです。
      投稿、固定ページのテンプレートをそれぞれ変更する必要があります。

      ただ、当サイトでは記事の下に移動させていますが、同じようにする必要性はないですよ。

      外観>テーマオプション>基本設定>各項目の表示設定

      上記の設定項目でチェックを外せばメタデータは非表示にできます。
      無理にPHPコードをカスタマイズするより、メタデータが邪魔であれば、非表示にした方が良いですよ。

    • taro
    • 2014年 5月 27日

    「BlogPress(TCD010)」を購入しようかと考えている中、貴サイトに辿り着きました。
    素晴らしいサイトですね。
    今後、お手本にさせて頂こうと思っています。

    一つ質問なのですが、「BlogPress(TCD010)」で、トップページのメインコンテンツの最上部(グルーバルメニュー下)にオリジナルの画像を表示させたいのですが、カスタマイズは可能でしょうか?

    何分、素人なもので初歩的な質問で恐縮ですが、アドバイス頂けましたら幸いです。

      • ネタワン管理人
      • 2014年 5月 27日

      コメントありがとうございます。
      テンプレートのヘッダー(header.php)の一番下あたりに手動でHTMLを記述するとできますよ。
      カスタマイズするにあたり、PHPを編集することになるので、それなりに知識が必要になりますが。正しく記述しないとエラーになることもあるので、自己責任でテンプレートを編集して下さい。

        • taro
        • 2014年 5月 27日

        ご返信ありがとうございます。
        カスタマイズできるようで安心しました。
        頑張ってやってみようと思います。

    • bell
    • 2014年 5月 29日

    いつも勉強させてもらっています。
    質問なのですが、BlogPress(TCD010)のトップページで最新記事だけを全文表示にすることって可能なのでしょうか?

      • ネタワン管理人
      • 2014年 5月 29日

      コメントありがとうございます。
      質問の件ですが、テンプレートのPHPコードを自分でカスタマイズすれば可能ですが、やらない方がよいと思いますよ。
      トップページに記事の全文を表示すると、他の記事が目立たなくなって、結果的に他のページの閲覧数が減ると思いますよ。デザインのバランスもおかしくなると思います。

      それよりは、抜粋の表示文字数を調整するなどした方が良いのではないでしょうか。
      テンプレート内にある下記のPHPコードの数字の部分が抜粋の表示文字数の設定です。

      ■ 参考 メインインデックスのテンプレート(index.php)
      < ?php new_excerpt(120); ?>

      テンプレートの編集は正しく記述しないとエラーになる場合があるので、自己責任でカスタマイズして下さい。

        • bell
        • 2014年 5月 29日

        丁寧なご回答、ありがとうございます。
        そうですね。せっかくのよいデザインを崩す必要はありませんね。初期状態のデザインを活かしながらブログを運営していこうと思います。

    • マサキ
    • 2015年 5月 01日

    こんにちは。

    先日運営しているサイトのblogpressのsingle.phpをいじったところiOSで読み込んだ際に、右側に空白ができて、完全に読み込むと通常通りに表示されるようになってしまいました。
    そのまま読み込み切っても右側に空白ができたままのときもあります。

    どこか間違ったカスタマイズをしたかともとにもどしてみましたが、直りませんでした。

    なぜなおらないかわからずいろいろ調べていると、こちらのネタワンさまのサイトもiPadからみると一度右側に空白ができて読み込み終わると通常の表示になっていました。

    もしよければ、この不具合を直す方法などあれば教えてくれますでしょうか?

    こちらのサイトは http://spotnote.jp です。

    よろしくお願いします。

      • ネタワン管理人
      • 2015年 5月 01日

      解決方法はわかりませんが、推測でわかる範囲で返信させて頂きます。

      直接の原因は、BlogPressのテンプレートに記述してある画面サイズの判定の問題だと思います。
      現状の仕様では、端末やWebブラウザの画面サイズに合わせてPC用とスマホ用のCSSを切り替えています。
      なので、端末の画面サイズが小さいと、スマホ用の表示に切り替わったりします。
      端末の設定やアプリの設定によっても画面サイズが変わってくるかもしれません。

      右に余白があるように見えるのは、スマホ用の表示に切り替わった状態だと思います。下の方にスマホ用のウィジェットが表示されているはずです。
      iPhoneやiPadは、端末の画面を縦方向・横方向に傾けると画面サイズが変化するので、それが原因で一瞬表示が乱れているのかもしれません。

      私もBlogPressの開発者ではないので、これぐらいしかわかりません。
      こういった表示の乱れがあるよと、開発元のTCDに問い合わせてみてはいかがでしょうか。

        • 名無しさん
        • 2015年 5月 01日

        iPhoneでも確認してみたらあるみたいでした。
        Androidではそういうことがないので不思議です。

        わかりました。
        ありがとうございます!

    • 名無しさん
    • 2015年 5月 29日

    はじめまして。

    私もBlogPressを使いブログを運営しております。

    そこで1つ質問があるのですが、
    PC表示のメインカラムの幅を広げたいのですが、
    方法が分からず困っております。

    336×280の広告を2つ並べて掲載するには、
    記事幅の拡張がどうしても必須のようです。

    ネタワン様もBlogPressを使っており、
    メインカラムの幅を調整しているように感じました。
    良かったらその方法を教えて頂けないでしょうか?

    よろしくお願いします。

      • ネタワン管理人
      • 2015年 5月 29日

      ネタワンでは、メインカラムの横幅は変更していませんよ。
      2カラムの標準の横幅で運用しています。

      お節介かもしれませんが、メインカラムの幅を変更すると、投稿のメインカラムだけでなく、全てのページに影響がでます。CSSを理解していて、自分でCSSをカスタマイズできる人以外は触らない方が良いですよ。変更箇所が多いです。
      ヒントとしては、「style_pc.css」を開いて、ソースコードの上の方にあるレイアウト設定を読んで、意味が分からなかったら、触らない方が安全です。

    • DEAN
    • 2015年 10月 31日

    初めまして。いつも参考にさせていただいています。

    WordPress Popular Postを使用しているのですが、
    サイドバーにウィジェットで同プラグインを設置した時に

    リストマークの”arrow1.png”がどうしても消せません。
    サムネイルのところに重なったりしてこの箇所だけは邪魔なのです。

    カテゴリー一覧などではこのpngファイルは使っているので
    .side_widget li からこれを消したくはないので、

    どうにか、同プラグインのところのものだけ消したいのですが、
    ご存知でしたら、ご教授いただければ幸いです。

      • ネタワン管理人
      • 2015年 11月 01日

      こんにちは。

      解決方法を簡単に説明すると、CSSでリストマークの背景画像を非表示にして、マージンを適度に調整します。
      そのためには、WordPress Popular PostのウィジェットにあるHTML出力部分とTCD010のCSSをカスタマイズする必要がああります。
      リストの「LI」部分にclassを追加して、CSSを適用します。こうすれば、他のリストには影響がでません。

      以前書いた記事に説明を載せています。補足説明も追記しました。

      ↓ 記事の一番下にあるカスタマイズ例をご確認ください。
      http://netaone.com/wp/wordpress-popular-posts/

    • あなたの心にズバキュン♥
    • 2016年 1月 14日

    ほんと参考になります。
    コメント欄の編集で苦戦していたのですが、ネタワンさんのお陰で解決しました。
    ありがとうございました。

    • kyas
    • 2016年 1月 14日

    初めまして。
    ブログを始めることにあたってこのTCD010を取り入れました。
    カスタマイズしていると行き詰まり、このブログに出会いました。
    そこで質問なのですが、
    ロゴ画像には好きな大きさの画像を入れることはできないんでしょうか。
    大きすぎてしまうと、グローバルメニューとかぶってしまいます。
    どうしたらいいでしょうか。
    また、サイトタイトルとキャッチフレーズを非表示にする方法も教えてほしいです。
    お願いします。

      • ネタワン管理人
      • 2016年 1月 14日

      コメントありがとうございます。

      BlogPressのヘッダーのロゴ画像は、CSSで縦のサイズが指定されているので、その指定されたサイズ以上に広がらないようになっています。なので、ロゴに大きい画像を登録する際は、CSSに記述されている縦のサイズを変更する必要があります。このCSSの設定を変更すると、ヘッダーのレイアウトが縦に少しずれると思うので、細かい微調整が必要になると思います。あまりこの部分の変更をおすすめしません。どうしてもやりたい場合は、バックアップをとった上で自己責任で行いください。

      ■ 変更を加えるファイル
      style_pc.css

      ■ CSSの変更箇所
      #header
      #logo_area

      縦幅(height)の指定があるので適度に調整してみてください。

      ——

      あと、サイトタイトル(ロゴ?)とキャッチフレーズは、header.php の中にあるので、該当開所をコメントアウトすれば良いかと。

      個人的にはテーマの大幅な改修は行わない方が良い気がしますが・・・
      PHPの記述方法を間違うと、構文エラーになるのでご注意ください。バックアップもお忘れなく。

    • saba
    • 2016年 1月 16日

    お忙しいところ申し訳ありません。
    カスタマイズしているのですが、わからないところが出てきたので、
    質問させていただきます。

    TCD010を取り入れた段階では全体的に小さいような感じがします。
    ページ全体を使いたいので、
    ページ全体のフォントの大きさやサムネイル画像を大きくしたり、サイト全体の横幅を広げるにはどうしたらいいでしょうか。

    返答よろしくお願いします。

      • ネタワン管理人
      • 2016年 1月 16日

      コメントありがとうございます。
      求めている答えと違うかもしれませんが、
      BlogPressをページ全体で使うデザインにしたいのであれば、CSSを大幅に変更する必要があります。
      恐れ入りますが、それはカスタマイズというよりは、大幅改修になります。
      そもそも別のテンプレートを探すか、自分でゼロから作った方が早いと思います。
      Webデザインの領域になりますが、表示領域に合わせて広がる「リキッドデザイン」を勉強してみてはいかがでしょうか?
      ググると、リキッドデザインの作り方を解説した記事が幾つか見つかります。それを参考にゼロから作った方が早いと思います。
      どちらにしても、レイアウトを大きく変更したいのであれば、WebデザインやCSSの仕組みを学びましょう。
      少し突き放した返答に聞こえるかもしれませんが、それが一番早いですよ。
      勉強して損することはありません。

    • 名無しさん
    • 2016年 2月 20日

    こんにちは。
    最近今まで使っていたテンプレートからblogpressに変更しました。
    こちらのサイトをとても参考にさせてもらっています^^

    そこで問題が起きているのですが、今まで使っていたAddquicktagのタグが使えなくなりました。
    黄色のマーカーや文字を大きくするなど頻繁に使うものが使えなくなってしまったので困っています。

    解決策を教えていただけると嬉しいです><

      • ネタワン管理人
      • 2016年 2月 21日

      おそらく、今まで使っていたテンプレートに定義してあった固有のCSSを利用していたのが原因じゃないでしょうか。BlogPressにはそのCSSが定義されていないので、何も表示されないのだと思います。

      解決方法としては、今まで利用していたCSSのコードをBlogPressのCSSファイルに追加するのが一番早い解決方法だと思います。
      または、BlogPressに既に定義してあるCSSを利用する方法もあります。文字の色を変えたり、文字の大きさを変更するCSSは、BlogPressにもあるのでそれを使ってみても良いかも。

      CSSファイルは「管理画面>外観>テーマの編集>スタイルシート(style.css)」で編集できます。
      以上

CAPTCHA


初心者向け

WordPress使い方ガイド
WordPress入門

スポンサーリンク

ネタワンを購読する

  • Twitter
  • Facebook
  • Google Plus
  • Feedly
  • RSS
  • Push7

賢威7 - SEOマニュアル&テンプレート

新バージョンの賢威7が購入者向けに先行公開中。


賢威7の詳細&レビューはこちら