デザイン・テンプレート」カテゴリーアーカイブ

WordPressのAMPにGoogleアドセンスを表示させる方法

モバイルからのアクセスが多いブログでは、googleもWordpressもAMPを推奨しています。
AMPは表示が速いだけでなく、CDN(例えばGoogle)によってページをキャッシュされる仕組みがあるので、さらに早くコンテンツを返せるのです。

便利ではありますが・・・
AMPの仕様ではjavascriptが使用できないのでGoogleアドセンスが普通には表示できないというブロガーにとっては致命的な点があります。

image

※ 上記のAMPページがGoogleといったCDNにキャッシュされて表示されます。

 

そんなAMPページにGoogleアドセンスを表示させる方法を紹介します!

今回は、Wordpressを使用している前提で手順を紹介したいと思います。
参考にするページは

です。

続きを読む

アイキャッチの画像サイズ変更方法(切り取り)。wordpressでトリミング

wordpressでテーマ「Twenty Twelve」を使っているのですが、
デフォルトではアイキャッチ画像サイズが縦に固定化は出来ませんでした。

アイキャッチ画像サイズを縦(高さ)に固定化する方法を紹介しましす。

環境

  • ロリポップ
  • wordpress 4.8.1-ja
  • Twenty Twelve 2.3

結果的に「テーマの編集」することになります。

 

デフォルト(初期設定)。テーマ設定では高さは無制限の縮小設定

まずはアイキャッチのサイズを決めている箇所がどこなのかを探します。

  • 「外観」-「テーマの編集」-「テーマのための関数(functions.php)」

を開き、「set_post_tumbnail_size」関数を探します。一か所しかないです。

続きを読む

検索結果ページと同じ様に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」をクリックします。

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

続きを読む

背景画像をスマフォ用に画面サイズに合わせて表示するスタイルシート(CSS)は?

ヘッダーの背景用にヘッダー画像を用意したのですが、
これがスマートフォンで表示されると画面のサイズに合わせて表示してくれませんでした。
どのようなスタイルシートを設定すると画面サイズに画像を調整してくれるのでしょうか?

 

ヘッダー画像を以下のように「background:」スタイルシートで設定しました

hgroup {
    height: 230px;
    background: url(http://blog.nyuumon.net/wp-content/uploads/2015/01/access-up-200.png) no-repeat scroll bottom left;
}

すると

  • パソコンからは意図通りに表示されます

image

意図通りに表示されていました。

  • しかしスマートフォンで見ると横幅が切れて表示されます

image

意図とは異なり、ヘッダーの背景画像の全体が表示されていませんでした。
スタイルが崩れてしまいますね、、、

続きを読む

WordPressにヘッダー画像を微調整しながら入れたい。テーマ「Twenty Twelve」

WordPressのテーマ「Twenty Twelve」を使用しています。
普通に、「外観」-「ヘッダー」からヘッダー画像を入れると、高さ等の配置が上手く微調整出来ません、、、
高さを微調整しながらヘッダー画像を入れるにはどうしたら良いでしょうか?

image

 

ヘッダー画像の高さ微調整をしたいならCSS(スタイルシート)を修正しヘッダーを配置する

image

やはり、スタイルシートをいじるしかないですね。

ただし、「テーマの編集」からスタイルシートを修正するのではなく、「Jetpack」プラグインを導入し
「外観」-「CSS編集」からスタイルシートを修正しましょう

続きを読む

WordPressで特定カテゴリーの記事をサムネイル画像付きでウィジェットに表示させるプラグイン「Newpost Catch」

WordPressの人気記事を表示するプラグインに「WordPress Popular Posts」を使用していまして、
この「WordPress Popular Posts」も特定のカテゴリーのみサムネイル画像付きで表示出来るのですが・・・

アクセスがない記事が表示できない・・・「WordPress Popular Posts(Worpdress人気のある投稿)」なだけに、、、

アクセスのない人気のない記事でも、自分のオススメの記事・お気に入りの記事(特定カテゴリ)をサイドバーに表示させる方法は無いのか探しました。

 

最近の投稿がサムネイル画像付きで表示できるプラグイン「Newpost Catch」特定カテゴリーも!

image

いろいろプラグインを探し試した結果、「Newpost Catch」プラグインがオススメです!

「Newpost Catch」プラグインは、「最近の投稿」をサムネイル画像付きで表示してくれるプラグインです。
しかし、特定カテゴリーの最近の投稿を表示することも出来ますので、
例えば、自分のおすすめ・お気に入りのカテゴリー「おすすめ記事」なんてカテゴリーを作り、その「おすすめ記事」カテゴリーの最近の投稿を表示させれば実現できました!

 

「Newpost Catch」プラグインを使うと特定カテゴリー記事が以下のように表示されます

image

続きを読む

Bloggerのタイトル(titleタグ)を個別記事タイトル・ページタイトルに変更させる方法

image

Googleの無料ブログ「Blogger」では標準のテンプレートでは、
ブラウザタイトルに表示されるtitleタグが個別記事で「ブログブログ: 記事タイトル」と表示されてしまいます。
個別記事では、記事タイトルを優先させて表示させたい場合の方法を説明します

 

Bloggerのタイトル(titleタグ)をブログタイトルから記事タイトル・ページタイトルで表示させる方法

 

1,Blogger管理画面から「テンプレート」-「HTMLの修正」をクリック

image

Bloggerの管理から「テンプレート」を修正します。

続きを読む

引用のイタリック斜体文字を通常文字に変更する方法。WordPress「Twenty Twelve」テーマ

image

引用のイタリック斜体文字を正常文字に変更する方法。WordPress「Twenty Twelve」テーマ

WordPressの「Twenty Twelve」を使用していると、引用文字がどうしてもイタリックの斜体文字になってしまうんですよね。
スタイルシートの”font-style: normal;”としたはずなのに、変更できない・・・。

どうしたら通常文字に変更できるのでしょうか?

「font-style: normal !important;」と指定する

image

続きを読む

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

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

image

 

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

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

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

image

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

続きを読む