カテゴリー
HTML&CSSS

「引用」のスタイルがイマイチなので、色々と変えてみた

初期設定の引用スタイル

文字に斜体がかかって見づらい、加えて明朝体。どれも好みに合わないので、Webクリエイターボックスさん の記事を参考にCSSをいじくり、変更しました。

引用,スタイル,変更

こちらが初期設定のコード

blockquote {
	font-family: Georgia, "Bitstream Charter", serif;
	font-style: italic;
	font-weight: normal;
	margin: 0 3em;
}

モダンな感じの引用スタイル

背景色をつけて、フォントはゴシック&ノーマルに変更

引用,スタイル,変更
/*変更前 font-family: Georgia, "Bitstream Charter", serif;*/
	font-family: '平成角ゴシック','HeiseiKakuGothic','メイリオ',Meiryo,'MS UIゴシック',sans-serif;
	/*変更前:font-style: italic;*/
	font-style: normal;
	font-weight: normal;
	border-left:5px solid #ddd;
    	background: #eee;
    	padding: 10px;
	margin: 0 3em;
}

文頭と文末に“ ”に入れた引用スタイル

“ ”のマークは、画像で。左頭と右下に入れました。

引用,スタイル,変更
/*font-family: Georgia, "Bitstream Charter", serif;*/
	font-family: '平成角ゴシック','HeiseiKakuGothic','メイリオ',Meiryo,'MS UIゴシック',sans-serif;
	font-size:.8em;	
	/*font-style: italic;*/
	font-style: normal;
	font-weight: normal;
	/*border-left:5px solid #ddd;*/
    /*background: #eee;*/
    background: #eee url(https://charizm0407.com/wp-content/uploads/kakko_top.gif) no-repeat 10px 10px;
    text-indent:5%;
    padding: 15px;
	margin: 0 3em;
}

下のコードは、右下部分のカッコを表示させるCSS。

blockquote span{
    background: url(https://charizm0407.com/wp-content/uploads/kakko_bottom.gif) no-repeat bottom right;
    display: block;
}

htmlのタグ表記も若干変え、<blockquote>に加え、<span>を追加して書きます。

<blockquote><span>ドメインの登録情報は第三者へも公開され、一般の人も確認できる状態で公開することが義務付けられています。公開される情報は「登録者名、住所、電話番号、メールアドレス」です。
ムームードメインでは、個人情報を開示されたくないお客様には、お客様情報の代わりに弊社の登録情報を公開することが可能となっております。お客様情報の公開を希望されない場合は「弊社の情報を代理公開する」を選択してください。</span></blockquote>

まとめ

この作業で、ワードプレスでアイコンなどの画像を、背景に使用する技を学ぶことができ、引用スタイルの変更で、多くのことを学べました。

カテゴリー
WPカスタマイズ

TwentyElevenのコメント欄を非表示に

コメント欄非表示の理由

ブログを初めて早1年。しばしの休眠をはさんでいるので、実質3ヶ月位だけど、コメントはゼロ。来るのはスパム系ばっかり。しかも僕のブログの場合、Zenbackを入れているので、コメント欄がもの凄く下の方にあるので、まず見栄え的にもよろしくない。ということで、非表示することに。

coment_2

まずは「設定」をいじる

設定>ディスカッション設定>新しい投稿へのコメントを許可する

部分のチェックを外す。

twentyeleven,コメント欄,削除

PHPをいじる

投稿記事のコメント欄は、single.phpをいじります。 で、下のコードがコメント欄のコード。このコードの前後にコメントアウトの記号?を/*○○○*/入れました。
<?php/* comments_template( '', true );*/ ?>

ザンッ!! 非表示完了

写真のようにスッキリとなりました。

twentyeleven,コメント欄,削除
カテゴリー
WPカスタマイズ

twentyelevenのフォント周りをいじくり倒した

行間、文字の大きさを調整

Twentyelevenのデフォルトフォントの文字の大きさや行間がどーも気になっていたので、若干ですが手を加えました。

twentyeleven,フォント,変更 twentyeleven,フォント,変更

フォント全体に影響するっぽい値

/* =Global ※僕の場合:365行 を検索。body, input, textarea のfontを15pxから12pxに変更
body, input, textarea {
	color: #0e0a0a;
	/*変更前 ベーステキストの大きさ
	font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: 1.625;
	変更前*/
	font: 12px '平成角ゴシック','HeiseiKakuGothic','メイリオ',Meiryo,'MS UIゴシック',sans-serif;
	font-weight: 300;
	line-height: 1.625;
}

Pタグの数値を変更

僕の場合、やたらと<p>タグを使うのですが、<p>タグが連続した時の行間の空きがどーも許せないので、狭めました。 /* Text elements */ ※僕の場合は397行目 を検索。マージンボトムの数値を変更しました。

/* Text elements */
p {
	/* 変更前 pタグのベース
	margin-bottom: 1.625em;
	変更前 */
	margin-bottom: .5em;
}

タグも連動して文字サイズが変化

恐らくですが、/* =Globalで編集した文字が基準値となり、h1、h2、H3の大きさが設定されているっぽいです。

  • font-size:1.3em→基準サイズに対し、1.2倍
  • font-size:1.1em→基準サイズに対し、1.1倍。等倍ってこと
  • font-size:1em→基準サイズに対し、1倍。等倍ってこと
カテゴリー
WPカスタマイズ

サイドバーのウィジェット関連をカスタマイズ

ウィジェットいじり

サイドバーにあるウィジェットのタイトルやリンクテキストがイマイチだったので、手を加えてみました。

01_widget

ウィジェットタイトルのカスタマイズ

編集したCSSファイルは/* =Widgets

.widget-title がタイトル周りのCSSです。

CSSコードは、こちらのサイトを参考にしました。

角アールで、しかもグラデーション。それをCSSで?っと腰が引けましたが、コードをコピペして、ちょっと手を加えたら、何とかできました。

02_widget
/* =Widgets サイドバーのタイトル部分だよん
----------------------------------------------- */
.widget-title {
	/*変更前
	color: #EA005A;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
	変更前*/
    font-size: 12px;
    color: #3A443C;
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 1.5em;
    border:solid 1px #DED7CF;
    padding: 5px;
    border-radius: 2px;
    background: #E5E5DE;
    /*変更前
    -moz-border-radius: 5px; /* FF */
background: -moz-linear-gradient(top,  #fff, #E5E5DE); /* FF */
    /*変更前-webkit-border-radius: 5px;/* Webkit */
    /*変更前background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));/* Webkit */
    /*変更前-pie-background:linear-gradient(top,  #fff,  #eee); /* ie */
    /*変更前behavior: url(images/PIE.htc);  /* ie */
    }

ウィジェットテキストの位置修正

タイトルをカスタマイズしても、リストのマークが飛び出して見た目が変。 なので、margin-leftを設定し、タイトルとリストマークが揃うように設定しました。

.widget ul ulをいじります。

02_widget 03_widget
.widget ul {
font-size: 15px;
margin: 0;
/*変更前
font-size: 10px;
margin-left: 1.5em;
変更前*/
}
.widget ul ul {
/*変更前
	margin-left: 1.5em;
変更前*/
	margin-left: 0;
}

ウィジェットテキストの変更

色と文字の大きさを変更しました。デフォルトは大きいので、全部見ようとするとスクロールが面倒。ので、文字サイズを小さくしました。

リスト周りの変更は.widget ul li

テキスト周りの変更は.widget a

.widget ul li {
	color: #777;
	font-size: 13px;
/*変更前
	color: #EA5C5C;
	font-size: 10px;
変更前*/

}
.widget a {
/*変更前
	font-weight: bold;
	text-decoration: none;
変更前*/
	font-weight: bold;
	color: #EA5C5C;
	text-decoration: none;

すっきりしたサイドバー

初期に比べ、かなりメリハリがついて良い感じになりました。

カテゴリー
WPカスタマイズ

TwentyElevenのtitle、hタグをカスタマイズ

カスタマイズ、その前に・・・

カスタマイズする際に、変更前の数値をコメント化、/* 変更前の数値 */しておくことをお勧めします。こうすることで、簡単に元に戻すことができますし、また自分が、何処を編集したかが後で見返した時に一目瞭然です。

記事タイトルのカスタマイズ

cssファイルの/* Singular content styles for Posts and Pages */ 1215行あたり ※僕の場合を検索。で、下の方にいる

.singular .entry-titleを編集します。

.singular .entry-title {
/*変更前
	color: #38364f;
	font-size: 23px;
	font-weight: bold;
	line-height: 1.625;
変更前*/
	color: #E67168;
	font-size: 23px;
	font-weight: bold;
	line-height: 1.5em;
}

サマリーページの記事タイトルを変更

CSSファイルの/* =Content */ 745行あたり ※僕の場合 を検索。で、.entry-titleを編集します。

twentyeleven,h1,変更 twentyeleven,h1,変更
/*ここからサマリーページのタイトルだよん*/
.entry-title,
.entry-header .entry-meta {
	padding-right: 76px;
}
.entry-title {
/*変更前
	clear: both;
	color: #E67168;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
変更前*/
	clear: both;
	color: #E67168;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.3em;
	padding-bottom: .3em;
	padding-top: 10px;
	width: 550px;
}

h1、h2、h3を変更

CSSファイルの/* =Content */ 745行あたり サマリーページの記事タイトルと一緒です。 その.entry-content h1/h2/h3を編集します。

h1表記の変更

twentyeleven,h1,変更 02_h1

h2表記の変更

twentyeleven,h1,変更 twentyeleven,h1,変更
/*ここから投稿記事内のhタグのCSSだよん*/
.entry-content h1,
.comment-content h1 {
/*変更前
font-size: 1em;
color: #474c99;
font-weight: bold;
margin: 0 0 .4em;
border-left: 5px solid #474c99;
padding-left: 1em;
line-height: 2.6em;
変更前*/
font-size: 1.2em;
color:#ED1C24;
font-weight: bold;
margin: 0 0 1em;
border-left: 3px solid #ED1C24;
border-bottom: 1px dotted #7A7B7D;
padding-left: 1em;
line-height: 2em;
}

.entry-content h2,
.comment-content h2 {
/*変更前
	color: #000;
	font-weight: bold;
	margin: 0 0 .8125em;
変更前*/
	font-size: 1em;
	color: #EA5C5C;
	font-weight: bold;
	margin: 0 0 .2em;
	line-height: 0.5em;

}

.entry-content h3,
.comment-content h3 {
/*変更前
	font-size: 10px;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
変更前*/
	font-size: .8em;
	color: #7FBCAD;
	font-weight: bold;
	margin: 0em;
	line-height: 0.4em;
}
カテゴリー
WPカスタマイズ

Twentyelevenのサイドバー幅を拡大

そもそもの理由は、Google Adsenseのレクタングルバナーを設置したいから。で、CSSをいじれば、その願いは叶えられるようでしたが、失敗の連続で投げだそうと思いましたが、何とか設定できました。

CSSのstructureを検索

Htmlエディターで、structureを検索。69行目あたりにいます。

コードはこちら。一応変更前の値も残しています。

/* =Structure
----------------------------------------------- */
body {
	/* 変更前
	padding: 0 2em;
	*/
	padding: 0 2em;
	}

#page {
	/*変更前
	margin: 2em auto;
	max-width: 1000px;
	*/
	margin: 2em auto;
	max-width: 1000px;
}

#branding hgroup {
	/*変更前
	margin: 0 7.6%;
	*/
	margin: 0 5%;
}
#access div {
	/*変更前
	margin: 0 7.6%;
	*/
	margin: 0 5%;
}
#primary {
	/* 変更前
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
	*/
	float: left;
	margin: 0 -33% 0 0;
	width: 100%;
}
#content {
	/* 変更前
	margin: 0 34% 0 7.6%;
	width: 58.4%;
	*/
	margin: 0 40% 0 5%;
	width: 55%;
}
#secondary {
	/* 変更前
	float: right;
	margin-right: 7.6%;
	width: 18.8%;
	*/
	float: right;
	margin-right: 5%;
	width: 28%;
}

Right Contentを検索

Htmlエディターで、Right Contentを検索。僕の場合は220行目あたりにいました。

/* Right Content */
.left-sidebar #primary {
	/* 変更前
	float: right;
	margin: 0 0 0 -26.4%;
	width: 100%;
	*/
	float: right;
	margin: 0 0 0 -33%;
	width: 100%;
}
.left-sidebar #content {
	/* 変更前
	margin: 0 7.6% 0 34%;
	width: 58.4%;
	*/
	margin: 0 4% 0 40%;
	width: 55%;
}
.left-sidebar #secondary {
	/* 変更前
	float: left;
	margin-left: 7.6%;
	margin-right: 0;
	width: 18.8%;
	*/
	float: left;
	margin-left: 5%;
	margin-right: 0;
	width: 28%;
}

投稿ページのコード変更

ココが僕に取っての最大の難所でした。ご覧の通り、コンテンツ部分とサイドバーが重なってしまい、結構苦労しました。コードはこちら

/* Singular */
.singular #primary {
    /* 変更前
    float: left;
    margin: 0 -26.4% 0 0;
    width: 100%;
    */
    float: left;
    margin: 0 -33% 0 0;
}
.singular #content,
.left-sidebar.singular #content {
	/*変更前
    margin: 0 34% 0 2%;
    width: 64%;
    */
    margin: 0 40% 0 5%;
}

余談ですが、心配した表示がこちら。

Twentyeleven,サイドバー,幅

で、原因がこちら。変更前はwidth設定があります。これは変更後は必要ありませんが、この人を残したことで、エライことになるので、注意してください。

.singular #primary {
    /* 変更前
    float: left;
    margin: 0 -26.4% 0 0;
    width: 100%;
    */
    float: left;
    margin: 0 -33% 0 0;
    width: 100%;
}
.singular #content,
.left-sidebar.singular #content {
	/*変更前
    margin: 0 34% 0 2%;
    width: 64%;
    */
    margin: 0 40% 0 5%;
    width: 64%;
}

まとめ

文字があふれることなく、コンテンツエリアにテキストと画像がおさまりました。

Twentyeleven,サイドバー,幅
カテゴリー
WPカスタマイズ

Twentyelevenにグロバルナビをつけてみた

メニューを選択

カテゴリーが増えてくると、サイドナビのカテゴリー表示ではとっても見にくい。なので、twentyelevenに元々ついている機能で、グローバルナビを設定しました。

外観>メニュー>カテゴリーを選択/h2> Twentyeleven

グローバルメニューに表示したいカテゴリーにチェックを入れます。

Twentyeleven Twentyeleven

表示はこんな感じ

Twentyeleven

カテゴリーを階層化

表示された状態のままは子要素もグローバルメニュー上に表示されます。ので、カテゴリーの子要素化をします。

Twentyeleven Twentyeleven

まとめ

正味5分位で設定可能です。ぜひお試し下さい。

Twentyeleven
カテゴリー
WPカスタマイズ

できたっ!! 記事一覧にサムネイル表示

まずはTXT表示を抜粋版に

ずっと気になっていた、トップページの記事全文表示。だらしないなーと思いつつ半年以上放置。

Themeフォルダー>Twnetyelevenフォルダー>content.phpを編集。41行目のthe_content→the_excerptに変更。これだけでOK。

WordPress 記事一覧 WordPress 記事一覧

仕上がりました

ザンッ!! だらしないトップページがスマートにまとまって表示されました。

WordPress 記事一覧

続いて文字量を調整

基本、文字量の少ない私のブログだと、抜粋なのに記事全文が出てしまう。それはちょっと恥ずかしいので、文字量を少なく設定しました。

WordPress_Topページ>プラグイン>WP Multibyte Pathchを編集

Excerpt_mblength=>250から110に変更。

WordPress 記事一覧 WordPress 記事一覧

サムネイル画像を表示

投稿ページの右下にサムネイル画像欄があります。が、画像を設定しても表示されることはなくなぜだ?と悶々としていましたが、これで解決しました。

Themeフォルダー>Twnetyelevenフォルダー>content.phpを編集。

40行目の<div>の下に以下のコードを追加

<?php the_post_thumbnail(array(thumbnail)); ?>

WordPress 記事一覧

で、できました。感動!!。F5を押す指が思わず震えました。

WordPress 記事一覧コード表記が間違っているとこんな表示になるのでご注意ください
WordPress 記事一覧

テキストの画像を整える

テキストの右横に画像が配置されるように、レイアウトを整えました。

Themeフォルダー>Twnetyelevenフォルダー>content.phpを編集。

さきほど追加したコードの前後に、以下のコードを追加します。

<span style=”float: right; margin-left:1em”><?php the_post_thumbnail(array(150,150)); ?></span>

WordPress 記事一覧

おっ、理想としてレイアウトに仕上がりました。長かったここまで。

WordPress 記事一覧
カテゴリー
WPカスタマイズ

TwentyElevenフォント変更 記事ページ

記事フォントに変更

次いで、記事ページのフォント変更に挑戦。前々からフォントがでかすぎだろーと気になっていたので、このタイミングを機に変更してみました。

1.CSSファイルを探す

まず、フォントデータが書かれているファイルstyle.cssを開きます。

WordPress>wp-content>themes>twentyeleven>style.css

wp_01

2.cssを変更

1112行目の.singularが、記事ページのタイトルフォントになります。Htmlエディタ(crescenteve)にてfont-sizeで検索をかけると、たくさん出てきたので、目星をつけて画面を見ながら変化をチェック。

そうこうするうちに、4回目位でヒット。結構しんどい作業でした。

1112_after

4.出来上がり

タイトルのフォントがかなり小さくなりました。

twenty_s_before twenty_s_afters
カテゴリー
WPカスタマイズ

TwentyElevnのタイトルフォント変更

TwentyElevenが一番

色々なテーマを試してみましたが、結局の所、落ち着いた先は、デフォルト設定の「TwentyEleven」。とは言っても、気になる点がいくつかあるので、少ない知識を振り絞り、カスタマイズに挑戦。

とりあえず初心者にとってハードルの低いフォント周りからいじってみました。

1.CSSを変更

まず、フォントデータが書かれているファイルstyle.cssを開きます。

WordPress>wp-content>themes>twentyeleven>style.css

TwentyEleven

2.テキストを変更

Style.cssを開き、319行目。Font部分を編集。font-weightは太さ、line-heightは行間で

TwentyEleven TwentyEleven

737行目の.entry-title{ 部分の編集

TwentyEleven TwentyEleven

4.出来上がり

TwentyEleven TwentyEleven

びみょーですが、フォント周りが変更されました。PHP部分のフォントが・・・。