新@kyotapyな日々

思いついたら書く… wordpress,iPad,美味しいもの,観光

WordPressのテーマ「stinger5」のカスタマイズその2(全体デザイン)

      2014/09/26

stinger5のカスタマイズ。前回は、webフォントを使いフォントの変更をしました。

WordPressテーマのカスタマイズ | 新@kyotapyな日々
関連エントリ

 

今回はさらに細かいところをカスタマイズしてきます。

…とその前に

stinger5は基本的なカスタマイズをWordPressのテーマカスタマイザで設定することができます。しかし、cssでカスタマイズするとき、テーマカスタマイザの設定とがケンカ?して、cssでの設定内容がうまく反映されないことがあるそうです。

親テーマのfunction.phpのテーマカスタマイザに関する記述を削除するとcssの設定がうまく反映されるそうです。

 

【Stinger5カスタマイズ】反映されないCSSがある場合、テーマカスタマイザーの設定が原因かも | Tokyo Web Diary

function.php訂正

function.php訂正

 

さて、準備が整ったところで、カスタマイズした点は以下のとおり。

  • トップページの表示を一覧形式から、最新の投稿のみにしたい
  • ヘッダ画像を表示させないようにしたい
  • 各要素の配色、飾り、サイズを変更したい
  • phpやcssのソースコードをキレイに表示したい

上記を実現させるべく、小テーマのstyle.cssに追記して行きます。

 

トップページの表示を一覧形式から、最新の投稿のみにしたい

 

デフォルトでは、トップページには投稿が日付順に一覧表示されている状態です。

これでは右サイドバーの「NEW POST」とダブり感があるので、最新の投稿単体をフル表示させるようにしたい。

こちらのサイトに方法を参考にカスタマイズしました。

Stinger5のトップページに投稿の全文を1件だけ表示する方法 | Stinger5のカスタマイズ | 西沢直木のWordPress講座【個別指導・東京池袋】

トップページのメインカラムの表示内容は、home.phpで定義されています。

トップページの投稿一覧から特定の投稿をタップするとsingle.phpにより投稿が単体で表示されます。

この投稿単体表示に使われるsingle.phpを流用して、home.phpを作成します。

今回も小テーマを使って、カスタマイズ。まずは、親テーマであるstinger5のテーマファイルが入っているディレクトリからsingle.phpをダウンロード。

ファイル名をhome.phpに変更し、ループ記述部分にbreak;を追記します。

上記のように追記したhome.phpを小テーマが入っているディレクトリにアップロード

トップページを表示させてみると、ちゃんと最新の投稿が単体で表示されていました。

参考にしたサイトではパンくずリストを削除していましたが、私はそのままにしました。

トップページ変更前

トップページ変更後

ヘッダ画像を表示させないようにしたい

これはcssよりもWordPressの管理メニューで設定した方が楽でした。

管理メニューから外観→ヘッダーでカスタムヘッダー画面を表示→「ヘッダー画像を削除」ボタンを押してヘッダー画像を表示しないようにしました。

 

各要素の配色とサイズを変更したい

配色は、こちらのサイトを参考にしました。

Color Trends + Palettes :: COLOURlovers

このパターンを使い、テーマカラーをオレンジにして配色を決定。

配色パターン

以下、変更点とそのコードです。

ブログタイトル文字を大きくし、フォント色をテーマカラーのオレンジに変更

 

メニューのサイズやフォント色を変更

 

本文のフォント、リンク、マウスオーバーの色を変更

 

リストの先頭文字を●から◾︎に変更し、文字に下線を引く

 

記事タイトルのフォント色の変更、上下に線を引く

 

中身出し、小見出しのフォント色、サイズ、飾りを変更

 

サイドバーのrss購読ボタン、検索窓、項目見出しのサイズ変更と色の変更

 

phpやcssのソースコードをキレイに表示したい

今回の投稿のようにcssカスタマイズネタではソースコードを引用するときに、エディタ画面で見ているように分かりやすく表示したかったので、「crayon syntax highlighter」というプラグインをインストールしました。

WordPress › Crayon Syntax Highlighter « WordPress Plugins

インストールして、有効化。ソースコードを表示させたい場合…

 

<pre class="lang:(ソースコードの言語) theme:classic mark:(ハイライト表示したい行番号)" title="(タイトル)">
(ここにソースコードを記載)
</pre>

のようにソースコードをタグで囲みます。

"lang:"にはソースコードの種類(html,css,phpなど)、"theme:"には登録されているテーマ名(プラグイン管理の画面からテーマを編集できます。)、"mark:"にはハイライト表示したい行番号(1,3,6-10など)、"title:"には、ソースコードのタイトルを入力します。

タグをtextexpanderに登録しておけば、入力が楽になります。

カスタマイズ第1弾終了!勉強になりました

これでカスタマイズは終了。あとは微調整しながら使って行こうと思います。こうやってカスタマイズしていくと凄くcssの勉強になります。

少しでも 、オリジナルテーマの作成に近づいたかな…

 - テーマ ,

  プロフィール  PR:無料HP  北播ドライビングスクール  横手自動車学校  純正中古部品の通販  スタッドレスタイヤ はきかえ  タイヤ パッソ 激安  自動車 専門学校 夜間  クラウン純正ホイール  加南加賀自動車学校  開運パワーストーン  岡山 合宿免許  音楽 専門学校 福岡  タイヤ 取り付け 柏市  リノベーションローン