STORK(ストーク)のトップページのカスタマイズ方法全部教えます！

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

taka

あることがキッカケでVBAを独学で勉強しました、今ではブログを通してVBAでできることを解説しつつ、VBAや他の言語の勉強、ブログ運営の勉強をしています(^^♪

最新記事 by taka (全て見る)

• 【動画】2019年7月7日発売！新型のRyzenは何が変わった？ZEN２は買いなのか？ - 2019年6月23日
• 【動画】自作パソコン構成変更！ケースをNZXT　H500に交換しました！ - 2019年6月5日
• VBA 『Array関数』指定した要素で配列を作成する - 2019年5月23日
• 「動画」初完全ワイヤレスイヤホン『Jabra Elite Active 65t』 - 2019年5月17日
• 『YouTube』AIは本当に雇用を奪うのか？ - 2019年5月16日

どうも、taka(@takabou63)です(^^♪

今回はブログのお話(^^)/

今月2018月1末に本ホームページ「E-VBA」のトップページをカスタマイズしました(^^♪
本サイトのトップページはこちら

前々からお話ししておりますが、本サイトはWordpressで作成しており、有料のテーマ「STORKストーク」を使用しております(^^♪

このストークは標準仕様でも素晴らしいテーマですが、やはりブログのテーマだけあってどうしてもブログのトップページになってしまいます(;^ω^)

そこで私はトップページのみオリジナルのページを作成しようと思い立ったのです(^^)/

という訳で今回は私自身がカスタマイズした「STORKストークのトップページのカスタマイズ方法」を全部教えます！

私が使用しているテーマSTORK(ストーク)

私はVBA以外のプログラム知識はほとんど持っておりませんので素人の方でも問題なくカスタマイズできると思います(^^)/

(※この記事は長文です、読みづらいかもしれませんがご了承ください)

STORKストークトップページカスタマイズ1「トップページ用の固定ページを作成」

では、まずトップページのもととなる「固定ページ」を作成していきましょう！

WordPressのメニューから固定ページ→新規作成をクリックしてください(^^)/

新規作成ページから「固定ページの属性」のテンプレートを「デフォルト」から「サイドバーなし」に変更してください・

トップページなので「タイトルはなし」で下書き保存しておきましょう(^^♪

現在の状態1

今のところ、このような状態になっていると思います。サイドバーもなく、こざっぱりしてさみしい状態です。

STORKストークトップページカスタマイズ2「メニューの作成」

続いてはトップページに表示する↓のようなメニューを作成していきましょう(‘◇’)ゞ

記事を3カラムにする

上記画像のように3つの列でコンテンツを分けるには「STORKストーク」で初めから用意されている「ショートコード」を使います(^^)/

「STORKストーク」のショートコード公式解説はこちら

これで3つのカテゴリーが出来ました。実際記載されているコードは下記のようになっています。

メニュー画像を追加

メニューの画像の調達はフリー素材のサイト「写真AC」を利用しています(^^♪

フリーの画像をペイントやらExcel、ウェブ上で画像編集できるサイトで編集しました(^^♪

コード中の「ここに画像」のところに画像を挿入してください(^_-)-☆

現在の状態2

この状態になっていなかったらどこかコードが間違っています(;^ω^)

各メニュー画像下の部分を作成

画像が追加出来たところで次に画像下の最新の投稿の部分を作成していきます(^^)/

この部分の灰色のボックスには「STORKストーク」のBOX作成のショートコードを使用します！

そして気になるはずの最近の投稿の部分、この部分は「Shortcodes Ultimate」というプラグインを使用して自動で反映するように設定してあります、「Shortcodes Ultimate」は様々な機能を持ったショートコードが用意されているプラグインで、プログラム知識が無くても工夫するだけでかなりの事が可能になります(^^)/

「Shortcodes Ultimate」をインストールして有効にすると投稿ページに赤枠のようなボタンが表示されます。

ボタンを押すと多くの項目が表示されますが今回は「投稿」を選択してください！

「投稿」を選択するとショートコード作成の項目になります。私の設定はこのようにしてあります。

このコードを先ほどの「3カラム」のショートコードと「STORKストーク」の「ボタンショートコード」組み合わせて公開すると(↓ボタンのショートコード見本)

このように表示されます！だんだんメニューぽくなってました(^^♪

現在の状態3

最新の投稿を画像でトップページに表維持させる

さてこれでデザイン面では最後となるこの最新の投稿の部分です。

この部分も先ほどご紹介した「Shortcodes Ultimate」というプラグインを使用して作成しています！

先ほどは「投稿」で作成しましたが、今度は「ギャラリー」のショートコードを作成します！

「ギャラリー」はリンク先を設定した画像を表示できます。

下記の画像はE-VBAで使用している設定ですのでよろしければ参考にしてください！

作成したショートコード、とボタンを組み合わせることで新着記事とその前の記事の入り口が完成しました！

ギャラリーはレスポンシブなので、この記事では幅が狭くなってしまい、PCでは表示が崩れてしまっているかもしれません(;^ω^)

【動画】2019年7月7日発売！新型のRyzenは何が変わった？ZEN２は買いなのか？

【動画】自作パソコン構成変更！ケースをNZXT　H500に交換しました！

VBA 『Array関数』指定した要素で配列を作成する

「動画」初完全ワイヤレスイヤホン『Jabra Elite Active 65t』

『YouTube』AIは本当に雇用を奪うのか？

メニュー完成！イメージ図

とりあえずこれでデザイン自体は完成となります(;^ω^)

STORKストークトップページカスタマイズ3「固定ページ公開」

作成した固定ページをトップページとして設定をしていきましょう！

切り替え後に表示された「ホームページタブから先ほど作成した固定ページ(タイトルなし)を選択してください！

STORKストークトップページカスタマイズ3「投稿一覧ページの作成」

固定ページをトップページに設定すると、今まで表示されていた記事一覧ページが見られなくなってしまいます(;^ω^)

今までどおりの記事が並んでいるページも必要ですよね、記事一覧を表示させるページも固定ページで作成します！

作成するといっても手順はすごく簡単で、適当なタイトルとパーマリンクを設定するのみでOKです。

私の場合は記事タイトル：「記事一覧」パーマリンク：「blog」としました。

設定が終了したら、本文には何も記入せずそのまま公開ボタンをクリックして準備はおしまいです。

あとはホームページ設定の「投稿ページ」から作成した「記事一覧」を設定することによって記事一覧ページの作成完了となります！

記事一覧ページのイメージ

記事一覧のページはこのように表示されます。

カスタマイズ終了

以上「「STORKストーク」トップページのカスタマイズ方法全部教えます！」でした！STORKストークには便利なショートコードがたくさんあり、webプログラムの知識が無くても綺麗なブログ作りが可能になってます(^^♪

私なりに考えてカスタマイズしましたが、webプログラムの知識はほぼ0なので本職の方と比べると見劣りするかもしれませんが是非参考までにご活用ください(^^)/

STORKストークは値段が10800円と決して安くはないと思いますが、このテーマはとっても使いやすいテーマだと思います(^^)/

私が使用しているテーマSTORK(ストーク)

フォロー・チャンネル登録お願いします

■Twitterフォロー

■YouTubeチャンネル登録

ファイルやコードの利用、WEBサイトの利用について

Sponsored Link