頑張らない!でも諦めない!必死にならずにええかげん

Seesaa™ブログで独自タグで埋め込まれる要素のHTMLを変更する方法

      2014/11/22

Google or AdMax Promotion(it)

Seesaa™ブログを利用していてHTMLを編集することはあるでしょう。
しかしSeesaaブログでは独自のタグを利用してHTML内に埋め込まれる要素があります。
そうした独自タグの出力するHTMLはコンテンツの編集で変更することができます。

はじめに

Seesaa™ブログは自由度の高いブログサービスで、
多くの人が利用されていることでしょう。
HTMLの直接編集が行える点も支持される理由でしょう。

独自タグとコンテンツエリアの関係

通常HTMLの編集というと、直接すべてのHTMLのソースを見ながら行うのですが、
Seesaaブログでは独自の埋め込みタグが存在しています。
<% content_header %>や<% content_left %>などの形式で、
HTML内に埋め込まれているタグです。

このタグが示しているエリアは、コンテンツパーツの配置エリアを示しています。

  • <% content_header %>
  • <% content_left %>
  • <% content_main %>
  • <% content_right %>
  • <% content_footer -%>

この代表的な5要素がブログのコンテンツ編集のエリアに対応してます。

01_独自タグとコンテンツレイアウトの関係

独自タグとコンテンツレイアウトの関係

要はこの各エリアに含まれているコンテンツパーツを個々に編集することで、
HTMLに埋め込まれた独自タグの内容を変更することができます。

個別にコンテンツを編集

では、元から配置されているコンテンツである「ブログタイトル」の、
詳細な内容を確認してみます。
コンテンツ画面から、ブログタイトルのコンテンツをクリックします。

02_ブログタイトルコンテンツの変更

ブログタイトルコンテンツの変更

コンテンツの編集画面は以下のようになっていますが、
コンテンツの上部、下部に対しては何も設定されていません。

上部

03_ブログタイトルコンテンツ上部

ブログタイトルコンテンツ上部

下部

04_ブログタイトルコンテンツ下部

ブログタイトルコンテンツ下部

コンテンツの出力内容はコンテンツHTML編集から

どこにブログタイトルが設定されているのでしょうか。
それは、コンテンツ編集画面の[コンテンツHTML編集]をクリックします。

05_コンテンツHTMLの編集

コンテンツHTMLの編集

すると、コンテンツ編集画面がHTMLで表示されるようになります。

06_コンテンツHTMLの表示

コンテンツHTMLの表示

ブログタイトルコンテンツでは以下のようなHTMLが表示されます。

この[<h1><a href=”<% blog.page_url %>” accesskey=”1″><% blog.title %></a></h1>]が
ブログタイトルを出力しているHTMLです。

<% blog.page_url %>と<% blog.title %>はSeesaaブログの独自タグで、
ブログのURLとブログのタイトル文字列に置き換わる変数です。

ここを自由に編集することで、ブログタイトル部分を編集することができます。
変更前のブログ表示の状態は以下のような表示です。

07_コンテンツ変更前

コンテンツ変更前

コンテンツHTMLの編集

試しに以下のように編集してみます、変更が終了したら必ず[保存]をクリックします。

08_コンテンツHTMLの編集内容

コンテンツHTMLの編集内容



HTML編集モードから通常モードに戻します。

09_ブログタイトルの設定に戻る

ブログタイトルの設定に戻る

通常モードに戻したら、上部挿入テキストと下部挿入テキストにも、
文字を入力します。

変更したら、コンテンツ編集のポップアップ画面で
[保存]をクリックし[×]をクリックしてウィンドウを閉じます。

10_ブログタイトルコンテンツ表示と編集

ブログタイトルコンテンツ表示と編集

ポップアップウィンドウを閉じたらコンテンツ画面にて適用する対象から、
[全ページ]をクリックし[保存]をクリックして保存します。

11_コンテンツの全ページ適用と保存

コンテンツの全ページ適用と保存

ブラウザからの表示確認

ブラウザでブログを開くと、以下のように挿入した文字が出力されています。

12_変更後ブログの表示

変更後ブログの表示

HTMLのタグで直接指定した文字色なども反映されています。
通常はこうした色指定などは行わないでしょう。

この辺は、また別途CSS編集にてご紹介します。
Seesaa™ブログでCSSによるカスタマイズを行う方法

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

このようにして、コンテンツにあらかじめ設定されているHTMLであっても、
直接編集を行って、自分が意図した形に出力をさせることができるようになります。

コンテンツというパーツを利用して、HTMLの編集を行う作業を、
簡便にしてくれるこうした仕組みは、とても便利なのではないでしょうか。


Seesaaはシーサー株式会社の登録商標(第5049965号)であり、
Seesaaロゴはシーサー株式会社の登録商標(第5137457号)です。
Seesaaブログはシーサー株式会社のサービス名です。
Seesaaのサービスに用いられるアイコンその他のマーク等は、
シーサー株式会社の商標であり、シーサー株式会社の著作物です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - Seesaa, 無料ブログ , ,

  関連記事