挑戦中!STINGER8カスタマイズ2|投稿ページ編

挑戦してみる!Stinger8カスタマイズ1|トップページ編 でも、おことわりしましたが、私にはカスタマイズ知識はほっとんどありません。でも、それなりになんとかなった!を記録しています。
トップページも、まだまだしたいことがあるんですが、今回は投稿ページに手をつけました。私自身の記録が、どこかで誰かのお役に立てれば幸いです。

本文中の画像は、クリックで全体を表示します。

making

はじめに

PLUSにはあって便利だった『記事下に一括挿入』ウィジェットが、なくなっちゃったんですね。ちょっと残念…
気を取り直して、投稿ページをざざっと見渡し、気になるところをピックアップ!

  1. 上のカテゴリーは消したい。
  2. 見出しを装飾したい。
  3. 投稿日と更新日の文字をアイコンフォントにしたい。
  4. 文字色変えたい。
  5. TOPへ戻るをもう少し目立つように。
  6. 下のカテゴリーとタグと執筆者は、右寄せしたい。
  7. 前ページ・次ページへをサムネイル付きにしたい。

順番に手をつけていきます。

上部のカテゴリーを非表示に

categories-out

子テーマの single.php のカテゴリー部分を、赤丸のように『< !--』と『-- >』で囲んで表示させないようにしました。

 

基本の色を決めて見出し装飾

各見出しは、色をつけたり質感を変えたりetc.で、わかりやすく・目立ちすぎず、を目指します。
ブログ全体のイメージカラーを決めてからにするのがいいのでは?と思います。よかったら センスのいい配色を決めよう!カラージェネレーター7種 で、Web上の無料で使える配色のサイトを紹介していますので、ご覧ください。
また、【前編】ブログの配色は好きな色で決めちゃえ! では、効率よく配色を決められるよう試してみました。そちらもチラ見していただけたらと思います。

今回は ぼやけた黄みの橙色 に惹かれました。

2017color2

タイトルh1

前回 作ったのが気に入ってるので、微調整して、そのままにしました。

見出しh2〜4

吹き出しにしてみたりしたんですが、キッチリわかれてしまうようで気に入りませんでした。
最終的にとてもシンプルに。
h2・h3は、ポイントとして頭にフォントアイコン Font Awesome と icomoon を入れ、影をつけました。
h4は下線を2色にして、頭の文字のみ大きくなるようしました。


2017h1
触ったのは stile.css を『title』『h2』などで検索した部分です。
2017h2h3

関連記事
フォントアイコン『Font Awesome』でブログを飾ってみる

icomoonの導入は Kanamiさんとこが一番わかりやすかった。
【STINGER PLUS・8・AFFINGER4】icomoon導入方法&ヘッダーに自作SNSアイコンを作成・追加する方法

投稿日と更新日をアイコンフォントに

2017date

使っているのは Font Awesome です。

2017date2
single.php の、文字をそれぞれ変えました。
2017date3

文字の色と種類を変更

【後編】ブログの配色は好きな色で決めちゃえ!で触れましたが、文字の色は真っ黒ではない方がいい。

2017moji

基本で変更しても変わらない箇所もあるので、style.css をチェックして細かく設定しています。

 

TOPへ戻るボタンの変更

壁紙がグレーなのもあって、見えなくなっていたTOPへ戻るボタン。

return-top
Font Awesomeで、バンザイしてるコにしました。
return-top2
return-top3

style.css を『#page』で検索した部分。

 

こちらを見ていて思いつきました。
【Stinger7】右下のトップへ戻るボタンに5種類のアイコンを入れてみた

前ページ・次ページへをサムネイル付きに

Kanamiさんが Stinger8 にも対応してくれます。こちらの記事のおまけでね。

【STINGER PLUS】記事エリアの横幅を広げてアドセンス(レクタングル大)を横並びに配置する方法

さいごに

下のカテゴリーとタグと執筆者は、右寄せしたい。以外は、できました。
その他も、ほとんど終わってます。まとめることができしだい、下記についても公開の予定です。

  • トップページのサムネイルを丸く
  • サイドバーの見出し装飾
  • サイドバーにRSSアイコン設置
  • Googleフォントの導入
  • フッターの利用(未着手)
  • 上部MENUバーの位置の変更
  • 引用の『”』ダブルクォーテーションを表示させる
  • デフォルトのSNSボタンの変更(未着手)
  • OGP設定
Nyan
やっと気に入ったものになってきたトコですにゃの!
このページの タイトルとURL をコピーする!

関連記事

friends

ブログを続けていくために必要でたいせつなもの

ブログを続けていくために、モチベーション維持がたいせつと云われています。自分にとってのモチベーションは何なのか?を考えました。そして、たいせつなことに気がついた。

EWWW Image Optimizer

EWWW Image Optimizerが使えない?ならパンダさんがいるじゃないか!

 もしかして、画像圧縮プラグイン『EWWW Image Optimizer』が使えてない? ずっと出てる 『EWWW Image Optimizer requires exec(). Your sys …

starting-blog

WordPressでのブログを始める3ステップとテーマ選びのコツ

WordPressの導入までをおさらいして、テーマの選び方に関する個人的意見、そしてお勧めテーマをご紹介します。

Nyan

【後編】ブログの配色は好きな色で決めちゃえ!

ブログの配色に困った私が、試行錯誤してたどりついた方法をご紹介します。これが正解というわけではありませんが、少しでもお役に立てれば幸いです。【前編】ブログの配色は好きな色で決めちゃえ! からの続きにな …

Nyan交信中

ブログ始めて1.5か月・公開記事30で思うところ

 2016年5月末から始めて、1.5か月たちました。公開記事数は、やっと30。今日現在の思うところ、変化したことなどを記録します。 もくじ1 1か月前・その前は?どうだったろう?1.1 ずっとどうした …

広告

にほんブログ村 ライフスタイルブログ 自分らしさへ にほんブログ村 ライフスタイルブログ 生き方へ ブログランキング・にほんブログ村へ