1. ホーム > 
  2. 無料WordPressテーマのダウンロード > 
  3. 無料WordPressテーマ [ takeroot ] > 
  4. WordPressテーマ [ takeroot ] の使い方【基本編】

WordPressテーマ [ takeroot ] の使い方【基本編】

当サイトで配布している無料WordPressテーマ [ takeroot ]の使い方を解説しています。標準でいくつかのJQueryも導入済みですので、その利用方法も解説。

  • 2017/1/1
  • 2015/5/6

ヘッダー画像

ページ右上にブログのロゴ画像を設定する事ができます。ロゴ画像はテーマカスタマーザーからアップロード、設定を行うことができます。

ヘッダー画像のサイズ

ヘッダー画像のサイズは、最大で幅220ピクセル、高さ50ピクセルです。
スマホで表示している場合には、幅145ピクセル高さ43ピクセルまで縮小しますので、あまり細かな文字は書かないほうがいいと思います。

アイキャッチ画像

takerootでは投稿記事にアイキャッチ画像を設定する事が前提になっています。
アイキャッチ画像のサイズは横幅670ピクセル、高さ352ピクセルで作成して、ほぼ画像の中央に見せたいものを配置するようにすると比較的綺麗に収まります。

アイキャッチ画像を使っている箇所

アイキャッチ画像は、ブログのトップページ、記事のタイトル部分、人気記事のサムネイル(WordPress Popular Posts利用時)、最新記事の一覧(ウィジェット:[t]人気記事の利用時)で利用されます。

▼トップページ

▼記事ページ

▼カテゴリ・タグページ

アイキャッチ画像を設定していない場合

もしアイキャッチ画像を設定していない場合、雨のしずくが窓についたようなイメージ画像が使用されます。この画像はテーマフォルダ内のimagesフォルダに、no-image.jpgという名前で保存されています。
アイキャッチ画像を設定していない時に利用する画像を変えたい場合、この画像をお好みの画像に置き換えてください。

標準で導入済みのjQuery

画像のモーダルウィンドウ表示をする「lightbox」と、ソースコードなどを読みやすく表示する「Syntax Highlighter」が標準で導入済みです。

lightboxの使い方

lighboxの設定はHTMLのソースコードを少しいじりますので、テキストエディタで操作をしてください。

まずモーダルウィンドウで表示させたい画像を投稿に埋め込みます。

この際にリンク先はメディアファイルを選択してください。サイズはフルサイズでも問題ありませんが、最初からフルサイズの画像をページ上に表示させるのであれば、モーダルウィンドウで表示させる必要はありませんので、中サイズなど少し小さめのサイズを選びましょう(´・ω・`)

ページ中に埋め込まれたソースコードのaタグの部分にrel=”lightbox”と記入すれば完了です。





▼lightboxのサンプル

Syntax Highlighterの使い方

HTML、CSS、Javascript、PHPのソースコードを表示ができるようになっています。

HTMLソースコードをSyntax Highlighterで表示させたい場合、ソースコードを<pre class=”brush: html;”></pre&gr;で囲めば完了です。



Javascriptの場合には、brush: htmlとなっているところをbrush: javascript、CSSの場合にはbrush: css、PHPの場合にはbrush: phpとすれば、それぞれの言語ごとにSyntax Highlighterが自動で色分けをしてくれます。

▼Javascript

<script type="text/javascript">
document.write( "Hello!Hello!Hello!" );
</script>

▼CSS


▼PHP

<?php
echo "days are gone I need not to go back";
?>

Google Analyticsの設定

Google Analyticsのトラッキングコードは、すでに設置されていますので、テーマカスタマイザーからトラッキングIDを入力すれば、アクセス数のトラッキングが開始されます。

Google AnalyticsのトラッキングIDは、Analyticsにログイン後アナリティクス設定 > プロパティ設定で確認する事ができます。

「役にたった」と思ったらシェアお願いします