夢幻劇場 DREAM THEATER[個人創作サイト/イラスト/小説/漫画・他]


夢幻劇場ブログ

2017年03月22日

ウェブサイトにブログを組み込むやり方

雑記をブログに移行ブログのデザインもウェブサイトと一緒にしたい方向けのやり方です。タグやCSSの変更がちょっと大変ですが、手順自体はシンプルです。自分はさくらのブログを使っているので、さくらブログ限定のやり方になります(すいません)。管理メニューでHTMLやCSSを変更するので、HTMLやCSSの扱いに慣れている方向け。

サイトにブログを組み込むやり方


自分のサイトの構造に似たデザインを選ぶ⇒設定

管理メニュー一覧から『デザイン』を選び『デザイン一覧』から、自分のサイトの構造に似たデザインテンプレートを選んで選択します。出来るだけ構造のシンプルなものを選んだほうがいいです。HTMLをいじるので、『HTML』を選択して『HTMLの追加』を選んで適当な名前をつけておきます。

メモ帳に自分のサイトのHTMLを開く⇒自動生成部分をコピペ

管理画面で『HTML』を開いたまま、『メモ帳』に自分のウェブサイトのHTMLを表示させます。ブログは自動的に文字が生成されるので、一般的なタグではない独特な文字列がタグの中に埋め込まれています。その文字列の入ったタグを、メモ帳に開いた自分のウェブサイトのHTMLの同じ箇所を選んで上書き(コピー&ペースト)していきます。上部のタイトルやメタタグ、本文のタグ、サイドバーなどが主になります。上書きが済んだら、メモ帳の全文を選択して『HTML』画面に貼り付け⇒保存。表示確認して細部を修正します。

デザインをウェブサイトのCSSに合わせる

管理画面で『デザイン設定』を開いて、CSSの変更します。ウェブサイトのCSS設定に合わせて変更していけば間違いないです。ブログの自動生成タグをコピペした後にデザインを調整したい場合、一緒に構造の部分もいじります。

コンテンツを設定する

管理画面で『デザイン』⇒『コンテンツ』を開いて、表示されるコンテンツの設定をします。表示させたいコンテンツを選びましょう。全てHTMLも変更できるようになっているので、ウェブサイトのデザインに合わせて、サイドバーに並ぶコンテンツや、記事単体のHTMLを変更したい場合はこちらの『コンテンツHTML編集』を選んで調整することができます。

出来たデザインのまま、スマホ表示させたい場合

さくらのブログは、スマートフォンで見たときに自動的にスマホ版の表示に変更される仕様になっています。PC版のデザインは無効化されるので、PC版のデザインを保持したい方には以下のやり方がお勧めです。

スマホ表示の際に、PC版のデザインを保持する


スマートフォン専用ページの表示を消す

#iphone-link{display: none !important;}

さくらブログの管理画面⇒デザイン設定⇒CSSの編集画面にこのタグを追加します。

スマホからPC版へ強制的に飛ばす JavaScript ※<>を小文字に変更してください

<SCRIPT LANGUAGE="JavaScript">
<!--
document.cookie='force_pc=1; max-age=15768000; path=/';
document.cookie='force_sp=0; max-age=15768000; path=/';
location.href=location.pathname;
// -->
</SCRIPT>}

スマホページのコンテンツ管理画面にある、初期表示コンテンツを全部消してから、自由形式を一つ作って配置し、このタグを入れてください。スマホからPC版の表示に転送されるようになります。

スマホ表示の確認サイト

・Screenfly
クロームのデベロッパーツールでもいいのですが、知っていると便利なスマホ版表示確認サイトです。URLを入力すると色々な機器での表示が確認できます。

まとめ


以上でサイトデザインにブログ表示を組み込めると思います。ウェブサイトのデザインによって、ブログの自動生成タグをコピペする位置などが変わってくるので、内容をあまり詳しくかけませんでしたが、ブログから自動生成されるHTMLタグを⇒ウェブデザインで表示させたい箇所へのコピペと、CSSの変更だけで完成させることが出来ます。手間はかかりますが、ウェブサイトとブログのデザインを統一したい方にはお勧めです。

posted by 管理人@出雲 at 09:55 | Comment(0) | 案内
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。