気ままの簡易レビュー

[ トップページへ ]



自分が実際触って判断した Win /アプリの設定、商品の簡易レビューがメイン。



0

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

商品リンクをクリックし通販サイトへ飛ぶ物は 「 広告 」のリンクです。



はじめに

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

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

Fc2_Seesaa_CSS_220627_0001.jpg

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

【 目次へ戻る 】

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

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

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

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

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

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

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

Fc2_Seesaa_CSS_220627_0001.jpg

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

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

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

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

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

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


Fc2_Seesaa_CSS_220627_0002.jpg

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

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

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

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

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

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

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

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

Fc2_Seesaa_CSS_220627_0003.jpg

【 目次へ戻る 】

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

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

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

Fc2_Seesaa_CSS_220627_0009.jpg

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

Fc2_Seesaa_CSS_220627_0010.jpg

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

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

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

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

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

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

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

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

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

Fc2_Seesaa_CSS_220627_0004.jpg

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

*** ご注意 ***

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

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

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

【 目次へ戻る 】

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

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

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

Fc2_Seesaa_CSS_220627_0011.jpg

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

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

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

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

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

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

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

-----

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 ブログの設定をご観覧ください。

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

Fc2_Seesaa_CSS_220627_0005.jpg

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

Fc2_Seesaa_CSS_220627_0006.jpg

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

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

Fc2_Seesaa_CSS_220627_0007.jpg

【 目次へ戻る 】

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

Seesaa ブログの管理画面にて

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

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

Fc2_Seesaa_CSS_220627_0012.jpg

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

Fc2_Seesaa_CSS_220627_0013.jpg

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

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

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

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

Fc2_Seesaa_CSS_220627_0008.jpg

【 目次へ戻る 】

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", "MS Pゴシック", sans-serif;
  text-align: center;
  }
/* CSS に追加 終了 */

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

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

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

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

以上。

おすすめリンク

Amazon / 楽天市場 / Yahoo! でお買い物をする。
関連記事

コメント

非公開コメント

検索フォーム

最新記事

FireFox v105 ツイッターなどのページでスクロールが引っかかるを改善 Sep 26, 2022
VeraCrypt 日本語化/使用方法/コンテナのマウント/アンマウントをバッチファイルで行う Sep 23, 2022
MouseGestureL.ahk で CTRL/Shift/ALT/Winキーが押されていれば待機/離されたら次の命令へ進む .ahk Sep 18, 2022
ファイルを選択しショートカットキーで日時を付加しコピー/リネーム/フルパス取得 Autoitスクリプト Sep 06, 2022
デスクトップでキー入力すると登録したアプリやフォルダを開く Autoit スクリプト Aug 30, 2022
ショートカットキーを押して文字反転/文字が選択されているテキストをファイルへ保存するスクリプト Aug 24, 2022

バナー1

月別アーカイブ スクロール

全ての記事を表示する

2022年09月 (4)

2022年08月 (5)

2022年07月 (2)

2022年06月 (8)

2022年05月 (5)

2022年04月 (8)

2022年03月 (6)

2022年02月 (2)

2022年01月 (6)

2021年12月 (2)

2021年11月 (7)

2021年10月 (5)

2021年09月 (4)

2021年08月 (3)

2021年07月 (9)

2021年06月 (6)

2021年05月 (10)

2021年04月 (7)

2021年03月 (10)

2021年02月 (6)

2021年01月 (6)

2020年12月 (5)

2020年11月 (7)

2020年10月 (7)

2020年09月 (6)

2020年08月 (10)

2020年07月 (9)

2020年06月 (7)

2020年05月 (8)

2020年04月 (4)

2020年03月 (5)

2020年02月 (7)

2020年01月 (5)

2019年08月 (4)

2019年07月 (14)

2019年06月 (14)

2019年05月 (17)

2019年04月 (14)

2019年03月 (5)

2018年02月 (1)

2017年08月 (1)

2017年06月 (1)

2017年05月 (1)

2017年03月 (4)

2017年01月 (2)

2016年12月 (4)

2016年11月 (2)

2016年10月 (2)

2016年09月 (2)

2016年08月 (2)

2016年07月 (3)

2016年06月 (3)

2016年05月 (2)

2016年04月 (5)

2016年03月 (9)

2016年02月 (6)

2016年01月 (5)

2015年12月 (8)

2015年11月 (4)

2015年10月 (11)

2015年09月 (6)

2014年03月 (18)

2014年02月 (28)

2014年01月 (31)

2013年12月 (31)

2013年11月 (19)

2013年10月 (17)

2013年09月 (9)

2013年08月 (10)

2013年07月 (12)

2013年06月 (10)

2013年05月 (22)

2013年04月 (3)

2011年03月 (1)

2011年02月 (2)

2010年11月 (1)

2010年09月 (1)

2010年08月 (1)

2010年07月 (9)

2010年06月 (6)

2010年05月 (19)

2010年04月 (23)

2010年03月 (28)

2010年02月 (23)

2010年01月 (17)

2009年12月 (19)

2009年11月 (25)

2009年10月 (28)

2009年09月 (28)

2009年08月 (20)

2009年07月 (19)

2009年06月 (20)

2009年05月 (16)

2009年04月 (18)

2009年03月 (15)

2009年02月 (14)

2009年01月 (7)

2008年12月 (3)

2008年11月 (5)

2008年10月 (4)

2008年09月 (4)

2008年08月 (3)

2008年07月 (3)

2008年06月 (4)

2008年05月 (2)

2008年04月 (1)

2008年01月 (1)

2007年12月 (1)

2007年11月 (3)

2007年09月 (2)

2007年07月 (1)

2007年02月 (1)

2006年11月 (1)

2006年09月 (1)

2006年08月 (1)

2006年07月 (5)

バナー2

バナー3




プライバシーポリシー

当サイトでは、第三者配信による広告サービスを利用しています。このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報 (氏名、住所、メール アドレス、電話番号は含まれません) を使用することがあります。このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、ここを参照するか ブラウザのCookie機能をオフにしてアクセスしてください。

気ままの簡易レビューは amazon.co.jp を宣伝しリンクすることによって サイトが紹介料を獲得できる手段を提供することを 目的に設定されたアフィリエイト宣伝プログラムである Amazonアソシエイト・プログラム の参加者です。

プロフィール

・このブログの管理者:気ままさん
・性別:男
・年齢:40代
・性格:プログラミング的思考
    スキゾイド傾向
    去る者は追わず、来る者は拒まず

・趣味:読書
    パソコンを快適にする設定を
    探しにWeb旅行
    得た知識でブログの執筆

・一言:
どうも、気ままさんと申します。
需要のあるなしは関係なく私が気に入った
役に立った事を書いており必要な方が
好きに観覧して頂ければ。
しがないブログではありますが
何かのお役に立てれば。