あざらしいかのブログ

好きな家電・ガジェット・インテリア、便利な勉強グッズや株主優待などいろんな趣味などについて書いています。他にアメブロやはてなブログなどの無料ブログのカスタマイズなどついても。

カッテネリンクがはてなブログで利用できない?カスタマイズが成功したので紹介

f:id:natsworld:20200511123447p:plain

こちらのブログはレスポンシブモードで運用しているため、CSSにコピペすれば簡単に使えたのですが…

他ブログでコピペしてみるとうまく行かない!?となりました。

原因は詳しくはわからないのですが、レスポンシブモードは使わず、スマートフォン用HTMLを独自にしている場合がうまく出来ないようです。

▼カッテネはこんなかんじ

手が疲れにくいマウスを使ってブログ記事を書くといいです

ですので、記録としてこちらに書き留めておこうと思います。

 

カッテネとはてな:レスポンシブとスマホ用デザインでやり方が異なる

はてなブログでカッテネを使う

レスポンシブとスマホ用デザインでやり方が異なるんです。

ですので、レスポンシブと、スマホ用HTMLデザインを利用している場合の2種類についてやり方を紹介します。

まずレスポンシブデザインを使用している場合から解説です。

 

【1】はてなブログでレスポンシブデザインを使用している場合

はてなブログでレスポンシブデザインを使用している場合は以下の手順でCSSを追記してください。

▼はてなブログのデザインを見ると、こんなふうに、スマホ用のデザインが【レスポンシブデザインモードです】と書かれています。

レスポンシブモード

 

①カッテネCSSをコピペする

カッテネ作成者さまのワードプレス以外の使い方の部分からCSSをすべてコピーします。

 

▼ダッシュボード→【デザイン】をクリック

ダッシュボードのデザイン

 

 ▼デザインCSSにコピーしたものを貼り付けします

カスタムCSSにコピペ

 

 /* カッテネここから */

 

を最初に入れておくと、後でみたときわかりやすいですよ。

 

レスポンシブを利用している場合は、これでCSSはOKです。簡単。

 

 ②カッテネHTMLをコピペして記事に貼る

 

▼もし、Amazon、楽天、Yahoo!の3つであれば、以下のHTMLをコピー

<div class="kattene"><div class="kattene__imgpart"><a target="_blank" rel="noopener" href="【メインのURL】"><img src="【画像URL】"></a></div><div class="kattene__infopart"> <div class="kattene__title"><a target="_blank" rel="noopener" href="【メインのURL】">【タイトル】</a></div><div class="kattene__description">【説明】</div><div class="kattene__btns __three"> <div><a class="kattene__btn __orange" target="_blank" rel="noopener" href="【商品のURL】">Amazon</a></div><div><a class="kattene__btn __red" target="_blank" rel="noopener" href="【商品のURL】">楽天</a></div><div><a class="kattene__btn __pink" target="_blank" rel="noopener" href="【商品のURL】">Yahoo!</a></div></div> </div> </div>

 

▼ 紹介したい記事を開き、【HTML編集】で貼りたいところにペーストはてなブログの記事を書くHTML編集

 

他のカスタマイズ法などは作成者さんの記事をみてください。

参考:http://webfood.info/make-kattene/

 

 

【2】はてなブログでスマホ用デザインを使用している場合

 問題はこちらです。

2つやり方がありますので、紹介します。

 

ほとんどの記事で、商品を紹介している場合は①のやり方でいいと思います。

ですが、数記事だけカッテネを利用したい場合は②のやり方のほうが、CSSがスッキリすると思います。

 

①デザインの記事下にCSSをコピペする方法

ほとんどの記事で、商品を紹介している場合はこちらのやり方でいいと思います。

CSSの設定

▼ダッシュボード→【デザイン】をクリック

ダッシュボードのデザイン

 

▼【記事】をクリック

デザインの記事カスタマイズ

 

▼【記事下】にコピペ

記事下カスタマイズ

 

 

<style type="text/css"><!--【ここにコピペしたCSSを入れる】--></style>

 

カッテネ作成者さまのワードプレス以外の使い方の部分からCSSをすべてコピーします。

"【ここにコピペしたCSSを入れる】"をすべて消してペーストします。

 

▼同じ<style>~</style>をスマホ用の記事下にコピペ

スマホカスタマイズ

 

これでCSS終わりです!

 

記事のHTMLの設定

 

▼もし、Amazon、楽天、Yahoo!の3つであれば、以下のHTMLをコピー

<div class="kattene"><div class="kattene__imgpart"><a target="_blank" rel="noopener" href="【メインのURL】"><img src="【画像URL】"></a></div><div class="kattene__infopart"> <div class="kattene__title"><a target="_blank" rel="noopener" href="【メインのURL】">【タイトル】</a></div><div class="kattene__description">【説明】</div><div class="kattene__btns __three"> <div><a class="kattene__btn __orange" target="_blank" rel="noopener" href="【商品のURL】">Amazon</a></div><div><a class="kattene__btn __red" target="_blank" rel="noopener" href="【商品のURL】">楽天</a></div><div><a class="kattene__btn __pink" target="_blank" rel="noopener" href="【商品のURL】">Yahoo!</a></div></div> </div> </div>

 

▼ 紹介したい記事を開き、【HTML編集】で貼りたいところにペーストはてなブログの記事を書くHTML編集

 

他のカスタマイズ法などは作成者さんの記事をみてください。

参考:http://webfood.info/make-kattene/

 

 

 ②記事のHTML編集にカッテネを使うときCSSをコピペ 

数記事だけカッテネを利用したい場合はこちらのやり方のほうが、CSSがスッキリすると思います。

 

記事のCSS,HTMLの設定

 

カッテネ作成者さまのワードプレス以外の使い方の部分からCSSをすべてコピーします。

▼もし、Amazon、楽天、Yahoo!の3つであれば、以下のHTMLを貼ります。

<div class="kattene"><div class="kattene__imgpart"><a target="_blank" rel="noopener" href="【メインのURL】"><img src="【画像URL】"></a></div><div class="kattene__infopart"> <div class="kattene__title"><a target="_blank" rel="noopener" href="【メインのURL】">【タイトル】</a></div><div class="kattene__description">【説明】</div><div class="kattene__btns __three"> <div><a class="kattene__btn __orange" target="_blank" rel="noopener" href="【商品のURL】">Amazon</a></div><div><a class="kattene__btn __red" target="_blank" rel="noopener" href="【商品のURL】">楽天</a></div><div><a class="kattene__btn __pink" target="_blank" rel="noopener" href="【商品のURL】">Yahoo!</a></div></div> </div> </div>

 

▼ これを紹介したい記事の一番下に貼ります。

<style type="text/css"><!--【ここにコピペしたCSSを入れる】--></style>

 

▼ 紹介したい記事を開き、【HTML編集】で貼りたいところにすべてペースト

記事のHTML編集

他のカスタマイズ法などは作成者さんの記事をみてください。

参考:http://webfood.info/make-kattene/

 

これでOKです。ダッシュボードのデザインの変更は不要です。

 

 カッテネをはてなブログで便利に使う方法

 コピペするHTMLをメモしておく

メモして楽にコピペをするのに便利なツールも紹介します。

もし、ウェブブラウザでGoogleChromeを利用しているならGoogleの拡張機能でメモがおすすめ。

『Smart Notes Tab』はChrome ウェブストアから追加できます。

 

スマートノート

メモを簡単にコピペできる

 

 

 Amazon、楽天、Yahoo!を紹介できるASPに登録する

「バリューコマース」や「もしもアフィリエイト」に登録するといろんなショップのを紹介できます。

一つのASPを利用すれば、売上がまとまって入るので、便利です。

紹介するときも1つを開けばOKなので、らくちんです。

会員登録は無料なのでまだ使ったことがなければ、登録してみてくださいね。

どちらも使っていてオススメ

 

 まとめ

カッテネを使うときは最初は少し面倒かもしれませんが、一度設置すると見やすく便利です。

作成された方に感謝です。

はてなブログでも使うことが出来ましたので、こちらの記事が参考になれば幸いです。