WPテーマ「ストーク」をちょっとおしゃれにするカスタマイズまとめ

スポンサーリンク

ちゃっす。あめのは(@ameyohure)です。

はてなブログからWordPressにブログを移行してから約10ヶ月になりまんた。

移行時に選んだWordPressテーマ「ストーク」は、いまも変わらず使い続けてます。

近頃、「ここのカスタマイズってどうやってやってんの?」っていう問い合わせが増えてきたので、この機会にまとめておこうと思います。

ブログカスタマイズで「ストーク」をちょっとおしゃれに。

ストーク使ってる&固定フロントページを設定してる人向けのカスタマイズが多めです。
見出しデザインって何使ってんの?の項目を追加しまんた。

Q.「最新記事」と「人気記事」の表示方法教えろ

問い合わせが一番多いブログカスタマイズです。僕がトップページに設定している「最新記事」と「人気記事」の部分ですね。これ、実はものすごく簡単に設定できちゃいます。

僕の場合はストークに初めから入っている、記事中に関連記事のリンクを画像つきで表示するショートコードを使ってます。

このショートコード、実は「記事IDを空欄にしておくと自動で最新記事が表示される」ようになっているんですよ。

この機能を利用して最新記事では記事ID指定を空欄に、人気記事では自分で任意の記事IDを指定して表示させてます。

で、あとは2カラムのショートコードで囲んであげればカスタマイズは完了。まとめるとこんな感じです。

記事IDの調べ方は、WordPressカスタマイズに!IF文(条件分岐)の使い方まとめ – スラッグを指定している場合のIDの調べ方をご覧ください。

Q.トップページのカテゴリー別の記事は自動で表示させてんの?

カテゴリー別の記事表示は、自分で記事を選んでリンク設定してます。自動じゃないっす。

よく読まれている記事や興味がある人が多そうな記事を、各カテゴリーに3〜4つずつ配置してます。この際、記事タイトルもわかりやすく、かつ短めに変更させてます。

カテゴリー別のアイキャッチ画像はPixabayとかぱくたそとかから探してきて、文字ぶっ込んで固定フロントページに直接貼り付けてます。

「タイトル→アイキャッチ画像→記事」の順番でカテゴリー別にひとつずつ設定していき、3つのカテゴリーごとにショートコード使って3カラム表示させてます。

Q.「あわせて読みたい」の表示方法教えろ

「あわせて読みたい」のカスタマイズは、はてなブログの動く記事リンク作ったよ!【ブログカスタマイズ】を使ってます。

こんなやつね。

僕は内部リンク(自分の書いた記事)を「あわせて読みたい(ピンク)」、外部リンク(他のサイトとか)を「参考記事(グリーン)」として使うことが多いです。淡い色が好きなの。

Q.トップページのプロフィールレイアウト方法教えろ

ここでも2カラム表示のショートコード使ってます。左側は略歴、右側はプロフィールってな感じ。ちなみに、略歴部分はそれぞれの項目に関連しそうな記事をリンクさせてます。

あとは、略歴下にプロフィール記事を、プロフィール下にはお問い合わせフォームを設置してます。

Q.トップページを固定ページにする方法教えろ

どぞ。

Q.カテゴリー別の人気記事ってどうやって表示させてんの?

サイドバー(スマホだと下のほうにあるやつ)のカテゴリー別の人気記事は、プラグインの「WordPress Popular Posts」と「WPP Plus Widget」を使って表示させてます。

カスタマイズについては、WordPressで今見ている記事と同じカテゴリーの人気記事を表示するプラグイン「WPP Plus Widget」の使い方がわかりやすかったので紹介させていただきます。

Q.トップページのヘッダー画像を記事一覧リンクにする方法教えろ

需要があるかはさておき、「トップページのヘッダー画像を記事一覧リンクにする方法」です。

もちろん、記事一覧以外にも、自分のお好みのページをヘッダー画像にリンク設定することができますよ。

まだトップページ用ヘッダーを画像にしていない方は、ストーク公式のストークのトップページ用ヘッダーを使わず、画像をそのまま表示する方法をご覧ください。

まず、WordPressのダッシュボートから「外観」→「テーマの編集」と進んでいきます。

画面右上「編集するテーマを選択」を、stork_custom(子テーマ)からstork(親テーマ)に切り替えて「選択」をクリック。

編集するテーマをstorkに切り替えたら、下にスクロールしていき「parts_homeheader.php」というファイルを見つけましょう。

上から4〜6行目の部分を編集していきます。すでにヘッダー画像を設定している方はこんな感じになっていると思います。

<img src=”〜”>って書かれたところがヘッダー画像になっているので、これを<a href=”URL”></a>で囲んであげます。スマホ表示とPC表示で分かれてるので、2箇所とも設定しちゃいましょう。

このブログの記事一覧URLは「https://www.toritemi.com/article-list」なので、これで設定していきます。記事一覧URLの作り方は、WPストークのトップページを固定ページにしてカスタマイズしてみた – 記事一覧ページも欲しい場合は?からどうぞ。

書き終えたら「ファイルを更新」を押してカスタマイズ完了です。ちゃんとリンクされているか確認してみてくださいね。

今回は親テーマを直接いじっちゃってますが、本当は子テーマに該当のファイルを作ってあげるのがベストです。

ブログテーマを更新すると、親テーマでカスタマイズしたファイルはすべて初期化されてしまうので。

ストークを使っている方はすでに子テーマは持っているかと思うので、親テーマからカスタマイズしたいファイルをコピペして、子テーマにも同様のファイルを作っておきましょう。

Q.見出しのデザインって何使ってんの?

トップページと記事ページで見出し(H2〜H4)のデザインは変えてますが、どちらもCSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選から自分の好きなものを選んで使わせてもらってます。

たくさんの見出しデザインがあるので、自分の好きな見出しデザインが見つかると思いますよ。カラーコードを変えると雰囲気もガラッと変わりますしね。

ちなみに僕の使ってる見出しデザインはこんな感じ。ちょっと面倒ですが、見出しの差し色を同系統にすると統一感が出ますよ。

  • トップページh2:ただの太字
  • トップページh3:サルワカ – 両端に線を伸ばす
  • 記事ページh2:ストークデフォルト
  • 記事ページh3:サルワカ – 左に線+塗り
  • 記事ページh4:サルワカ – おしゃれなシェブロンマーク

まとめ

ブログカスタマイズについて問い合わせが増えてきたので、よく質問が来る内容をまとめて記事にしてみました。

正しい情報を掲載するようには心がけていますが、間違って記載されている情報や修正すべき点などありましたらお知らせいただけると助かります。

他にも、「うまくできねーよ!」「ここの説明わかりにくいんだけど?」「ここのカスタマイズどうやってんの?」「こうしたほうがいいんじゃない?」等の質問・意見・クレームがありましたら、お気軽にお問い合わせください。

お問い合わせはLINE@TwitterのDM、もしくは問い合わせフォームから受け付けてます。

スポンサーリンク

Twitterで「あめのは」を

スマホ料金を断捨離!
自宅で格安SIM「mineo」にMNPできたよ!

自宅でサクッと「mineo」に変えちゃいましょう。SIMロック解除ができないau iPhone6でも、mineoなら大丈夫。スマホ料金を5分の1にまで節約できちゃいました。

ブログ初心者におすすめ!
WordPressテーマ「STORK(ストーク)」

販売価格 ¥10,800(税込)

当ブログも使っている、WordPressテーマ「STORK」。デザインの良さはもちろん、使いやすさ・読みやすさにも徹底的にこだわり抜いた究極のモバイルファーストWPテーマです。スマートフォンでの使用感は抜群!