Bloggerの基礎的な使い方

ホーム > feinがWebサイトとInstagramを開設した理由、そしてTwitterへの見解 > ファンサイト制作 〜 困った時に開くノート 〜 > Bloggerの基礎的な使い方

ここではBloggerの基礎的な使い方を書いていこうと思います。
ググるなりAIに聞いたりしていただければいくらでも出てくるけど、折を見てこういうのを追加していくのも面白いかなと。
項目が煩雑になってきたら他コーナーのようにまとめていきます。

Twitterの扱い方とほぼ同じ

基本的な手順はどこのWebサイト作成サービスも変わらないです。
Bloggerはかなり単純なほうです。
もっと「Webサイト制作です！」みたいなややこしいUIを持っているサービスもあります。
操作がしやすいのでここではパソコンでの操作を書いていますが、アプリ版のBloggerならTwitterとほとんど変わり映えしない雰囲気ですね。

ハイパーリンクを貼るという考え方にしても、Twitterの引用リツイートとやってることは変わりません。

Bloggerでページ内リンクを作成する

Bloggerもそうですし、Webサイトを作るならページ内リンクは作っておいたほうが良いでしょう。
訪問者が迷わないようにするためにも必要です。

まずは既に作られているページのURLをコピーしておきます。

次に、ハイパーリンクにしたい文字列をドラッグして選択。
それから上側にある「リンクを挿入または編集」ボタンをクリック。

小さいウィンドウが表示されるので、そこにコピーしたURLを張り付けて「適用」を押す。

最後に「公開」ボタンを押して完成です。
慎重にやるなら、いったん保存しても良いですね。

Bloggerでヘッダー画像を挿入する

ここでは基本的な手順のみ書いてあるから、そこから先の画像サイズ変更等はその人それぞれで工夫する必要はあります。
例えば私のWebサイトはページによってヘッダー画像を使い分けています。

Bloggerへログインし、レイアウトを押す。
それからヘッダー部分にある「編集」を押します。

[ページヘッダー]の設定画面で、パソコンから画像をアップロードするという部分を選択します。

ファイルの選択ボタンを押すとパソコンのフォルダが出てくるため、そこからヘッダーにしたい自分の画像を選択して「開く」ボタンを押します。

あまり大きな画像を入れようとすると時間がかかることもありますが、上の画像のように設定が効いてきます。
それから「保存」ボタンを押します。

ヘッダーの画像設定を保存できたら、レイアウト設定画面の右下にある保存ボタンを押します。

デフォルト設定のまま何も触っていないから、歪なブログデザインになっているけどね。
ヘッダー画像を挿入する基本的な手順は以上です。

上の画像はiPhone SEで表示したときのデモとなります。
パソコンのブラウザには開発者モードがあり、いろんなデバイスで表示させたときのデモをすることができます。

モバイルブラウザによる編集

Bloggerの編集方法はいろいろあります。
もしパソコンを使わない場合、私からはBloggerアプリのインストールをお勧めしますが、Chromeなどのブラウザを使ってスマホで編集することも可能です。

画像はあらかじめサイズ調整しておく

お好みのスマホアプリを使い、横幅を750ピクセル、縦幅を250ピクセル程度にしておくと良いでしょう。

ほとんどパソコンと操作は変わりません。
上の画像の赤丸をタップし、編集メニューを出します。

それからレイアウトを選びます。

Bloggerアプリを使わない場合、やりにくいのはこのあたりでしょうか。
編集ボタンが見えなくなるので、右側へスライドしましょう。

小さいけど、上の画像にあるように「編集」という文字をタップします。

注意するのはここです。「ページに合わせてサイズを調整」というボタンがあり、それを上の画像のようにONにしても構いません。
しかし、あまりこの機能に頼って大きな画像をヘッダー画像としてアップするのはお勧めできません。
Webサイトのレスポンスが悪くなり、アクセス低下に繋がります。
ゆえに、予め画像サイズを小さくするよう手順の冒頭でご説明させていただきました。
言い換えると、予め画像サイズを小さくしておけば「ページに合わせてサイズを調整」というボタンはOFFでも構いません。

保存できたら下の方にあるフロッピーディスクのマークをタップ。
これは保存した結果を確定すると意味です。
上の画像に赤丸で囲ってある部分ですね。

それから改めてWebサイトを見ると…設定したはずの画像はありません。
これは表示されているWebサイトがモバイル向けの表示になっているからです。
そこを設定するにはもうひと手間かける必要がありますが…
とりあえずまともに見えるヘッダー画像を設定することだけに集中してここでは説明します。

自分のブログの下の方にある、「ウェブバージョンを表示」という文字列をタップします。

すると、ちゃんとヘッダー画像が設定されていることが分かります。
このように、同じWebサイトでもパソコン向けの表示がされたときとモバイル向けの表示がされたときでは、見え方が違うのです。
画面の大きさが違うからね。
このfein's portalでも同じです。
アクセス解析を見るとほっとんどの人がスマホから見に来ているから、モバイル表示に特化しているのです。

そういう意味でも、スマホでBloggerを扱うなら、それの編集に向いたBloggerアプリをインストールして作業していただくのがお勧めかな。
このようにすれば辛うじてモバイルブラウザでも作業できますよというご紹介でした♪