–ブログタイトル画像化計画~livedoor Blog編–

標準
Pocket

livedoorブログのカスタマイズ。

これもだいぶ探しましてん。。

–ここから–

【1】まずタイトルとして使用する画像を用意します。
これがなければお話になりません。
デジカメの画像加工ソフトかなんかお持ちなら好都合ですね。適当な大きさのものを製作します。

【2】用意した画像をアップロードします。
Blogの投稿メニューから[ファイルのアップロード]>新規ファイルの追加 で、写真をアップする要領です。この時、サムネイルを作成するチェックはオフにしておきます。

【3】Blogの管理メニュー[Blogの設定]の、「説明」の箇所に、次のタグを挿入します。

<a href=”http://blog.livedoor.jp/ユーザーID/”><img src=”http://image.blog.livedoor.jp/ユーザーID/imgs/X/X/XXXXXXXX.gif” border=”0″ alt=”ブログのタイトルなど”>

環境に合わせて書き換えます。imgタグには、先程アップした画像のURLを記入します。管理画面で画像のタイトルをクリックすると、ウィンドウのアドレスバーにURLが表示されていますので、それをコピペします。

【4】設定が終わったら、一旦、Blogの再構築を行います。タイトルの下にさっきの画像が表示されれば成功。
サーバーの状態によっては、再構築後、反映までに少し時間がかかりますので、しばらく待ちましょう。
無事表示されましたら、次にテキストのタイトルを非表示にします。

【5】Blogの管理メニュー[デザインの設定]で、CSSをカスタマイズします。
カスタムにチェックして、任意のテーマを読み込みます。(例として麻衣ちゃんダイアリーのCSSを表示していますが、他のデザインでも手順は同じです)
.blogtitle のクラスセレクタに以下のいずれかのプロパティを追加します。

visibility:hidden; (テキストは非表示で空白行になります)
display:none; (テキスト非表示、スペースもないものとして処理されます)

ちなみに、
.blogtitle セレクタ内の他の属性(color、font-sizeなどの指定)は、不要ですが、そのまま置いておけば元に戻すのが容易ですので、とりあえず保険として残すことをお勧めします。(笑)

【6】できあがり。Blogの再構築(CSS)を行います。
各セレクタとプロパティの意味がわかる方は、マージンの変更などで表示位置も工夫してみてくださいまし。

–ここまで–

http://blog.livedoor.jp/rubirei/archives/618385.html

http://www.tagclick.net/ping

投稿者プロフィール

助田 正樹
株式会社イノセンティブ 取締役 :一般社団法人 日本ディレクション協会 理事 東京都品川区出身の1976年7月生まれ。桜美林大学経済学部を卒業後、ソニー株式会社にて、シックスシグマというマネジメントツールのR&D、広報などクリエイティブ業務に従事。2005年からインターネットベンチャーでWebディレクターとして数社経験。その後「LINKAGE」という商号でフリーランスとしてWebディレクション業務で活動。コーポレート、リクルート、モバイル、デジタルサイネージ、リアル連動など様々なWebサイト、システムの構築、新規事業プロジェクト企画、立ち上げを経験。(参照:実績)2012年6月に株式会社イノセンティブ取締役に就任。GARAGE AKIHABARAを立ち上げる。日本ディレクション協会ファウンダー。メンタルマネージャー資格保有。