サイドバーに追加できる「最新記事」「関連記事」「注目記事」の各記事一覧モジュールでは、変数を用いた高度なカスタマイズにより、タイトルや投稿日時などの表示順を変更したり、任意のHTMLを記述したりできます。 高度なカスタマイズは、HTMLやCSSの知識を持っており、デフォルトの記事一覧のスタイルがわかる方を対象としています。はてなブログでは、デザインやレイアウトのカスタマイズに関してサポート対象としておりませんのでご了承ください。 記事一覧モジュールで高度なカスタマイズを利用するには デザイン設定画面の「カスタマイズ」ページで、「サイドバー」の項目から「最新記事」「関連記事」「注目記事」の各モジュールの設定ウィンドウを開き、「高度なカスタマイズを使う」のチェックボックスをチェックします。 デフォルトで 設定できる、アイキャッチ（サムネイル）画像、投稿日時、記事タイトル、はてなブックマーク数、

ブログのデザイン設定画面の「カスタマイズ」タブで、「記事」メニューの「記事上下のカスタマイズ」では、記事本文の上（記事タイトルの下）と下にHTMLやスクリプトを自由に記述でき、任意のブログパーツ、ソーシャルプラグイン、広告などを配置できます。 次の手順で貼り付けてください。 ブログパーツやプラグインのHTMLコードを、それぞれの配布サイトからコピーする HTMLコード中の記事URLや記事タイトルなどを、必要に応じて下記で説明する変数に置き換える ブログのデザイン設定画面で「カスタマイズ」タブの「記事」メニューを開く 「記事上下のカスタマイズ 」の「記事上HTML（記事本文上）」もしくは「記事下HTML」で、<p> ... </p>と表示されているテキストエリアに上記のHTMLコードを貼り付ける 「変更を保存する」をクリックする 「記事上HTML（記事本文上）」および「記事下HTML」に設置

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

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

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でソースが公開されているので、ローカル環境でも利用できます。 さっそくオンライン版で試し

今回は、はてなブログ カスタマイズ記事のまとめです。 これまでに紹介してきたレイアウトやデザインカスタマイズ系の記事が増えてきたため、一覧ページを作ってみることにしました。 実際の動作と合わせて紹介していくので、取り入れたい記事を探してみてください。 はじめに 今回紹介する内容は「はてなブログカスタマイズの記事一覧」について。 当ブログでは、はてなブログで使える「html」「css」「JavaScript」のコードについて紹介してきました。 紹介していくうち、記事が増えてきたため任意のカスタマイズを探しにくくなっているかもしれません。 そこで、カスタマイズの実装例と合わせてまとめたので、順番に紹介していきます。 かなり長い記事になってしまったので、目次を利用しつつ気になった記事を探してみてください。

はてなブログで「目次」を作ったときのデザインを変えるCSSを紹介しています。 リスト（箇条書き）のマークを大見出しと、中見出しで別々のマークにする方法もあります。 ※2019.3.29に「目次の部分を目立たせるCSS」を追加しました。 非常に残念なことに、こちらの記事のCSSをコピペして新しくカスタマイズの記事を書いて、いかにも自分が書いたかのように公開する人が多いです。 または最後にちらっとリンク貼ってるからOKでしょ？みたいなグレーの人も。せっかく苦労して書いたものが、いとも簡単にそのように不正利用されているのが悲しいです。 「コピペOK」というのは一般利用についての話であり、こちらのコードをコピペして記事を書いてOKではありません。 訪問いただき申し訳ありませんが、現在コピペできないようにしております。私の記事をパクって公開している人の所からコピペしてください…。（2021.5.1追