2017.02.09スポンサーリンク皆さん「ブログカード」ってご存知ですか?先に答えを言うとこういうのです↓↓はてなブログユーザーならよく利用されていると思いますが、このリンクボックスの事を「ブログカード」と呼ぶそうです。最後にブログカードブログカードはデザインも良いですが、記事のタイトルや概要、アイキャッチ画像なども一緒に表示出来るので、ひと目でどのような内容なのかわかるので凄く便利ですよね!僕もリンクを掲載する時にはよく使います。このブログカードですが、はてなブログ以外のWordPressやその他のブログでもよく見かけます。Link」もブログカード用に開発されたわけではなく、自分でリンク方法をカスタマイズするための拡張機能としてあるものです。どちらも使用方法は同じなので、ご利用のブラウザによって使い分ければ良いと思います。使い方は凄く簡単ですが、寝ログさんが詳しく説明されているのでそちらをご覧下さい。はてなブログカードのような美しい外部リンクをクリック一発で作成する方法はてなサービスと、iframeを利用した外部ブログカードリンクの作り方です。Linkも<iframe>を使ってリンクを生成していますが、個人的に<iframe>はあまり好きではありませんw好きでは無い理由は、すばりデザインがイジれない点ですね!ブログカード自体、デザインは気に入っているので特に不満はありませんが、どうしてもはてなさんに依存した仕様となっているので、万が一、いや億が一はてなブログがなくなった場合に利用出来なくなります。他にも<iframe>の場合、通常のリンクよりもリクエスト数が増えるのでおそらくページの読み込み速度も遅くなります。SEOの観点からいうと昔はiframeはSEO的にマイナス要因と言われていましたが、HTML5では正式に採用されているのでマイナス要因になることは無いと思います。それなら問題ないやん!と思われるかもしれませんが、個人的にはiframeを使ってリンクする方法は避けたい。そこで僕は考えました!HTMLで生成したら良いやん!「iframeもHTMLやけど!」とツッコまれそうですが、僕が言いたいのは<iframe>で外部ファイルを読み込むのではなく、通常のリンクのようにリンクを生成する!という事です。はてなブログのブログカードは、OGPの情報を元に記事のタイトルや概要、アイキャッチ画像を生成しています。(多分w)OGPというのは、Facebookやtwitter等のソーシャルサービスと連携するために記述しているもので、ほとんどのブログサービスでも使用されています。content="ブログ名"/>このOGPを読み込む事が出来るなら<iframe>である必要は無いですよね!しかし一つ問題が...どうしたらOGPを読み込む事が出来るの?僕には知識がありません><そこで、僕はまたまた考えました!知識のある人に相談しよう!幸いにも、僕の「あ~したい」「こ~したい」を叶えてくれる心優しい友人がいたので、さっそく相談したところ快く引き受けてくれました!ありがとうS氏!ブログカード風リンクボックス使い方を説明する前にまずは作ったブログカード風リンクボックスをご覧ください。晴れ時々晴天なりブログのアクセス数が20万PV達成しましたので、今までブログを運営する上で実践してきたブログ運営術を公開したいと思います。アクセスアップ術やSEO、他にも収益方法などを紹介しているので参考になれば幸...本家ブログカードと比べると若干?の見劣りはあると思いますが、このリンクボックスはCSSを使うことで背景色や文字サイズ等、自由にカスタマイズすることが出来ます。OGPが設定されていない場合はmeta情報を元に生成します。その場合、アイキャッチ画像が無いので以下のような形になります。晴れ時々晴天なりブログのアクセス数が20万PV達成しましたので、今までブログを運営する上で実践してきたブログ運営術を公開したいと思います。使い方はとても簡単で、「ブックマークレット」を使ってOGP情報を取得します。________◆手順1この【ブックマークレット】を使ってお気に入りのページをブックマークするように登録してください。上記のリンクをマウスでドラッグして、ブックマークバー上でドロップして下さい。「お気に入りに追加」で登録できます。しても上記のリンクよりブックマークレットが登録出来ない場合には、適当なサイトをブックマークしてその中身(URL部分)を編集して以下の内容をコピーして保存して下さい。style="width:90%;height:200px;">'+r+'</textarea>');})();スクリプトの内容を簡単に説明すると、JAVASCRIPTを使ってOGPがあるページではOGP情報を取得し「.ogp_card」のスタイルを適用しています。OGP情報が無いページではmeta情報を取得し「.html_card」のスタイルを適用するように設定しています。________◆手順2リンクを作りたいページ上で「ブックマークレット」をクリックするとページ上部に生成されたHTMLタグが表示されるので、そちらをコピー。晴れ時々晴天なり</a></p>ブログのアクセス数が20万PV達成しましたので、今までブログを運営する上で実践してきたブログ運営術を公開したいと思います。target="_blank">www.aritai.net</a></p></div>________◆手順3手順2でコピーしたHTMLタグをお使いのブログサービスの記事編集画面上に貼り付ければ完了です!このリンクボックスは以下のCSSを設定しないとデザインが崩れるので必ずCSSを適用して下さい。14px;}}※このCSSは素人に毛が生えた程度の人間が書いているのでじゃんじゃん修正してくださいwカスタマイズ例このリンクボックスは、CSSを使えばお好みのデザインに変更することが出来ます。CSSの知識がある方は、お好みのデザインに変更してお使い下さい!僕が作ったデザインも1つ紹介しておきますのでよろしければご利用下さい!twitter風リンクボックスtwitterやFacebookでよく見かけるリンク方式のリンクボックスです。アイキャッチ画像とボックスの余白を無くしスペースを抑えました。晴れ時々晴天なりブログのアクセス数が20万PV達成しましたので、今までブログを運営する上で実践してきたブログ運営術...※こちらを使う場合はブックマークレットも変更する必要があります。こちらの【ブックマークレット】をお使い下さい。0;}}twitter風のリンクボックスを使用する場合はOGPが設定されている事が前提です。OGPが設定されていないサイトの場合は動作しません。.title」のそれぞれに追加して下さい。.title」には実装済です。↓アクセスアップの為のブログ運営マニ...ブログのアクセス数が20万PV達成しましたので、今までブログを運営する上で実践してきたブログ運営術を公開したいと思います。アクセスアップ術やSEO、他にも収益方法などを紹...上記のようにCSSを使って省略することも出来ますが、生成されたHTMLを直接編集すれば自由にタイトルや説明文を削除することも可能です。メリット・デメリットブログカード風リンクボックスのメリットとデメリットを紹介します。◆メリットデザインが変更できるリンク方法(「nofollow」や「target=”_blank”」等)を指定できるページの読み込み速度が早くなるはてなブログに依存しない◆デメリットはてブ数、はてなスターを表示出来ないタイトルにブログ名が入る(生成されたHTMLを直接修正すれば消せます)補足事項このリンクボックスの使用について補足事項を説明しておきます。「.ogp_card」「.html_card」共にボックス内の説明文は最大100文字に設定しています。「.tw_card」の説明文は最大50文字に設定しています。ターゲット指定は「_blank」に設定しています。アイキャッチ画像は画面サイズに応じて変更しています。上記のどの部分にも言えることですが、HTMLで生成しているので文字数やターゲットの指定も直接変更することが出来ますのでご自由に変更してみて下さい。最後にいかがだったでしょうか?はてブ数やはてなスターを表示することは出来ませんが、HTMLでブログカード風のリンクボックスを作ってみました!もらいましたwはてなブログのブログカードが悪いわけではなく、iframe以外の方法でリンクを生成したかったので作ってみました!もらいましたww(CSSは僕ですw)このリンクボックスの一番の特徴はやはりデザインが変更出来る点です。今回僕が紹介しているのは本家ブログカードに似せたカスタマイズですが、CSSの知識がある方ならもっとオリジナリティのあるデザインも作成出来ると思います!今回、ブログカードに似せて作ってみましたが、いかにはてなブログのブログカードが優れているかよくわかりましたw細部に渡るまでいろいろと考えられていて感心しました!HTMLで生成したブログカード風のリンクボックスにどれだけの需要があるかはわかりませんが、もし僕と同じく現在のブログカードに不満を感じている方、デザインをカスタマイズしてみたい方がいれば一度使ってみて下さい!最後に、最低限の動作確認(safariの動作未確認)は行っていますが、個人的に作成したものなのでスクリプトがうまく起動しない等の動作不良があった場合には申し訳ありません。その点を了承頂ける方のみご利用下さい。呼ばれるモバイル端末でのページ表示速度を高速化するプロジェクトに本格的に取り組むようで、検索順位にも影響が出るとか、出ないとか。ブログを運営されている人たちには気になるニュースですね。「はてなブログ」で記事の下に関連記事を表示する方法はいろいろありますが、「あわせて読みたいG」を使えばとっても簡単です!はてなブログ「はてなブログPro」でブログを書いているアナタ!はてなグループに登録しませんか?「はてなブログPro」を使ってブログを書いていますが、はてなブロググループに「はてなブログPro」が無かったので作ってみました!アクセスアップにもつながると思いますのでよろしければご参加ください!はてなブログはてなスターを外して1週間。孤独感から解放されたいけど卒業します!こんにちは、最近孤独になったカツヲです。実は1週間ほど前にこのブログの「はてなスター」をしれ~っと外しました。ブログを初めて1年半。過去にもはてなスターを外そうと思ったことはありましたが、結局今まで...はてなブログはてなブログのAMP用CSSを試してみました!はてなブログで「AMP用CSS」が設定出来るようになりました。そこでブログをAMP対応する上で、AMP用CSSを使うとデザインがどのようになるのか検証してみました。グループに登録しませんか?はてなブロググループで「個人事業主」を作りました。アクセスアップにもつながると思いますのでよろしければご参加下さい!はてなブログYahoo!検索もAMPに対応するのならAMP対応をもう一度試してみるの巻はてなブログがAMPに対応して随分経ちましたが、Yahoo!検索もAMPに対応することを発表したようです。Yahoo!も対応となると見過ごせません!もう一度僕のブログもAMPに対応してみます!はてなブログはてなブログ|インストールしたデザインテーマ(CSS)をカスタマイズする方法はてなブログを開始して2ヶ月。たくさんの方の記事を参考にしながら、いろいろとカスタマイズしてきました。その中で、インストールしたデザインテーマをカスタマイズする方法をご紹介します。インストール...はてなブログはてなブログ|カテゴリーのタイトル編集機能を使って広告を掲載する方法!はてなブログに「カテゴリー別記事一覧で、ページのタイトルや説明文をカスタマイズ出来る」機能が追加されました!この機能自体すごく便利なのですが、もう一つ大きなメリットがあります。それはカテゴリーページに広告(AdSense)を掲載出来る点です。