すべての記事の最後に同じ文字を入れる(よかよかブログ)

ネット勉強

ブログは、データベースから記事などのデータを呼び出して、テンプレート(定型のフォーマット)に割り当てて表示する仕組み(システム)です。 ですので、テンプレートを編集すれば、その編集内容はすべてのページに反映されます。

※テンプレートのカスタマイズは「html」、「スタイルシート」等の知識が必要です。中級・上級者向けの設定なので自己責任で行なってください。

テンプレートカスタマイズのページを開く

管理画面を開いたら、左のサイドメニューのテンプレートをクリックします。

sidebar

テンプレートの表が表示されます。選択可能一覧に「使用中」と書かれている行が現在使用中のテンプレートです。

「編集」の列の「カスタマイズ」の文字をクリックします。

template

 

テンプレートの種類

template-custmaize

テンプレート名は、そのままでもいいですが、僕はカスタマイズする場合は、名前を変更しておきます。例えば、最後に(カスタマイズ)とつけたりして、カスタマイズしたテンプレートとわかるようにしておきます。例:Clover(カスタマイズ)

スタイルシートは「見栄え」「レイアウト」を指定する為のものです。
今回は使用しません。

トップページは、その名前のとおりトップページ用のテンプレートです。

個別記事は、個別の記事を表示した時のテンプレートです。

アーカイブは「最近の投稿」や「過去の記事」で月別に表示した場合、カテゴリーごとに表示した場合に使われるテンプレートです。

各テンプレートのカスタマイズ

今回はすべてのページで、すべての記事の最後にリンクを表示するカスタマイズを行ないます。ですので「トップページ」「個別記事」「アーカイブ」のすべてのテンプレートに、HTMLのコードを記述します。

しかし、トップページのカスタマイズも、個別記事のカスタマイズもアーカイブのカスタマイズもすべてやり方は同じなので、トップページのみで説明します。

 

まず、トップページのテキストボックスに表示されているのが、テンプレートのソースコードです。

このソースコードに手を加えます。

トップページのテキストボックスの中をスクロールさせて、

「<div class=”posted”>Posted by<%EntryAuthor%> at」と書かれているところを探してください。

じっくりと探してください。(下の図を参考に)

Image5

の上に「<br clear=”all” />」とあれば、間違いなく大丈夫です。(本来、何行目あたりと指定して教えたいところですが・・・・)

その、「<br clear=”all” />」と「<div class=”posted>Posted by<%EntryAuthor%> at」の間に次のようなHTMLコードを書き込みます。

<!—– リンクボタン挿入—->
<div>
<a href=”http://www.ordermade-panya.com” target=”_blank”>オーダーメイドパン屋はこちらをクリック</a>
</div>
<!—ここまで–>

下図参照

Image10

赤い文字の部分がページに表示されるリンクの文字です。

青い文字の部分が、リンク先のアドレスです。(森ピー先生のパン屋へのリンクと、文字になってますので、それぞれで変更してください)
アドレスは半角英数字で記入してください。

HTMLのコードについては、詳しい解説は割愛します。(グーグルで調べれば解決しますよ)

ひとまず、ここまで終わったらテンプレート・カスタマイズページの下にある「登録」ボタンをクリックします。

この後の細かいのは省略しますが、ブログのトップページを開いてみて、各記事の最後に(Posted byの文字の上に)リンクが表示されているばOKです。

Image11

文字だけで、さびしい?
色をつけたりする方法は、また今度。

バナー画像にする場合は、まず自分でバナーの画像を作ってくださいね。

個別ページもアーカイブもやり方は同じ

個別ページもアーカイブもやり方は同じです。

「<br clear=”all” />」と「<div class=”posted”>Posted by<%EntryAuthor%> at」の間に上記のHTMLコードを挿入して、「登録」ボタンを押してください。

補足ですが、作業がしずらくはないですか

カスタマイズページのソースコードが書かれているテキストボックスが狭かったり、その中から「Psoted by」の文字を探したりと、作業がしづらくないでしょうか?

これくらいのカスタマイズなら、さほどたいしたことはないですが、大規模なカスタマイズになると、このページ上でカスタマイズをするのは、作業効率が悪いです。

そのような場合に「テキストエディタ」といわれる種類のソフトを使います。

テキストエディタを使わずによかよかブログのカスタマイズ画面で直接カスタマイズするときも、該当場所を探す為に、グーグルツールバーやYahooツールバーを使ってページ内を検索して見つけます。

または、ブラウザの検索機能を使ってもいいですね。

もし、リクエストあれば検索機能を使って「Posed by」の場所を探す方法も記事をつくります。コメントしてください。

もし失敗して表示がおかしくなったら

テンプレートを再度選び直せば、初期状態に戻るようです。しかし、オリジナルテンプレートを作成している人は、それも失ってしまうでしょう。

ですので、カスタマイズするテンプレートのソースコードを丸々全部、Windowsの「メモ帳」にコピー貼り付けして保存してから、カスタマイズすることをお勧めします。

※テンプレートのカスタマイズは「html」、「スタイルシート」等の知識が必要です。中級・上級者向けの設定なので自己責任で行なってください。

役に立った方クリックお願いします
にほんブログ村 地域生活(街) 九州ブログへ

コメント

  1. すとん より:

    昨日はお疲れ様でしたm(??)m!

    これ・・・
    一度読んだ程度じゃ、お姉さんには理解できんばい(??;
    (日頃は“理解できんちゃ”といいます♪)
    昨日も頭の中 ずーっと??マーク散乱してました。
    今度の休みにじっくり考えます(笑)

  2. ふじぶー より:

    おつかれさまです
    とてもわわかりやすく
    丁寧に説明していただきありがとうございます
    本当に力強い同級生がいて幸せです^^

  3. shintan より:

    >すとんさん
    えー、わかりづらかったですかー?

    一生懸命記事作ったのにチョットショック(ToT)
    とは言っても、こういうのが必要になるのは出店してからですよね。

    おそらく、すとんさんが今じっくりと考えることではないとと思います。

    必要になったときには、この記事を参考にしてくださいねー(^o^)/

    そのときはじっくりと考えて下さいね。
    この記事をアップするのに約1.5時間かかってますから、最低そのくらいは・・・・

    >ふじぶーさん
    ショックを受けた後に、このコメントありがとうございます。

    もし、また何か質問があれば、このような記事を作りますので、グループにでも書き込んでください。

  4. すとん より:

    すみません・・・。
    文字と記号が多すぎて
    読む前に理解できなかったと言う意味です(^^;
    ショックを与えてごめんねm(??)m

    もちろん実践段階に入ったらじっくりやりますよ?(>@)

    今度は文字編集講座やってほしいです!

  5. よかったら、今度行ったときに教えてください。

  6. shintan より:

    >すとんさん
    >もちろん実践段階に入ったらじっくりやりますよ?(>@)
    すとんさんなら大丈夫。
    文字編集って、文字色変えたり、大きくしたり、太くしたりとかですか?

    >ひろりん部長
    かしこまりました。

  7. すとん より:

    たびたび失礼しますm(??)m

    >文字色変えたり、大きくしたり、太くしたりとかですか
    そうで?す♪

    だけど。。。心を入れ替えました!
    仕事やライブに忙しいshintanさんに
    あまり迷惑はかけられないので
    なるべく自分で勉強します!!!
    おすすめの本があったら教えてくださいね♪
    (あっ!もうすでに頼っている・・・(^^;)

  8. shintan より:

    >すとんさん

    了解しました。

    けど、ブログをみると文字色変えたり、大きくしたり出来てますよね?

  9. PINKYママ より:

    ありがとうございました
    本日気がついたので
    使わせていただきました
    やはり入れるところを捜すのに
    苦労しました
    テンプレートの画面行ったり
    こちらに来たり
    行ったり来たりしながら
    どうにかできました
    入力したHPが上手く開かきませんでしたが
    文字を半角に変換したら開きました
    丁寧に説明していただいて
    ホントに
    ありがとうございました

  10. shintan より:

    >PINKYママ

    できました!?
    それを聞いて、うれしいです。

タイトルとURLをコピーしました