しょーんのブログサイト講座

テーマの導入

まずやったのが有料テーマの導入です。
僕は「アフィンガー」というテーマを利用しています。

料金は15000円です。
バイト２日分ですね。

サポートもバッチリの人気のテーマなので
おすすめです。

サイドバーの設定

「外観」» 「ウィジェット」と進みます。
基本はこんな感じ。

①プロフィールの作成

サイドバートップに
テキストとして追加します。

テキストの中身は下を
コピペすれば使えるようになります。

最初の数行は強調するために
文字を大きくしています。

基本コピペすればokです。
赤色の部分だけ変更してください。

============================
<a href="プロフィールページのリンク" target="_blank" rel="noopener">
<img src="画像のURL" />
</a>
<span style="font-size: 1.4rem;">
はじめまして、
しょーんです。
</span>
<span style="font-size: 1.4rem;">
追加で太文字の説明
</span>

ここで本文

<a style="font-size: 1.6rem;" href="プロフィールページのリンク target="_black">
» プロフィール
</a>
============================

②サイドバーに流すコンテンツの設定

サイドバーウィジェットに
テキストを入れます。

ここの部分は基本的に見せたい記事を
表示すると良いです。

何個でも貼れるので
好きなだけ挿入して大丈夫です。

============================

<a href="記事のリンク" target="_blank" rel="noopener">
<img src="画像のリンク" />
記事タイトル</a>

============================

③サイドバーの固定記事

スクロール広告用という
場所にテキストとして
記事のリンクをはります。

ここの部分はスクロールした時に
ずっと画面に残ってくれるので
一番見せたい記事を
貼っておくとよいです。

============================

<a href="記事のリンク" target="_blank" rel="noopener">
<img src="画像のリンク" />
</a>
<div class="rankstlink-r2">

<a href="ボタン先のリンク" target="_blank" rel="noopener">
無料メルマガの詳細を見る »
</a>

</div>

============================

スライダーの制作

画像スライダーの設定をしていきます。

ヘッダー画像エリア下に
このようなテキストを入れます。

詳しい設定内容は
公式のマニュアルも合わせて読んで下さい

» アフィンガー公式マニュアル

ヘッダーアイキャッチ画像の設定

ここの部分のことですね。
上の文字の説明の部分は画像で作りました。

テキストを突っ込んでもいいのですが、
スマホ・PC画面で文字の大きさの
変更が難しいので
画像で代用しました。

「外観」»「カスタマイズ」»「ヘッダー画像」
スマホの場合とPCの場合で高さの変更をしていきます。

「外観」»「ウィジェット」»「ヘッダー画像エリアウィジェット」
と進みテキストを挿入します。

これをコピペしてはっつければokです↓
============================

<div style="max-width: 600px; margin: auto; padding: 0 20px;">

<img src="画像のリンク" />

</div>
<div class="rankstlink-r2">

<a href="ボタンのリンク" target="_blank" rel="noopener">
無料メルマガの詳細を見る »
</a>

</div>

============================

その他のブログを始める上での初期設定

おすすめのプラグイン

SSL化設定

※つづきブログみたいにめちゃ細かく解説してもいいかも