Blogger Custom Design

【Test】Standard List Navigation

2013-05-12T00:00:00.000+09:00

<link href='http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>

【Test】Empty Table

2013-05-11T00:00:00.000+09:00

【Test】Example Form

2013-05-10T00:00:00.000+09:00

【Test】Kicken sink

2013-05-09T00:00:00.000+09:00

HTML Ipsum Presents

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.


#header h1 a { 
 display: block; 
 width: 300px; 
 height: 80px; 
}

【Test】Unordered List Navigation

2013-05-08T00:00:00.000+09:00

【Test】Ordered List: Short items

2013-05-07T00:00:00.000+09:00

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

【Test】Unordered List: Long Items

2013-05-06T00:00:00.000+09:00

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

【Test】Unordered List: Short Items

2013-05-05T00:00:00.000+09:00

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

【Test】Definition List

2013-05-04T02:05:00.000+09:00

Definition list: Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet: Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

【Test】One sentence

2013-05-03T00:00:00.000+09:00

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

【Test】Medium Paragraph

2013-05-02T00:00:00.000+09:00

【Test】Long Paragraph

2013-05-01T00:00:00.000+09:00

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

【Template】EducationBlogを試す

2012-10-22T14:21:00.000+09:00

Bloggerのテンプレートを試してみました。

今回は、EducationBlogを試してみました。

まずはテンプレートから、バックアップ/復元を選び、
ファイル選択から、Simple2.0.xmlを選択します。

アップロードしたら、いろいろ設定を変えました。

ウィジェットの配置がおかしかったので、サイドバーへ移行。
Lockが掛かっているものはlocked="false"に変更し、
無理やり移動させます。

サイドバー上部のSNSへのアイコン一覧はSocial Icons.txtというファイルから、
内容をコピーして、HTML/JavaScriptのガジェットとして登録。

背景が白いのは、多分デフォルトですね。
CSSを編集して、背景を透過させないといけないようです。

今回は面倒なのでしてません。

と、いったところで設定完了。

投稿上部のスライドは使用していませんが、
これもダウンロードしたzipファイルに含まれていましたので、
コピーして使えば問題なさそうです。

今回使えそうなのはSNSアイコンぐらいですかね。
横幅や背景を少し調整すれば、他のブログでもパーツとして流用できそうです。

【Template】Simple 2.0を試す

2012-10-19T18:00:00.001+09:00

Bloggerのテンプレートを試してみました。

今回は、Simple 2.0を試してみました。

まずはテンプレートから、バックアップ/復元を選び、
ファイル選択から、Simple2.0.xmlを選択します。

アップロードしたら、いろいろ設定を変えました。

まず、要らないウィジェットはすべて削除。
lockが掛かってる奴はHTMLを編集して削除です。

次に、サイト上部のTwitterやFacebookのリンクが無かったので、
メール購読、Twitter、Facebookのリンクを編集。
これもHTMLの編集から行いました。

これぐらいで大体テンプレートの設定完了。

あとは、上のページの部分をどうしようかなぁと考えたり、
いろいろ触ってみます。

【Feed】FeedBurnerを設定する

2012-10-19T16:23:00.001+09:00

ブログを新設しましたので、FeedBurnerに登録します。
BloggerはPing等がありませんので、更新通知が自動で送信されません。
そのためにもFeedBurnerは登録しておきましょう。

新規登録

まずはURLを入れて新規登録します。

Statistics(統計情報)にはチェックしない方が良いです。
飛び先URLに変なパラメータが付いて、別ページとしてカウントされる事があるからです。

日本語化

FeedBurner右上のLanguagesを押して日本語を選択すれば日本語表示になります。

ブラウザ・フレンドリ

まずはこれをONにして、写真のように選択します。

スマート・フィード

スマートフィードをONにして多くのRSSリーダに対応させます。

Pingショット

これもONにしておきます。

フィード・カウント

何人の購読者がいるかBlogに表示させたい場合にONにし、コードをブログに貼り付けます。

Twitter連携

Socializeを押して、Add a Twitter accountを押せばTwitter連携出来ます。
ブログを投稿した際に自動でTwitterに情報を流してくれるので、助かります。
Twitter連携時の表示方法を下で設定します。

ここまでやっておけば問題ないと思います。

【Domain】カスタムドメインの設定

2012-10-19T14:55:00.002+09:00

今回は新しく作成したこのブログにカスタムドメインを割り当てます。
bloggercustomdesign.blogpost.comというドメインを
design.shonanshachu.comというドメインへ変更する手順をご紹介します。

まずは、TOPの画像のように、設定の基本から、
ブログのアドレス部分のカスタムドメインの設定を選びます。

次に、詳細設定に移り、移行したいドメインの名前を入れます。

名前を入れて保存を押すとエラーになると思います。
DNSにdesign.shonanshachu.comが登録されていないので起こるエラーです。

CNAMEを2つ登録して下さいと表示されると思いますので、
2つのCNAMEを登録します。

次に、2つのCNAMEをDNSに登録して、
digコマンドでアドレスが引けるようになったら、
再度、保存ボタンを押して下さい。

これだけで更新完了です。

最終的にはこのようになります。

【HTML】SyntaxHighlighterをBloggerに設定

2012-10-19T14:21:00.002+09:00

エンジニアがコードをブログ上で紹介する上で欠かせないのが、 SyntaxHighlighterです。このSyntaxHighlighterをBloggerに貼り付ける方法を紹介します。
まずは、Way2Bloggingというサイトで、SyntaxHighlighter用のHTMLを作成します。

ここでは、ブログで紹介する予定の言語を選択して、下の[Generate]ボタンを押します。すると、画面が遷移して、HTMLが表示されますので、すべてコピーします。

コピーした後、Bloggerのテンプレート編集から、 HTMLの編集を選び、

</head>と書いてある部分の前にすべて貼り付けます。次に、コードを書く場合は

<pre class='brush:java'>
public class SampleObject {
  // comment
  public SampleObject() {
  }
}
</pre>

とpreタグで囲めば綺麗に表示されます。

【Memo】Blogger Custom Designブログ開設

2012-10-19T11:53:00.001+09:00

Bloggerを使ったデザイン変更の為のブログを解説しました。
デザインTips紹介兼テスト用Blogなので、デザインは随時変更されます。

特に記事は要らないんですが、
書かないと見れないので、書いていきます。

記事を分ける為にも技術的Tipはそれぞれ分けていきます。

よろしくお願いいたします。