ブログ

HTMLブログ超初心者の私が、10日で何とかやれたこと泣き笑い話まとめ(まだわからないことも)

ブログ超初心者はじめの一歩

今回は、「わからないことは、検索したらだいたいでてきたよ~!」というおすすめではなく、感想ですが、調べてもちょっとばかり苦労したことのまとめです

ブログを開設し、10日が経ちました。

昨日までに9記事を書き、この記事が10記事目となります。

ここまでの道のりで、知らなかったことを挙げるとキリがありませんが、ありがたいことに、検索すると多くのことは先輩ブロガーや、専門サイトの記事が親切丁寧に教えてくださるので、何とか続けることができました。

そんな中でも、苦戦したことについて、自身の備忘録も兼ねて、まとめておきたいと思います。

まるみーぬ
まるみーぬ
今から始める方や、始めたばかりの方のお役に立てましたら幸いです。ご専門の方は、笑い話としてご覧いただければと思います。

そもそものスペック

どんな状況でスタートしたかを、お恥ずかしながら自己申告いたします。

10日前の私

・PCは、仕事で使ってはいるものの、文字を打つのみ。
・ExcelとPPTも使用しているが、なんとなく使えているだけで、表計算などかなり怪しく、簡単なことしかできない。
・自宅に、PCを持っていなかった。
→ネットで注文して、1週間前に到着し、ブログスタート!
・HTML?CSS?なんじゃそれ…(今もなんて総称したらよいのかわかりません…これもプログラミング?)

スマホ・タブレットで、見ることが専門、自宅にPCもなく、産休中なのでPC仕事もなく、久しぶりのタイピングから始まりました。

こちらのブログのテーマは「JIN」を利用しています。HPを見ると、かわいらしく、開発者のひつじさんの説明が丁寧で、これならできそう!と思いスタートしました。

ですが、実際は、初日、

まるみーぬ
まるみーぬ
あ…これはやってしまったかも…夫には黙っておこう…

と思ったのでした。

「<>と<>の間に文字を入れる」ことで、デザインが構成できるということ自体がわかってなかったので、ひつじさんの超わかりやすい説明も、暗号のようで、とりあえず、初期設定をJIN MANUAL通りに進め、PCを閉めたのでした…。

困ったこと

翌日、どうにもわからず、夫に相談したところ、「<>と<>の間に文字を入れる」ことで、構成していくことを解決しました。そこから、一気にやれることアップ!

そんな中、どうしよう?!と悩んだことを以下に記載します。

HTMLタグをブログ上に表示したい

まるみーぬ
まるみーぬ
まさに只今、ぶち当たっている壁です!

こちらのタグを打ちこめば、解決しましたよ~!と記載したいとき、そのままの状態でプレビューすると、タグとして認識されてしまうという問題。
いくつかのサイトを参考にさせていただきましたが、よくわからないので、<>は「」に打ち換えて表示いたします(泣)
結論:解決せず。。

こんなスタートで申し訳ありませんが、次に進みます。

画像の横に文字がきてしまう

メディアを追加した際、このような形で、画像の横に文字が来てしまい困りました。改行ボタン(Enter)連打でも、PCでのプレビュー上は、画像下から始めることができましたが、スマホで閲覧すると、余白が沢山あいてしまうので、問題ありです。

こちらは、下記のタグで解決できました。※「」は、本来<>です。

「div style=”clear:both;”」「/div」

こちらのタグを画像追加の後に入力すると、このように、画像下から文書がはじまるようになります。

私は、こちらのタグを「画像下に改行」として、プラグインのAddQuicktagに登録して、快適になったのですが、そもそも調べたときは、画像の横に文書が来てしまって困ったらこのタグです!のようなご紹介が多く、もしかして、皆さん、そんなことしなくても、画像下から文書が始まるのでしょうか・・・?と疑問を残している次第です。

どう打っても中央寄せ

これは、稀なケースだと思いますが、突然、すべての文書が、中央寄せになってしまったことがありました。その見た目と言ったら、平成初期にインターネットでHPが見られるようになった頃のあの印象です!(わかる方は、同世代以上ですね、)「中央寄せになってしまった」等、検索してみても、そんなことになっている方はいないのか、「中央寄せにする方法」ばかりがヒットしました。
そこで、中央寄せのやり方を見てみましたところ、

「div class=”t-aligncenter”」

とありました。centerをleftにすれば・・・?!とひらめき、解決しました。
しかしながら、実際のところ、中央寄せしたいわけではなく、そもそもこの指示がいらないわけで、「div class=”t-aligncenter”」を消せばいいだけという話でした。

どうしてこんな指示タグが入ってしまったか謎ですが、多分JINのショートカットタグの「中央寄せ」をうっかり押してしまい、そのまま進んでしまい「/div」でタグを閉じることなく、進んでいってしまったからのようです。

まるみーぬ
まるみーぬ
戒めを込め、プロフィールページは、中央寄せ事件をそのまま踏襲してあります。

画像をきれいに並べる

縦長の画像を複数貼りたい際、そのままですと縦に並んでしまうので、横に並べる為の対処法です。
張り付けるもののタグの前後に、下記タグを入力します。※「」は、本来<>です。

「div style=”float:left; margin: 10px;”」「/div」

この時、2つ並べたい場合、2つを連続して入力し、その冒頭と終わりを上記タグで囲います。
その後、先程の「div style=”clear:both;”」「/div」を入れることで、画像下から文書の再開ができます。

終わりに

既に、自分自身では解決したと思っていた内容でしたので、簡単に記事にできるかと思いきや、なかなか苦労した今回でした。
参考になる場面がありましたら幸いです。

まるみーぬ
まるみーぬ
もう少し、勉強いたします…。

それでは、最後まで、ご覧くださいまして、ありがとうございました!

ABOUT ME
まるみーぬ
入社来10年以上、営業職で働いている2児のママです。おせっかいやきな性格なので、気に入ったものや経験を、お節介気味にシェアしております。実体験で気に入っているものを、写真とともにご紹介中です。子どもとの時間、一人の大人としての時間、それぞれの楽しみを発信します。