自分のブログに被ブックマーク数を表示するブックマーク数を画像で取得するAPIを利用して、自分のサイトやブログでエントリーがブックマークされた数を表示させることができます。あなたの書いたエントリーについてのコメントを一覧したり、ブックマークしてもらうためのナビゲーションとしてお使いください。 このページでは、このブックマーク数を画像で取得するAPIを利用して、各ブログサービスで被ブックマーク数を表示させる方法を紹介しています。 Blogger 「テンプレート」タブから「現在の内容を編集」欄の <!-- Begin #main --> と <!-- End .post --> に囲まれた以下の部分を次のように編集します。 ... </BlogItemCommentsEnabled></MainOrArchivePage> <$BlogItemControl$> </p> ... を ... <

はてなブログでは、デザイン設定画面の「記事上下のカスタマイズ」において、ブログパーツや広告などを記事ページ（1つの記事だけが表示されるページ）に配置する際、そのスクリプト中に使用できる変数を追加しました。 これまでも使用できた記事タイトルや記事URLに加えて、URLエンコードされたブログURLなどを指定できるようになり、ブログパーツなどをより柔軟に設置できます。どうぞご利用ください。 ※はてなブックマークやTwitter、Facebookといったよく利用されるソーシャルプラグインは、同じ「記事」メニューで簡単に表示できます。記事末の関連するヘルプを参照してください。 「記事上下のカスタマイズ」の使い方と変数の一覧 デザイン設定画面の「カスタマイズ」タブで「記事」メニューを開きます。「記事上下のカスタマイズ 」の「記事上」と「記事下」に、HTMLやスクリプトを自由に記述できます。 「記事上下

はてなブログでは、グルメ情報サイトぐるなびのデータと連動し、「構造化データ」に対応しました。レストランの情報を分かりやすく表現でき、読者や検索エンジンに対して記事の内容を正確に伝えられます。旅先で食べたご当地グルメ、行きつけの美味しいお店のレポートなど、グルメ記事を書かれる方におすすめの新機能です。どうぞご利用ください。 本稿では、SEO専門家の辻正浩さんにご協力いただき「構造化データの効果や使い方」についてご紹介いたします。SEOに興味のあるブログ運営者の方には役に立つ内容となっています。記事の後半では、はてなブログでの構造化データの使い方をご紹介します。合わせてお読みください。 本稿の構成 【寄稿】はてなブログならグルメ記事がSEOに有利！ 構造化データのご紹介 はてなブログで構造化データを使うには 【寄稿】はてなブログならグルメ記事がSEOに有利！ 構造化データのご紹介 本パートでは

今まで定期的にドメインパワーを計測していましたが、Googleに記事がインデックスしてもらえないという謎の現象が増えてきたことから、計測しても意味がないような気がして計測していませんでした。 Googleで何が⁉ インデックスされない記事が増え続ける恐怖 - ちゃちゃの備忘録的なブログ そんな僕のブログも最近は久しぶりにGoogleにインデックスしてもらえるようになったことから、じゃあ今のドメインパワーはどうなってるんだ？と言うことで計測してみることに。 今回は2022年４月3日の時点での計測になります。 ドメインパワーとは 最後に計測したドメインパワー ドメインパワーの計測（2022.4月分） ドメイン価値の計測（2022.4月分） ドメインパワーを上げる５つの方法 長くサイト運営をする 質の良い記事を書く 積極的にリライトをする 被リンクを獲得する アクセス数を増やす ドメインパワーを

はてなブログには、ブログ初心者でも使えるたくさんの便利な機能や設定、またおすすめカスタマイズなどがあります。 はてなブログを始めて「これは便利」「これはよく使う」という設定やカスタマイズがあった時には個別で記事にしていましたが、これらの記事を分かりやすくまとめてみましたので、参考にしてもらえればと思います。 こんな人に読んでもらいたい！ ・はてなブログを始めたばかりの人 ・はてなブログの便利な使い方を知りたい人 はてなブログおすすめ設定編 はてなブログに関連記事を表示させる はてなブログで定型文を使ってみる 記事内の任意の場所に読者登録ボタンを設置する 公開した記事を丸ごとコピーして新記事に応用する はてなブログの記事内にリンクを貼る はてなブログでメタディスクリプションを使う 公開した記事を非公開にするには？ ブログのトップに特定の記事を固定して注目してもらう！ カスタムURLを使ってみ

スポンサーリンク いや…君たちのことを悪く言っているんじゃないよ ～目次～ 第７８回目は『コピペチェック』についてです コピペチェックはやる気をへし折ってくれるナイスガイ コピペチェックする方法 結構要注意判定が出ます コピペチェックで引っかかったときの解決方法 まとめ こんばんは。 かえるです。 無職となって１５０日が経ちました。 かえるのwebライターについての独り言 第７８回目は『コピペチェック』についてです webライターの仕事をしていると、どうしても避けて通れないのが「コピペチェック」です。 webライターの中には、記事をまるまるコピペして提出する悪質な人がいます。 提出して人が悪質な人なのか確かめるために、コピペしてないか、チェックされるわけです。 今回は、この「コピペチェック」について紹介していきます。 スポンサーリンク コピペチェックはやる気をへし折ってくれるナイスガイ 構

おはよーございます。 日々呑気に趣味生活を楽しんでおりますが、先日Amazonアソシエイトさんからこんなメールが来ました。 「90 日以内に、3つの適格な売上の発生を目指していただきますようお願いいたします。3つの適格な売上とは、3 つの個別の注文のことです。例えば、1つの注文番号内に複数の商品が含まれている 場合は、3つの適格な売上とはならず、1つの適格な売上という扱いとなります。」 ・・・！？ あと９０日以内に売り上げを３つ立てないといけないだと・・。今まで１個も売れてないですけどね・・。 そういえば、随分昔に一度そんな条件あったことを調べてた気がするんですが、すっかり忘れておりました。。まずい。。 そんなこんなで、今回はアソシエイトリンク張りまくってみたいと思います。 商品は１個ずつ３回買っていただければ達成のようなので、買ってもいいかな？というものがあったら、リンクからポチっと買っ

MARU×MARU情報局です。 本日は、おすすめのお取り寄せグルメ情報！！ 宮崎県都城市『福島精肉店』からのお取り寄せグルメ 【極上スパイス 喜（よろこび）】を紹介いたします。 ２０２０年１月２２日放送の『 家事ヤロウ！！！』（テレビ朝日）の中でも紹介され！ バカリズムさん、中丸雄一さん、カズレーザーさんも絶賛した逸品です！！！ 【極上スパイス 喜（よろこび）】基本情報 加工者：株式会社　福島精肉店 住所：宮崎県都城市上町１０－２２ 電話：（０９８６）２５－１１２９ 創業明治４０年のお肉専門店、肉のふくしまがブレンドした極上スパイス！ 老舗のお肉屋さんが、 ＂お肉が喜ぶ、素材が喜ぶ、食べた人が喜ぶ。＂ をコンセプトに作ったスパイスが、【極上スパイス 喜（よろこび）】です。 【極上スパイス 喜（よろこび）】は、 ステーキ、揚物、焼肉、焼鳥、スープ、ハンバーグ、パスタ、サラダ、各種ドレッシング

Microsoft Word などの文書作成ソフトは、Enter キーで好きなだけ空白行を挿入できますよね。でも、Web サイトで使われる HTML では「タグ」を使わなければ改行も空白行も入れられません。 WordPress ではエディターのタイプによっては空白行の入れ方が違い、思いどおりの装飾をしたいなら HTML・CSS に関する最低限の知識が必要となります。 行間を大きくとるため・空白行を入れるために <br> を連続して使っている方もいますが、これは HTML の文法上 NG となっているので注意しましょう。 どのようにするのが正しいのか、空白行の入れ方について解説していきます。 改行と段落のタグを正しく使うべき理由 HTML タグを正しく使うべき理由は以下の 2 つです。 どのブラウザでも同じように表示させるため 検索エンジンにページの内容を正確に伝えるため 詳しく見ていきまし

1クリックで、Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる無料ツールを紹介します。 CSSの検証としておかしなスタイル定義・同じスタイル定義・一貫性のないスタイル定義などを見つけたり、スタイルガイドの作成にも役立ちます。 CSS Analyzer CSS Analyzer -GitHub CSS AnalyzerはWallace CLI, constyble, color-sorterなどの便利ツールをリリースしているProject WallaceのCSS解析ツールです。MITライセンスで、商用プロジェクトでも無料で利用できます。 Webサイトで使用しているCSSファイルや自分が書いたCSSのコードを詳細に解析してくれます。オンラインツールとして簡単に利用でき、GitHubでソースが公開されているので、ローカル環境でも利用できます。 さっそくオンライン版で試し

デバイスの幅に応じてCSSを変化させるレスポンシブウェブデザインは、CSSのメディアクエリのという仕様によって実現しています。 #css {PC向け} @media (max-width: 1020px) and (min-width: 768px) { #css {狭いブラウザとタブレット向け} } @media (max-width: 767px) { #css{スマホ向け} } といった感じです。 {PC向け}のところに主だったルールを記載し、@media以下で、それぞれ対象向けにルールを微調整する、という書き方が主流かと思います。たとえば以下のようになります。

どうも！フジグチです！ 今回はCappuccinoのデモサイトに設置している、プロフィールカードのカスタマイズを公開いたします。 「近日中に公開する」とデモサイトに書いていたのですが、まさかのテーマ２作目の製作をするという想定外のことが起きて、自分でそう書いていたことも忘れていました。（小声） せっかく公開するのならと、色々なプロフィールカードのパターンを作ったので、お好きなデザインを選んで使ってください。 この記事のカスタマイズの特徴を以下に挙げます。 この記事の特徴 入力フォームでコードを作成できる その場でプレビュー デザインを１０種類から選べる その場でカラーの変更が出来る ワンクリックでデザインの切り替え ワンクリックでコードのコピー このカスタマイズは、はてなブログに関わらずHTMLを入れることが出来るブログサービス（WordPressとか）であれば、お使いいただくことが出来る

他人のブログを見ている時に、トップページの記事一覧がタイル状に表示されるように設定してあり、「おしゃれでいいなぁ～」と思ったことはありませんか？ 今回はそんな人のために、cssの記述だけで簡単にトップ画面の記事一覧をタイル状に変更する方法をご紹介したいと思います。 コピペで設定できるようにしているため、とても簡単に設定可能です！ 注意 今回の方法は「はてなブログpro」である事が前提となります。 トップ一覧をカードタイプからタイル状に変更する方法 CSSの記述内容 プレビュー スマートフォン表示は通常にしたい場合 CSSの記述内容 CSSが反映されない場合の対処法 最後に トップ一覧をカードタイプからタイル状に変更する方法 まずは、はてなブログの「設定＞詳細設定」の中にあるトップページの表示形式を一覧形式に変更してください。 CSSの記述内容 CSS /*-----------------

ブログの記事を読んでいると、サイドバーや記事下のプロフィールがとてもおしゃれで、自分も同じように好みのプロフィールにしてみたいと思うことってありませんか？ 今回は、CSSを使ってプロフィールを自分好みにカスタマイズする方法をご紹介していきたいと思います。 はてなブログでのプロフィール編集のご紹介となりますが、記述する場所さえわかればその他のブログでも応用が利くので是非参考にしてみてください！ 注意今回は、はてなブログPROを使用している人を想定して作成されています。 まだ、「はてなブログPRO」を使用していない人は是非おすすめなので、「はてなブログpro」を検討してみて下さい はてなブログproはこちらから！ ドメイン所得がまだの方で取得に迷っている方は是非こちらの記事も参考にしてみてください！ www.rablifes.com 自分好みにのプロフィール作成方法 画像の準備 HTML記述内

気が向いたのでブログを色々模様替えしました。 テンプレートも変えてみました。 今回選んだのはこちら！ hitsuzi.hatenablog.com 人気ナンバーワンのにしただけじゃんって？ そうなんだけど、せっかくだからもっとシンプルな感じにしたかったので、ワンカラムテンプレートにカスタマイズしてみました。 サイドバーの内容は下部分に表示されます。 書いたコードも出しておくので、使いたい方はコピペしてダッシュボードからデザイン→スパナアイコン（カスタマイズ）→デザインCSS で貼り付けてくださいね。 #content{ padding:0 15px; } #main,#box2{ float:none; width:100%; margin-top:60px; } #box2-inner{ display:flex; flex-wrap:wrap; } #box2-inner > div{

はてなブログで標準で使えるアイコンフォント（Webフォント）とその使い方を紹介します。 ↓↓これぜんぶ！ダウンロードしなくても使えます！！ グローバルメニューや、ブログ中のちょっとしたポイントなどを示したい時にアイコンを使うと目立ちますよね。 ポイントを目立たせたい時 ↓↓ ポイント スマホのボトムメニュー ↓↓（ボトムメニューのCSSはこちら） SNSのシェアボタンなどをつくるのにも使えます！ この記事では、上記のようなWebアイコンをはてなブログの中で使う方法やコピペでできるコード、また上手く表示されない場合の対処法などを紹介しますので、ぜひご参考にしてください。 アイコンは、Font Awesome などを外部から読み込む方法もありますが、はてなブログでは120種類ほどのオリジナルのWEBフォントをデフォルトで読み込んでいます。 これらのフォントであれば、外部から読み込むよりページが

今回は主にはてなブロガーさん向けのカスタマイズ記事になります。 突然ですが、みなさんはどんなSNSを利用しているでしょうか。 ブログを運営するにあたって、SNSというのはとても大事なツールです。 ブログの更新をお知らせしたり、情報収集に活用してみたり。また自分の記事SNSを通して拡散され、多くの人に読んでもらえることもあります。 また自分のプロフィールにSNSへのリンクや、フォローボタンを設置しておくことで、交流の機会ができたりします。 そこで今回は、ブログのサイドバーに『Twitter』『Instagram』のフォローボタンを簡単に追加する方法をまとめてみました。 SNSフォローボタンの追加方法 四角形のボタン＋アイコン＋テキスト HTML Twitter Instagram はてな読者登録ボタン デザインcss 円形のボタン＋アイコン HTML デザインCSS 色背景ボタン SNSフォ

この記事でできるようになること 完成イメージは以下の状態 CSSのcontent: counterを使ってみる JavaScriptで行ごとにdivで囲む CSSで付け足したdivごとにカウントアップ [おまけ]コードブロック左上に言語名を表示するCSS この記事でできるようになること はてなブログのコードブロックに行番号を表示 はてなブログのコードブロックの偶数行のみ背景色をつける [おまけ]はてなブログのコードブロックの左上に言語名を表示する 最初は行番号のみで考えていましたがついでに縞々もやってみました。 完成イメージは以下の状態 要件 JavaScriptで追加する方法もあるみたいだけどCSSでやりたい シンタックスハイライトははてな標準で十分 highlight.jsなどのライブラリは使いたくない CSSのcontent: counterを使ってみる body { counter

こういう感じのスタイルシートを当てておいて, pre.code { position: relative; } pre.code[data-lang-label]::before { content: attr(data-lang-label); font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic', sans-serif; font-style: italic; position: absolute; top: 0; right: 0; background-color: #FFFFFF; border-radius: 0 0 0 4px; padding: 0 7px; } pre.code[data-lang-label]:hove