アメブロのリンク機能のアップデートで・・・

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 16 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

アメブロの記事を整理していたらちょっと気づいたことがあります。
WordPressのブログ一覧のような表示にしようと思うとできるということですね
デザインで変更する方がいいのですが、できないデザインでもリンク作成でブログカードが作成できるので擬似表示できるということですが、多用はできません。
今回は、そういったことについて解説させていただきます。

 

目 次

アメブロのブログカード

ブログカード

ブログカードとは、上記画像のようなリンクです。
リンクアドレスだけで簡単に作成できます。
ただ、いいところとよくない部分があります。

HTMLタグ
1つのブログカードでこれだけの HTMLを書く必要がある
これには正直ビックリです。

Amecare紹介リンクソース
ちなみにAmecareの紹介リンクのソースは、上記の画像の選択部分(色つきの部分)です。
明らかにブログカードの時のソースより少ないですね。
文字数で言うと半角で600字ほどです。

 

記事一覧

記事一覧
アメブロでもデザインによって WordPressのブログ一覧のように表示されるデザインもあったりします。
そうでないデザインを使っていたとしてもまったく同じではないですがそのように見せることは可能だと言うこと
ただ上記画像のようにデザインで見せる方が簡単で手間がいりません。

記事一覧
過去記事を追いかける時に通常は上記の画面のようになります。
正直、わかりにくいというのが本音なのです。
ブログカードを使うことでOGP画像に指定した画像付きで表示してくれるのでわかりやすく手間も減りますね。
問題は複数ページになる場合にページャーをどうするのかという部分だけですね。

 

記事一覧をブログカードで作る

実際にどんな感じになるのか作ってみました。
紹介リンクなどは、これまでAmecareの著者の松本氏が推奨するものを使っていましたが、アメブロのブログカードがあまりにも楽すぎて今はその方法を使っています。
URLをコピペするだけでできるのですからめっちゃ楽なんですね
アメブロのテーマごとの目次を作りやすいですね

WordPressのページャー
WordPressのページの切り替えに上記画像のようなページャーがあるのですが、アメブロの場合は手動なので下記のようにしてみました。

ページャーもどき
手動ですが昔カウンターに使っていた画像でセットしてみました。
ちょっとは、 WordPressのブログ一覧風に見えますかね?
 HTMLは、 WordPressのようにリストタグを使って スタイルシートで装飾ではなく段落タグをセンタリングして画像にリンク機能を持たせたシンプルな感じにしています。
スマホで見る方には文字制限いっぱいなので通常のページよりは重たく感じる方がいるかもしれませんね。

 

文字数制限

HTMLタグ
テーマごとの目次などを作成する場合に簡単なのですが文字数制限には気をつけなければいけません。
仕様変更などで以前の1.5倍に増えて HTML含めて半角で60000字までですが、ブログカード使うと1つ計ったところスペース込みで2150字ありましたね。
Amecareの紹介リンクのソースが約600字ほどなので単純に4倍弱くらいの文字数になりますね。
2000字だったら計算上は、30個のリンク並べることはできますが・・・
できても22~24個くらいのブログカードしか1ページに並べることができないかもしれません。
サンプルで作ってみたものは20個で揃えています。
それでもいろいろ付け足そうとすると警告が出ていましたね。

 

リブログとブログカードの違い

リブログ
リブログとブログカード似ていても表示も HTMLもまったく違うのです。

ブログカード
リブログでは文頭より70文字ちょっと表示されますが、ブログカードでは文頭より40文字ちょっとです。
見た目も違うし、 HTMLも違いますね。
リブログには、iframe(アイフレーム)が使われますが、ブログカードはDIVタグからはじまり複合タグになってます。文字数では圧倒的にリブログの方が少なくブログカードの方が多いですね。

 

まとめ

アメブロ
今回は、ブログカードを使って WordPressのブログ一覧風に作成してみましたが、やはり問題は文字数制限をいかにクリアするかという部分でしたね
ブログカードの HTMLをカウントしてみたところほぼ2150字前後だったので後はスペースをどうやってとるのか?
アメブロには自動で入るタグがあったりしますのでそれもカウントの1つになるということを知っておいて下さい。
「そんなん言うても数えてられへんやん」
って思う方もいると思うのでお助けサイトを紹介します。

アメブロのエディターで通常表示ではなくHTML表示に変えてすべて選択して上記サイトでコピペします。
すると文字数をカウントしてくれるのでオーバーしていたとしてもどのくらいオーバーしているのかがわかります。
今回、計測してみた文字数カウントについては作成されたページによって数値が変わります。
すべて鵜呑みにせずに1つの目安として考えていただければと思います。
テーマごとの記事一覧やリンク集などを作る場合に便利だと思います。

 


 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加

くまはちLABのご利用ありがとうございます!
くまはちLABの最新情報をフォローしてゲットしてください!