[αź]ド素人でもできた!人気テーマstinger5へ変えてから、カスタマイズしたところまとめPart2

Custum2

どうも。ブログのカスタマイズにはまっている、あずき (@azucky824です。

先月からブログのデザインテーマを「Stinger5」といういじりやすい人気テーマれ変えて、色々とカスタマイズしています。

先日、ある程度整ったところで備忘録として一度記事を書かせていただきました。今回はその続編となります。

トップページ

まずは、ブログの顔であるトップページのカスタマイズです。

今日の人気記事を表示することにした。

人気記事表示

前回の記事では、トータルの人気記事をサイドバーに設置しましたが、スマホ表示だと下の方へ流れてしまうのと、デイリーランキングだと、最新記事が入ることが多く、比較的新しめの記事をよんでいただけるというメリットがあります。

これも前回同様、プラグインでやってますのでとても簡単でした。

ただ、3列表示にしたので、それがちょっとめんどくさかったですね。これもそのうち記事で書きたいと思ってます。

参考はこちら↓

△この記事中のテンプレートタグ編を参考にしました。

ブログのキャッチフレーズを非表示に

STINGER5 WordPressのはじめ方や使い方

Stinger5では設定したキャッチフレーズが、ヘッダータグ中のブログ名の後ろと、ページ上ではロゴ画像の下に表示されます。

僕の場合、ロゴ画像にキャッチフレーズも入っちゃってるので、必要ありません。

ヘッダーのファイルからこの部分をゴッソリ削除しました。

記事一覧をPC表示だけ二列にした。

あずきろく すきなものだけ すきなだけ

テーマを変えてから、自分の中ではかなりこだわりを持って作業している記事一覧。

前回はカード型デザインを導入しました!的な話をしましたが、これPC表示だと横にだだっ広くなっちゃうんですよ。

せっかくのカード型なのに、まったくカードっぽくないんです。

そんなわけで、スマホ表示ではそのまま1列、PCなど横幅が広いデバイスで見たときだけ二列表示へとカスタマイズ。

これは気合入れて近日中にコードをご紹介したいと思ってますので、やってみたいという方はお楽しみに!

フッターにアイコンとトップへ戻るリンクを追加

あずきろく すきなものだけ すきなだけ と PC プログラミング

前回記事で背景色をつけたフッター部分。今回はそこにブログのアイコンと、トップに戻るリンクを配置しました。

これはdelaymaniaさんのページでやっていたのがかっこよかったので、真似させて頂きました。

delaymania

Facebook, LINE, YouTubeなどのWEBサービスを中心としたインターネット系の話題や、iPhone, Macなどのコンピューター系の話題など、WEBデザイナーの管理人が気になった情報を発信しているブログです。

delaymania.com

記事内の変更点

次は各記事の表示で変えたところです。

記事先読み (目次)を設置

Αź 七人のブログ侍4th 今回はまた身体がテーマだよ 来週の更新をお楽しみに  七ブ侍 月曜日 あずきろく

なにげに、記事の内容を先に目次として書いておくのが流行っているようです。たしかに、僕自身そちらのほうが読みやすいと感じていたので、このブログでも導入を決めました。

とりあえず入れただけで、まだまだCSSもいじりたいのだけど、プラグインで簡単に導入できたので参考サイトをご紹介しておきます。

リストタグの表示を調整

Αź ド素人でもここまでできる stinger5にテーマを変えてカスタマイズしたところ備忘録 あずきろく

リストを表示する際、あまり目立ってなかったので以下サイトを参考に、とりあえずという段階ですが装飾を施しています。

  • こんなかんじ
  • 雰囲気はつたわる?

今後もうちょっと勉強していじりたいなとは思っています。

引用タグの表示を調整

Αź 家の窓ガラスに突然ヒビが それは 熱割れ かもしれませんよ あずきろく

これも、ちょこっとだけ目立たせるというか、他の部分と違うよ!って感じに背景色をつけてあります。

こんなかんじかな?

今後はこの辺りを参考にしてもうちょっと弄りたいと思っています。

画像をセンタリング

Αź 家の窓ガラスに突然ヒビが それは 熱割れ かもしれませんよ あずきろく

このブログでは、画像を入れることが多々有りますが、だいたい真ん中にしておいて問題ないものばかり。なので一括指定でセンタリングしました。


△するぷさんの記事が非常にわかりやすかったです。

iframeタグのレスポンシブル対応を条件付きに。

Stinger5だと、YouTubeやはてブカードに使われているiframeタグがレスポンシブル対応してしまうために、余白の調整が上手く行かないことが多かったです。これはStingerユーザーは必須な処理なんじゃないかな。


△七人のブログ侍でご一緒している、よっしーさんの記事がコピペだけで出来てものすごく助かりました!

まとめ

やってみたことの備忘録として書いた記事第二弾でした。まだまだやりたいことは尽きませんが、ひとまず時間的にたっぷりとってやるのはここまでかなぁ。今後は徐々にカスタマイズ記事に落としこんで行きたいと思っていますので、同じようなカスタマイズしたいなって方にはお役にたてるかと思います。

それではまた!あずき (@azucky824でしたー。

Posted from するぷろ for iOS.

この記事を書いた人

azucky824

1987年生まれ ゆとり第一世代。実家は千葉で代々漁師の家系。
大学で上京し、住宅営業マンを経て現在は理学療法士を目指して専門学校生。
好きなものを語る場としてこのブログを管理・運営してます。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします