トップページPR blockを上手に使ってブログのことを知ってもらう
![](https://oko-blog.com/wp-content/uploads/2020/09/マイナスからの-ブログの始め方-74-1.jpg)
ブログのトップページに物足りさを感じていませんか?そんなときはPRブロックを使ってユーザーにイチオシ情報を表示しつつトップページを彩ってみましょう。トップページをより良いものにしたい方のみ読んで頂ければと思います。
![](https://oko-blog.com/wp-content/uploads/2020/08/2020-09-24_21h31_37.png.pagespeed.ce.7cd3CUDqTn.png)
okoんにちは。マイナスからブログを始めたオコブロです。
あなたの現在位置
このブログは「最初の記事から順に読めば誰でも収益を得られるwordpressブログを作れる」というコンセプトで運営しています。順に読んでくれている方の現在地は「Googleとユーザーに最適化されたブログデザインを作成している段階」です。
この記事に辿りついた方は
- ブログのデザインをしているがうまくいかない
- wordpress難しい
- トップページがパッとしない
- トップページにはどんな表示をすればかっこよくなるの?
という方ではないでしょうか。
ブログのデザインをすすめているとかっこいいヘッダー画像を作っても、その下がすぐに「最近の投稿」だとなんだか物足りない感じがしますよね。
![](https://oko-blog.com/wp-content/uploads/2020/08/2020-09-24_21h31_37.png.pagespeed.ce.7cd3CUDqTn.png)
なんだか余裕がないブログに見えませんか?
ヘッダー画像と最近の投稿の間に「このブログがどんなブログか」というブログの紹介や強み、扱っている商品などのアピールを挿入することでデザインはグっと引き締まります。
この記事ではそんな引き締まったトップページにするためにこのブログで取り扱っているテーマLightningの「PR block」というものを設定していきます。
マイナスからブログを始めた僕ならではの丁寧な執筆を心がけますので是非最後まで読んでいってみてください。
![](https://oko-blog.com/wp-content/uploads/2020/08/2020-09-24_21h31_37.png.pagespeed.ce.7cd3CUDqTn.png)
Lightning以外の方も同じ設定があるはずなので参考にして頂ければ幸いです。
Table of Contents
PR blockを設置する目的
![狙いを定める男](https://oko-blog.com/wp-content/uploads/2020/08/target_flatline-1.png)
ブログのトップページに来てくれたユーザーさんに「このブログで特にアピールしたいこと」を3つ選んで表示させることでファン獲得や売り上げアップに繋げます。
最初に目に入るブログコンテンツなので特に知って欲しいことなどを設置するようにしましょう。
PR blockの機能
![サイト設定をする人たち](https://oko-blog.com/wp-content/uploads/2020/08/undraw_data_trends_b0wg.png)
大きなアイコンを設置し、簡単な文章を入れることでユーザーの興味を直感的に沸かせることができます。
アイコンや文章をクリックし、設定したURLへ移動させることができるので、クリックした先でさらに詳細を説明することも可能です。
詳細ページはあらかじめ固定ページなどに作っておいても良いですし、投稿ページでも構いません。もしくはyoutubeのチャンネルへ誘導することもできます。
PR blockの設定方法
![外観からカスタマイズを選択](https://oko-blog.com/wp-content/uploads/2020/09/2020-08-02_14h22_26.png)
ダッシュボードの「外観」から「カスタマイズ」をクリック。
![PRブロックを選択](https://oko-blog.com/wp-content/uploads/2020/09/2020-08-02_14h23_23-1.png)
左のサイドバーの「LightningトップページPRBlock」もしくは画像のペンマークをクリック。
![反映箇所の説明](https://oko-blog.com/wp-content/uploads/2020/09/2020-08-02_14h25_08-1.jpg)
「アイコン」「タイトル」「サブテキスト」に入力したもののブログへの反映箇所は上の画像の通りです。
リンクURLはクリックされたときに移動する先のURLになります。
![ブロックは3カラム](https://oko-blog.com/wp-content/uploads/2020/09/2020-08-02_14h27_24.jpg)
PR blockは最大で3つ設置することができます。これを「3カラム」をいう数え方をします。
それぞれの配置は上の画像の通りですので、もしPR blockを1つしか設置しないのであればPR block②の領域を編集して①③を削除することで真ん中にきれいにPR blockを表示させることができます。
PR blockの文章変更時の注意点
![メモ帳を使うと楽に入力できる](https://oko-blog.com/wp-content/uploads/2020/09/2020-08-02_14h31_04.png)
![文字を打てればどこでも大丈夫](https://oko-blog.com/wp-content/uploads/2020/09/2020-08-02_14h32_01.png)
PR blockで文章を編集すると、「文字を打ち込むため都度反映」させようとするため読み込みに時間がかかって思うように文字を打ち込めません。
文章を変更するときはメモ帳などなんでもいいので別の場所で文章を作ってからコピペするようにしましょう。
文字を打てればなんでもいいので僕はGoogleの検索窓で文章を作ったりしています。
文章を打ち終わったらリンクURLをコピペするために記事URLをコピーしにいきます。
![](https://oko-blog.com/wp-content/uploads/2020/08/2020-09-24_21h29_13.png)
なかなか気が利く情報だね
![](https://oko-blog.com/wp-content/uploads/2020/08/2020-09-24_21h31_37.png.pagespeed.ce.7cd3CUDqTn.png)
僕は一流のブロガーではないので細かいとこまで情報を出していくスタンスです。
リンクURLの取得
![固定ページから一覧をクリック](https://oko-blog.com/wp-content/uploads/2020/09/2020-08-02_14h34_58-1.png)
ダッシュボードから「固定ページ」の「固定ページ一覧」をクリック。
![任意の記事の表示をクリック](https://oko-blog.com/wp-content/uploads/2020/09/2020-08-02_14h35_50-1-1.png)
URLを知りたい記事の「表示」をクリック。
![URLをコピー](https://oko-blog.com/wp-content/uploads/2020/09/2020-08-02_14h36_22-1-3.png)
表示されたURLをコピーして、先ほどのリンク先に貼り付けましょう。
![](https://oko-blog.com/wp-content/uploads/2020/09/2020-08-02_14h37_10-2-1.jpg)
リストアイコンの設置
![アイコンリストをクリック](https://oko-blog.com/wp-content/uploads/2020/09/2020-08-02_14h38_25-1-1.png)
「icon list」をクリックします。
![内容と一致するアイコンを探す](https://oko-blog.com/wp-content/uploads/2020/09/2020-08-02_14h40_20-1-1.png)
Font Awesomeというサイトに行くのでちょうどいいアイコンを探します。
検索窓を使う場合は英語で入力しないとヒットしません。たくさんあるので上から順にみていくのも楽しいです。
![](https://oko-blog.com/wp-content/uploads/2020/08/2020-09-24_21h31_37.png.pagespeed.ce.7cd3CUDqTn.png)
かなりの数があるので楽しんで探して見てください。
![任意のアイコンをクリック](https://oko-blog.com/wp-content/uploads/2020/09/2020-08-02_14h45_36-1-1.png)
今回は「取り扱い説明書」というタイトルなのでそれっぽいものを選んでクリック。
![アイコンのHTMLコードをコピー](https://oko-blog.com/wp-content/uploads/2020/09/2020-08-02_14h46_04-1-1.png)
アイコンのHTMLコードがあるのでカーソルを乗せてクリック。これでコードはコピーされています。
![wordpressにペースト](https://oko-blog.com/wp-content/uploads/2020/09/2020-08-02_14h47_38-1-1.png)
ブログに戻ってコードを貼り付けます。このままではなにも表示されないので上の画像に従って左右の文字列を削除してください。
![コートを調整してアイコンを正常に表示させる](https://oko-blog.com/wp-content/uploads/2020/09/2020-08-02_14h48_25-1-3.png)
削除するとアイコンが正常に表示されます。最初のブログでこの作業をしたときにこれがわからず何日もかかってしまいました。
![](https://oko-blog.com/wp-content/uploads/2020/09/2020-09-24_21h44_45.png.pagespeed.ce.0U0bNBUgcc.png)
こんなの言われなきゃわかんないよ
![](https://oko-blog.com/wp-content/uploads/2020/09/2020-09-24_21h43_52.png)
タイムマシーンを作って過去の僕に教えてあげたいです
![](https://oko-blog.com/wp-content/uploads/2020/09/2020-08-02_14h54_02-1-2.png)
最後に「公開」をクリックして作業は終了です。
PR blockの1と3も設置する方は続けて作業してください。
最初の内は「自己紹介」「ブログの紹介」「力を入れるつもりのカテゴリー」などがいいかもしれません。
まとめ
![サイトデザインをする人たち](https://oko-blog.com/wp-content/uploads/2020/08/undraw_data_trends_b0wg.png)
いかがでしたでしょうか。
PR blockでとてもちゃんとしたブログっぽくなりましたよね。
カラムを増やしたい場合はLightning推奨プラグインVK All in One Expansion Unitの機能で「VK3PRエリア」という機能があるのでそちらを使ってください。
アイコンは使えませんがカラムを増やすことができます。
カラムが増えるとスマホでみたときに少し見づらくなってしまうのでこのブログでVK3PRエリアについての解説はしませんが、ここまで順番に記事を読んできた方は解説なしで自力で設置できるくらいのスキルはついているはずです。
ではもう少しデザインを頑張っていきましょう。