HTMLが分からなくても出来る。はてなブログの記事上に「人気記事」を表示させる方法

 

f:id:gevvoihorry:20160401190214j:plain

 

なんか最近、記事上に「人気記事」だとか「おすすめ記事一覧」みたいなのを表示させてる人が多いと思います。

なもんで、ちょっと自分も真似してやってみました。

僕は人気記事なんていう御大層なものは持っていないため、アプリを表示させた次第です。

 

f:id:gevvoihorry:20160401183218p:plain

 

こんな感じですね。

記事タイトルと本文の間に表示させてみました。ここが記事上っていうポジションみたです。

 

アドセンス広告も表示させてるんですが、これはデザインの関係で出しただけです。

なんかいきなり文章が来ると変な感じだったので、そうしました。

この場所がアドセンスのクリック率に関係するかは分かりません。

 

人気記事を表示させる方法と書きましたが、これは自分で記事を選びます。

本当によく読まれてる記事を表示させたい人は、その方法を自分で探してみてください。

僕の方法は自分で任意の記事を表示させるものになっています。

 

HTMLが出来なくても簡単

まあやり方は非常に簡単なんですが、これはHTMLで編集するため、HTMLが出来ない人は、まず適当に文章を書いてみましょう。

 

人気記事一覧

 

 

非常に適当なんですが、こんな風に書いてみました。

「人気記事一覧」て書いて、「太字」にして「文字の大きさ」を「中(150%)」にします。

んで、「箇条書き」を選択して、そこに過去記事のリンクを張りました。

 

これを「HTML編集」にして見てみましょう。

 

f:id:gevvoihorry:20160401184413p:plain

 

こんな風に表示されています。

これが元のコードになるので、まずはこれを作りましょう。

ここは各自創意工夫してください。

 

箇条書きでもいいし、番号付きリストでもいい。

また人気記事ってフォントのサイズをいじってもいいですね。

 

あとは編集画面から貼り付けるだけ

ここまで出来たら、あとは編集画面から貼りつけるだけです。

「デザイン」から「カスタマイズ」を選択して、記事上に張るので「記事」を選びましょう。

 

f:id:gevvoihorry:20160401184934p:plain

 

それで記事上を選んで、そこにズドンですよ。

 

f:id:gevvoihorry:20160401185032p:plain

 

書けましたか?そうしたら確認ですね。実際にどんな風に表示されてるのか確認してみましょう。

 

基本的にどんなブログサービスでも、カスタマイズはHTMLで行うものだと思います。

なので、まずは適当に書いてみて、それをHTML編集からコピペすれば楽ですよ。

HTMLが出来ない人はこうしてみてください。

 

最後に

一応僕は自分でHTMLを書き込んだんですが、まあコードは上記のそれと五十歩百歩ですね。

でもHTMLとCSSの知識があると、色々出来るので便利ですよ。

 

最近は個人でブログやECサイトを運営してる人が多いと思います。

そんなとき、ササッと編集できると非常に便利でしょう。

(そういえばBASEなんかも、HTML編集機能があったと思います)

 

実際に勉強してみると、最低限の知識は数日で身に付きますよ。

ちなみに僕はこの本で覚えました。

 

スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほん

 

 

ブログを自分色にカスタムしたいんじゃー!!

なんて人は一度勉強してみてください。