FC2ブログ／Seesaaブログの個別記事タイトルと記事の間に指定文字を挿入する

2022

FC2ブログ／Seesaaブログの個別記事タイトルと記事の間に指定文字を挿入する

商品リンクをクリックし通販サイトへ飛ぶ物は「広告」のリンクです。
記事の執筆に AI な類は使用しておりません。

【目次】

はじめに
FC2 ブログの書き換え箇所を特定
FC2 ブログの設定 HTML を書き換え
FC2 ブログの設定 CSS を書き換え
Seesaa ブログの書き換え箇所を特定
Seesaa ブログの設定 HTML を書き換え
Seesaa ブログの設定 CSS を書き換え
おすすめリンク／関連記事

はじめに

ブログなどで個別記事のタイトルの下と記事の間に
警告文などを表示したい場合があります。

下の画像でいう、赤枠部分の文字を表示したい状況。

FC2 BLOG ( FC2 ブログ ) と Seesaa ブログの書き換え箇所の
特定方法と CSS の書き方など。

【目次へ戻る】

FC2 ブログの書き換え箇所を特定

特定の箇所に文字類を書き込むには位置を調べなくてはなりません。

自分のブログを表示しまして、個別の記事を開きます。
トップページではありません、記事が表示され読めるです。

私のブログであれば以下がトップページで
https://kimama9.blog.fc2.com/

以下が個別記事のアドレスです。
https://kimama9.blog.fc2.com/blog-entry-1036.html

挿入する箇所を調べるのに簡単なのはその範囲のソースを調べる事です。

下の画像でいう、赤枠部分の文字を表示したい状況なら
記事のタイトルから記事で表示されている範囲を調べる。
ここではあくまでも調べるだけであり「書き換えは別」です。

１．記事のタイトルから目次までをマウスで反転させます
２．右クリックをして選択した部分のソースを表示を選択

　　ブラウザにより名称は変化します、この記事では Firefox にて

　　Chrome では右クリックして検証

　　Edge では選択をしないで右クリックしてページのソースを表示
　　または文字を選択をし開発者ツールで調査する

　　Vivaldi では右クリックして開発者ツール → ページのソースを表示

　　一番わかりやすい？のは Firefox です。
　　一時的に使用したいのであれば Portable という解凍するだけで
　　使える Firefox があります。
　　サブブラウザとして一時的に使うと便利なポータブルブラウザ
　　Chrome／Edge／Firefox／Vivaldi

記事のソースが表示されますので
検索などの機能で選択した文字を探します。

この記事の例なら「指定年度の」「目次」です。
< と > の範囲にあると思いますのでその上下を見ます。

付近に < h2 class ～ > と </h2> があるはず。
h の後ろの数値は文字の大きさですので、使用しているテーマで変化の場合あり。
</h2> の / がある部分が文字の大きさ指定の終了を意味します。

指定年度の～と書かれている文から下を見て </h2> より下に
文字を挿入すればその下に表示される。

< h2 class の後ろの "post-title" の前後な行付近を
メモ帳に貼り付けておいてください、開始の行として探すので必要です。

これもテーマ／スキンの作者様で違いがあるので一概には言えませんので
"post-title" を探せばいいのか？ではありません。

同じく目次で検索して、それより上での位置になります。
<div ～> と大抵あり、それが記事の表示部分なのでそれより上になる。

<div class ～> の "post-content clearfix" をメモ帳に保存。

【目次へ戻る】

FC2 ブログの設定 HTML を書き換え

次は実際の FC2 ブログでの書き換えです。

ブログ設定画面を開き
設定 → テンプレートの設定と進む。

下へスクロールすると以下があるのでここを書き換えます。
[ ここに使用しているテンプレート名 ] のHTML編集

最初に、書き換える前に「必ず」書き換えるテキストを
メモ帳などへバックアップしてください、上の画像でいう赤枠部分です。
書き換えに失敗するとブログの表示が変になりますし元に戻せないと困ります。

これも、書き換える入力欄をクリックしてから
テキストを選択してコピペであり、ページ全体を選択してコピペだと
書き換え内容がコピペされていないになります、注意。

FC2 ブログの書き換え箇所を特定 の部分で探した開始文字
この記事で言えば < h2 class="post-title"> と
<div class="post-content clearfix"> が近距離にある部分を探します。

類似のが何個かあるので上と下が付近にあるで判別します。
本当にここでいいのかな？であれば

画像で言う１．２．の付近に、文字や数字でもいいので
各行に 1 2 3 4 と番号を打って保存し、記事を観覧して
その番号が表示されている部分が入力した文字の位置です。

この記事では１．に前者、２．に後者があるので
その間に好きな文字を入れます。

通常の文字でもいいですが、文字の大きさや色を指定するのであれば
すぐ下で説明する CSS での書き方で行います。

<div class="Ad_Warning_1">商品リンクをクリックし通販サイトへ飛ぶ物は「広告」のリンクです。</div><br>

これは、CSS で指定する Ad_Warning_1 という設定で文字を表示します
という意味、最後尾の <br> は改行です、不要なら消してください。

保存すれば、指定位置に文字が表示されます。
ここまでなら、CSS の設定を書き換えていないので
色などは変化していないは正常。

*** ご注意 ***

このブログに書いてある事の実行は
自己責任にてお願いいたします。

このブログの管理者気ままさんは
記事に書いてあることを実行して発生した
すべての事柄において責任を負いません。

これに同意をいただけない方への
このブログに書いてある事の実行は許可いたしかねます。

【目次へ戻る】

FC2 ブログの設定 CSS を書き換え

上で CSS にて文字の大きさや色を変更するの記載をしましたが
その設定方法です。

上に設定した HTML編集の下へスクロールすると
[ ここに使用しているテンプレート名 ] のスタイルシート編集とあり
そこが CSS の書き換えです。

HTML はブログの形式の大まか枠、CSS は文字装飾などの設定。
家で考えれば HTML は柱、CSS は壁紙と考えれば。

最後尾に以下を挿入するだけ。

/* CSS に追加 開始 */
.Ad_Warning_1 {
  color: #ff0000;
  font-size: 14px;
  font-family: "メイリオ", Meiryo, Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  text-align: center;
  }
/* CSS に追加 終了 */

一番上と下はコメントですので何でもよい。

.Ad_Warning_1 という名前をつけ、この設定を呼び出されたら
この設定で表示しての意味。

color: #ff0000;
文字色を ff0000 ( 赤 ) にしてください

色は Google でカラーピッカーで検索すると
上部に色取得の画面が出るので HEX の値を入れる。
# を必ず先頭へ入れ英数字６桁、最後尾に ; ( れのキー ) です。

-----

font-size: 14px;
文字サイズを 14px にしてください

100% などの指定も可能。
「 font-size CSS 初心者」などのワードでググれば指定方法は出る

-----

font-family: "メイリオ", Meiryo, ～省略
フォントを指定してください

-----

text-align: center;
中央に表示してください

-----

不要な部分は削除して大丈夫です。
保存すれば設定終了。

呼び出す場合はこの様にして .Ad_Warning_1 だが先頭の . は不要。

<div class="Ad_Warning_1">商品リンクをクリックし通販サイトへ飛ぶ物は「広告」のリンクです。</div><br>

【目次へ戻る】

Seesaa ブログの書き換え箇所を特定

上で FC2 ブログでの特定方法を書きましたが
Seesaa ブログでも特定方法は同じです。
わからなかったら FC2 ブログの設定をご観覧ください。

この赤枠部分の位置に文字を挿入したいの場合。

挿入したい文字の範囲を文字を反転しソースを表示
「ダイエットを半年～」のタイトル部分と記事本体での「目次」

該当文字の上下、ダイエットを半年～の前にある
<h2 class="artice_title"> と

目次の前にある <div class="article_content">
両方をメモ帳にコピペ

【目次へ戻る】

Seesaa ブログの設定 HTML を書き換え

Seesaa ブログの管理画面にて

デザイン → PC → CSS/HTML編集 →　現在使用しているデザインを選択。

１．設定で二重丸のついている物が現在の使用している物です。
　　複数ある場合はこれを選択します。

PC →　CSS/HTML編集 → HTML編集タブにて

書き換える場合はメモ帳などにバックアップをお願いいたします。
変な箇所を書き換えたり、意図しない変更などがあった場合元に戻せるためです。

<h2 class="artice_title"> と
<div class="article_content"> が近い位置にある箇所を探す。

１．２の間に挿入したい文字を書き込んで保存し
記事のページを開いて確認。

例：
<div class="Ad_Warning_1">商品リンクをクリックし通販サイトへ飛ぶ物は「広告」のリンクです。</div><br>

【目次へ戻る】

Seesaa ブログの設定 CSS を書き換え

FC2 と同じく Seesaa ブログの管理画面にて

デザイン → PC → CSS/HTML編集 →　現在使用しているデザインを選択。

スタイルシート編集タブにて最後尾に以下を挿入するだけ。

/* CSS に追加 開始 */
.Ad_Warning_1 {
  color: #ff0000;
  font-size: 14px;
  font-family: "メイリオ", Meiryo, Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  text-align: center;
  }
/* CSS に追加 終了 */

説明は FC2 ブログの設定 CSS を書き換え にて。

-----
とまあ、こんな感じで
FC2ブログと Seesaaブログで記事個別のページの
記事タイトル名と記事の間に指定文字を挿入しようでした。

何度か行っていれば簡単な部類に入りますが
行った事がない人からすると難しく
説明するのにも少々面倒であるという。

それでは、皆様のブログの書き換えが上手くいきますようにと
お祈りいたしまして、これにて終了です。

以上。

気ままの簡易レビュー