Twenty Twelve」タグアーカイブ

検索結果ページと同じ様にmoreを使用しないで一定文字数で自動「続きを読む」にメインページをする方法。WordPress Twenty Twelveカスタマイズ

WordPressの「Twenty Twelve」テーマを使用していますと

  • メインページ
  • 検索結果ページ

で表示の仕方が違うことがわかります。
メインページを検索結果ページと同じく、一定文字数で画像も表示させずに「続きを読む」にするにはどうしたら良いでしょうか?

 

  • 「Twenty Twelve」テーマの通常の「メインページ」

image

「<!–more–>」を使用するまで、「続きを読む」にはならず
また、文字の装飾だけでなく画像も表示されます。

  • 「Twenty Twelve」テーマの通常の「検索結果ページ」

image

文字の装飾もなく、画像も表示されず、一定文字数で表示が切れています。
メインページの表示の仕方とは違いますね。

この検索結果ページと同じようにメインページも表示させたいと言うわけです

続きを読む

キャッチアイ画像を個別投稿ページには表示させない方法。WordPress Twenty Twelveカスタマイズ

「Auto Post Thumbnail」でキャッチアイの画像を自動で作成すると便利なのですが
個別記事ページを見ると、サイズの違う同じ画像が二個並ぶのがイマイチ・・・

キャッチアイ画像は個別ページには表示させないように「Twenty Twelve」テーマをカスタマイズしてみましょう

今回使用した環境:

  • WordPress 4.1-ja
  • Twenty Twelveテーマ 1.6

でカスタマイズしてみましたが、他のテーマでも流用出来るように紹介します

 

テーマの編集でTwenty Twelve: content.phpテンプレートを修正する

image

wordpressの管理画面から「外観」-「テーマの編集」をクリック。
右テンプレートの「content.php」をクリックします。

※ テーマによっては違うテンプレートになる可能性があります

続きを読む

WordPressでサイト横幅サイズを固定化して表示する方法。「Twenty Twelve」テーマ

WordPressは基本的に見ているブラウザの横幅サイズを縮小すると、サイトの表示・見栄えも縮小化されます。
このサイトの縮小化を固定サイズにするにはどうしたら良いのでしょうか?

image

 

WordPressでサイト横幅サイズを固定する方法。「Twenty Twelve」テーマの場合

今回は、WordPressの「Twenty Twelve」テーマの場合で説明します。
スタイルシートをいじる必要があります。
意外とわかってしまうと簡単かもしれません。

以下のように、ブラウザの横幅サイズを縮小した場合でもサイトのサイズを固定で表示する方法です。

image

スタイルシートを編集する箇所の選択肢

続きを読む

Twenty Twelveテーマの右ナビメニューに300pxのGoogle Ads広告を表示させる方法

WordPressで「Twenty Twelve」テーマのカスタマイズです。
通常、「Twenty Twelve」テーマの右ナビメニューは250pxの広告エリアが貼り付けられるサイズです。
Twenty Twelveテーマの右ナビメニューに300pxのGoogle Ads広告を表示させたいがどのようにスタイルシートをカスタマイズすれば良いのでしょうか?

Twenty Twelveテーマの右ナビメニューに300pxのGoogle Ads広告を表示させる方法

両方をスタイルシートで変更させるのですが、方法としては二種類あります。

  • 「Twenty Twelve」テーマの「テーマ編集」から「スタイルシート(style.css)」を編集する方法
    image
  • 「Jetpack by WordPress.com」プラグインを導入し「外観」の「CSS編集」から編集する方法
    image

があります。

 

続きを読む

WordPressにGoogle Adsを貼り付けると表示される前に黄色になる。Twenty Twelve

WordPressのテンプレート「Twenty Twelve」を使用した時に、
Googleアドセンスが表示される前の一瞬黄色の背景が表示されます。
あれを回避する方法を紹介します。

 

Googleアドセンスが表示される前の一瞬黄色の背景が表示されるのを回避する方法

image

一瞬ではあるのですが、Googleアドセンスが表示れるまえに、黄色く編みかけ表示されてしまうんですよね、、、
これを修正したいです。

 

現象が起きる環境。Wordpress Twenty Twelveテンプレート

  • WordPress
  • Twenty Twelveテンプレート使用時

続きを読む

Twenty Twelveでキャッチアイの画像の場所を記事タイトル下に変える方法。WordPress

WordPressで「Twenty Twelve」のデザインはシンプルでカッコイイです。

ただ、キャッチアイの画像が記事タイトルより上にあるのは気になります。
キャッチアイの画像を記事タイトル下に持って行きましょう。

ちなみに、
キャッチアイとは、記事を象徴するイメージ画像です(記事内の最初の画像をリサイズしたもの)。

 

Twenty Twelveでキャッチアイの画像の場所を記事タイトル下に変える方法

image

キャチアイの画像が定義されているのは上記箇所になります。
「外観」-「テーマ編集」の右メニュー内の「content.php」を選択します。
content.php内にあるthe_post_thumbnail()がキャッチアイ画像の表示コードとなります

上記赤枠は、「キャッチアイ画像があれば表示する」というコードになります。

<?php if ( ! post_password_required() && ! is_attachment() ) :
the_post_thumbnail();
endif; ?>

続きを読む

ブログにかっこ良くデザイン性の高いweb fontを導入する方法。

Web Fontってご存じですか?
決められた正規のフォント以外にデザイン性の高いお洒落なフォントをブログとかに利用出来る方法があるんです

 

デザイン性の高いweb fontを導入する方法

以下、ブログへの導入方法例として

  • web fontとして、今回はGoogle Fontsを使用
  • 導入するサイトにはWordpressブログ

で説明します

 

1,web fontサイトから使用したいフォントを選定する

image
Google Fonts

まずは、どのフォントを使用するか以下のサイトから選びます。
いろんなweb fontサイトがありますが、今回はgoogle fontsを紹介します。

※ google fontsの場合は日本語には向かないですね。

続きを読む