アフィリエイト広告を利用しています

広告

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
posted by fanblog

2020年11月11日

ワードプレスをご利用の皆様!便利なmarkdownご存じでしたか!?


どうも、パンダです。

「はんだごて」のイントネーションで
「パ・ン・ダ」・・でございます。


前から名前は知っていたのですが、

今日ほんのちょーーーっとだけ書いてみて驚きました。

で、驚きのおすそ分けです。

markdownって何よ!?


だらだらと文章書いて、
あとから文字修飾する時に、
なんか文章にしまりがない時って
ありませんか?

それは、つまり・・・・
逆なんです。

最初に、見出し・小見出し・・・って
アウトラインを決めてから
書くんですね、流れ的に。

その時に、先頭に#を
レベルが小さいほど#数を増やしていれます。
#の後には半角スペースをいれます。

ワードプレスのグーテンベルクエディタにはもともと
このマークダウン記法が備わってるそうで

## 小見出しh2
### 小見出しh3
#### 小見出しh4

と最初にアウトラインを書いていくと
書いた端から・・あぁら不思議

2020111101.png


見出し修飾がされていくのです。

これって、html書く時のemmetやらbootstrapのように
目からうろこがパリンパリン!って落ちていくヤツです。

気になる方はググって下さいませね。

2020年10月29日

A8.netファンブログをカスタマイズしたい!【vol.2全体の文字サイズを大きく(PC版)】


こんばんわ、パンダです。

「はんだごて」のイントネーションで「パ・ン・ダ」・・
でございます。


今日は、とりあえず、だらだらブログ書き始める気になった「あなた」向けの記事です(→パンダ・・・君もだ・・(--;)

読みにくくありませんか?

せっかくのブログなのに。


ブログ全体の文字の大きさを16px以上にしよう



お気づきかもしれませんが、

ファンブログの初期設定、めっちゃ小さくて読めません。

Google先生も言ってます、スマホはせめて16px以上に。

パソコンで見るならもっと大きい方がいいのですが。


前回もCSSの設定を少し変更しましたね。

前回の記事はコチラ
A8.netファンブログをカスタマイズしたい!【vol.1ヘッダー(PC版)】

CSSの場所はここです。

?@デザイン>?ACSS編集>


2020102903.PNG


今回設定するのは、この中の?Bbodyと書いてあるところ。

これはウェブサイト全体に関する設定をするところです。

font-size: 16px;に変更します。

文字の色をもう少し濃いグレーにしたいときは333333を666666にしてみるとかもできます。

目に優しい設定をしましょう。



次回は、文字修飾について書きます。

2020年10月18日

A8.netファンブログをカスタマイズしたい!【vol.1ヘッダー(PC版)】


こんばんわ、パンダです。

「はんだごて」のイントネーションで「パ・ン・ダ」・・
でございます。


今日はブログ・カスタマイズvol.1はヘッダー(ブログの一番上)に
写真をいれたり、変更する方法です。
写真がはいるとオリジナリティがあがりますよね。

今回は設定の仕方の練習なので、
写真にはこだわらないことをおすすめします(笑)

それよりも、アップロードして公開することが
大事です。


1.写真をチョイス


1.写真はスマホの写真からチョイスでOK

 スマホから、「横型」の写真を探す。

 もし、なかったら、カメラツールの中のトリミング=切抜機能などで、
 横型に切り抜いてもOKです。

2.写真サイズは横が650px〜1000px程度のもの

 写真にもサイズがありますが、
 ガラケーじゃなく、最近のスマホで撮影していれば十分なサイズなので、
 細かいことは気にしないでOK。

 参考:パンダふるライフのトップ画像は800px(ピクセル) × 450pxです。
 スマホ写真をそのまま使って、本文の幅(サイドバーを含まない)程度に表示する場合650px程度でOKです。

3.自分が撮った写真を使う

 ネットから拾ってきたり、メールでもらった写真は 著作権に注意が必要です。

 まずは、自分が撮ったオリジナルの写真で、あたりさわりのない景色の写真なんかがいいです。


2.デザイン設定からシンプルを選ぶ


パンダふるライフは、デザイン設定でこのデザインです。

2020101805.PNG



3.プログラムの書き換え


デザイン>html>CSS設定画面で以下の3点を設定します。

1.画像をいれる
2.タイトル文字の色と位置の調整
3.画像の幅の調整

初めての方向けのため、CSSをすでにカスタマイズしていない前提ですが、
CSSをいじってある方は、コピーをとってから始めましょう。

2020101905.PNG

1.画像をいれる

  URL以下に自分のいれたい画像のURLをいれる

2.タイトル文字の色と位置の調整

  #header h1 a{color:以下にタイトル文字の色を英語で入力
  ブログタイトルの文字(パンダふるライフ)は最初が黒。
  背景が濃い色だと読みにくいことがあります。
  読みにくい場合は、文字の色を変えることができます。
  慣れたら#ffffffと16進数で入力しますが、
  とりあえずはwhite black redとわかりやすい英語でOK。

  padding:30px 20px;
  写真の左端っこぴったりから文字が始まると窮屈なので、
  少し内側(左から20px)に、上からも少し(30px)さげます。

3.画像の幅の調整

  width:610px;

2020101904.PNG

  写真の幅は赤い線のように本文の幅にそろえるか、
  ピンクの線のサイドバーまで含めた幅にするとキレイです。

  画面の一番上の部分(header)の幅(width)を
  記事の幅(width=650px)と同じ幅にそろえます。

  記事の幅(width=650px)−左右の余白(padding20ずつ)が
  画面の一番上の部分(header)の幅(610=650-20-20)となります。

駆け足ですが、できるだけ手間なしの「スマホからとってくるだけ写真」を
ヘッダーにする方法でした。スマホ画面の設定は次回にです。

2020年10月17日

A8ネットでファンブログ試してみた


100本ノック始めると誰に言うともなしにつぶやいてから、
はや1週間経ってました。

2020101701.PNG



はじめて書くブログは、びりから84番目(笑)?
そして、知り合いがいるわけでもない大海(A8ネット)へ、
オールももたず漕ぎ出すって、座礁する気か!?。


はじめまして、パンダです。

「はんだごて」のイントネーションで「パ・ン・ダ」・・
でございます。



もともとパソコン好きなので
何かできることないかなぁ・・って、
ココにたどりつきました。

詳しいことは、パンダなので・・
のらりくらりしながら、書いていきます。

最近楽しかったこと。
ブログ書くみなさんは当たり前かもしれませんが、
「ライティング」って、
やたら奥が深くて面白い!

って気づいたこと。

今は、ライティングの何たるやは意識せず、書いてますが。
とにかく、何か書かないとはじまらないので、
すこしずつ、人に伝わることを書けたらいいなと思ってます。

こうやって書きながら、ブログの投稿画面の
修飾ボタンが気になってしょうがない。

html やらを考えずに、ボタン一つでやってくれるなんて
らくだ。。

でも、変な動きになるのは、わたしの使い方が悪いのか?
そんな html やらパソコン周りのことも書きます。
よろしくです。
記事ランキング
    検索
    タグクラウド
    << 2021年05月 >>
    1
    2 3 4 5 6 7 8
    9 10 11 12 13 14 15
    16 17 18 19 20 21 22
    23 24 25 26 27 28 29
    30 31
    カテゴリーアーカイブ
    月別アーカイブ
    ×

    この広告は30日以上新しい記事の更新がないブログに表示されております。

    Mobilize your Site
    スマートフォン版を閲覧 | PC版を閲覧
    Share by: