戯れ言葉

FC2ブログで記事を書くときに、こんな方法もあるよと云うお話しと、基本的なこととか

カテゴリ:FC2ブログの色々とカスタマイズとか
タグ:

記事の投稿でこんな方法

FC2ブログで記事を書くときに、こんな方法もあるよと云うお話し。

色々基本的なことも書いてみました。

HTMLの構文を直接使うというテクニックなので、専門的ですが慣れてしまうとブログ上での色んなテクニックが駆使できるかも。

最初にやっておくこと

IMEとかATOKの日本語変換で、下記の文字列を辞書に単語登録しておきます。全角(日本語入力)で登録しておくと便利だと思います。(全角は日本語変換ONの状態で表示される文字。変換後に表示させたい半角は、記事中のものを、そのままコピペできます。)

以下の例はアルファベット変換の例なので、ひらがな変換の方を常用の方は「キーは・・・」で示されるアルファベットキーを探して下さい。

全角の「p」で

<p>

を単語登録(以下同じ)

全角の「・p」(キーは /p )で

</p>

全角の「br」で

<br>

全角の「いmg」(キーは img )で


alt="" style="width: 100%; height: auto;"></a>

を登録します。

変換のキーとなる文字はお好みで。

目次へ戻る


アルバムの管理

私はアルバムの必要性を感じてないので、非公開に設定していますが、そこら辺の手順を書きます。

アルバム機能については、公式プラグインの「アルバム」はめちゃくちゃ重たい  の記事も参考にしていただくと役に立つかも知れない。

アルバム機能を使用したい方は下記の逆手順を行って下さい。

下の画面はFC2ブログのログイン後の管理画面ですが、FC2ブログでは記事を書いたり、色々な設定をしたり、過去記事を編集したりとかの全ての作業をこの画面から行います。

ブログの管理画面から、左カラムのメニューで、「アルバムの管理」をクリック。

ここでアルバムを表示するかどうかを設定します。

公開にすれば、記事中の画像をクリックするとアルバムが開き、その中の画像をクリックすると更に大きな画像が表示されるという手順になります。

非公開にすると、記事中の画像をクリックすると大きな画像が表示されるだけで、アルバムは表示されません。

私は、非公開にしています。

更に、アルバム機能を使用しない時は

管理画面の環境設定→ブログの設定→投稿設定と辿って


にしておきます。

目次へ戻る


記事投稿画面の説明

記事の投稿は旧投稿画面から行います。

ブログの管理画面から、左カラムのメニューで、「新しい記事を書く」をクリック

下図は旧投稿画面です。

新投稿画面よりこちらの方が使いやすい。


上半分の簡単な説明を

① タイトル

記事のタイトルを記入

② カテゴリーを記入

ドロップダウンボタンをクリックしてカテゴリーを選択

③ タグのリンクのチェックマーク

ここのチェックは外しておく(チェックマークを消しておく)のをお勧め。
このチェックが入っていてタグが入力されていると、記事本文中のタグと同じ文字がすべてリンク表示がされて鬱陶しい。

④ ユーザータグ

私が登録しているユーザータグ。
カテゴリー以外の串刺しができるので便利。FC2ブログは重複カテゴリーが指定できないので、別の範疇でも括りたい時にはこのユーザータグを作っておきます。

⑤ 高機能エディターの切替

高機能エディターはOFFで使用します。
その時はアイコンが上図の様になります。
この方が後々発展性があります。
記事を書くのにちょっとめんどくさくなりますが、こちらに慣れればめっちゃ便利なので強力にお勧め。

アイコンの表示がこんな風になっている時は高機能エディタがONになってるので、アイコンのWをクリックして高機能エディタをOFFにします。

⑥ ファイルのアップロード

ここをクリックして画像等のファイルをFC2ブログのサーバーにアップロードします。
その後、ブログにはアップされた画像のリンクを書いて使用します。
詳細は後述

⑦ 記事記入欄

ここに記事を記入する

記事投稿画面の下半分

上から

テーマ

テーマが選択できます。
めんどくさいので使ってません。「その他」にして放置。
一度選択すると変更しない限り、ずっとそのテーマが選択されます。

アイキャッチ画像

トップページやリスト状のページに表示される画像が選べます。
何も記入しないと、記事中の最初の画像が選択されます。
記事中の画像がない時は、NO Imageと表示されます。
違う画像を表示したい時は、URLを入力して、 アイキャッチ画像を選択する  をクリック

トラックバック

この機能は現在、巷では殆ど利用されていません。

改行の扱い

HTMLタグのみにチェック

コメント

受け付けるにチェック、が普通と思います。

投稿区分

公開:公開されます。
下書き:投稿されずに下書きとして保存されます。
予約投稿:次の日時指定で記入された日時に自動で公開されます。
期間指定:やったことがないので解らないのですが、多分そう云うことかと

日時指定

「保存時の時間で投稿」を選ぶと、下記に表示されている日時に関わらず、記事の保存をクリックした日時で投稿されます。
「自分で指定」を選ぶと下記に記入された日時の日付で即座に公開されます。未来の日時でもOK。その未来の日付になって即座に公開されます。
予約投稿の時はここで指定した日時に自動で公開されます。

以下省略

「記事を保存」をクリックで終了します。

目次へ戻る


ファイルのアップロード

本文の編集欄のアイコン

山のアイコンをクリックすると、ファイルのFC2ブログサーバーへのアップロード画面が別窓で開いて、ファイルのアップロード作業ができます。
また、同じ画面で記事への画像記入ができます。


別窓で開いたアップロード画面。
このままでは使いにくいので、ウィンドウの右下にマウスを持っていくとカーソルの形状が変わるので、マウスの左ボタンを押しながら動かすと、ウィンドウを大きくできます。
(Chromeではカーソルの形状が変わらないケースもある)

ここで

この部分を設定する。
(ここの設定は、ブラウザのキャッシュの削除とか、なにかのアップデートがあると初期値に戻る時があるので常に確認が必要です)

同名ファイル

「別名で保存」に設定

アルバム

公開する設定にしているのであれば、ここを該当のアルバム名に変更する

EXIF

EXIF情報の削除もできます。

確認メッセージ

お好みで

サムネイル

チェックを外す(多分不要)

以上が設定できれば「ファイル選択」をクリックする
ファイル選択画面が出るので
ファイルを選択し
開くをクリックします。

下図の様にファイルが表示されたら

アルバムに追加するかどうかを決めます。
私はアルバムは非公開にして使用していないので、すべてチェックを外しています。
OKならアップロードをクリック

画面の下方のファイル一覧にすべて表示されれば無事アップロードされました。

このファイル一覧の「この画像で記事を書く」を記事に挿入したい順にクリックしていくと、記事に自動的に画像リンクが書かれていきます。

目次へ戻る


記事の編集

基本的なこと


この

<a href ・・・・・</a>
の部分が1枚の画像のリンクと画像を表示させる為のHTMLのブロックです。

ここの構文は最新のHTML(HTML5)では文法違反なのと、もっと画像サイズを簡単に変更できる様にする為に、書き換えます。

日本語入力モードがONになってる状態で

alt=" xxxx " border="0" width=" xxxx " height=" xxxx " /></a>の部分を選択し

「いmg」で単語登録しておいた
alt="" style="width: 100%; height: auto;"></a>
に書き換えてください。
全ての画像リンクのこの部分を書き換えます。
一ヶ所書き換えれば、あとはコピペで作業はそんなに難しくはないはずです。


全ての画像リンク部分が書き換えできれば
リアルタイムプレビューをクリックします。
(ちなみに「追記の編集」は通常は使用しません。

下欄にプレビュー画面が表示されます。
これはあくまでも参考で、実際の表示画面は「リアルタイムプレビュー」ボタンの左にある「プレビュー」ボタンをクリックして確認してください。

この状態では全ての画像がくっついています。

画像のHTMLのブロック(a要素)同士をEnterキーで離して空白行を入れても、元のソースに空白が入るだけで、表示画面は変化しません。

これは、元のHTMLソースを見やすく書くのに便利です。

次に全ての画像のHTMLのブロック( <a )の前に <p> を書き、
又、全ての画像のHTMLのブロック( </a> )の後ろ </p> を書きます。

隙間を空ける時は
面倒でも <br> タグを書きます。

プレビューボタンの方をクリックして実際の表示を見ると

の様に <br> タグを入れた所に一行空白行ができます。

文字の入れ方は

一つの段落を <p>  </p> で挟みます。
途中で改行したい時は <br> を入れて改行します。


こんな感じ。

Comments 13

There are no comments yet.

bodai_ju  

FC2ブログの使い方

私は7月中旬にヤフーブログからFC2ブログに引っ越してきたものです。
元来、IT音痴ですがヤフーブログは使い方が簡単で13年続いていました。
それが停止になるというので、FC2ブログに引っ越したものの
ヤフーブログに比べると私にとっては使い方がかなり難しくてわからないことが多々あります。

あなた様のブログはそういう私にとって非常に参考になって助かっています。
わからないことがありましたら質問もさせていただきたいと思っていますので、
よろしくお願いいたします。

2019/08/12 (Mon) 11:44 | 再編集 | 返信を書く |   
hige

hige  

To bodai_juさん

 私のブログがお役に立ててるのであれば有り難いです。

 FC2コミュニティの
https://admin.blog.fc2.com/control.php?mode=sns_community&process=community_detail&community_key=33773
Yahoo難民助け隊
の方もご利用下さい。こちらではJanedoe1471さんも回答されてますので、更に広い意見も得られると思います。

2019/08/12 (Mon) 14:32 | 再編集 | 返信を書く |   

りりー  

なにから なにまで とても役に立ちそうに感じます

はじめまして。
私も 7月中旬にFC2ブログに、ヤフーより移転してまいりました。

アメリカのyahooさんが 日本に上陸された最初の頃から、ヤフーチャット時代からのお付き合いなので、まあ 時の流れで ヤフーさんの今回の件は止むを得ないのかな と思っております。

ともあれFC2さんにIDを作っていたので、スンナリブログもこちらでお世話になることに決め 有料会員にもなりました。

手探りでブログ記事を書いておりますが、時として どうすれば良いものか思案するときがあります。

これからも 色々アドバイスをお願い致します。

今日は ご挨拶でございます。

2019/08/14 (Wed) 16:15 | 再編集 | 返信を書く |   
hige

hige  

To りりーさん

 いらっしゃいませ。
 色々お役に立てばと思います。
 なにか困った事があれば、サイドカラム(スマホでは下欄)で案内させていただいてる「Yahoo難民助け隊」
 https://admin.blog.fc2.com/control.php?mode=sns_community&process=topic_detail&community_key=33773l&topic_key=102018
 まで質問を入れて下さい。
 できるだけのフォローをさせていただきます。

 てか、なかなかむつかしくて・・・・

2019/08/14 (Wed) 16:30 | 再編集 | 返信を書く |   

しんべい  

こんばんは~

いつも参考にさせて頂いています。ありがとうございます。

何をどう思い込んで読んでいたのか、今日やっとWが青いまま(高機能エディタoff)で良いんだということが理解できました。読解力のなさに自分でも呆れています。

辞書登録も参考にさせて頂き、画像も<br>で間を開けるということも理解できました。

ただ画像リンクの置き換えがよくわからなくて、そもそも私の画像リンクの数字やらアルファベットやらがh i g eさんのようにすっきりしていなくて、なんでheightやwidthがないのかなぁとかよくわかりません。
1200×800にはしているつもりなのですが。
下記のようになります。alt以下を置き換えると、画像が消えます。

<a href="https://sinbei918.blog.fc2.com/img/20190918105445fdd.jpg/" target="_blank"><img alt="IMG_0561 - コピー-min" src="https://blog-imgs-131.fc2.com/s/i/n/sinbei918/20190918105445fdd.jpg"></a>

このところ、たびたびお邪魔させて頂いているので、画像の件をお聞きしたかったのと、ひと言お礼が言いたくてコメントさせて頂きました。
すみません、よろしくお願いいたします。

2019/09/21 (Sat) 21:11 | 再編集 | 返信を書く |   
hige

hige  

To しんべいさん

 まず<br>で行間を空ける方法は、実は避けた方がいいのですが、最良の方法はHTML/CSSでの装飾の方法が理解できていないとちょっと難しいので、初心者はこれで良いのではと思っています。
 本当はCSSの margin-bottom: 1rem; とかで行間を作ります。
 HTML/CSSの理解が進んだらこの様な方法に変更していって下さい。

 「行間 <br>」でググると色々出てくると思います。 

 しんべいさんの画像の部分を見せて戴きました。
 これは私が下記記事で書いてる、ある設定の時に記事に挿入される構文です。

 「FC2ブログで画像をクリックした時に表示される画面のアルバム一覧というもの」
 https://blgid1974.blog.fc2.com/blog-entry-1502.html

 ただ構文の属性の並びが私の場合と違っていて、width や height 属性がないのは編集時の設定が違っているのかも知れません。

 alt 属性を消してはいけないのですが、私の様に画像一枚ずつに書き込むのが面倒なずぼら屋には、alt="" として逃げてしまってます。alt 属性は画像が非表示や、音声読み上げの場合に画像の代わりになる文章を入れます。
 例えばしんべいさんの提示されている場合では「沢山のクリスマスツリーがある庭園」とか。

 私の様にコピペで書換える時は、書換える前の構文が次になってないとダメです。
 alt=" ⋯⋯ " (border="0" width=" ⋯⋯ " height=" ⋯⋯ " /></a>

 これはHTML5で廃止された属性や、HTML5では使用できないものへの対応です。
 しんべいさんの様な場合は、alt=" ⋯⋯ " の部分を削除し、"><a> を、次の「 」内の部分で書換えて下さい。
「" alt="" style="width: 100%; height: auto;"></a>」


 画像の大きさのことは下記記事をご覧下さい。

 「FC2ブログの画像サイズのことを色々書いてみる」
 https://blgid1974.blog.fc2.com/blog-entry-1487.html

2019/09/22 (Sun) 13:35 | 再編集 | 返信を書く |   

しんべい  

To higeさん

こんばんは~

詳しいご説明を本当にありがとうございました。

まだ一度には理解できていませんが、何度も読み込んで勉強していこうと思います。
書き換えにも、またチャレンジしてみます。

紹介していただいた記事も参考にさせて頂きたく、またチョコチョコお邪魔させていただきますが、よろしくお願いいたします。

突然の質問、大変失礼いたしました。ありがとうございました。

2019/09/22 (Sun) 19:52 | 再編集 | 返信を書く |   
hige

hige  

To しんべいさん

 いえいえ、お役に立ちましたでしょうか。どうぞ遠慮なく質問をお寄せ下さい。
 それでも私の考えでしかお返事ができてません。
 ここが解らへんねん ということがあれば 具体的にお寄せ下さい。具体的で細かいことほど答え易いかもです。

 なお
 「Yahoo難民助け隊」
 https://admin.blog.fc2.com/control.php?mode=sns_community&process=community_detail&community_key=33773l

 でも質問を受けています。こちらには管理人のJanedoe1471さんも回答を担当されていますので、さらに幅広い回答ができるかも知れません。

2019/09/22 (Sun) 20:09 | 再編集 | 返信を書く |   

しんべい  

To higeさん

たびたびごめんなさい。

今すべての画像を張り替えたら、綺麗にalt以下出てきました♪
で、教えて頂いた書き換えをしたら、編集画面でも、画像の全体像が見えました。

ありがとうございます。
出来ると嬉しいです♪

2019/09/22 (Sun) 20:57 | 再編集 | 返信を書く |   
hige

hige  

To しんべいさん

 おぉっ そうなんですか 画像の張り替えをされたんですね。
 HTMLの世界にようこそ!

2019/09/22 (Sun) 21:02 | 再編集 | 返信を書く |   
hige

hige  

PS:To しんべいさん

 これ原発のようですが どこ?

2019/09/22 (Sun) 21:04 | 再編集 | 返信を書く |   

しんべい  

To higeさん

島根県の原発です。確か最近できた3号機かなと思うのですが、よくわからなくて(^^;

2019/09/22 (Sun) 21:43 | 再編集 | 返信を書く |   
hige

hige  

To しんべいさん

返事が遅くなってすいませんです。
記事内に書いておられましたね、失礼しました。

2019/09/26 (Thu) 16:51 | 再編集 | 返信を書く |   

Leave a reply
コメントをどうぞ

ブログやホームページのURLをどうぞ

パスワードを入力すると投稿後、訂正・削除が出来ます