2016.04.05スポンサーリンクはてなブログを開始して4ヶ月。カスタマイズの中でも関連記事を記事下に表示する方法はいろいろと試してきました。下記のページにて、お持ちのURL等を入力してscriptコードを作成します。左上をクリックした後出現するメニューの中の、「デザイン」をクリックします。補足ですが、デザインのアイコンは下記のような画像です。「同じカテゴリの記事を表示して関連記事っぽくする」や~つ。Life2015/11/11追記1:うまく取得できているかの判断が曖昧だったので、確認方法を追記しました。設置をする際は、うまく取得できているかの確認をお願いします。CSSをテーマによる崩れを防ぐために若干変更しました。APIのサー...www.yukihy.comどれも素晴らしい実装方法で満足していたのですが、Javascriptを使わずにHTMLとして表示する方法は無いものかといろいろと探していました。見つけました!スポンサーリンクそれは、はてなブログの公式機能である、サイドバーの関連記事を記事下に移動する方法です。この方法でも、Javascriptは使用していますが、HTMLとして生成されているコードを記事下に移動する形になるのでソース上では関連記事のHTMLデータがそのまま残ります。ありがとうございます!設定方法はとても簡単です。管理画面のサイドバーより関連記事モジュールを追加します。次にサイドバーに関連記事を表示させない為に関連CSSを追加します。none;}最後に移動させるためのJavascriptを「記事下」に追加します。1000)</script>これで完成です。実際の表示はこんな感じCSSカスタマイズまとめ実際の表示はこんな感じ記事下のソーシャルリンクの下に表示してみました。赤枠部分が関連記事です。実際の表示を確認されたい場合は、今回の記事の下にも表示されていますのでご覧ください。ソースをご確認いただければわかると思いますが、ばっちりHTMLコードが表示されています。こちらの掲載方法の最大のメリットは、やはり「HTMLデータで表示される」点でしょうか。にわかSEOの知識の僕から言わせれば、内部リンクの強化に効果的だと思っています。効果があるかどうかはわかりませんが、サイドバーで関連記事モジュールを追加した際に、関連記事を一番上に移動した方が良いと思います。理由は、検索エンジンがページを解析する際に、ソースの上から順に読んでいきます。(たぶん^^;)メインの記事に関連した、記事を表示する関連記事の重要度は高いと思いますので重要度をアピールするためにも一番上に置くことを、おすすめします。(確証はありません)ただデメリットというか1点欠点があるとすれば、はてなブログの「関連記事」は最大5件までしか表示出来ないので表示件数に制限があるところだと思います。それ以外は個人的には満点です!※スマートフォンページについては、そもそも関連記事を表示する機能が無いので非対応です。最後に僕が設定しているCSSを紹介しておきます。CSSカスタマイズ5件ある関連記事の背景に交互に色を付ける方法です。「nth-child(2n)」と「nth-child(2n+1)」にそれぞれ背景色を指定しています。#F3F3F3;}まとめ最近では、JavascriptもGoogleさんがしっかり認識されているようなので、そこまで意識をする必要は無いのかもしれませんが、個人的にはやはりHTMLコードがソース上に表示されている方が良いと思ったのでこちらの方法で設置させていただきました。僕の認識が間違っている可能性もありますが、参考になれば幸いです。スポンサーリンクスポンサーリンクはてなブログSEOシェアするTwitterFacebookはてブPocketLINEコピーフォローお願いします!スポンサーリンクカツヲ晴れ時々晴天なり関連記事はてなブログはてなブログ|表示速度が遅いので改善するまで足掻いてみた!はてなブログが遅いと言うのは感じていましたが、それに加え、自分でも機能を拡張するために、Javascript等を使用して更に重くしている現状です。はてなブログでもAMP対応は進んでいますが、まだ様子を見た方が良いと思っています。そこで、はてなブログを高速化するために自分でできることをいろいろと試してみましたので紹介します。はてなブログはてなスターを外して1週間。孤独感から解放されたいけど卒業します!こんにちは、最近孤独になったカツヲです。実は1週間ほど前にこのブログの「はてなスター」をしれ~っと外しました。ブログを初めて1年半。過去にもはてなスターを外そうと思ったことはありましたが、結局今まで...はてなブログはてなのブログカード風にリンクをカスタマイズする方法!はてなブログのブログカードは「iframe」を使用していますが、iframeを使わずにブログカード風のリンクボックスを生成する方法を紹介します!CSSを使えばデザインをカスタマイズすることも可能です!はてなブログはてなブログのAMP用CSSを試してみました!はてなブログで「AMP用CSS」が設定出来るようになりました。そこでブログをAMP対応する上で、AMP用CSSを使うとデザインがどのようになるのか検証してみました。はてなブログはてなブログ|管理画面で読者一覧が確認できるようになったよ!はてなブログの管理画面(ダッシュボード)に読者一覧を確認出来るようになったようです。はてなブログブログリニューアル!レスポンシブデザインに変更しました!当ブログのデザインをレスポンシブデザインに変更しました!レスポンシブデザインはPCに依存するので、あまり好きではないのですが、はてなブログのスマートフォン専用ページでは機能面でちょっと物足りなく感じる部分があったので思い切ってレスポンシブデザインに変更しました。はてなブログはてなブログ|記事の直下に広告を掲載する方法はてなブログでは「記事の下」に広告タグを設定しても、ソーシャルボタンの下に広告が表示されます。そこで広告を記事の直下(ソーシャルボタンの上)に配置する方法を紹介します。はてなブログはてなブログ要望案|この機能を追加して下さい!レスポンシブデザインを使っている場合、パソコンと同様の見せ方が出来るのでさほど問題は無いのでしょうが、そうではない場合は、結構出来ることが限られますよね。そこで僕が個人的に追加して欲しい機能を挙げてみます。はてなブログはてなブログ|アクセスアップの為にやっておきたいグループ登録はてなブログのグループ登録について説明すると、はてなブログを利用されている方たちのリンク集ですね!ブログ開始時にカテゴリーを選択し、「グループに参加して、同じ興味のブログ仲間とつながりましょう!」というものです。単なるリンク集としてだけではなくブログを更新すると登録しているカテゴリー上で自分のブログが紹介されます。グループに登録しませんか?はてなブロググループで「個人事業主」を作りました。AMお陰様で関連記事を記事下に表示できました。他記事に渡って滞在時間が延びたらいいな~と思います。いつか、カスタムも記事にできたら、紹介させてください。AMお返事に、読者にまでなっていただきありがとうございます!カツヲさんの記事後半にあります、CSSを使わせていただき、色設定も変えてみました。元の方にもお礼言いに行きます。これからも参考にさせていただきます!カツヲ40代3児の父でサラリーマン。個人事業主でもありアルバイトもしています。しても開業→会社員+個人事業+アルバイトの三足のわらじで生計を立てています。フォローお願いします!スポンサーリンクよく読まれている記事はてなブログをAMPに対応する時の注意点!設定・デザイン・広告まとめ2017.04.032019.08.02はてなブログ|画像の「alt属性」を編集する方法!これでSEO対策もバッチリ!2017.02.242019.08.07はてなブログのAMP用CSSを試してみました!2017.03.312019.08.02はてなブログに楽天商品紹介機能が追加!2016.05.242019.08.07はてなのブログカード風にリンクをカスタマイズする方法!2017.02.092019.08.08新着記事パグ犬よもぎのInstagramとYoutube始めました!2019.10.172019.10.31写真で振り返る、姫路・神戸観光1泊2日の家族旅行2019.09.23自虐ネタで大盛況?姫路セントラルパークの混雑事情2019.09.19ありがとう!はてなブログ。2015年11月サイト内検索よく読まれている記事はてなブログをAMPに対応する時の注意点!設定・デザイン・広告まとめ2017.04.032019.08.02はてなブログ|画像の「alt属性」を編集する方法!これでSEO対策もバッチリ!2017.02.242019.08.07はてなブログのAMP用CSSを試してみました!2017.03.312019.08.02はてなブログに楽天商品紹介機能が追加!2016.05.242019.08.07はてなのブログカード風にリンクをカスタマイズする方法!2017.02.092019.08.08はてなブログ|表示速度が遅いので改善するまで足掻いてみた!2016.10.262019.08.07はてなブログ|アクセスアップの為にやっておきたいグループ登録2016.01.262019.08.08ありがとう!はてなブログ。4年間クソお世話になりました!2019.09.12はてなブログ|記事の直下に広告を掲載する方法2016.01.202019.08.07ページの表示速度|Googleの指示通りに改善したけどこれがはてなの限界ですか?!2017.08.182019.08.08新着記事パグ犬よもぎのInstagramとYoutube始めました!2019.10.172019.10.31写真で振り返る、姫路・神戸観光1泊2日の家族旅行2019.09.23自虐ネタで大盛況?姫路セントラルパークの混雑事情2019.09.19ありがとう!はてなブログ。ダイエットAMPプール姫路城メリケンパークパグ犬YoutubePHPInstagram著者カツヲ40代3児の父でサラリーマン。個人事業主でもありアルバイトもしています。しても開業→会社員+個人事業+アルバイトの三足のわらじで生計を立てています。検索タイトルとURLをコピーしました。