忍者ブログ

とちにすいはら式+

痒いところに手が届かない雑記ブログ。お金とDTMの話が多め

近未来的音楽素材屋3104式
↑音楽素材はこっち↑

とちにすいはら式+

忍者ブログのカスタマイズ。とちにすいはら式+の場合

1.はじめに


今回は、とちにすいはら式+で行ったカスタマイズについてご紹介します。
白と黒の忍者ブログデフォルトテンプレを使ってましたが、それだとなんだか味気ないのでいろいろ手を入れ、現在の形になっています。

忍者ブログのテンプレートをカスタマイズするには、HTMLやCSSの知識が必要です。
各ブロックやタグのデザインはCSS側で定義し、ウェブサイト全体の配置などはHTMLで制御するのが良いです。

なお、本記事を参考にカスタマイズされる際には、元のデザインはバックアップするようお願いします

2.カスタマイズ元のテンプレについて


忍者ブログ公式の、2012年6月7日公開のテンプレを使用しています。



最初はこんな感じです。

公式のコメントにあるとおり、カスタマイズする母材として、このテンプレは使いやすいと思います。
ユーザーが編集したものは、逆にクセが出てしまってカスタマイズしにくい点もあります。

ので、以後は上記公式テンプレを元にします。

3.実際に行ったカスタマイズ


では、実際に行ったカスタマイズについて紹介します。

メタディスクリプション


忍者ブログデフォルトのメタディスクリプションは、アクセスアップの足を引っ張る可能性がありますので、もともと定義されているメタディスクリプションを削除しています。

詳しい話は忍者ブログのメタディスクリプションについてをご覧ください。

背景


背景画像はフリー素材 * ヒバナ様からの借り物です。
和紙風というか、そんな質感が素敵です。

※2014年10月現在未使用です。

ブログに背景画像を設定するには、設定したい画像をあらかじめファイルアップロードを用いてアップロードしておきます。
次に、CSS側でbodyタグに赤字のタグを加えます(URLはファイルアップロード先のURL)
  1. body {
  2.  font-size:15px;
  3.  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
  4.  background-image: url(http://file.cyrfplus.blog.shinobi.jp/background.png);
  5. }

トップ右ブロックの追加


トップやフッターを2カラム制にして、左右に別々の情報を載せるようにしました。
左側にロゴ、右側に広告バナーといった使い方もできるかもしれませんね。
これには、CSSで新たなブロックを作成します。

例えば、

  1. #TopBlock {
  2.  width:480px;
  3.  float:left;
  4.  background:#f9f8f3;
  5. }
  6. #TopBlockRight {
  7.  width:480px;
  8.  float:right;
  9.  background:#f9f8f3;
  10. }

のようにTopBlockのコピーとしてTopBlockRightを作成しました。
また、widthをブログ全体の幅(960px)の50%(480px)ずつにして、左右に分割しています。

あとはHTMLでそれぞれのブロックを呼び出します。
ここでは、右側のブロックには、筆者運営サイトへのリンクを貼るのみとしています。

  1. <!-- div#TopBlock -->
  2. <div id="TopBlock">
  3. <!-- div#TopTitle -->
  4. <div id="TopTitle">
  5. <h1 id="TopText"><a href="http://<!--$g_user_id-->"><!--$g_title--></a></h1>
  6. <p id="TopExplanation">とちにすいはら式+とは:<!--$g_explanation--></p>
  7. </div>
  8. <!-- /div#TopTitle -->
  9. </div>
  10. <!-- /div#TopBlock -->
  11. <!-- トップ右側 -->
  12. <!-- div#TopBlockRight -->
  13. <div id="TopBlockRight">
  14. <p id="TopTextRight"><a href="http://cyber-rainforce.net/"><img src="http://file.cyrfplus.blog.shinobi.jp/3104banner_400_80.png" alt="近未来的音楽素材屋3104式" /></a></P>
  15. </div>
  16. <!-- /div#TopBlockRight -->

トップ絵


全体のカラムと同じ幅の画像を作成しておきます。
現在のブログは960pxですので、画像幅も960pxが良いです。

HTMLで指定する方法と、CSSで指定する方法があります。
HTMLならば、

  1. <img src="http://file.cyrfplus.blog.shinobi.jp/tcnsihr_top_20141013.jpg" alt="<!--$g_title-->" />
として、任意の場所に置きます。
alt="<!--$g_title-->"とすると、画像の説明文にブログタイトルが割り当てられます。

CSSで指定する場合は、上述の背景を設定するのと同じようにbackgound-imageで指定します。
こちらの利点は、画像上に別の情報(例えばブログの説明など)を重ねて表示できます。

記事一覧リンク


トップ絵下にある記事一覧リンクですが、最初のテンプレにはありません。
作成方法は、忍者ブログで自作最新記事リストを作る方法で詳しくご紹介していますので、そちらをご覧ください。

パンくずリストの追加


パンくずリストもまた、最初のテンプレにはありません。
作成方法は、忍者ブログでパンくずリストをつける方法で紹介しています。

ページ機能の追加


ページ機能もまた、最初のテンプレにはありません。
作成方法は、忍者ブログにページ機能を加える方法で紹介しています。

H3タグの追加


本記事のように、1記事中に小見出しを加える為に、H3タグを追加しました。
もともと、H3タグはコメントとトラックバックにしか使われてなかったので、見出しに使用するのはちょうど良い?と思います。
なお、記事タイトルはH2ですので、小見出しにH3を使うのはSEO的にも問題ありません。

今回はH3タグに直接パラメータを設定するのではなく、特定のクラスを呼んだときに現在のデザインが反映されるようにしました。

CSSで

  1. .EntrySubTitle{
  2.  font-weight:bold;
  3.  font-size:115%;
  4. }

というクラスを新設します。

あとは、各記事を書くときに、ソースコードで<H3 class="EntrySubTitle">を呼んでます。
<H3 class="EntrySubTitle">1.はじめに</h3>という具合です。

記事下のSNSボタン


個別記事の場合だけ、記事下にSNSボタンを表示させています。
ボタンのURLは、HTML上で、記事の直下に当たる部分に配置しています。

  1. <h2 class="EntryTitle\"><a href="<!--$entry_link-->"><!--$entry_title--></a></h2>
  2. <!-- div.EntryText -->
  3. <div class="EntryText"><!--$entry_text--></div>←これが記事本文なので、この下
  4. <!-- /div.EntryText -->

その囲っている角丸四角形などはCSSのほうで定義しています。

  1. .sns-btn{
  2.  text-align:center;
  3.  padding:1em;
  4.  border:1px solid #FF99AA;
  5.  border-radius: 5px;
  6. }

こちらは忍者ブログでソーシャルボタンをキレイに並べて貼る方法の覚書にてご紹介しています。

投稿日時の表示


投稿日時は、記事のトップとフッタの2箇所に表示させることにしました。
投稿日時に関する変数は、忍者ブログで投稿日時を非表示にする方法でご紹介していますので、そちらを参照してください。

4.おわり


少しでも参考になりましたら幸いです。
いろいろテンプレのソース詳細がわかってきましたので、どこかでもっと詳しく紹介したいところです。

今後はタイル状とか、もっと奇をてらうデザインにもしてみたいところですが・・・
どうしようかな。

関連記事


忍者ブログでスマホ向けに独自デザインを表示する方法
忍者ブログで投稿日時を非表示にする方法
忍者ブログアクセスアップ術あれこれ

忍者ブログにページ機能を加える方法

忍者ブログでパンくずリストをつける方法

忍者ブログで自作最新記事リストを作る方法

忍者ブログでソーシャルボタンをキレイに並べて貼る方法の覚書

忍者ブログでグーグル+1ボタンを貼る方法の覚書
忍者ブログではアクセスアップが期待できない2つの理由
忍者ブログのメタディスクリプションについて

擬似タグ: /忍者ブログ | /カスタマイズ | /HTML
最終更新:2015/05/17

 

拍手[0回]

コメント

お名前
タイトル
文字色
メールアドレス
URL
コメント

トラックバック

スポンサーリンク

PR

ブログ内検索

記事書いてる人

運営者:
さいれほ@planet_f108
30代個人事業主のDTMerで3104式の中の人。

音楽以外にはお金の話が好き。株式投資や投資信託もやってるよ。
マイクロ法人立ち上げを目指し、脱雇われ人の道を模索中。

活動域は青森県八戸市周辺。一緒にお仕事しましょう。

プロフィール詳細はとちにすいはら式+についてをご覧ください。

バトルモード3

2016年春M3の企画はバトルモード3!!


ついったー

お問い合わせフォーム

筆者の知識や経験であなたの力になれますか?

必要事項をご記入の上、送信ボタンをクリックすると、運営者宛にメールが送信されます。

ブログ内リンク

レビュー・改造系記事まとめリンク レビュー・改造系記事まとめリンク
PC・トイカメラなどのレビュー記事リストです。

DTM機材レビュー記事まとめリンク DTM機材レビュー記事まとめリンク
DTM機材に関するレビュー記事リストです。

クラブ関連記事まとめリンク集 クラブ関連記事まとめリンク集
音楽を流すクラブにいってきた話まとめ。

トラブル・お悩み解決系記事まとめリンク トラブル・お悩み解決系記事まとめリンク
ソフトのインストールなどで躓いた記事リストです。

サイト作り系まとめリンク サイト作り系まとめリンク
サイトのアクセス増、ユーザビリティに関する記事リストです。

忍者ブログカスタマイズまとめリンク 忍者ブログ運用術から収益化まで
忍者ブログ運用術から収益化までをまとめた記事リストです。

雅楽の舞改めポーチュラカリア成長記事まとめリンク 雅楽の舞改めポーチュラカリア成長記事まとめリンク
2011年から育てている雅楽の舞に関する記事リストです。

とちにすいはら式+アクセスアップ経過記録まとめリンク とちにすいはら式+アクセスアップ経過記録まとめリンク
本ブログのアクセス推移を記録した記事リストです。

お金持ち本まとめリンク お金持ち本まとめリンク
筆者が読んだお金持ち本あれこれまとめリンク。

無職関連の記事まとめリンク 無職関連の記事まとめリンク
無職関連の記事リストです。

スマホでUSENの記事まとめリンク スマホでUSENの記事まとめリンク
スマホで使える有線放送まとめ。データ量も測ってみました。

最新コメント

[01/20 かんりにん]
[01/20 シモハチ]
[04/03 かんりにん]
[04/01 シン]
[04/01 かんりにん]

フリーエリア

QRコード

とちにすいはら式+

サイトご利用上の注意

ブログ記事の著作権はとちにすいはら式+にあります。 引用される際には、必ず引用元として弊ブログのURLも記載していただくようお願いいたします。 記事の一部もしくは全ての無断転載はご遠慮ください。

記事を参考にされる際には、自己責任にてお願いいたします。