フリー音楽・効果音制作 HMSounds

フリーBGM・効果音を作っています。

ブログヘッダーにおすすめ記事作成ツールを作りました。-Javascript

はじめに

はおう丸です。

ブログのヘッダーに、おすすめ記事を簡単に載せられるツールをJavascriptで作成しました。

投稿順ではなく、記事を任意に選択できます。(ありがたい!)

(表示例)

このブログの上にある「おすすめ記事」の欄が、実際にこのツールで作成したものです。(はてなブログ以外では、試してないので使えるか分かりません。画像URLの取得がちょっと怪しい)

→ ヘッダーにブログおすすめ記事作成ツール -はてなブログ- HMSounds

※他サイトで紹介する際などは、上のリンク先ではなく、こちらのブログ記事にリンクを貼られますようお願いします。

  

 

使い方

    ブログおすすめ記事作成ツール フリー音楽素材

まず、URLを入れられる箱が8個あるので、おすすめしたい記事のURLを入れます。
全部入れる必要はありません。

入力できたら、HTML出力ボタンを押します。

    ヘッダーにブログおすすめ記事作成ツール -はてなブログ- HMSounds

すると、下の2つのエリアにテキストが出力されます。

仮に、上側のテキストを3番、下側のテキストを4番とします。

次に、はてなブログを開いて、デザイン画面の[スパナマーク] [ヘッダ] [タイトル下]

というところを開きます。

    ヘッダーにブログおすすめ記事作成ツール -はてなブログ- HMSounds

ここの[タイトル下] のエリアに、先ほど作成されたテキストの3番をコピペします。

最初はここで右のプレビュー画面が崩れると思いますが、気にせず次に進みます。

次に、デザイン画面の[スパナマーク]  [デザインCSS]というところを開きます。

    ヘッダーにブログおすすめ記事作成ツール -はてなブログ- HMSounds

ここの[デザインCSS] のエリアに、同様に4番をコピペします。

【重要】元々何か書かれていた場合は、それを消さない方がいいです。 

これで、プレビュー画面にうまく表示されたと思います。

忘れずに保存してください。

    ヘッダーにブログおすすめ記事作成ツール -はてなブログ- HMSounds

多少のデザインの崩れなどあるかもしれませんが、分かる方はCSSを修正してください。

以上です。お疲れ様でした。

 

少しでも皆さんのブログのカスタマイズのお役に立てれば幸いです。